/* journal-detail.css */
/* Body background consistent */
body.page--journalDetail{
  background:#f5f2e8;
}

/* Keep header same behavior as list pages (no extra bg/border) */
body.page--journalDetail .site-header{
  background:transparent !important;
  backdrop-filter:none !important;
}
body.page--journalDetail .site-header .nav-wrap{
  background:transparent !important;
  border-bottom:0 !important;
}

/* ===== Layout ===== */
.jd{
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 22px 90px;
}

.jd__inner{
  max-width: 760px;     /* similar to your design screenshot */
  margin: 0 auto;
}

/* breadcrumb */
.jd-breadcrumb{
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(43,43,42,.55);
  margin: 10px 0 28px;
}
.jd-breadcrumb a{
  color: inherit;
  text-decoration: none;
}
.jd-breadcrumb a:hover{
  color: rgba(43,43,42,.85);
}
.jd-sep{
  margin: 0 10px;
  opacity: .75;
}

/* title/date */
.jd-head{
  margin-bottom: 18px;
}
.jd-title{
  margin: 0;
  font-size: 20px;
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: .01em;
  color:#2b2b2a;
}
.jd-date{
  margin-top: 12px;
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(43,43,42,.55);
}

/* hero image */
.jd-hero{
  margin: 26px 0 34px;
}
.jd-hero img{
  width: 100%;
  height: auto;
  display: block;
  background: rgba(0,0,0,.02);
}

/* article text */
.jd-article p{
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 2.05;
  letter-spacing: .02em;
  color: rgba(43,43,42,.72);
}

/* back button */
.jd-backRow{
  margin-top: 34px;
  display:flex;
  justify-content: center;
}
.jd-backBtn{
  display:inline-block;
  min-width: 240px;
  text-align:center;
  padding: 14px 18px;
  border: 1px solid rgba(0,0,0,.18);
  text-decoration:none;
  font-size: 11px;
  letter-spacing:.06em;
  color:#2b2b2a;
  background: transparent;
}
.jd-backBtn:hover{
  border-color: rgba(0,0,0,.28);
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  .jd{
    padding: 44px 18px 70px;
  }
  .jd__inner{
    max-width: 680px;
  }
  .jd-title{
    font-size: 18px;
  }
}

@media (max-width: 640px){
  .jd{
    padding: 34px 16px 60px;
  }
  .jd-breadcrumb{
    margin-bottom: 18px;
  }
  .jd-title{
    font-size: 16px;
    line-height: 1.5;
  }
  .jd-article p{
    font-size: 12px;
    line-height: 1.95;
  }
  .jd-backBtn{
    width: 100%;
    min-width: 0;
  }
}