/* ============================================================
   Dear Breakfast — Morning Journal (blog)
   Extends styles.css · charcoal ink on warm cream
   ============================================================ */

/* Blog pages have no dark hero — nav reads ink-on-cream from the top.
   (.is-solid keeps winning on scroll; drawer-open keeps its cream burger.) */
.nav .nav__links a{ color:var(--ink); text-shadow:none; }
.nav .nav__logo img{ filter:none; width:80px; }
.nav .nav__right .btn--ghost{ border-color:var(--line); color:var(--ink); }
.nav .nav__right .btn--ghost:hover{ background:var(--ink); color:var(--cream); }
.nav .nav__burger span{ background:var(--ink); }
body.drawer-open .nav__burger span{ background:var(--cream); }

/* .btn--line is styled for dark heroes — on cream it needs ink */
.article-cta .btn--line{ border-color:var(--ink); color:var(--ink); }
.article-cta .btn--line:hover{ background:var(--ink); color:var(--cream); transform:translateY(-2px); }

.journal-hero{
  max-width:var(--maxw); margin:0 auto;
  padding:9rem var(--pad) 3rem;
}
.journal-hero h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2.2rem,5vw,4rem); line-height:1.08;
}
.journal-hero h1 em{ font-style:italic; color:var(--ochre-deep); }
.journal-hero .journal-lead{
  max-width:46ch; margin-top:1.4rem; color:var(--ink-soft);
  font-size:clamp(1rem,1.05vw,1.15rem);
}

/* index cards */
.journal-grid{
  max-width:var(--maxw); margin:0 auto;
  padding:1rem var(--pad) 6rem;
  display:grid; gap:3rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.post-card{ display:flex; flex-direction:column; }
.post-card figure{
  aspect-ratio:4/3; overflow:hidden; border-radius:4px;
  background:var(--cream-deep);
}
.post-card img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s var(--ease);
}
.post-card:hover img{ transform:scale(1.04); }
.post-card .post-meta{
  margin-top:1.1rem; font-size:.72rem; letter-spacing:.24em;
  text-transform:uppercase; font-weight:600; color:var(--ink-faint);
}
.post-card h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.25rem,1.6vw,1.55rem); line-height:1.25;
  margin-top:.55rem;
}
.post-card h2 a:hover{ color:var(--ochre-deep); }
.post-card p{ margin-top:.6rem; color:var(--ink-soft); font-size:.98rem; }
.post-card .post-more{
  margin-top:.8rem; font-family:var(--serif); font-style:italic;
  color:var(--ochre-deep); font-size:1rem;
}

/* article */
.article{ max-width:760px; margin:0 auto; padding:8.5rem var(--pad) 4rem; }
.article .post-meta{
  font-size:.72rem; letter-spacing:.24em; text-transform:uppercase;
  font-weight:600; color:var(--ink-faint); margin-bottom:1.2rem;
}
.article h1{
  font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,4.2vw,3.2rem); line-height:1.12;
}
.article .article-lead{
  margin-top:1.3rem; font-size:clamp(1.08rem,1.2vw,1.25rem);
  color:var(--ink-soft); font-family:var(--serif); font-style:italic;
}
.article-hero{
  max-width:980px; margin:2.5rem auto 0; padding:0 var(--pad);
}
.article-hero img{ width:100%; border-radius:4px; }
.article-hero figcaption{
  margin-top:.7rem; font-size:.85rem; color:var(--ink-faint);
  font-style:italic; font-family:var(--serif);
}
.article-body{ max-width:680px; margin:0 auto; padding:2.6rem var(--pad) 3rem; }
.article-body h2{
  font-family:var(--serif); font-weight:500;
  font-size:clamp(1.4rem,2vw,1.8rem); line-height:1.25;
  margin:2.4rem 0 1rem;
}
.article-body p{ margin:0 0 1.25rem; color:var(--ink-soft); }
.article-body a{ color:var(--ochre-deep); border-bottom:1px solid var(--line); }
.article-body a:hover{ border-bottom-color:var(--ochre-deep); }
.article-body ul{ margin:0 0 1.25rem 1.2rem; color:var(--ink-soft); }
.article-body li{ margin-bottom:.5rem; }
.article-body figure{ margin:2rem 0; }
.article-body figure img{ border-radius:4px; }
.article-body figcaption{
  margin-top:.6rem; font-size:.85rem; color:var(--ink-faint);
  font-style:italic; font-family:var(--serif);
}
.article-sign{
  font-family:var(--serif); font-style:italic; font-size:1.15rem;
  color:var(--ochre-deep); margin-top:2.5rem;
}

/* article footer CTA */
.article-cta{
  max-width:680px; margin:0 auto 5rem; padding:0 var(--pad);
}
.article-cta .cta-box{
  border:1px solid var(--line); border-radius:4px;
  padding:2rem; text-align:center; background:var(--paper);
}
.article-cta .cta-box p{
  font-family:var(--serif); font-style:italic;
  font-size:1.15rem; margin-bottom:1.2rem;
}
.article-cta .btns{ display:flex; gap:.8rem; justify-content:center; flex-wrap:wrap; }

/* prev/next + back link */
.journal-back{
  display:inline-block; margin-bottom:2rem;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--ink-faint);
}
.journal-back:hover{ color:var(--ochre-deep); }