* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #f4e8d0;
  background-image: 
    linear-gradient(rgba(244, 232, 208, 0.92), rgba(244, 232, 208, 0.92)),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"><filter id="paper"><feTurbulence type="fractalNoise" baseFrequency="0.04" numOctaves="5" result="noise"/><feDiffuseLighting in="noise" lighting-color="%23f4e8d0" surfaceScale="2"><feDistantLight azimuth="45" elevation="60"/></feDiffuseLighting></filter><rect width="100%" height="100%" filter="url(%23paper)"/></svg>');
  color: #1a1a1a;
  font-family: "Georgia", "Times New Roman", serif;
  line-height: 1.45;
  min-height: 100vh;
}
.masthead {
  text-align: center;
  padding: 1.2rem 1rem 0.6rem;
  border-bottom: 4px double #0b1f3a;
  background: linear-gradient(to bottom, #f8f0e0, #f4e8d0);
  box-shadow: 0 2px 8px rgba(11, 31, 58, 0.08);
}
.top-banner {
  background: #0b1f3a;
  color: #f6efe3;
  padding: 0.45rem 1rem;
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  font-weight: bold;
  margin: -1.2rem -1rem 1rem;
}
.ftn-logo {
  max-width: 380px;
  width: 90%;
  height: auto;
  margin: 0.8rem auto 0.4rem;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}
.tagline {
  color: #0b1f3a;
  font-style: italic;
  font-size: 1.15rem;
  margin: 0.3rem 0 0.8rem;
  letter-spacing: 0.02em;
}
nav {
  display: flex;
  justify-content: center;
  gap: 2.2rem;
  padding: 0.7rem 0;
  border-top: 1px solid #0b1f3a;
  border-bottom: 1px solid #0b1f3a;
  background: rgba(11, 31, 58, 0.03);
}
nav a {
  color: #0b1f3a;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 0.06em;
  font-size: 0.95rem;
}
nav a.active, nav a:hover { color: #f15a22; }
.edition-info {
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  margin: 1.2rem 0 1rem;
  color: #444;
  text-transform: uppercase;
}
.columns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  max-width: 1280px;
  margin: 0 auto 2rem;
  padding: 0 1rem;
}
.column {
  border: 1.5px solid #0b1f3a;
  padding: 0.9rem;
  background: rgba(255, 252, 245, 0.75);
  box-shadow: 1px 1px 0 rgba(11, 31, 58, 0.1);
}
.column h2 {
  background: #0b1f3a;
  color: #f6efe3;
  text-align: center;
  padding: 0.45rem 0.3rem;
  font-size: 0.88rem;
  letter-spacing: 0.12em;
  margin: -0.9rem -0.9rem 0.9rem;
  font-weight: bold;
}
.hot-minute { 
  border-color: #f15a22; 
  background: rgba(255, 250, 240, 0.85);
}
.hot-logo { 
  max-width: 100%; 
  height: auto;
  margin: 0 auto 0.4rem;
  display: block;
}
.section-sub { 
  font-size: 0.7rem; 
  text-align: center; 
  color: #f15a22; 
  margin-bottom: 0.9rem; 
  font-weight: bold;
  letter-spacing: 0.04em;
}
article { margin-bottom: 1.1rem; }
article h3 { 
  font-size: 1.02rem; 
  margin-bottom: 0.3rem; 
  line-height: 1.25;
  color: #0b1f3a;
}
article p { font-size: 0.88rem; margin-bottom: 0.2rem; color: #222; }
article time { font-size: 0.72rem; color: #f15a22; font-weight: bold; }
footer {
  text-align: center;
  padding: 1.1rem;
  background: #0b1f3a;
  color: #f6efe3;
  letter-spacing: 0.18em;
  font-size: 0.82rem;
  margin-top: 2rem;
}
.page-header {
  text-align: center;
  margin: 1.5rem 0 1rem;
}
.page-header h1 { font-size: 2.1rem; color: #0b1f3a; letter-spacing: 0.04em; }
.story-list { max-width: 820px; margin: 0 auto 2rem; padding: 0 1rem; }
.story-list article {
  border-bottom: 1px solid #c9b99a;
  padding: 1rem 0;
}
@media (max-width: 900px) {
  .columns { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .columns { grid-template-columns: 1fr; }
  .ftn-logo { max-width: 260px; }
  nav { gap: 1.2rem; flex-wrap: wrap; }
}