/* 首页与全部项目页。配色基于 tokens.css；--forest 为深绿大格专用。 */
:root { --forest: #253f33; --forest-ink: #f4f2ec; }
[data-theme="dark"] { --forest: #1d2e25; }

body {
  /* tokens.css 把 body 设成了固定高度且不可滚动（给工作台类页面用）；首页与项目页内容比屏幕长，必须放开 */
  height: auto;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  line-height: 1.6;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
#app { max-width: 1120px; margin: 0 auto; padding: 24px 20px 56px; }

.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 168px;
  gap: 12px;
}
.cell {
  position: relative;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--card-2);
  cursor: pointer;
  /* 封面与暗角垫在文字之下（z-index:-1），文字保持普通流，这样标题链接的 ::after 才能铺满整张卡片 */
  isolation: isolate;
  transition: transform .25s var(--ease), border-color .25s var(--ease);
}
.cell:hover { transform: translateY(-2px); border-color: var(--clay-line); }
.cell:focus-within { outline: 2px solid var(--clay); outline-offset: 2px; }
/* 桌面端：每个格子按模板里的列、行、宽、高放置（由 home.js 写入 --c --r --w --h） */
.grid-irregular .cell { grid-column: var(--c) / span var(--w); grid-row: var(--r) / span var(--h); }
.cell-big { padding: 24px 26px; }

.tone-0 { background: color-mix(in srgb, var(--clay) 14%, var(--card)); }
.tone-1 { background: color-mix(in srgb, var(--forest) 16%, var(--card)); }
.tone-2 { background: var(--paper-2); }
.tone-3 { background: color-mix(in srgb, var(--clay) 28%, var(--paper)); }
.tone-4 { background: color-mix(in srgb, var(--forest) 28%, var(--card)); }
.cell-hero { background: var(--forest); color: var(--forest-ink); border-color: transparent; }
.cell-hero .cell-summary, .cell-hero .cell-meta { color: color-mix(in srgb, var(--forest-ink) 72%, transparent); }
.cell-hero .cell-tag { background: color-mix(in srgb, var(--forest-ink) 16%, transparent); color: var(--forest-ink); }

.cell-cover { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.has-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0) 58%), linear-gradient(to right, rgba(0, 0, 0, .42), rgba(0, 0, 0, 0) 55%); }
.has-cover { color: #fff; }
.has-cover .cell-tag { background: rgba(255, 255, 255, .2); color: #fff; }
.has-cover .cell-summary, .has-cover .cell-meta { color: rgba(255, 255, 255, .8); }

.cell-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cell-meta { font-size: 12px; letter-spacing: .04em; color: var(--ink-3); }
.cell-title { font-size: 17px; font-weight: 600; line-height: 1.3; }
.cell-big .cell-title { font-size: 26px; }
.cell-link { color: inherit; text-decoration: none; }
.cell-link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cell-link:focus-visible { outline: none; }
.cell-summary { font-size: 13px; color: var(--ink-2); max-width: 36em; }
.cell-tag {
  align-self: flex-start;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 6px;
  background: var(--clay-soft);
  color: var(--clay-deep);
  font-size: 12px;
}
.cell-aside {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  color: inherit;
  font-size: 13px;
  opacity: .85;
}
.cell-dot { position: absolute; top: 14px; right: 14px; z-index: 1; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }

/* “展开全部”：超过 7 项时出现，在原位向下展开其余项目 */
.more-toggle {
  display: block; width: 100%; margin-top: 12px; min-height: 44px; border: 1px dashed var(--line-2); border-radius: var(--r);
  background: transparent; color: var(--ink-2); font: inherit; font-size: 14px; cursor: pointer;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.more-toggle:hover { border-color: var(--clay-line); color: var(--ink); }
.more-toggle:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.more-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.more-wrap.open { grid-template-rows: 1fr; }
.more-inner { min-height: 0; overflow: hidden; }
.grid-more { padding-top: 12px; }

.legend { margin-top: 14px; color: var(--ink-3); font-size: 12px; }
.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--clay); }
.home-message { padding: 48px 0; text-align: center; color: var(--ink-2); }
.home-retry { margin-left: 10px; padding: 4px 12px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); cursor: pointer; font: inherit; }

noscript ul { max-width: 1120px; margin: 0 auto; padding: 24px 20px 56px 40px; line-height: 2; }
noscript a { color: var(--clay-deep); }

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .grid-irregular .cell { grid-column: auto; grid-row: auto; }
  .grid-irregular .cell-big, .grid-irregular .cell-2x1, .grid-irregular .cell-3x1, .grid-irregular .cell-4x1 { grid-column: span 2; }
  .grid-irregular .cell-big, .grid-irregular .cell-1x2 { grid-row: span 2; }
}
@media (max-width: 640px) {
  #app { padding: 16px 14px 40px; }
  .grid { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .cell { min-height: 132px; }
  .grid-irregular .cell, .grid-irregular .cell-big, .grid-irregular .cell-1x2, .grid-irregular .cell-2x1, .grid-irregular .cell-3x1, .grid-irregular .cell-4x1 { grid-column: auto; grid-row: auto; min-height: 132px; }
  .grid-irregular .cell-big { min-height: 220px; padding: 20px; }
  .grid-irregular .cell-1x2 { min-height: 168px; }
}
@media (prefers-reduced-motion: reduce) {
  .cell { transition: none; }
  .cell:hover { transform: none; }
  .more-wrap { transition: none; }
}

/* 悬停或点击预览：盖在封面之上、文字之下 */
.cell-preview { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.previewing { color: #fff; }
.previewing::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(0, 0, 0, .62), rgba(0, 0, 0, 0) 62%); }
.previewing .cell-summary, .previewing .cell-meta { color: rgba(255, 255, 255, .85); }
.cell-play { position: absolute; top: 10px; left: 12px; z-index: 2; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: #fff; font-size: 12px; cursor: pointer; }
.cell-play:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }

/* 项目介绍页 */
.project { max-width: 720px; margin: 0 auto; }
.project-cover { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r); margin-bottom: 18px; }
.project-title { font-size: 30px; line-height: 1.25; margin: 4px 0 8px; }
.project-summary { color: var(--ink-2); margin-bottom: 10px; }
.project-actions { display: flex; gap: 10px; margin: 18px 0 28px; }
.project-enter, .project-video {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 20px; border-radius: 999px;
  font-size: 15px; text-decoration: none; border: 1px solid var(--line-2); color: var(--ink);
}
.project-enter { background: var(--forest); color: var(--forest-ink); border-color: transparent; }
.project-enter:focus-visible, .project-video:focus-visible, .project-copy:focus-visible { outline: 2px solid var(--clay); outline-offset: 2px; }
.project-prompt h2, .project-more h2 { font-size: 18px; margin: 28px 0 10px; }
.project-prompt-text {
  max-height: 360px; overflow: auto; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, "Microsoft YaHei", monospace;
  white-space: pre-wrap; word-break: break-word;
}
.project-prompt-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.project-copy { padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
.project-copy-status { color: var(--ink-3); font-size: 13px; }
.project-more ul { padding-left: 20px; line-height: 2; }
.project-more a { color: var(--clay-deep); }

/* 点卡片时的放大转场：封面从卡片的位置放大到整个视口，再进入目标页 */
.zoom-veil { position: fixed; inset: 0; z-index: 200; overflow: hidden; background: var(--paper); pointer-events: none; }
.zoom-veil img { display: block; width: 100%; height: 100%; object-fit: cover; }