#projects-main-title-wrapper {
  font-size: var(--vech-text-4xl) !important;
}

html.is-projects-listing,
html.is-projects-listing body {
  background-color: var(--color-off-white, #f0f1fa) !important;
}

/* 禁止首页 data-vechoool-home 的 126px padding 残留，否则 DOM 上移而封面仍偏低 */
html.is-projects-listing #page-container {
  padding-top: 0 !important;
}

html.is-projects-listing #preloader,
html.is-projects-listing #input-blocker {
  display: none !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

html.is-projects-listing.vechoool-preloader-skip:not(.vechoool-canvas-live) #transition-overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* 列表封面在 #canvas 上；等 live 前透明渲染，避免 display:none 导致纹理不画 */
html.is-projects-listing.vechoool-preloader-skip:not(.vechoool-canvas-live) #canvas {
  display: block !important;
  visibility: visible !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html.is-projects-listing.vechoool-preloader-skip.vechoool-canvas-live #canvas {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 从首页带过来的遮罩不能挡列表 */
html.is-projects-listing #vechoool-canvas-mask {
  display: none !important;
}

#projects-main-title-project-number {
  display: none !important;
  position: absolute !important;
  right: auto !important;
  left: calc(100% + 0.2em) !important;
  top: 0.15em !important;
  font-size: 0.35em !important;
}
#projects-main-title-project-arrow {
  position: absolute !important;
  right: auto !important;
  left: calc(100% + 0.12em) !important;
  bottom: 0.12em !important;
  height: 0.42em !important;
  width: 0.42em !important;
}
@media (max-width: 812px) {
  #projects-main-title-project-number {
    left: calc(100% + 0.15em) !important;
    top: 0.2em !important;
    font-size: 0.32em !important;
  }
  #projects-main-title-project-arrow {
    left: calc(100% + 0.1em) !important;
    bottom: 0.15em !important;
    height: 0.38em !important;
    width: 0.38em !important;
  }
}

#projects-main .project-item {
  grid-column: span 3 / span 3 !important;
  float: none !important;
  align-self: start;
  min-width: 0;
}

#projects-main .project-item:nth-child(-n + 4) {
  margin-top: 0 !important;
}

#projects-main .project-item:nth-child(n + 5) {
  margin-top: 3.25em !important;
}

@media (min-aspect-ratio: 21/9) {
  #projects-main .project-item:nth-child(n + 5) {
    margin-top: 5.5em !important;
  }
}

#projects-main .project-list {
  margin-top: 4.5vh !important;
}

@media (min-aspect-ratio: 21/9) {
  #projects-main .project-list {
    margin-top: 3.5vh !important;
  }
}

#projects-main .project-item-line-1 {
  font-size: 0.7vw !important;
}

@media (min-aspect-ratio: 21/9) {
  #projects-main .project-item-line-1 {
    font-size: 0.5vw !important;
  }
}

@media (max-width: 812px) {
  #projects-main .project-item {
    grid-column: span 6 / span 6 !important;
    margin-top: 0 !important;
    margin-bottom: 1em !important;
  }

  #projects-main .project-list {
    margin-top: 0 !important;
  }

  #projects-main .project-item-line-1 {
    font-size: 2.2vw !important;
  }
}

.project-item-main .project-item-free-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 6px 12px;
  border-radius: 8px;
  background-color: #fff;
  color: #1a2ffb;
  font-family: var(--vech-font-ui);
  font-size: var(--vech-text-xs);
  font-weight: var(--vech-fw-medium);
  line-height: 1;
  letter-spacing: var(--vech-tracking-wide);
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(10, 12, 20, 0.12);
  opacity: 0;
  transition: opacity 0.35s ease;
}

@media (max-width: 812px) {
  .project-item-main .project-item-free-tag {
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    font-size: 0.6875rem;
  }
}

#projects-main-title-top {
  margin-top: calc(var(--vh, 1vh) * 10) !important;
  margin-bottom: 2em !important;
  line-height: 1.05 !important;
}

#projects-main-title-wrapper {
  left: 0 !important;
}

#projects-main-title {
  left: 0 !important;
}

#projects-main-title {
  line-height: 1.05 !important;
}

/* 引擎初始化前：标题与 footer 子元素默认不可见，避免动画开始前闪现 */
html.is-projects-listing #projects #projects-main-title,
html.is-projects-listing #projects #projects-main-title-project-number,
html.is-projects-listing #projects #projects-main-title-project-arrow,
html.is-projects-listing #projects .project-item-footer .project-item-line-1,
html.is-projects-listing #projects .project-item-footer .project-item-line-2,
html.is-projects-listing #projects .project-item-footer .project-item-line-2-icon,
html.is-projects-listing #projects .project-item-footer .project-item-line-2-inner-list,
html.is-projects-listing #projects .project-item-main .project-item-free-tag {
  opacity: 0;
}