/* =========================================================
   SABAI JOURNAL — archive & article layout
   ========================================================= */

.journal-archive{ padding:80px 0 140px; }
.jr-hero{
  max-width:640px;
  margin:0 auto 90px;
  text-align:center;
}
.jr-hero .eyebrow{ justify-content:center; margin-bottom:22px; }
.jr-hero .eyebrow::before{ display:none; }
.jr-hero h1{
  font-family:var(--ff-serif-jp);
  font-size:clamp(28px,4vw,44px);
  margin-bottom:20px;
}
.jr-hero p{
  font-size:14px;
  color:var(--c-brown);
  line-height:1.9;
}

.jr-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:50px 36px;
}
.jr-card{ display:block; }
.jr-card .thumb{ aspect-ratio:4/3; overflow:hidden; margin-bottom:22px; }
.jr-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease-slow); }
.jr-card:hover .thumb img{ transform:scale(1.06); }
.jr-card .tag{
  font-family:var(--ff-serif-en);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--c-stone);
  text-transform:uppercase;
}
.jr-card h2{
  font-family:var(--ff-serif-jp);
  font-size:18px;
  font-weight:400;
  margin:12px 0 10px;
  line-height:1.6;
}
.jr-card p{
  font-size:13px;
  color:var(--c-brown);
  line-height:1.8;
}

/* ---------- Article page ---------- */
.article-hero{
  padding:150px 0 60px;
  text-align:center;
  background:var(--c-sand);
}
.article-hero .eyebrow{ justify-content:center; margin-bottom:22px; }
.article-hero .eyebrow::before{ display:none; }
.article-hero h1{
  font-family:var(--ff-serif-jp);
  font-size:clamp(26px,4.4vw,46px);
  max-width:780px;
  margin:0 auto;
  line-height:1.6;
}
.article-meta{
  margin-top:26px;
  font-family:var(--ff-serif-en);
  font-size:12px;
  letter-spacing:.14em;
  color:var(--c-brown);
}
.article-cover{
  max-width:980px;
  margin:0 auto;
  padding:0 var(--gutter);
  margin-top:-40px;
}
.article-cover img{ width:100%; height:clamp(260px,46vw,480px); object-fit:cover; }

.article-body{
  max-width:680px;
  margin:70px auto 0;
  padding:0 var(--gutter) 120px;
  font-size:15.5px;
  line-height:2.2;
  color:var(--c-ink);
}
.article-body h2{
  font-family:var(--ff-serif-jp);
  font-size:clamp(21px,2.6vw,27px);
  margin:60px 0 24px;
  font-weight:400;
}
.article-body h2:first-child{ margin-top:0; }
.article-body p{ margin-bottom:26px; }
.article-body ul{ margin:0 0 26px; padding-left:1.2em; list-style:disc; }
.article-body li{ margin-bottom:10px; }
.article-note{
  margin-top:50px;
  padding:26px 28px;
  background:var(--c-sand);
  font-size:13px;
  color:var(--c-brown);
  line-height:1.9;
}
.article-cta{
  margin-top:60px;
  padding-top:50px;
  border-top:1px solid var(--c-line);
  text-align:center;
}
.article-cta a{
  display:inline-block;
  border:1px solid var(--c-ink);
  padding:16px 38px;
  font-family:var(--ff-serif-en);
  font-size:13px;
  letter-spacing:.16em;
  transition:background .4s var(--ease), color .4s var(--ease);
}
.article-cta a:hover{ background:var(--c-ink); color:var(--c-warmwhite); }

.article-back{
  display:inline-block;
  margin:40px 0 0 0;
  padding:0 var(--gutter);
  font-size:12px;
  letter-spacing:.1em;
  color:var(--c-brown);
}

.related-articles{
  max-width:980px;
  margin:0 auto;
  padding:0 var(--gutter) 140px;
}
.related-articles h3{
  font-family:var(--ff-serif-en);
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--c-stone);
  margin-bottom:34px;
  text-align:center;
}
.related-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:34px;
}

@media (max-width: 900px){
  .jr-grid{ grid-template-columns:repeat(2,1fr); }
  .related-grid{ grid-template-columns:1fr; }
}
@media (max-width: 600px){
  .jr-grid{ grid-template-columns:1fr; }
  .article-hero{ padding-top:120px; }
}