/* 静室 · 39-elsewhere.css
   首页的「别处」区块：会跳出静室的外部站点。

   为什么要独立成块：
   现有页脚（完整目录/搜索/为什么用RSS/说点什么/关于）全是站内链接。
   外链混进去，读者点之前不知道会不会跳走，页脚「站内导航」的语义也被破坏。
   所以独立区块 + 细线分隔 + 域名可见 + ↗ 箭头。

   依据 design/AESTHETIC-SPEC.md：8px 网格 · 接近性原则 · 对比度三层 · 动效 150ms
*/

.elsewhere-block {
  margin-block-start: var(--space-7);
  padding-block-start: var(--space-5);
  border-block-start: var(--stroke-hairline) solid var(--border-subtle);
}

/* 小标题用等宽小字，与正文标题拉开层次（三级对比度） */
.elsewhere-block .elsewhere-title {
  font-family: var(--font-mono);
  font-size: var(--font-size-tiny);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin: 0 0 var(--space-3);
}

.elsewhere-block .elsewhere-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2-5);
}

.elsewhere-block .elsewhere-list a {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2-5);
  font-size: var(--font-size-ui);
  color: var(--text-secondary);
  text-decoration: none;
  transition: color 150ms ease;
  /* 触控目标：文字链接给足高度 */
  min-block-size: 24px;
}
.elsewhere-block .elsewhere-list a:hover {
  color: var(--action-primary);
}
.elsewhere-block .elsewhere-list a:focus-visible {
  outline: var(--stroke-focus) solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.elsewhere-block .elsewhere-name {
  font-weight: 500;
}
/* 域名：等宽小字，让人点之前就知道会去哪（三级对比度） */
.elsewhere-block .elsewhere-url {
  font-family: var(--font-mono);
  font-size: var(--font-size-tiny);
  color: var(--text-muted);
}
.elsewhere-block .elsewhere-arrow {
  font-size: var(--font-size-tiny);
  color: var(--text-muted);
}

/* 窄屏：域名折到下一行，避免挤在一起 */
@media (max-width: 520px) {
  .elsewhere-block .elsewhere-list a {
    flex-direction: column;
    gap: var(--space-1);
  }
  .elsewhere-block .elsewhere-arrow { display: none; }
}