/* =========================================================================
   しましま旅行記 — 行き来（サイト共通）

   ホームより下のページ（しおり・経県値）は、どこにいても同じ形で
   ホームへ戻れる。置き場所も形も言い回しも1つに決めておく。

     ・上の左に「もどる」の札を1つ。ページの中身が始まる前に置く
     ・いちばん下にもう1つ。読み終えた所からも戻れる

   ページ側に書くのはこの2行だけで、中身は nav.js が入れる。

     <div class="navtop"><span data-nav="back"></span></div>
     <span data-nav="foot"></span>

   色は各ページの変数（--ink など）をそのまま借りる。持っていない
   ページでも出せるように、うしろに既定値を書いてある。
   ========================================================================= */

/* 上の左。ページのいちばん上、見出しより前に置く */
.navtop{display:flex;align-items:center;margin:0 0 14px}

.navback{display:inline-flex;align-items:center;gap:5px;
  min-height:40px;
  font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  color:var(--ink,#3E2C1E);background:rgba(255,255,255,.88);
  border:2px solid var(--ink,#3E2C1E);border-radius:999px;
  padding:5px 15px 5px 10px;text-decoration:none;
  transition:background .18s cubic-bezier(.2,.9,.25,1),transform .18s cubic-bezier(.2,.9,.25,1)}
.navback:active{background:#fff;transform:scale(.96)}
.navback svg{width:16px;height:16px;flex:0 0 auto;margin-left:-3px}

/* いちばん下。上の札とは色を変えて、戻り道であることだけ示す */
.navfoot{display:flex;justify-content:center;padding:8px 0 4px}
.navfoot a{display:inline-flex;align-items:center;gap:7px;
  min-height:40px;
  font-family:inherit;font-size:12.5px;font-weight:800;letter-spacing:.02em;
  color:var(--muted,#8A7361);background:var(--card-2,#FDF9F2);
  border:2px solid var(--line-2,#E3D5BE);border-radius:999px;
  padding:8px 18px;text-decoration:none;
  transition:background .18s cubic-bezier(.2,.9,.25,1)}
.navfoot a:active{background:var(--line,#EFE3D2)}
.navfoot a svg{width:16px;height:16px;flex:0 0 auto}

@media (prefers-reduced-motion:reduce){
  .navback,.navfoot a{transition:none}
}