/* ===== 主题变量：参考 Framer 风格（高对比 + 渐变强调色） ===== */
:root{
  --bg:#ffffff;            /* 背景 */
  --fg:#0b0b0f;            /* 正文文字 */
  --muted:#6b7280;         /* 次要文字 */
  --stroke:rgba(0,0,0,.08); /* 1px 边框 */

  /* 渐变强调色（紫→青） */
  --accent-start:#6E61FF;
  --accent-end:#00D4FF;
  --blue:#3b82f6; /* 回退用 */

  --radius:20px; /* 更圆润 */
  --shadow:0 12px 30px rgba(0,0,0,.07);
  --shadow-lg:0 24px 60px rgba(0,0,0,.10);
  --gap:clamp(.9rem, 2vw, 1.25rem);
  --container: 1120px;
  --card-h: clamp(260px, 34vw, 320px); /* 项目卡片统一高度 */
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0d0f12; --fg:#e6e6e6; --muted:#9aa3af; --stroke:rgba(255,255,255,.12);
    --shadow:0 12px 30px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.6);
  }
}

/* 手动主题覆盖：data-theme="light" | "dark" */
html[data-theme="light"]{
  --bg:#ffffff; --fg:#0b0b0f; --muted:#6b7280; --stroke:rgba(0,0,0,.08);
  --shadow:0 12px 30px rgba(0,0,0,.07); --shadow-lg:0 24px 60px rgba(0,0,0,.10);
}
html[data-theme="dark"]{
  --bg:#0d0f12; --fg:#e6e6e6; --muted:#9aa3af; --stroke:rgba(255,255,255,.12);
  --shadow:0 12px 30px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.6);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-size:clamp(15px,1.2vw,17px);line-height:1.65;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:var(--bg);color:var(--fg)}
img,svg{display:block;max-width:100%;height:auto}
a{text-decoration:none;color:inherit}
::selection{ background: color-mix(in oklab, var(--accent-start) 40%, transparent); color: var(--fg) }

.container{max-width:var(--container); margin-inline:auto; padding-inline: clamp(14px, 4vw, 24px)}
.section{padding-block: clamp(2.4rem, 6vw, 4rem); scroll-margin-top: 76px}
/* Section 标题与引导文字居中（不影响内部卡片布局） */
.section.container > h2{ text-align:center }
.section.container > p{ text-align:center; margin-inline:auto; max-width: 68ch }

/* ===== 头部（Header）：固定吸顶、半透明背景、渐变 Logo ===== */
.site-header{position:sticky; top:0; z-index:100;
  background: color-mix(in oklab, var(--bg) 92%, transparent);
  border-bottom:1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
}
.site-header .inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.7rem clamp(14px, 4vw, 24px)}
.logo{display:inline-flex; align-items:center}
.logo img{height: calc(22px * .7); width:auto; display:block}
.menu-btn{display:none; appearance:none; border:1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  border-radius:12px; padding:.5rem .8rem; background:transparent; color:inherit; cursor:pointer; }
.nav{display:flex; gap:.25rem; flex-wrap:wrap}
.nav a{padding:.5rem .8rem; border-radius:999px; opacity:.92; border:1px solid var(--stroke)}
.nav a:hover{background: color-mix(in oklab, var(--accent-start) 8%, transparent)}
.nav a.is-active{background: color-mix(in oklab, var(--accent-start) 10%, transparent); color: var(--fg); font-weight:600}
@media (max-width: 768px){
  .menu-btn{display:inline-block}
  .nav{position:fixed; inset:56px 12px auto 12px; display:none; flex-direction:column; gap:.25rem;
    padding:.5rem; background:var(--bg); border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius:12px; box-shadow:var(--shadow)}
  body.nav-open .nav{display:flex}
}

/* 桌面端导航水平居中：左右分别为 logo 与工具按钮，中间 nav 居中 */
@media (min-width: 769px){
  .site-header .inner{ display:flex }
  .nav{ margin-inline: auto }
}

