/* 基础 */
* { padding: 0; box-sizing: border-box; cursor: url('assets/meta/cursor.png') 16 16, auto; }
img { max-width: 100%; max-height: 100%; }

html { font-size: calc(22px + 0.3vw); scroll-behavior: smooth; }

@font-face{
  font-family: 'Planar';
  src: url('assets/fonts/GTPlanar-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: 'Planar';
  src: url('assets/fonts/GTPlanar-Regular.otf') format('opentype');
  font-weight: 400 450;
  font-style: normal;
  font-display: swap;
}

body { margin: 20px; font-family: "Planar", sans-serif; font-weight: 300; line-height: 1.3em; }

p, h1, h2 { font-size:14pt; line-height:1.3em; }
h1, h2 { color:#000; font-weight:450; }
h1:hover { font-size:40pt; color:blue; transition:.2s ease-in-out; cursor:url('assets/meta/cursor_hover.png') 16 16, auto; }
.cn-name {font-family: "PingFang SC", sans-serif; font-weight: 400; letter-spacing: 0.02em; font-size: 0.95em;}


a { color:#000; text-decoration:none; font-weight:300; transition: color .4s ease, font-weight .4s ease; }
a:hover { color:blue; font-weight:450; cursor:url('assets/meta/cursor_hover.png') 16 16, auto; }

/* ——— 作品描述区（在 site-header 内，绝对定位固定起始位置） ——— */
#description-area {
  position: absolute;
  left: 60%;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
  text-align: left;
  pointer-events: none;
  font-size: 10pt;
  line-height: 1.3em;
}
#description-area .description-copy {
  text-align: left;
  margin: 0;
}
#description-area .desc-title {
  font-size: 12pt;
  line-height: 1.4em;
}

/* ——— 顶栏：header flex 布局（与 index 一致） ——— */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 3em;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid #eaeaea;
}
.site-header .title {
  position: relative;
  width: 250px;
  height: 55px;
  flex-shrink: 0;
}
.site-header .title img {
  width: 250px;
  height: auto;
  position: absolute;
  top: 0;
  display: block;
  transition: .2s ease-in-out;
}
.site-header .title .hover { opacity: 0; }
.site-header .title:hover .hover { opacity: 1; cursor: url('assets/meta/cursor_hover.png') 16 16, auto; }
.site-header .title:hover .defalt { opacity: 0; }
.site-header .nav-links {
  display: flex;
  gap: 3em;
  font-size: 10pt;
  line-height: 1.3em;
  white-space: nowrap;
}
.site-header .nav-links a.active {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* 作品区 */
#container {
  width: min(1600px, 92vw);
  margin: 9em auto 7rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(480px, 1fr));
  gap: 80px 60px; /* 行、列间距 */
  z-index: 0;
}

/* 卡片：不再固定 px/em 尺寸，使用 aspect-ratio 保持正方形 */
.work {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;      /* 正方形卡片 */
  overflow: hidden;
  user-select: none;
  /* 重要：去掉 float 与外边距 */
}

/* 图片/视频覆盖卡片，contain 保证完整可见 */
.work img,
.work video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: .2s ease-in-out;
}

/* 其余 hover 效果保持 */
/* .work .gif, .not_available_work .gif, .tomato_work .gif { opacity: 0; }
.work:hover .gif { opacity: 1; cursor:url('assets/meta/cursor_hover.png') 16 16, auto; }
.work:hover .static { opacity: 0; } */

/* 仅带 .work--hover-cursor 的作品在悬停时显示 hover 光标 */
.work--hover-cursor:hover a,
.work--hover-cursor:hover video,
.work--hover-cursor:hover img {
  cursor: url('assets/meta/cursor_hover.png') 16 16, auto;
}

/* 响应式：平板与手机时的卡片最小宽度更小、间距更紧 */
@media (max-width: 1024px) {
  #container {
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 36px;
  }
  .site-header { gap: 2em; }
}
@media (max-width: 1280px) {
  #description-area { display: none; }
}
@media (max-width: 640px) {
  #container {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    margin: 7.5em auto 2rem;
  }
}

/* 悬浮描述（位置/字号在 #description-area 上方已与作品页一致） */

@media (prefers-reduced-motion: reduce) {
  .fork-container,
  .tomato-body,
  .tomato-head {
    animation: none;
  }
}


/* 响应式：手机端 */
@media (max-width: 768px) {
  body { margin: 20px; }
  .site-header {
    position: relative;
    flex-direction: column;
    height: auto;
    gap: 0.5em;
    padding: 20px;
    border-bottom: none;
    background: transparent;
  }
  .site-header .title { width: 100%; height: auto; }
  .site-header .title img { position: static; width: 100%; height: auto; }
  .site-header .title .hover {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: contain; object-position: left top;
  }
  .site-header .nav-links { gap: 1.5em; padding-top: 0; }
  .filters { display: none; }
  #description-area { display: none; }
  #container {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px;
    width: 100%;
    margin: 1em auto 2rem;
  }
  body::before, body::after { display: none; }
}

/* 番茄雨 */
#rain-container { position: fixed; top: -1vh; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; overflow: hidden; }
.raindrop { will-change: transform, opacity; transition: opacity .5s ease; }
.raindrop.fade-out { opacity: 0; }