/* =========================================================================
   下载页（modern 风格）
   -------------------------------------------------------------------------
   复用 glass.css 的变量与材质类；这里只定义下载页自己的版式：
   页头卡片 + 资源卡网格 + 说明。卡片本身就是玻璃件（.glass--fusion .js-glass），
   由 WebGL 引擎接管，和主站一致。
   ========================================================================= */

main#main {
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding: 0 clamp(18px, 3vw, 34px);
}

/* ---------- 入场动画 ----------
   ⚠ 两个坑：
   1) 位移动画要放在【非玻璃】外层 .dl-item —— 玻璃引擎每帧往 .js-glass 写内联
      transform，会覆盖 CSS 的 translateY；
   2) 首页那层 .intro 幕布约 1.03s 才完全淡出，卡片若在这之前动完，等于没动画。
      所以延迟从 0.95s 起，正好在幕布散开时一块块升起。 */
.dl-item {
  /* backwards：动画只在延迟期占位，结束后交还给元素自身样式，
     这样 hover 的 translateY 才不会被动画的终帧压住 */
  animation: dlRise .78s cubic-bezier(.22, .8, .28, 1) backwards;
  transition: transform .45s cubic-bezier(.22, .8, .28, 1);
  will-change: transform;
}
/* 与自我介绍页同款的悬浮感：整块轻轻抬起（玻璃本身的缩放/边角收紧由引擎做） */
.dl-item:hover { transform: translateY(-6px); }
@keyframes dlRise {
  from { opacity: 0; transform: translateY(26px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.dl-hero .dl-item { animation-delay: .95s; }
.dl-grid .dl-item:nth-child(1) { animation-delay: 1.02s; }
.dl-grid .dl-item:nth-child(2) { animation-delay: 1.10s; }
.dl-grid .dl-item:nth-child(3) { animation-delay: 1.18s; }
.dl-grid .dl-item:nth-child(4) { animation-delay: 1.26s; }
@media (prefers-reduced-motion: reduce) {
  .dl-item { animation: none; }
}

/* ---------- 卡片材质 ----------
   下载页用的是初始版材质（modern/assets/orig/glass.css + webgl-glass.js），
   卡片类名和主站一致（glass--fusion / glass--liquid + js-glass），
   圆角/内边距在这里按网格微调，材质参数不覆盖。 */

/* ---------- 入场幕布（初始版 glass.css 里没有，补在这里） ---------- */
.intro {
  position: fixed; inset: 0;
  z-index: 300;
  display: grid; place-items: center;
  background: #05070f;
  pointer-events: none;
  animation: introFade .85s cubic-bezier(.4, 0, .2, 1) .18s both;
}
.intro__bar {
  display: block;
  width: min(180px, 34vw); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: scaleX(0);
  animation: introBar .9s cubic-bezier(.3, .7, .3, 1) .1s both;
}
@keyframes introBar {
  0%   { transform: scaleX(0); opacity: 0; }
  35%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes introFade { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }

/* ---------- 页头 ---------- */
.dl-hero { padding: clamp(26px, 5vw, 52px) 0 0; }
.dl-hero__card {
  padding: clamp(24px, 3.4vw, 44px);
  border-radius: var(--r-xl);
}
.dl-kicker {
  margin: 0 0 .5em;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .34em;
  color: var(--accent);
  opacity: .85;
}
.dl-title {
  margin: 0 0 .35em;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  line-height: 1.15;
}
.dl-sub {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(.88rem, 1.1vw, .98rem);
  line-height: 1.75;
  color: var(--ink-dim);
}
.dl-who {
  margin: .9em 0 0;
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--ink-mute);
  min-height: 1.1em;
}

/* ---------- 资源网格 ---------- */
.dl-list { padding: clamp(18px, 3vw, 30px) 0 clamp(30px, 5vw, 60px); }
.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: start;            /* 按内容高度排，不硬拉齐 */
}
@media (max-width: 760px) {
  .dl-grid { grid-template-columns: 1fr; }
}
.dl-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: auto;                  /* 文字少时不留大片空白 */
  padding: clamp(20px, 2.6vw, 30px);
  border-radius: var(--r-lg);
}
.dl-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.dl-card__name {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.dl-card__desc {
  margin: 0;
  font-size: .84rem;
  line-height: 1.7;
  color: var(--ink-dim);
}
.dl-card__meta {
  display: flex;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .74rem;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}
.dl-card__meta b {
  display: block;
  margin-bottom: 2px;
  font-size: .6rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--ink-mute);
  opacity: .75;
}
/* 下载按钮直接用主站的 .btn .btn--ghost .btn--block .magnetic（见 HTML），
   这里只覆盖 block 的 margin-top:auto —— 不要让按钮被推到卡片底部 */
.dl-btn { width: 100%; margin-top: 4px; }

/* 导航当前项：和主站 hover 同一条渐变下划线 */
.nav a.is-active { color: var(--ink); }
.nav a.is-active::after { width: 58%; }

/* 分类小标签：对齐主站 .chip 的观感（淡玻璃底 + 极淡描边） */
.dl-card__tag {
  flex: none;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-tint);
  font-size: .68rem;
  letter-spacing: .1em;
  color: var(--ink-dim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.dl-note {
  margin: 22px 0 0;
  font-size: .76rem;
  line-height: 1.8;
  color: var(--ink-mute);
}

/* 页脚回链 */
.footer__hint a { color: var(--ink-dim); text-decoration: none; }
.footer__hint a:hover { color: #fff; }

@media (max-width: 720px) {
  .dl-grid { grid-template-columns: 1fr; }
  .dl-card__meta { gap: 14px; }
}