/* ============================================================
   Cross-page navigation — marginalia spine + quiet index
   ============================================================ */
.mark a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; }
.mark a:hover { border-bottom-color: var(--blood); }

/* Marginalia spine (desktop only) */
.spine { display: none; }
@media (min-width: 1100px) {
  .spine {
    position: fixed; top: 0; bottom: 0;
    left: max(24px, calc((100vw - 660px) / 2 - 200px));
    width: 140px; z-index: 40;
    display: flex; flex-direction: column; justify-content: center; gap: 3px;
  }
}
.spine a { text-decoration: none; color: var(--mute); font-size: .92rem; letter-spacing: .04em; padding: 5px 0; display: flex; align-items: baseline; gap: 9px; transition: color .15s; }
.spine .sec { color: var(--rule); font-style: italic; min-width: 38px; transition: color .15s; }
.spine .nm { opacity: 0; transform: translateX(-4px); transition: opacity .18s, transform .18s; font-style: italic; white-space: nowrap; }
.spine a:hover { color: var(--ink); }
.spine a:hover .nm { opacity: 1; transform: none; }
.spine a:hover .sec { color: var(--blood); }
.spine a.cur { color: var(--ink); }
.spine a.cur .sec { color: var(--blood); }
.spine a.cur .nm { opacity: 1; transform: none; color: var(--blood); }
.spine .rule { height: 1px; width: 30px; background: var(--rule); margin: 8px 0 8px 2px; }
/* Newsfeed (the standalone destination): left-aligned under the § column, label always shown */
.spine a:last-of-type .sec { display: none; }
.spine a:last-of-type .nm { opacity: 1; transform: none; }

/* Quiet index — hint + command palette */
.qhint { position: fixed; right: 22px; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 7px; font-size: .82rem; color: var(--mute); font-style: italic; background: var(--paper); padding: 5px 8px; border: 1px solid var(--rule); border-radius: 999px; }
.qhint kbd { font-family: var(--serif); font-style: normal; border: 1px solid var(--rule); border-radius: 5px; padding: 0 7px; color: var(--ink); }
.qhint button { font-family: var(--serif); font-style: italic; font-size: .82rem; color: var(--mute); background: transparent; border: none; cursor: pointer; padding: 0; }
.qhint button:hover { color: var(--blood); }
.palette-scrim { position: fixed; inset: 0; z-index: 8000; background: rgba(14,13,10,.34); display: none; align-items: flex-start; justify-content: center; }
.palette-scrim.open { display: flex; }
.palette { margin-top: 15vh; width: min(440px, 92vw); background: var(--paper); border: 1px solid var(--ink); box-shadow: 10px 10px 0 rgba(14,13,10,.12); }
.palette .pin { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.palette .pin .sl { color: var(--blood); font-size: 1.2rem; }
.palette input { flex: 1; font-family: var(--serif); font-size: 1.1rem; color: var(--ink); background: transparent; border: none; outline: none; }
.palette input::placeholder { color: var(--mute); font-style: italic; }
.palette ul { list-style: none; padding: 6px 0; margin: 0; max-height: 54vh; overflow: auto; }
.palette li { padding: 9px 16px; display: flex; align-items: baseline; gap: 10px; cursor: pointer; color: var(--ink-soft); }
.palette li .rn { color: var(--blood); font-style: italic; font-size: .84em; min-width: 26px; }
.palette li.sel, .palette li:hover { background: #EAE3D2; color: var(--ink); }
.palette li.cur .nm2 { border-bottom: 1px solid var(--blood); }
.palette .pf { padding: 8px 16px; border-top: 1px solid var(--rule); font-size: .74rem; color: var(--mute); font-style: italic; display: flex; gap: 16px; }