/* 头部工具按钮（主题/语言） */
.tools{display:flex; gap:.4rem; align-items:center; margin-left:.5rem}
.tool-btn{
  appearance:none; border:1px solid var(--stroke); background:transparent; color:inherit;
  padding:.45rem .6rem; border-radius:10px; cursor:pointer; line-height:1; display:inline-flex; align-items:center; justify-content:center;
}
.tool-btn:hover{ background: color-mix(in oklab, var(--accent-start) 8%, transparent) }
.tool-btn[data-icon]{ width:36px; height:36px; padding:0; font-size:14px }

/* ===== 首页 Hero：大标题 + 渐变强调按钮 ===== */
.home .hero{padding-block: clamp(3rem, 12vw, 6rem); text-align:center}
.hero h1{font-size: clamp(2rem, 6vw, 3.4rem); margin:.4rem 0 .5rem; font-weight:900; letter-spacing:-.02em;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead{max-width: 68ch; margin-inline:auto; color:var(--muted)}
.cta{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:.8rem}
.btn{display:inline-block; padding:.78rem 1.15rem; border-radius:999px; color:#fff;
  background: linear-gradient(90deg, var(--accent-start), var(--accent-end));
  box-shadow: 0 8px 24px color-mix(in oklab, var(--accent-start) 20%, transparent);
  transition: transform .16s ease, box-shadow .16s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg) }
.btn.outline{background:transparent; color:var(--fg); border:1px solid var(--stroke)}

/* ===== 项目卡片：大圆角 + 细边 + 阴影，Framer 风 ===== */
.project-card{
  margin-bottom: var(--gap);
  background:var(--bg);
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: var(--card-h); /* 统一高度 */
}
.project-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklab, var(--accent-start) 20%, var(--stroke)) }
.project-link{display:grid; text-decoration:none; height:100%; grid-template-rows: 1fr auto}
.project-media{ overflow:hidden }
.project-media img{ width:100%; height:100%; object-fit: cover; transition: transform .35s ease }
.project-card:hover .project-media img{ transform: scale(1.02) }
.project-card:hover .project-info h3{ color: var(--accent-start) }
.project-info{ padding: 1rem 1.1rem 1.15rem; overflow:hidden }
.project-info h3{ margin:.2rem 0 .35rem; font-size: clamp(1.05rem, 1.3vw, 1.25rem);
  display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden }
.project-info p{ margin:0 0 .5rem; color: var(--muted);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.tags{ display:flex; gap:.4rem; flex-wrap:wrap; list-style:none; padding:0; margin:0 }
.tags li{ padding:.2rem .55rem; border:1px solid var(--stroke); color:var(--muted); border-radius:999px; font-size:.88rem }

/* 桌面端（>=1024px）：左图右文的一行一卡 */
@media (min-width: 1024px){
  #projects .project-card{ margin-bottom: calc(var(--gap) * 1.2) }
  .project-link{ grid-template-columns: 1.1fr 1fr; align-items: stretch; grid-template-rows: unset }
  .project-media img{ height: 100%; object-fit: cover }
  .project-info{ display:flex; flex-direction:column; justify-content:center; padding: 1.25rem 1.4rem }
}

/* ===== 插图画廊（Gallery）：方形网格 + 灰度悬停还原 ===== */

/* Footer */
.site-footer{padding:2rem clamp(14px,4vw,24px); border-top:1px solid color-mix(in oklab, var(--fg) 10%, transparent); color:var(--muted); text-align:center}


/* ===== Fix project detail page layout ===== */
.article{
  max-width: 920px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(16px, 4vw, 28px);
}
.article header{ margin-bottom: 1rem; }
.article h1{ margin: .2rem 0 .6rem }
.article .lead{ color: var(--muted); }
.article .meta{ display:flex; gap:.6rem; flex-wrap:wrap; color: var(--muted) }
.article img{ width: 100%; height: auto; border-radius: 14px;
  border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); margin: .5rem 0 1rem; }

