/* ==========================================================================
   metinbg.com - Early 2000s Portal Aesthetic (Lite 98.7 Style)
   Fast, Zero-Dependency, Fully Responsive CSS
   ========================================================================== */

:root {
  --bg-outer: #1e264a;
  --bg-center: #9aa6ce;       /* Classic periwinkle portal background */
  --bg-card: #eef1fa;         /* High-contrast readable card surface */
  --bg-card-active: #ffffff;
  --bg-navy-bar: #1a246b;
  --bg-right-col: #344372;
  --bg-sub-bar: #354682;
  --bevel-bg: #d9dceb;
  --yellow-highlight: #ffee22;
  --link-blue: #001580;
  --link-hover: #cc0000;
  --text-dark: #0f1424;
  --text-muted: #3d4868;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-outer);
  color: var(--text-dark);
  font-family: Verdana, Tahoma, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

/* Main Portal Container */
.portal-container {
  max-width: 1020px;
  margin: 0 auto;
  background-color: var(--bg-center);
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  box-shadow: 0 0 28px rgba(0, 0, 0, 0.7);
}

/* ==================== TOP HERO BANNER ==================== */
.hero-banner {
  background:
    radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.85) 0%, rgba(120, 165, 235, 0.55) 38%, rgba(45, 65, 115, 0.9) 100%),
    repeating-linear-gradient(45deg, #4f6398 0px, #4f6398 10px, #6379b2 10px, #6379b2 20px);
  border-bottom: 3px solid #ffffff;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.hero-logo-group {
  flex-shrink: 0;
}

