/* =========================================================
   アーカイブページ用(archive版)の幅制限。
   完成版 archive.html のページ側スタイルにあった
   .archive-widget{ width:100%; max-width:640px; } を移設したもの。
   トップページ用の .morukey-embed-box と同じ理由(コンテナクエリで
   自身の幅を基準にサイズが決まるため)で、この幅制限が必要。
   morukey-core.css 自体は変更しないため、専用ファイルとして分離している。
========================================================= */
.morukey-archive-box{
  width:100%;
  max-width:640px;
  margin:0 auto;
}

/* ---------- アーカイブページの見出し・説明文 ----------
   色はmorukey-core.cssの --ink (#3c2f22) と同じ濃い茶色に統一。
   (このCSSファイルはmorukey-core.cssの外にあるため、変数ではなく
   同じ値を直接指定している) */
.morukey-archive-heading{
  text-align:center;
  margin-bottom:20px;
}
.morukey-archive-eyebrow{
  font-family:'Yuji Syuku', serif;
  font-size:12px;
  letter-spacing:0.25em;
  color:#3c2f22;
  opacity:0.75;
}
.morukey-archive-title{
  font-family:'Yuji Syuku', serif;
  font-size:clamp(20px,4.5vw,28px);
  color:#3c2f22;
  margin:6px 0 8px;
}
.morukey-archive-desc{
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:13px;
  color:#3c2f22;
  margin:0;
}
.morukey-archive-title ruby rt,
.morukey-archive-desc ruby rt{
  font-size:0.55em;
  opacity:0.8;
}

/* ---------- ページ下部:表示順切替(左) + トップページに戻る(右) ---------- */
.morukey-archive-footer-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
  max-width:640px;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
.morukey-order-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:12px;
  color:#3c2f22;
}
.morukey-order-btn{
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:12px;
  color:#3c2f22;
  background:rgba(60,47,34,0.05);
  border:1.5px solid rgba(60,47,34,0.18);
  border-radius:999px;
  padding:5px 12px;
  cursor:pointer;
  transition:background .2s ease, transform .15s ease;
}
.morukey-order-btn:hover{ transform:translateY(-1px); }
.morukey-order-btn.active{
  background:#3c2f22;
  color:#fbf3e2;
  border-color:transparent;
}
.morukey-order-toggle ruby rt,
.morukey-order-btn ruby rt{ font-size:0.6em; }

.morukey-back-link{
  font-family:'Zen Maru Gothic', sans-serif;
  font-size:13px;
  color:#3c2f22;
  text-decoration:none;
  border-bottom:1px solid rgba(60,47,34,0.4);
  white-space:nowrap;
}
.morukey-back-link ruby rt{ font-size:0.6em; }
.morukey-back-link:hover{ opacity:0.8; }

@media (max-width:420px){
  .morukey-archive-footer-row{ justify-content:center; text-align:center; }
}