body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f9f9f9;
  color: #333;
}

/* Header */
header {
  background: #c00;
  color: #fff;
  text-align: center;
  padding: 20px;
  font-size: 2em;
}

/* Sticky Navigation */
nav {
  display: flex;
  justify-content: center;
  background: #222;
  padding: 10px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 1000;
}
nav a {
  color: #fff;
  text-decoration: none;
  margin: 5px 10px;
  padding: 8px 14px;
  border-radius: 4px;
  transition: background 0.3s;
}
nav a:hover { background: #c00; }

/* Breaking News Ticker */
.ticker {
  background: #111;
  color: #ffcc00;
  padding: 12px;
  font-weight: bold;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 3px solid #c00;
}
.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker-scroll 15s linear infinite;
}
@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* Featured grid */
.featured {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  padding: 20px;
}
.featured article {
  background: #fff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.featured img {
  width: 100%;
  height: 100px;      /* fixed smaller height */
  object-fit: cover;
  border-radius: 6px;
}

/* Headlines section */
.headlines { padding: 20px; }
.headlines h2 { color: #c00; }
.headlines ul { list-style: none; padding: 0; margin: 10px 0; }
.headlines li { margin: 5px 0; }
.headlines a { text-decoration: none; color: #333; transition: color 0.3s; }
.headlines a:hover { color: #c00; }

/* Sub-tab images (scaled thumbnails at 10%) */
.headlines img,
section ul img,
section img {
  max-width: 50% !important;   /* force shrink */
  height: auto !important;     /* keep aspect ratio */
  object-fit: cover;
  display: inline-block;
  margin: 0 8px 5px 0;
  vertical-align: middle;
}


/* Footer (no copyright, only credit line) */
footer {
  background: #222;
  color: #fff;
  text-align: center;
  padding: 15px;
  margin-top: 30px;
  border-top: 4px solid #c00;
  font-size: 0.9em;
}
footer span { color: #ffcc00; font-weight: bold; }

/* Mobile adjustments */
@media (max-width: 600px) {
  header { font-size: 1.5em; padding: 15px; }
  nav { flex-direction: column; align-items: center; }
  nav a { margin: 5px 0; width: 90%; text-align: center; }
  .ticker { font-size: 0.9em; padding: 8px; }
  .featured { grid-template-columns: 1fr; }
  .featured img { height: 80px; }
  .headlines img,
  section ul img,
  section img {
    width: 45px;     /* smaller thumbnails on mobile */
    height: 30px;
  }
}