/* ============================================
   JOURNALIST / AUTHOR — Classic Editorial
   Colors: White #FAFAFA, Black #111, Red #C0392B
   Fonts: Playfair Display, Libre Baskerville
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');

:root {
  --white: #FAFAFA;
  --black: #111111;
  --gray: #555;
  --light-gray: #F0EFEB;
  --red: #C0392B;
  --border: #DDD;
  --font-serif: 'Playfair Display', Georgia, serif;
  --font-body: 'Libre Baskerville', Georgia, serif;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--white); color: var(--black); line-height: 1.8; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 5%; }

/* ── Masthead / Navbar ── */
.masthead {
  border-bottom: 3px double var(--black);
  padding: 20px 0 10px;
  text-align: center;
}
.masthead-name {
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 6vw, 5rem);
  letter-spacing: 4px;
  text-transform: uppercase;
  font-weight: 700;
}
.masthead-subtitle {
  font-size: 0.8rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--gray);
  margin: 5px 0 15px;
}
.nav-bar {
  border-top: 1px solid var(--black);
  border-bottom: 1px solid var(--black);
  display: flex;
  justify-content: center;
  gap: 30px;
  padding: 8px;
}
.nav-bar a {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: color 0.2s;
}
.nav-bar a:hover, .nav-bar a.active { color: var(--red); }

/* ── Hero Article ── */
.featured-story { padding: 60px 0; border-bottom: 1px solid var(--border); }
.featured-story .container { display: grid; grid-template-columns: 2fr 1fr; gap: 60px; align-items: start; }
.story-main .category { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 3px; color: var(--red); margin-bottom: 15px; display: block; }
.story-main h1 { font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; margin-bottom: 20px; }
.story-main .standfirst { font-size: 1.1rem; font-style: italic; color: var(--gray); margin-bottom: 30px; border-left: 3px solid var(--red); padding-left: 20px; }
.story-main img { width: 100%; margin-bottom: 30px; }
.byline { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 2px; color: var(--gray); margin-bottom: 30px; }
.article-body p { margin-bottom: 20px; font-size: 1rem; }
.article-body p:first-of-type::first-letter { font-size: 4rem; font-family: var(--font-serif); font-weight: 700; float: left; line-height: 0.85; padding-right: 10px; color: var(--red); }
.sidebar { border-left: 1px solid var(--border); padding-left: 40px; }
.sidebar h3 { font-family: var(--font-serif); font-size: 1.5rem; border-bottom: 2px solid var(--black); padding-bottom: 10px; margin-bottom: 20px; }
.sidebar-article { margin-bottom: 30px; padding-bottom: 30px; border-bottom: 1px solid var(--border); }
.sidebar-article span { display: block; font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; color: var(--red); margin-bottom: 5px; }
.sidebar-article h4 { font-family: var(--font-serif); font-size: 1.1rem; }
.sidebar-article p { font-size: 0.85rem; color: var(--gray); margin-top: 5px; }

/* ── Articles Grid ── */
.section { padding: 60px 0; }
.section-title { font-family: var(--font-serif); font-size: 1.5rem; border-top: 3px solid var(--black); border-bottom: 1px solid var(--border); padding: 10px 0; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 2px; }
.articles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.article-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; margin-bottom: 15px; }
.article-card .category { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 2px; color: var(--red); margin-bottom: 8px; display: block; }
.article-card h3 { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.3; margin-bottom: 10px; }
.article-card p { font-size: 0.85rem; color: var(--gray); }
.article-card a:hover h3 { text-decoration: underline; }

/* ── About / Bio ── */
.bio-section { background: var(--light-gray); padding: 60px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.bio-grid { display: grid; grid-template-columns: 1fr 2fr; gap: 60px; align-items: center; }
.bio-grid img { border: 5px solid var(--white); box-shadow: 4px 4px 0 var(--black); }
.bio-text blockquote { font-family: var(--font-serif); font-size: 1.5rem; font-style: italic; border-left: 4px solid var(--red); padding-left: 20px; margin-bottom: 20px; }
.bio-text p { color: var(--gray); font-size: 0.9rem; }

/* ── Footer ── */
footer { padding: 30px 0; text-align: center; border-top: 3px double var(--black); }
footer p { font-size: 0.8rem; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); }

/* Responsive */
.nav-toggle { display: none; flex-direction: column; gap: 4px; background: transparent; border: none; cursor: pointer; position: absolute; right: 20px; top: 25px; z-index: 1000; }
.nav-toggle span { width: 25px; height: 2px; background: var(--black); transition: 0.3s; }

@media (max-width: 768px) {
  .masthead { position: relative; }
  .nav-toggle { display: flex; }
  .nav-bar {
    position: fixed; top: 0; left: -250px; width: 250px; height: 100vh;
    background: var(--white); border-right: 1px solid var(--black);
    flex-direction: column; justify-content: center; gap: 40px; z-index: 999;
    transition: left 0.3s ease; box-shadow: 10px 0 30px rgba(0,0,0,0.1);
  }
  .nav-bar.active { left: 0; }
  .nav-bar a { font-size: 1.2rem; }
  
  .nav-toggle.active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle.active span:nth-child(2) { opacity: 0; }
  .nav-toggle.active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .featured-story .container { grid-template-columns: 1fr; }
  .sidebar { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 40px; }
  .articles-grid { grid-template-columns: 1fr; }
  .bio-grid { grid-template-columns: 1fr; }
}