/* ============================================================
   KEMUHUA — in-page journal reader
   Opens an article over the current page so reading never
   depends on navigating away. Standalone pages still exist.
   ============================================================ */

html.jr-lock,body.jr-lock{overflow:hidden}

.jr{
  position:fixed;inset:0;z-index:960;
  background:var(--paper);color:var(--ink);
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  opacity:0;visibility:hidden;transform:translateY(26px);
  transition:opacity .45s var(--ease),transform .62s var(--ease),visibility .62s;
}
.jr.is-open{opacity:1;visibility:visible;transform:none}

/* ---------- top bar ---------- */
.jr__bar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:15px var(--pad);
  background:rgba(244,240,230,.93);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
.jr__kicker{
  display:flex;align-items:center;gap:12px;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
  min-width:0;
}
.jr__kicker b{
  font-weight:500;color:var(--brass);letter-spacing:.24em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw;
}
.jr__kicker i{width:22px;height:1px;background:var(--brass);opacity:.6;flex:none}
.jr__close{
  display:inline-flex;align-items:center;gap:11px;flex:none;
  padding:9px 15px 9px 17px;border:1px solid rgba(14,17,14,.2);
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.jr__close svg{width:11px;height:11px;stroke:currentColor;stroke-width:1.6;fill:none;transition:transform .5s var(--ease)}
.jr__close:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.jr__close:hover svg{transform:rotate(90deg)}
.jr__prog{
  position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--brass);
  transition:width .12s linear;
}

/* ---------- hero ---------- */
.jr__hero{margin:0;background:var(--sand)}
.jr__hero img{
  width:100%;height:clamp(240px,42vh,470px);object-fit:cover;
  filter:saturate(.9) contrast(1.05);
}
.jr__inner{
  max-width:820px;margin:0 auto;
  padding:0 var(--pad) clamp(60px,9vw,120px);
}
.jr__cap{
  margin:16px 0 clamp(34px,4.4vw,54px);padding-left:14px;
  border-left:1px solid var(--brass);
  font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute);
  line-height:1.65;
}
.jr__cat{
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);
  margin-bottom:18px;
}
.jr__title{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.95rem,4.2vw,3.5rem);line-height:1.06;letter-spacing:-.028em;
  max-width:20ch;
}
.jr__dek{
  margin-top:22px;font-size:clamp(.98rem,1.28vw,1.14rem);line-height:1.68;
  color:var(--mute);max-width:54ch;
}
.jr__meta{
  display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:28px;padding-top:18px;
  border-top:1px solid var(--line);
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute);
}
.jr__meta b{font-weight:500;color:var(--ink)}

.jr__prose{padding-top:clamp(30px,4vw,46px)}
.jr__prose.prose{padding-bottom:0}

/* ---------- end matter ---------- */
.jr__end{
  margin-top:clamp(46px,6vw,72px);padding-top:28px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
}
.jr__end .btn{--bh:48px;padding:0 24px;font-size:10.5px}
.jr__next{
  display:flex;flex-direction:column;gap:7px;text-align:right;margin-left:auto;
  transition:opacity .4s var(--ease);
}
.jr__next span{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--brass)}
.jr__next b{
  font-family:var(--serif);font-weight:400;font-size:clamp(.98rem,1.4vw,1.16rem);
  line-height:1.32;letter-spacing:-.012em;max-width:32ch;
  transition:color .4s var(--ease);
}
.jr__next:hover b{color:#7A5723}

.jr__foot{
  margin-top:34px;padding-top:20px;border-top:1px solid var(--line);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);
}

/* ---------- responsive ---------- */
@media (max-width:760px){
  .jr__bar{padding:12px var(--pad)}
  .jr__kicker i{display:none}
  .jr__kicker b{max-width:52vw;font-size:9px}
  .jr__close{padding:8px 12px}
  .jr__close span{display:none}
  .jr__hero img{height:clamp(200px,32vh,300px)}
  .jr__inner{padding-left:20px;padding-right:20px}
  .jr__title{font-size:clamp(1.7rem,7vw,2.3rem);max-width:none}
  .jr__end{flex-direction:column;align-items:flex-start;gap:20px}
  .jr__next{text-align:left;margin-left:0}
  .jr__prose .statline{grid-template-columns:1fr;gap:18px;padding:22px 0}
}