/* 网格：默认四列，紧凑间距 */
.gallery-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px }
/* 单个方形卡片：保持 1:1 比例，溢出裁切 */
.gallery-item{
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  aspect-ratio: 1 / 1; /* 正方形卡片 */
  cursor: zoom-in;
}
/* 小图：灰度 + 轻对比，悬停还原色彩 */
.gallery-item img{
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(100%) contrast(1.05);
  transition: transform .2s ease, filter .2s ease;
  display: block;
}
.gallery-item:hover img{ filter: none; transform: scale(1.03) }

/* 响应式列数：1024 下 3 列，768 下 2 列，520 下单列 */
@media (max-width: 1024px){ .gallery-grid{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 768px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 520px){ .gallery-grid{ grid-template-columns: 1fr } }

/* ===== 灯箱（Lightbox）遮罩与内容 ===== */
.lightbox{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.9);
  display: none;
  align-items: center; justify-content: center;
  z-index: 999;
  /* 阻止滚动串联，避免滚到页面底层 */
  overscroll-behavior: contain;
}
.lightbox.open{ display: flex; }
.lightbox__img-wrap{
  max-width: min(92vw, 1400px);
  max-height: 88vh;
  position: relative;
}
.lightbox.open, .lightbox.open .lightbox__img-wrap{
  /* 禁用浏览器默认滚动/回弹，配合 JS 自己处理手势 */
  touch-action: none;
}
.lightbox__img{
  max-width: 100%;
  max-height: 88vh;
  display:block;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  will-change: transform, opacity;
}
.lightbox__close,
.lightbox__prev,
.lightbox__next{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  width: 56px; height: 56px; padding: 0;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  display:flex; align-items:center; justify-content:center;
  font-size: 28px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.lightbox__close{ display:none }
.lightbox__prev{ left: -2.5rem; }
.lightbox__next{ right: -2.5rem; }
@media (max-width: 740px){
  .lightbox__prev{ left: -.5rem; }
  .lightbox__next{ right: -.5rem; }
}

/* 移动端隐藏灯箱前后按钮，改为手势切换 */
@media (max-width: 768px){
  .lightbox__prev,
  .lightbox__next{ display: none }
}

/* 页面滚动锁：灯箱打开时应用到 html/body，避免退出后残留限制 */
html.no-scroll, body.no-scroll{ overflow: hidden; height: 100%; }

/* AOS fade-up 兜底样式（CDN 加载失败时也能看到动画） */
[data-aos="fade-up"]{ opacity: 0; transform: translate3d(0, 16px, 0); transition-property: transform, opacity; }
[data-aos].aos-animate{ opacity: 1; transform: translate3d(0, 0, 0); transition-duration: .4s; transition-timing-function: ease-out; }

/* 按钮禁用态（如需要时可用） */
.lightbox [data-disabled="true"]{ opacity:.4; pointer-events:none }

/* 悬停/聚焦：按钮背景稍增强 */
.lightbox__close:hover,
.lightbox__prev:hover,
.lightbox__next:hover{
  background: rgba(255,255,255,.22);
}

/* 文章段落间距微调 */
.prose p{ margin: 0 0 1rem; }

/* 项目详情页底部导航对齐 */
.proj-nav{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  gap:1rem;
  margin-top:1.25rem;
}
.proj-nav .prev{ justify-self: start; }
.proj-nav .home{ justify-self: center; font-weight:700; padding:.4rem .8rem; border-radius:999px; border:1px solid var(--stroke); }
.proj-nav .next{ justify-self: end; }
.proj-nav a:hover{ color: var(--accent-start) }
.proj-nav .home:hover{ border-color: color-mix(in oklab, var(--accent-start) 40%, var(--stroke)) }

/* 可点击元素统一手形指针 */
a, button, .btn, .project-link{ cursor: pointer }

/* ===== 入场动画（轻微） ===== */
@keyframes fadeUp{ from{opacity:0; transform: translateY(8px)} to{opacity:1; transform:none} }
.project-card{ animation: fadeUp .5s ease both }
.gallery-item{ animation: fadeUp .5s ease both }