*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  font-family:'Inter',system-ui,sans-serif;
  color:#2c2c35;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:#f8f7f5
}
/* ═══ 统一侧边栏覆盖层 ═══ 所有页面共用相同的左右灰色边线 */
body::before,body::after{
  content:'';position:fixed;top:0;bottom:0;
  z-index:998;pointer-events:none;
  background:#b7b5b1;min-width:20px
}
body::before{left:0;width:calc(51 / 1920 * 100vw)}
body::after{right:0;width:calc(40 / 1920 * 100vw)}

/* Nav */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:0 40px;height:72px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(248,247,245,.75);
  backdrop-filter:blur(16px) saturate(1.1);
  border-bottom:1px solid rgba(0,0,0,.06)
}
.nav.scrolled{background:rgba(248,247,245,.92)}
.nav-logo{font-weight:700;font-size:1.2rem;color:#2c2c35;text-decoration:none}
.nav-logo span{color:#7c5cfc}
.nav-links{display:flex;gap:8px;list-style:none}
.nav-links a{
  color:#5a5a6e;text-decoration:none;font-size:.9rem;
  padding:8px 16px;border-radius:8px;transition:.3s
}
.nav-links a:hover,.nav-links a.active{color:#7c5cfc;background:rgba(124,92,252,.08)}

/* ═══ 封面 ═══ 普通滚动，无 sticky ═══
    封面图自身两侧有暗色边/过渡区，
    用 cover::before/after 遮罩盖住，灰线完全由 body 覆盖层提供 */
.cover{
  position:relative;width:100%;height:100vh;min-height:700px;
  display:flex;align-items:center;justify-content:center;
  background:#f8f7f5
}
/* 遮罩层：盖住封面图片自身的灰边，z-index 在 cover-bg 之上、侧边栏覆盖层之下 */
.cover::before,.cover::after{
  content:'';position:absolute;top:0;
  width:calc(51 / 1920 * 100vw);height:100%;
  background:#f8f7f5;z-index:1;pointer-events:none
}
.cover::before{left:0}
.cover::after{right:0;width:calc(40 / 1920 * 100vw)}
.cover-bg{
  position:absolute;top:0;left:0;width:100%;height:100%;
  background:url(../images/cover-page.png) center top / 100% auto no-repeat;
}
.cover-content{
  position:relative;z-index:2;text-align:center;
  padding:100px 40px;max-width:700px
}
.cover-signature{margin-bottom:28px}
.cover-signature-img{width:280px;max-width:75vw;height:auto;display:block;margin:0 auto}
.cover-content p{
  font-size:clamp(.95rem,1.8vw,1.15rem);color:#5a5a6e;
  margin-bottom:36px;text-shadow:0 1px 4px rgba(255,255,255,.3)
}

/* ═══ 内页 ═══ */
.page{max-width:1200px;margin:0 auto;padding:50px}
.page-heading{
  font-size:clamp(1.6rem,3.5vw,2.4rem);font-weight:700;
  letter-spacing:-.02em;margin-bottom:12px
}
.page-subtitle{color:#8a8aa0;font-size:.95rem;margin-bottom:40px}
#about .page-content{margin-bottom:0}
#about .page-content:last-child{margin-bottom:20px}
.page-content{margin-bottom:20px;overflow:hidden}
.page-image{width:calc(100% + 6%);max-width:none;margin-left:-3%;height:auto;display:block;border-radius:4px}

/* 分类卡片 */
.category-group{margin-bottom:40px}
.work-group{
  position:relative;
  padding:28px;
  border-radius:28px;
  background:linear-gradient(180deg,rgba(255,255,255,.46),rgba(255,255,255,.22));
  border:1px solid rgba(255,255,255,.38);
  backdrop-filter:blur(26px) saturate(1.35);
  -webkit-backdrop-filter:blur(26px) saturate(1.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(255,255,255,.18),
    0 18px 46px rgba(126,110,91,.14);
  overflow:hidden;
}
.work-group::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 18% 16%,rgba(255,255,255,.52),transparent 26%),
    radial-gradient(circle at 82% 20%,rgba(255,255,255,.28),transparent 24%),
    linear-gradient(180deg,rgba(255,255,255,.18),transparent 42%);
  pointer-events:none;
}
.work-group::after{
  content:'';
  position:absolute;
  left:22px;right:22px;top:0;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.86),transparent);
  pointer-events:none;
}
.work-group .group-heading,
.work-group .category-grid{
  position:relative;
  z-index:1;
}
.group-heading{margin-bottom:28px}
.group-kicker{font-size:.75rem;font-weight:600;color:#7c5cfc;letter-spacing:2px;text-transform:uppercase}
.group-heading h3{font-size:1.3rem;font-weight:700;margin-bottom:6px}
.group-heading p{color:#8a8aa0;font-size:.9rem}
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.card{
  position:relative;background:rgba(255,255,255,.55);
  backdrop-filter:blur(10px);border-radius:14px;padding:32px;
  border:1px solid rgba(0,0,0,.06);transition:.4s;
  cursor:pointer;text-decoration:none;display:block;color:inherit
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,#7c5cfc,#9b7fff);
  transform:scaleX(0);transform-origin:left;transition:.4s
}
.card:hover{transform:translateY(-4px)}
.card:hover::before{transform:scaleX(1)}
.card-icon{font-size:2.4rem;margin-bottom:18px;display:block}
.card h3{font-size:1.2rem;font-weight:600;margin-bottom:8px}
.card p{color:#8a8aa0;font-size:.9rem;line-height:1.6}
.card-count{
  display:inline-block;margin-top:14px;padding:4px 12px;
  border-radius:100px;background:rgba(124,92,252,.1);color:#7c5cfc;font-size:.8rem;font-weight:500
}

.work-group .card{
  background:
    linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.3));
  border:1px solid rgba(255,255,255,.46);
  backdrop-filter:blur(22px) saturate(1.28);
  -webkit-backdrop-filter:blur(22px) saturate(1.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 12px 30px rgba(126,110,91,.1);
}
.work-group .card::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top left,rgba(255,255,255,.34),transparent 34%),
    linear-gradient(180deg,rgba(255,255,255,.16),transparent 40%);
  pointer-events:none;
}
.work-group .card:hover{
  transform:translateY(-6px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(255,255,255,.16),
    0 18px 38px rgba(126,110,91,.16);
}
.work-group .card-count{
  background:rgba(255,255,255,.56);
  border:1px solid rgba(255,255,255,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}

/* 按钮 */
.btn{
  display:inline-flex;gap:8px;padding:14px 32px;border-radius:10px;
  font-size:.95rem;font-weight:600;text-decoration:none;
  transition:.4s;border:none;font-family:inherit;cursor:pointer
}
.btn-primary{background:#7c5cfc;color:#fff;box-shadow:0 4px 20px rgba(124,92,252,.25)}
.btn-primary:hover{background:#9b7fff;transform:translateY(-2px)}

/* 图片按钮 — 替换紫色按钮为自定义图片 */
.btn-image-link{display:inline-block;text-decoration:none;cursor:pointer}
.btn-image{display:block;width:380px;height:auto;transition:transform .35s,box-shadow .35s}
.btn-image:hover{transform:translateY(-2px)}

/* ═══ 封尾 ═══ 完整展示封尾图，不裁切签名/信封 */
.closing{position:relative;width:100%;height:100vh;min-height:700px;background:#f8f7f5}
.closing-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../images/closing/closing-page.png) center top / 100% auto no-repeat}

/* Footer */
.footer{text-align:center;padding:20px 40px 36px;color:#8a8aa0;font-size:.82rem}
.footer-links{display:flex;justify-content:center;gap:20px;margin-bottom:10px}
.footer-links a{color:#8a8aa0;font-size:1.2rem;text-decoration:none;transition:.3s}
.footer-links a:hover{color:#7c5cfc}

/* 通用 */
.scroll-progress{position:fixed;top:72px;left:0;height:2px;background:linear-gradient(90deg,#7c5cfc,#9b7fff);z-index:999;transition:width .1s}
.reveal{opacity:0;transform:translateY(30px);transition:opacity .7s,transform .7s}
.reveal.visible{opacity:1;transform:translateY(0)}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.cover-signature,.cover-content p,.cover-actions{opacity:0;animation:fadeUp .8s .1s forwards}
.cover-content p{animation-delay:.3s}
.cover-actions{animation-delay:.45s}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.85);
  backdrop-filter:blur(10px);z-index:2000;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:.3s;padding:40px
}
.lightbox.active{opacity:1;pointer-events:all}
.lightbox img{max-width:90vw;max-height:85vh;object-fit:contain;border-radius:8px}

@media(max-width:900px){.category-grid{grid-template-columns:1fr}}
@media(max-width:1024px){
  /* 窄屏：封面改用 cover 填满视口高度（避免 100% auto 留大量空隙） */
  .cover-bg{background:url(../images/cover-page.png) center / cover no-repeat}
  /* 封尾保留 100% auto 完整展示文字签名；缩小高度去掉多余空白 */
  .closing-bg{background:url(../images/closing/closing-page.png) center top / 100% auto no-repeat}
  .closing{height:0;min-height:0;padding-bottom:56.25%;background:#f8f7f5}
}
@media(max-width:640px){
  .nav{padding:0 20px}
  .nav-links a{font-size:.8rem;padding:6px 10px}
  .cover{
    height:auto;
    min-height:55vh;
    aspect-ratio:auto;
    align-items:center;
  }
  .cover-bg{
    background:url(../images/cover-page.png) center / cover no-repeat;
  }
  .cover-content{
    padding:40px 16px 12px;
    max-width:268px;
  }
  .cover-signature{margin-bottom:8px}
  .cover-signature-img{width:104px;max-width:42vw}
  .cover-content p{
    font-size:.68rem;
    line-height:1.32;
    margin-bottom:10px;
  }
  .cover .btn{
    padding:8px 16px;
    font-size:.72rem;
  }
  .btn-image{width:200px}
  #about.page{
    padding:0;
    max-width:none;
    margin:0;
    background:#fff;
    position:relative;
    top:-1px;
  }
  #about .page-content{
    margin-bottom:0;
    background:#fff;
    line-height:0;
    font-size:0;
  }
  #about .page-content:last-child{
    margin-bottom:0;
  }
  #about .page-image{
    width:100%;
    max-width:none;
    margin-left:0;
    border-radius:0;
    display:block;
    background:#fff;
  }
  .page{padding:24px 20px}
  .work-group{padding:20px;border-radius:22px}
  .footer{padding:16px 20px 28px}
}