body {
  margin: 0;
  padding: 0;
  background-color: #4a6c8c;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8'><rect width='8' height='8' fill='%234a6c8c'/><rect width='1' height='1' fill='%23365780'/></svg>");
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #000000;
}
.page {
  width: 780px;
  margin: 0 auto;
  background-color: #ffffff;
  border-left: 2px solid #1f3d5c;
  border-right: 2px solid #1f3d5c;
}

/* ---- BANNER ---- */
.banner {
  background: #1f3d5c url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><rect width='6' height='6' fill='%231f3d5c'/><rect width='1' height='1' x='3' y='3' fill='%23365780'/></svg>");
  color: #ffffff;
  padding: 16px 20px 12px;
  border-bottom: 4px solid #c89c2f;
}
.banner .sub {
  font-family: "Courier New", Courier, monospace;
  color: #ffe69c;
  font-size: 10px;
  letter-spacing: 3px;
  margin-bottom: 6px;
}
.banner h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: normal;
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 #000000;
}
.banner h1 .accent { color: #c89c2f; font-weight: bold; font-style: italic; }
.banner .tag {
  font-size: 11px;
  color: #cfd9e3;
  font-style: italic;
  margin-top: 4px;
}

/* ---- NAV ---- */
.nav {
  background: #c89c2f;
  border-top: 1px solid #ffe69c;
  border-bottom: 1px solid #806220;
  padding: 5px 20px;
  font-size: 11px;
  font-weight: bold;
}
.nav a {
  color: #1f3d5c;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-right: 16px;
}
.nav a:hover { color: #000000; text-decoration: underline; }
.nav .sep { color: #806220; margin-right: 16px; }

/* ---- MARQUEE INTRO ---- */
.intro {
  background: #ffffcc;
  border-bottom: 1px solid #cccc99;
  padding: 6px 0;
  font-size: 12px;
  color: #333300;
}
.intro b { color: #c00000; }

/* ---- CONTENT ---- */
.content { padding: 16px 16px 4px; }

table.grid { width: 100%; border-collapse: separate; border-spacing: 8px; }
table.grid td { vertical-align: top; }
td.section-cell {
  background: #1f3d5c;
  color: #ffffff;
  padding: 6px 10px;
  border-left: 6px solid #c89c2f;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 2px;
}
td.empty { background: #f4f4ec; border: 1px dashed #c0bda8; }

/* ---- CARD ---- */
td.card {
  width: 33.33%;
  background: #f4f4ec;
  border: 1px solid #b8b8b0;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #888888;
  border-bottom: 2px solid #888888;
  padding: 0;
}
td.card.alt { background: #ffffff; }
td.card a.cardlink {
  display: block;
  text-decoration: none;
  color: #000000;
  padding: 6px;
}
td.card a.cardlink:hover { background: #ffffcc; }

.thumb {
  width: 100%;
  height: 130px;
  overflow: hidden;
  border: 1px solid #888;
  border-top: 2px solid #555;
  border-left: 2px solid #555;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  background: #000;
  display: block;
}
.thumb img {
  width: 100%;
  height: auto;
  display: block;
}

.cardinfo { padding: 6px 4px 2px; }
.cat-tag {
  display: inline-block;
  background: #c89c2f;
  color: #1f3d5c;
  font-size: 9px;
  font-weight: bold;
  padding: 1px 5px;
  margin-bottom: 4px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid #806220;
}
.name {
  color: #0000c0;
  font-weight: bold;
  font-size: 13px;
  text-decoration: underline;
  font-family: Verdana, Arial, sans-serif;
  display: block;
  margin: 2px 0;
  line-height: 1.2;
}
a.cardlink:visited .name { color: #660099; }
a.cardlink:hover .name { color: #c00000; }
.url {
  color: #555555;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  display: block;
  margin-top: 3px;
}

/* ---- GALLERY (4-col) ---- */
table.gallery { width: 100%; border-collapse: separate; border-spacing: 6px; }
table.gallery td { vertical-align: top; width: 25%; }
table.gallery td.card { width: 25%; }
table.gallery .thumb { height: 110px; }
table.gallery .name { font-size: 11px; }
table.gallery .cat-tag { font-size: 8px; letter-spacing: 1px; }

/* ---- VIDEOS (3-col, taller poster) ---- */
table.videos { width: 100%; border-collapse: separate; border-spacing: 8px; }
table.videos td { vertical-align: top; }
table.videos td.card { width: 33.33%; }
table.videos .poster {
  width: 100%;
  position: relative;
  background: #000;
  border: 1px solid #888;
  border-top: 2px solid #555;
  border-left: 2px solid #555;
  border-right: 2px solid #ddd;
  border-bottom: 2px solid #ddd;
  display: block;
  line-height: 0;
}
table.videos .poster img { width: 100%; height: auto; display: block; }
table.videos .poster .playbtn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.65);
  border: 2px solid #ffe69c;
  color: #ffe69c;
  font-family: "Courier New", monospace;
  font-size: 22px;
  font-weight: bold;
  padding: 4px 14px;
  line-height: 1;
}
table.videos .meta {
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  color: #555;
  margin-top: 3px;
  display: block;
}

/* ---- FOOTER ---- */
.footer {
  background: #1f3d5c;
  color: #cfd9e3;
  padding: 12px 20px;
  font-size: 10px;
  border-top: 4px solid #c89c2f;
}
.footer table { width: 100%; }
.footer td { vertical-align: middle; color: #cfd9e3; font-size: 10px; }
.footer a { color: #ffe69c; }
.counter {
  background: #000000;
  color: #00ff66;
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  padding: 2px 8px;
  border-top: 2px solid #444;
  border-left: 2px solid #444;
  border-right: 2px solid #888;
  border-bottom: 2px solid #888;
  letter-spacing: 3px;
}
.badge {
  display: inline-block;
  background: #ffffcc;
  color: #1f3d5c;
  border: 1px solid #806220;
  padding: 2px 6px;
  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: bold;
  margin-left: 6px;
}

.bestview {
  background: #ececec;
  text-align: center;
  padding: 6px;
  font-size: 10px;
  color: #555555;
  font-family: "Courier New", Courier, monospace;
  border-top: 1px solid #b8b8b0;
}
.bestview .bullet { color: #c89c2f; font-weight: bold; }

/* ---- LIGHTBOX/VIDEO PLAYER (videos.html only, with :target) ---- */
.vid-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 100;
  text-align: center;
}
.vid-modal:target { display: block; }
.vid-modal .closebar {
  background: #1f3d5c;
  color: #ffe69c;
  padding: 6px 12px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 11px;
  text-align: right;
  border-bottom: 2px solid #c89c2f;
}
.vid-modal .closebar a {
  color: #ffe69c;
  text-decoration: none;
  background: #c00000;
  padding: 3px 10px;
  border: 1px outset #ff6666;
  font-weight: bold;
}
.vid-modal video {
  max-width: 90%;
  max-height: 80vh;
  margin-top: 30px;
  border: 4px ridge #c89c2f;
  background: #000;
}
.vid-modal .vtitle {
  color: #ffe69c;
  font-family: Georgia, serif;
  font-size: 20px;
  margin-top: 16px;
  font-style: italic;
}