/* 像素標題字體：俐方體11號 Cubic 11（SIL OFL 1.1，授權檔 /fonts/CUBIC-11-LICENSE.txt） */
@font-face {
  font-family: 'Cubic 11';
  src: url('/fonts/cubic-11.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --pixel-title-font: 'Cubic 11', -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Lato, Roboto, "PingFang SC", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
}

/* 首頁卡片標題：22px = 11 x 2 */
#recent-posts .recent-post-info > .article-title,
.recent-post-info > .article-title {
  font-family: var(--pixel-title-font);
  font-size: 22px;
  font-weight: normal;
  line-height: 1.7;
  /* 主題的 .limit-more-line 有 overflow: hidden，字緣（最遠 4px）會在元素邊界被切掉；
     左右上各留 6px／5px 的內距並用負邊距抵銷，版面位置不變。下方靠加大行高留空間，
     不加 padding-bottom，避免 line-clamp 被截掉的第三行從內距露出來 */
  padding: 5px 6px 0;
  margin: -5px -6px 0;
  /* 與文章頁大標題同款：白字加一圈純黑像素字緣（3px 硬陰影），外面再包一圈淡藍紫細邊（1px）讓黑框在深色卡片上浮出來 */
  color: #fff !important;
  text-shadow:
    3px 3px 0 #000,
    -3px 3px 0 #000,
    3px -3px 0 #000,
    -3px -3px 0 #000,
    0px 3px 0 #000,
    0px -3px 0 #000,
    3px 0px 0 #000,
    -3px 0px 0 #000,
    3px 1px 0 #000,
    3px -1px 0 #000,
    -3px 1px 0 #000,
    -3px -1px 0 #000,
    1px 3px 0 #000,
    -1px 3px 0 #000,
    1px -3px 0 #000,
    -1px -3px 0 #000,
    3px 2px 0 #000,
    3px -2px 0 #000,
    -3px 2px 0 #000,
    -3px -2px 0 #000,
    2px 3px 0 #000,
    -2px 3px 0 #000,
    2px -3px 0 #000,
    -2px -3px 0 #000,
    -4px -3px 0 #8b93d6,
    -4px -2px 0 #8b93d6,
    -4px -1px 0 #8b93d6,
    -4px 0px 0 #8b93d6,
    -4px 1px 0 #8b93d6,
    -4px 2px 0 #8b93d6,
    -4px 3px 0 #8b93d6,
    -3px -4px 0 #8b93d6,
    -3px 4px 0 #8b93d6,
    -2px -4px 0 #8b93d6,
    -2px 4px 0 #8b93d6,
    -1px -4px 0 #8b93d6,
    -1px 4px 0 #8b93d6,
    0px -4px 0 #8b93d6,
    0px 4px 0 #8b93d6,
    1px -4px 0 #8b93d6,
    1px 4px 0 #8b93d6,
    2px -4px 0 #8b93d6,
    2px 4px 0 #8b93d6,
    3px -4px 0 #8b93d6,
    3px 4px 0 #8b93d6,
    4px -3px 0 #8b93d6,
    4px -2px 0 #8b93d6,
    4px -1px 0 #8b93d6,
    4px 0px 0 #8b93d6,
    4px 1px 0 #8b93d6,
    4px 2px 0 #8b93d6,
    4px 3px 0 #8b93d6;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

#recent-posts .recent-post-info > .article-title:hover,
.recent-post-info > .article-title:hover {
  color: var(--theme-color, #49b1f5) !important;
}

/* 文章頁大標題：33px = 11 x 3（手機 22px = 11 x 2）。
   標題疊在封面圖上，所以加一圈深色硬陰影（像素遊戲的字緣）維持可讀性，不用模糊陰影以免糊掉像素邊緣 */
#post-info .post-title {
  font-family: var(--pixel-title-font);
  font-size: 33px;
  font-weight: normal;
  line-height: 1.5;
  color: #fff;
  text-shadow:
    3px 3px 0 #0b1020,
    -3px 3px 0 #0b1020,
    3px -3px 0 #0b1020,
    -3px -3px 0 #0b1020,
    0 3px 0 #0b1020,
    0 -3px 0 #0b1020,
    3px 0 0 #0b1020,
    -3px 0 0 #0b1020;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

/* 側欄文章列表標題：11px */
.aside-list-item .content > a.title {
  font-family: var(--pixel-title-font);
  font-size: 11px;
  line-height: 1.6;
  color: #fff !important;
  text-shadow:
    1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000;
  -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}

.aside-list-item .content > a.title:hover {
  color: var(--theme-color, #49b1f5) !important;
}

@media screen and (max-width: 768px) {
  #recent-posts .recent-post-info > .article-title,
  .recent-post-info > .article-title {
    font-size: 22px;
  }
  #post-info .post-title {
    font-size: 22px;
    text-shadow:
      2px 2px 0 #0b1020,
      -2px 2px 0 #0b1020,
      2px -2px 0 #0b1020,
      -2px -2px 0 #0b1020;
  }
}