/* ===== Journal — newspaper index + long-form article ===== */

body{background:var(--paper)}

/* --- index --- */
.lead{padding-block:clamp(3rem,7vw,6rem) 0}
.lead__card{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.5rem,5vw,4rem);align-items:center}
.lead__art{aspect-ratio:4/3}
.lead__meta{display:flex;gap:1.2rem;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--clay);margin-bottom:1.2rem}
.lead__meta span{color:var(--ink-soft);opacity:.7}
.lead h2{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:1rem}
.lead p{color:var(--ink-soft)}

.jbody{display:grid;grid-template-columns:1fr 280px;gap:clamp(2rem,6vw,5rem);align-items:start}

.posts{border-top:1px solid var(--line)}
.post{
  display:grid;grid-template-columns:200px 1fr;gap:clamp(1.2rem,3vw,2.5rem);
  padding:clamp(1.6rem,3vw,2.4rem) 0;border-bottom:1px solid var(--line);
  transition:background .4s var(--ease)
}
.post:hover{background:rgba(180,83,42,.04)}
.post__art{aspect-ratio:4/3}
.post__meta{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--clay);margin-bottom:.7rem}
.post__meta em{font-style:normal;color:var(--ink-soft);opacity:.7;margin-left:.8rem}
.post h3{font-size:1.6rem;margin-bottom:.5rem;transition:color .3s}
.post:hover h3{color:var(--clay)}
.post p{margin:0;color:var(--ink-soft);font-size:.94rem;max-width:62ch}

.pager{display:flex;gap:.5rem;justify-content:center;margin-top:3rem}
.pager a,.pager span{
  min-width:42px;height:42px;display:grid;place-content:center;border:1px solid var(--line);
  font-size:.8rem;transition:.3s var(--ease)
}
.pager a:hover{border-color:var(--clay);color:var(--clay)}
.pager .is-on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

.side{position:sticky;top:7rem;display:grid;gap:2.5rem}
.side h4{font-size:.72rem;letter-spacing:.26em;text-transform:uppercase;color:var(--clay);
  font-family:var(--body);font-weight:400;margin-bottom:1rem}
.side ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.side li a{display:flex;justify-content:space-between;font-size:.92rem;color:var(--ink-soft);
  padding-bottom:.7rem;border-bottom:1px solid var(--line)}
.side li a:hover{color:var(--clay)}
.side__box{background:var(--ink);color:var(--sand);padding:2rem}
.side__box h4{color:var(--gold)}
.side__box p{font-size:.9rem;color:rgba(246,240,231,.68)}

/* --- article --- */
.art-head{padding-block:clamp(3rem,7vw,6rem) 0;text-align:center}
.art-head .lead__meta{justify-content:center}
.art-head h1{font-size:clamp(2.4rem,5.5vw,4.4rem);max-width:18ch;margin:0 auto 1.4rem}
.art-head .lede{margin-inline:auto}
.art-hero{height:clamp(300px,55vh,600px);margin-block:clamp(2rem,4vw,3.5rem)}

.art{font-size:1.08rem;line-height:1.85;color:var(--ink-soft)}
.art h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--ink);margin:2.8rem 0 1rem}
.art h3{font-size:1.35rem;color:var(--ink);margin:2.2rem 0 .8rem}
.art blockquote{
  margin:2.5rem 0;padding-left:1.6rem;border-left:2px solid var(--clay);
  font-family:var(--display);font-style:italic;font-size:1.6rem;line-height:1.35;color:var(--ink)
}
.art figure{margin:2.8rem 0}
.art figure .plate{aspect-ratio:16/10}
.art figcaption{font-size:.78rem;color:var(--ink-soft);opacity:.75;margin-top:.7rem}
.art ul{padding-left:1.1rem;margin:1.4rem 0}
.art li{margin-bottom:.5rem}
.art hr{border:0;height:1px;background:var(--line);margin:3rem 0}
.art strong{font-weight:500;color:var(--ink)}

.art-foot{
  display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center;
  margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line)
}
.art-author{display:flex;gap:1.2rem;align-items:center}
.art-author img{width:64px;height:64px;border-radius:50%;flex:0 0 64px;object-fit:cover}
.art-author b{display:block;font-family:var(--display);font-size:1.25rem;font-weight:500;color:var(--ink)}
.art-author span{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-soft);opacity:.75}

.more{background:var(--sand-deep)}
.more__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem;margin-top:2.5rem}
.more__card{background:var(--paper);border:1px solid var(--line);transition:.45s var(--ease)}
.more__card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.more__card .plate{aspect-ratio:16/10}
.more__card__body{padding:1.6rem}
.more__card h3{font-size:1.3rem;margin-bottom:.4rem}
.more__card span{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--clay)}

@media (max-width:960px){
  .lead__card,.jbody,.more__grid{grid-template-columns:1fr}
  .side{position:static}
  .post{grid-template-columns:1fr}
  .post__art{aspect-ratio:16/9}
}

/* pagination: pages that do not exist yet are shown as unavailable, not linked */
.pager .is-off{color:var(--ink-soft);opacity:.4;cursor:not-allowed}