/* ===== Blog (The Passage Journal) ===== */
body.is-cream { background: var(--cream); }


/* ===== Banner (as on the other inner pages) ===== */
.journal-banner {
  position: relative;
  padding: 64px 24px 70px;
  background: var(--gold) url(../images/night-3-1024x1024.jpg) 50% 50% / cover no-repeat;
}
.journal-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(30, 43, 34, .6), rgba(30, 43, 34, .4));
}
.journal-banner__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 155px 0 90px;
  text-align: center;
}
.journal-banner__crumb { font: 600 12px/1.6 var(--sans); letter-spacing: .6px; color: #fff; }
.journal-banner__crumb a { font-weight: 400; color: #e8edf1; transition: color .2s; }
.journal-banner__crumb a:hover { color: #fff; }
.journal-banner__crumb svg { margin: 0 3px; fill: #e8edf1; }
.journal-banner__title { font: 500 clamp(48px, 5.5vw, 76px)/1.08 var(--serif); letter-spacing: -1px; color: var(--paper); }
.journal-banner__text { max-width: 650px; margin: 0 auto; font: 400 16px/1.75 var(--sans); color: var(--paper); }

.journal { display: flex; flex-direction: column; align-items: center; padding: 60px 24px; }
.journal__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  width: 100%;
  max-width: 1200px;
  margin-top: 30px;
}

/* Story card */
.story-card {
  display: flex;
  flex-direction: column;
  min-height: 530px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid var(--line-soft);
  border-radius: 6px;
}
.story-card__media { display: block; overflow: hidden; }
.story-card__media img { width: 100%; height: 240px; object-fit: cover; transition: transform .5s; }
.story-card { transition: box-shadow .3s; }
.story-card:hover { box-shadow: 0 10px 28px rgba(56, 45, 38, .08); }
.story-card:hover .story-card__media img { transform: scale(1.035); }
.story-card__body { display: flex; flex: 1; flex-direction: column; gap: 14px; padding: 24px; }
.story-card__cat {
  align-self: flex-start;
  font: 600 10px/16px var(--sans);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--rust);
}
.story-card__title { font: 500 28px/33.6px var(--serif); color: var(--ink); }
.story-card__title a { transition: color .25s; }
.story-card__title a:hover, .story-card__cat:hover { color: var(--sage); }
.story-card__excerpt { font: 400 14px/25.2px var(--sans); color: var(--text); }
.story-card__date {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  font: 400 12px/19.2px var(--sans);
  color: var(--rust);
}

.btn-round {
  margin-top: 42px;
  padding: 15px 24px;
  font-weight: 600;
  line-height: 20px;
  text-transform: capitalize;
  color: #fff;
  background: var(--sage);
  border: 1px solid transparent;
  border-radius: 200px;
  transition: transform .3s, background-color .3s;
}
.btn-round:hover { background: var(--sage-dark); transform: scale(1.04); }

@media (max-width: 900px) {
  .journal__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .journal-banner { padding: 46px 22px 48px; }
  .journal-banner__text { font-size: 14px; }
  .journal { padding: 60px 20px; }
  .journal__grid { grid-template-columns: 1fr; }
  .story-card { min-height: 0; }
  .btn-round { margin-top: 38px; }
}

@media (max-width: 1024px) {
  .journal-banner__inner { padding: 120px 0 65px; }
}