.banner {
    height: 100%;
    position: relative;
    overflow: hidden;
    cursor: default;
  }

  .banner .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
  }

  .banner[parallax="true"] {
    will-change: transform;
    -webkit-transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    transition: transform 0.05s ease-out;
  }

  /* 如果 $banner-width-height-ratio > 0，Stylus 的逻辑写成固定媒体查询 */
  @media (max-width: 60vh) { /* 示例，60vh = 100/ratio，根据实际 ratio 替换 */
    .header-inner {
      max-height: 166vw; /* 100/ratio，示例用166，实际要算 */
    }

    #board {
      margin-top: -1rem !important;
    }
  }

  /* 你注释掉的部分也保留 */
  @media (max-width: 40vh) {
    .scroll-down-bar {
      display: none;
    }
  }


  /* ========== 向下箭头（呼吸感 + 透明渐变） ========== */
  #banner .scroll-down-bar {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    cursor: pointer;
    animation: arrow-bounce 1.8s infinite ease-in-out;
  }

  #banner .scroll-down-bar i {
    font-size: 2rem;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
    transition: opacity 0.3s;
  }

  /* 鼠标悬停时保持全亮 */
  #banner .scroll-down-bar i:hover {
    opacity: 1;
  }

  /* 上下浮动 + 透明渐变 */
  @keyframes arrow-bounce {
    0% {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      /* 底部最亮 */
    }

    50% {
      transform: translateX(-50%) translateY(-40px);
      opacity: 0.4;
      /* 上升时半透明 */
    }

    100% {
      transform: translateX(-50%) translateY(0);
      opacity: 1;
      /* 回到底部再变亮 */
    }
  }



  /* ========== 移动端 Banner 优化 + 缝隙修复 ========== */
  @media screen and (max-width: 768px) {

    /* 让 header-inner 自适应高度 */
    .header-inner {
      height: auto !important;
    }

    /* Banner 高度缩小 */
    #banner {
      height: 40vh !important;
      background-position: center center !important;
    }

    /* 遮罩内文字上下居中 */
    #banner .mask.flex-center {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 10px;
      text-align: center;
    }

    /* 标题字体缩小 */
    #banner .banner-text .h1,
    #banner .banner-text .post-title,
    #banner .banner-text .page-title {
      font-size: 1.4rem !important;
      line-height: 1.6rem !important;
      word-break: break-word;
    }

    /* 副标题缩小 */
    #banner .banner-text .h2,
    #banner .banner-text .post-subtitle,
    #banner .banner-text .page-subtitle {
      font-size: 1rem !important;
      line-height: 1.4rem !important;
      margin-top: 0.5rem;
    }

    /* slogan（首页） */
    #banner .banner-text #subtitle {
      font-size: 1.1rem !important;
    }

    /* 向下箭头缩小 */
    #banner .scroll-down-bar {
      bottom: 10px;
    }

    #banner .scroll-down-bar i {
      font-size: 1.2rem !important;
    }

    /* 首页正文紧贴 Banner */
    body.index #board,
    body.index .container.nopadding-x-md {
      margin-top: 0 !important;
      padding-top: 0 !important;
    }

    /* 文章/分类/归档/关于正文加一点缓冲 */
    body.post #board,
    body.category #board,
    body.tag #board,
    body.archive #board,
    body.about #board,
    body.post .container.nopadding-x-md,
    body.category .container.nopadding-x-md,
    body.tag .container.nopadding-x-md,
    body.archive .container.nopadding-x-md,
    body.about .container.nopadding-x-md {
      margin-top: 12px !important;
      padding-top: 0 !important;
    }
  }