.logo-badge {
  background: linear-gradient(135deg, #0044aa 0%, #0088ff 60%, #002266 100%);
  border: 3px solid #ffffff;
  outline: 2px solid #000000;
  border-radius: 50% 18% 50% 18%;
  padding: 6px 18px;
  text-align: center;
  box-shadow: 3px 3px 0 #000000;
  transform: rotate(-3deg);
}

.logo-script {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 900;
  font-size: 30px;
  line-height: 1;
  color: #ff1a1a;
  text-shadow:
    -2px -2px 0 #ffffff,
     2px -2px 0 #ffffff,
    -2px  2px 0 #ffffff,
     2px  2px 0 #ffffff,
     3px  4px 0 #000000;
}

.logo-freq {
  display: block;
  font-family: Impact, "Arial Black", sans-serif;
  font-size: 24px;
  line-height: 1;
  color: #ffffff;
  letter-spacing: 1px;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     2px  2px 0 #000;
}

.logo-sub {
  display: inline-block;
  margin-top: 2px;
  background-color: #ffffff;
  color: #002266;
  font-size: 10px;
  font-weight: bold;
  padding: 1px 6px;
  border: 1px solid #000;
}

.hero-slogan {
  text-align: center;
  flex: 1;
}

.slogan-line1 {
  font-family: "Trebuchet MS", "Arial Black", Impact, sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: 0.4px;
  text-shadow:
    -2px -2px 0 #000000,
     2px -2px 0 #000000,
    -2px  2px 0 #000000,
     2px  2px 0 #000000,
     0px  3px 0 #000000,
     3px  3px 5px rgba(0,0,0,0.8);
}

/* ==================== ON AIR BAR ==================== */
.on-air-bar {
  background: linear-gradient(90deg, #091244 0%, #1d2c7a 60%, #2a3b8f 100%);
  color: #ffffff;
  padding: 6px 14px;
  font-size: 12.5px;
  font-weight: bold;
  border-bottom: 2px solid #000000;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.on-air-label {
  color: var(--yellow-highlight);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.on-air-status {
  color: #ffffff;
}

/* ==================== 3-COLUMN PORTAL LAYOUT ==================== */
.portal-grid {
  display: grid;
  grid-template-columns: 170px 1fr 190px;
  align-items: stretch;
}

/* ==================== LEFT SIDEBAR ==================== */
.left-sidebar {
  background-color: #8f9cc4;
  border-right: 2px solid #48547d;
  padding: 8px 6px 16px 6px;
}

.retro-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.menu-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 6px 8px;
  background: linear-gradient(180deg, #6b79ad 0%, #3a477a 50%, #25305c 100%);
  color: #ffffff;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-weight: 900;
  font-size: 14.5px;
  border-top: 2px solid #b8c2e6;
  border-left: 2px solid #b8c2e6;
  border-right: 2px solid #141a33;
  border-bottom: 2px solid #141a33;
  border-radius: 6px 0 0 6px;
  text-shadow:
    -1px -1px 0 #000,
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  2px 0 #000;
}

.menu-btn:visited {
  color: #ffffff;
}

.menu-btn.active-btn,
.menu-btn:hover {
  color: var(--yellow-highlight);
  background: linear-gradient(180deg, #7c8bc2 0%, #485894 50%, #2c396e 100%);
}

.menu-btn-special {
  background: linear-gradient(180deg, #7a3e68 0%, #45244a 100%);
  color: #ffd966;
}

.slot-num {
  background: #ffffff;
  color: #cc0000;
  padding: 0 4px;
  margin-right: 3px;
  border: 1px solid #000;
  font-family: Impact, sans-serif;
  text-shadow: none;
}

.menu-btn-highlight {
  color: var(--yellow-highlight);
}

.sidebar-links-small {
  text-align: center;
  margin: 10px 0;
  font-size: 12px;
}

.sidebar-links-small a {
  color: var(--link-blue);
  font-weight: bold;
}

.left-blurb {
  margin-top: 12px;
  background-color: #dce2f2;
  border: 1px solid #48547d;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.38;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.left-blurb-title {
  background-color: var(--bg-sub-bar);
  color: #ffffff;
  font-weight: bold;
  padding: 3px 6px;
  margin: -6px -8px 6px -8px;
  font-size: 12px;
}

.left-blurb p {
  margin: 0;
}

/* ==================== CENTER CONTENT COLUMN ==================== */
.center-content {
  padding: 12px 16px 24px 16px;
  background-color: var(--bg-center);
  min-width: 0;
}

/* Clear Section Groupings */
.feed-section {
  margin-bottom: 26px;
}

.section-divider-label {
  background-color: #1a246b;
  color: var(--yellow-highlight);
  font-family: "Courier New", Courier, monospace;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 1px;
  padding: 4px 10px;
  border: 1px solid #000000;
  margin-bottom: 10px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.35);
}

/* Distinct Story / Project Card */
.story-card {
  background-color: var(--bg-card);
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #283252;
  border-bottom: 2px solid #283252;
  padding: 12px 14px;
  margin-bottom: 14px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
}

/* 3D Raised Grey Pill Heading */
.bevel-heading {
  display: inline-block;
  margin: 0;
  padding: 3px 14px;
  background: linear-gradient(180deg, #ffffff 0%, #cfd5e8 100%);
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 900;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #303854;
  border-bottom: 2px solid #303854;
}

/* Dark Blue Sub-Banner Directly Underneath */
.sub-banner-bar {
  background-color: var(--bg-sub-bar);
  color: #ffffff;
  font-size: 12px;
  font-weight: bold;
  padding: 4px 10px;
  margin-top: 2px;
  margin-bottom: 10px;
  border: 1px solid #1c2547;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.status-pill {
  background-color: var(--yellow-highlight);
  color: #000000;
  font-size: 10.5px;
  font-weight: 900;
  padding: 1px 6px;
  border: 1px solid #000;
}

.story-body {
  padding: 2px 2px;
  color: var(--text-dark);
}

.story-body p {
  margin: 0 0 10px 0;
}

.story-body a,
.left-blurb a {
  color: var(--link-blue);
  font-weight: bold;
  text-decoration: underline;
}

.story-body a:hover,
.left-blurb a:hover {
  color: var(--link-hover);
  background-color: #ffff88;
}

/* Action Buttons inside Project Cards */
.project-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px dashed #9aa6ce;
}

.retro-action-btn {
  display: inline-block;
  padding: 5px 12px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12.5px;
  font-weight: bold;
  text-decoration: none !important;
  background: linear-gradient(180deg, #ffffff 0%, #d5dbed 100%);
  color: #0b1444 !important;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #1e264a;
  border-bottom: 2px solid #1e264a;
  cursor: pointer;
}

.retro-action-btn:hover {
  background: linear-gradient(180deg, #ffffcc 0%, #ffe680 100%) !important;
  color: #000000 !important;
}

.retro-action-btn.primary-steam-btn {
  background: linear-gradient(180deg, #2b569a 0%, #163063 100%);
  color: var(--yellow-highlight) !important;
  border-top: 2px solid #7fa3e0;
  border-left: 2px solid #7fa3e0;
  border-right: 2px solid #09132b;
  border-bottom: 2px solid #09132b;
}

.retro-action-btn.primary-steam-btn:hover {
  background: linear-gradient(180deg, #396ec2 0%, #1f4287 100%) !important;
  color: #ffffff !important;
}

/* Quick Specs Box inside About */
.specs-strip {
  background-color: #dce2f2;
  border: 1px solid #5c6ca3;
  padding: 8px 12px;
  margin-top: 10px;
  font-size: 13px;
}

.specs-row {
  margin-bottom: 4px;
}

.specs-row:last-child {
  margin-bottom: 0;
}

/* Retro Graphic Badge Inside Project Card */
.story-float-graphic {
  float: left;
  margin: 2px 14px 8px 0;
  background-color: #ffffff;
  border: 2px solid #2c3866;
  padding: 10px 14px;
  text-align: center;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.25);
  min-width: 96px;
}

.graphic-red-logo {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  color: #d61a1a;
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.graphic-sub {
  display: block;
  font-family: "Courier New", monospace;
  font-size: 10px;
  font-weight: bold;
  color: #1c2547;
  margin-top: 3px;
}

.story-clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ==================== CLEAR & READABLE BLOG / DEVLOG CARDS ==================== */
.notes-intro-bar {
  font-size: 12.5px;
  font-weight: bold;
  color: #141c3a;
  margin-bottom: 8px;
  padding: 0 2px;
}

.blog-cards-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.blog-card {
  background-color: var(--bg-card);
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #232c56;
  border-bottom: 2px solid #232c56;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.25);
  transition: background-color 0.15s ease;
}

.blog-card.is-open {
  background-color: var(--bg-card-active);
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  box-shadow: 3px 3px 0 #1a246b;
}

.blog-card-header {
  padding: 10px 14px;
  cursor: pointer;
}

.blog-meta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 11.5px;
}

.blog-category-badge {
  background-color: #2b3868;
  color: var(--yellow-highlight);
  font-weight: bold;
  padding: 1px 7px;
  border: 1px solid #000000;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.blog-date-badge {
  font-family: "Courier New", Courier, monospace;
  font-weight: bold;
  color: #2c3866;
  background-color: #d6def2;
  padding: 1px 6px;
  border: 1px solid #8694bd;
}

.blog-readtime {
  color: var(--text-muted);
  font-size: 11px;
  margin-left: auto;
}

.blog-card-title {
  margin: 0 0 6px 0;
  font-size: 16px;
  font-weight: 900;
  color: var(--link-blue);
  text-decoration: underline;
}

.blog-card-header:hover .blog-card-title {
  color: var(--link-hover);
}

.blog-card-summary {
  margin: 0 0 10px 0;
  font-size: 13.5px;
  color: #222b45;
}

.blog-card-footer {
  display: flex;
  justify-content: flex-end;
}

/* Expanded Full Article Area inside the Card */
.blog-card-body {
  border-top: 2px solid #354682;
  background-color: #ffffff;
  padding: 14px 16px;
  font-size: 14.5px;
  line-height: 1.62;
  color: #111625;
}

.blog-card-body p {
  margin: 0 0 12px 0;
}

.blog-card-body p:last-child {
  margin-bottom: 0;
}

/* Contact & WordArt Layout */
.story-with-wordart {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.story-main-col {
  flex: 1;
}

.contact-directory {
  background-color: #dce2f2;
  border: 1px solid #3d4e88;
  padding: 8px 12px;
  margin-top: 8px;
}

.contact-row {
  margin-bottom: 6px;
  font-size: 13.5px;
}

.contact-row:last-child {
  margin-bottom: 0;
}

/* 80's Saturday Night Style WordArt */
.wordart-badge {
  flex-shrink: 0;
  text-align: center;
  padding: 4px 8px;
  user-select: none;
}

.wa-num,
.wa-mid,
.wa-bot {
  font-family: Impact, "Arial Black", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
  background: linear-gradient(180deg, #fff600 0%, #ffbb00 55%, #ff5500 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(2px 2px 0 #662200) drop-shadow(-1px -1px 0 #662200);
}

.wa-num {
  font-size: 48px;
  line-height: 0.9;
}

.wa-mid {
  font-size: 20px;
  line-height: 1.05;
}

.wa-bot {
  font-size: 28px;
  line-height: 1;
}

/* ==================== RIGHT SIDEBAR (CLOCK + SPOTLIGHT) ==================== */
.right-sidebar {
  background-color: var(--bg-right-col);
  color: #ffffff;
  border-left: 2px solid #232c56;
  padding: 8px;
}

/* Digital Clock Widget */
.clock-widget {
  background: linear-gradient(180deg, #dce0eb 0%, #8f98b3 100%);
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #1c2236;
  border-bottom: 2px solid #1c2236;
  padding: 4px 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.digital-display {
  background-color: #0b140e;
  color: #33ff55;
  font-family: "Courier New", Courier, monospace;
  font-weight: 900;
  font-size: 19px;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-top: 2px solid #000000;
  border-left: 2px solid #000000;
  border-right: 2px solid #7c859e;
  border-bottom: 2px solid #7c859e;
  text-shadow: 0 0 5px rgba(51, 255, 85, 0.7);
}

.weather-icon {
  text-align: center;
  color: #1a246b;
  font-weight: 900;
  font-size: 10px;
  padding: 0 4px;
}

.sun-arc {
  display: block;
  width: 28px;
  height: 14px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, #ff3300, #ffcc00);
  margin: 0 auto 2px auto;
  border: 1px solid #ffffff;
}

/* Project Spotlight Header */
.spotlight-header {
  border-bottom: 2px solid #7f8ec4;
  padding-bottom: 4px;
  margin-bottom: 8px;
}

.spot-main {
  display: block;
  font-family: "Trebuchet MS", "Arial Black", sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}

.spot-sub {
  display: block;
  font-size: 11px;
  color: #dbe2ff;
  letter-spacing: 2px;
  text-align: right;
  margin-top: 2px;
}

.spotlight-item {
  border-bottom: 1px solid #6b7bb3;
  padding: 7px 2px 9px 2px;
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.spot-title {
  color: var(--yellow-highlight);
  font-weight: bold;
  font-size: 13.5px;
}

.spot-line {
  color: #ffffff;
}

.spot-line a {
  color: var(--yellow-highlight);
  text-decoration: underline;
  font-weight: bold;
}

/* ==================== FOOTER ==================== */
.portal-footer {
  background-color: #1a246b;
  color: #cbd5ff;
  padding: 8px 14px;
  font-size: 12px;
  border-top: 2px solid #000000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.portal-footer a {
  color: var(--yellow-highlight);
  text-decoration: none;
  font-weight: bold;
}

/* ==================== RESPONSIVE BREAKPOINTS ==================== */
@media (max-width: 840px) {
  .portal-grid {
    grid-template-columns: 160px 1fr;
  }

  .right-sidebar {
    grid-column: 1 / -1;
    border-left: none;
    border-top: 2px solid #232c56;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    align-items: start;
  }

  .spotlight-header,
  .clock-widget {
    grid-column: 1 / -1;
  }

  .spotlight-list {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 8px;
  }
}

@media (max-width: 600px) {
  .hero-banner {
    flex-direction: column;
    text-align: center;
  }

  .slogan-line1 {
    font-size: 20px;
  }

  .portal-grid {
    grid-template-columns: 1fr;
  }

  .left-sidebar {
    border-right: none;
    border-bottom: 2px solid #48547d;
  }

  .retro-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }

  .menu-btn {
    border-radius: 4px;
    font-size: 13.5px;
  }

  .left-blurb {
    display: none;
  }

  .story-with-wordart {
    flex-direction: column;
    align-items: flex-start;
  }
}