:root{
  --bg-0:#0b0f14; --bg-1:#0e141b; --fg-0:#e6eef7; --fg-1:#9aa8b8;
  --neon-cyan:#7cf4ff; --neon-pink:#ff4df2; --neon-lime:#aaff6c;

  --header-h: 64px;                  /* JS 会覆盖为真实高度 */
  --nav-gap: 18px;                   /* 右侧模块间距 */
  --brand-size: clamp(18px,2.2vw,22px);
  --brand-weight: 700;
  --hover-shadow: 0 0 14px rgba(124,244,255,.55), 0 0 28px rgba(255,77,242,.35);
}
*{box-sizing:border-box}
html,body{
  height:100%; background:var(--bg-0); color:var(--fg-0); margin:0; padding:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Helvetica Neue",Arial;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
.container{width:min(1120px, 92%); margin-inline:auto}

/* 毛玻璃卡片 */
.glass{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius:18px
}

/* 头像与标题的间距 = 15px */
.nav-left{ gap:15px !important; }

/* 圆形头像（强制等宽高与圆角裁切） */
.avatar-link{
  width: var(--avatar-size, 44px);
  height: var(--avatar-size, 44px);
  border-radius: 50%;
  overflow: hidden;
}

/* 保证图片撑满并居中裁切为圆形 */
.avatar-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 50%;
}

/* 霓虹标题（大标题用） */
.title-glow{
  font-size:clamp(40px,9vw,90px); line-height:1.1;
  text-shadow:0 0 20px var(--neon-pink), 0 0 36px var(--neon-cyan)
}
.title-glow--sm{ text-shadow:0 0 14px var(--neon-cyan) }

/* 按钮 */
.btn{
  display:inline-block; padding:.75rem 1.1rem; border-radius:14px;
  border:1px solid rgba(255,255,255,.16); transition:220ms cubic-bezier(.2,.8,.2,1)
}
.btn--neon{ box-shadow:0 0 0 0 var(--neon-pink) }
.btn--neon:hover{ box-shadow:0 0 20px 2px var(--neon-pink); transform:translateY(-2px) }

.section-hd h2{ margin:0 0 .6rem 0 }

/* ============ 顶部首屏：header+hero 的包裹容器 ============ */
.masthead{
  position: relative;
  min-height: 100svh;     /* 整块 1 屏高 */
  overflow: clip;         /* 防止画布溢出影响下一屏 */
}

/* 顶部导航条（透明吸顶 + 轻微内发光边） */
.site-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(10,14,20,0.15);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.05), 0 8px 28px rgba(0,0,0,.25);
}

/* 导航容器：左右分栏 */
.nav{
  display:flex; align-items:center; gap: var(--nav-gap);
  padding:.7rem 0;
}
.nav-left{ display:flex; align-items:center; }
.nav-right{ margin-left:auto; display:flex; align-items:center; gap: var(--nav-gap); }

/* 品牌标题（左侧，渐变 + 霓虹） */
.brand{
  display:inline-block; font-size: var(--brand-size); font-weight: var(--brand-weight);
  letter-spacing:.3px; line-height:1; white-space:nowrap;
  position: relative;
}
.brand--glow{
  color:#eaf7ff;
  text-shadow:
    0 0 4px rgba(124,244,255,.7),
    0 0 10px rgba(124,244,255,.6),
    0 0 22px rgba(255,77,242,.35);
}
.brand--glow:hover{ filter: brightness(1.06); text-shadow: var(--hover-shadow); }

/* 主导航菜单（右对齐） */
.nav .menu{ display:flex; gap:18px; list-style:none; margin:0; padding:0 }
.menu--glow > li > a{
  position:relative; display:inline-block; padding:.25rem .1rem;
  transition: color .25s ease, transform .2s ease;
  text-shadow:0 0 4px rgba(0,0,0,.5);
}
.menu--glow > li > a::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px;
  background: linear-gradient(90deg, rgba(124,244,255,.0), rgba(124,244,255,.9), rgba(255,77,242,.9), rgba(124,244,255,.0));
  transform: scaleX(0); transform-origin: 50% 50%;
  transition: transform .28s ease;
  border-radius:2px; box-shadow:0 0 12px rgba(124,244,255,.6);
}
.menu--glow > li > a:hover{
  color: var(--neon-cyan);
  text-shadow: 0 0 6px rgba(124,244,255,.7);
}
.menu--glow > li > a:hover::after,
.menu--glow > li.current-menu-item > a::after,
.menu--glow > li.current-menu-ancestor > a::after{ transform: scaleX(1); }
.menu--glow > li.current-menu-item > a,
.menu--glow > li.current-menu-ancestor > a{ color: var(--neon-cyan); }

/* 社交菜单（沿用原有圆形风格） */
.social__list{ display:flex; gap:14px; list-style:none; margin:0; padding:0 }
.social__list a{
  display:grid; place-items:center; width:40px; height:40px; border-radius:999px;
  border:1px solid rgba(255,255,255,.14); transition: box-shadow .25s ease, transform .2s ease;
}
.social__list a:hover{ box-shadow:0 0 18px var(--neon-cyan); transform: translateY(-1px); }

/* 透明背景下的文案增强 */
.nav .menu a, .brand, .social__list a { transition: color .25s ease; }

/* 首屏 Hero（高度＝1 屏 - header 实高） */
.hero{
  position:relative; display:grid; place-items:center; overflow:hidden;
  min-height:calc(100svh - var(--header-h)); z-index:10;
}

/* 画布：放在 masthead 内，覆盖 header+hero 整块 */
#neon-blobs{
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; filter: blur(50px) contrast(70%) saturate(90%); will-change: filter; pointer-events: none;
}

.hero__inner{ position:relative; z-index:10; text-align:center; padding:8svh 0 }
.hero__cta{ display:flex; gap:12px; justify-content:center; margin-top:16px }

/* 第二模块及以后区域 */
.hero + section{ 
  margin-top: 0 !important; position: relative; z-index: 20; background: var(--bg-0); padding-top: 40px;
}

/* 页脚 */
.site-footer{ margin-top:48px; padding:24px 0; border-top:1px solid rgba(255,255,255,.08) }

/* 横向相册条 */
.h-scroll{ display:flex; gap:18px; overflow:auto; padding:6px; cursor:grab; }
.h-scroll:active{ cursor:grabbing; }
.snaps{ scroll-snap-type:x mandatory }
.snap{ scroll-snap-align:start; flex:0 0 78%; max-width:420px }
@media (min-width:960px){ .snap{ flex-basis:360px } }

/* 滚动条样式（webkit） */
.h-scroll::-webkit-scrollbar{ height:8px }
.h-scroll::-webkit-scrollbar-track{ background:rgba(255,255,255,.04); border-radius:8px }
.h-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:8px }
.h-scroll:hover::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.32) }

/* 绘画网格 */
.grid-paintings{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)) }

/* Lightbox */
.lb-overlay{ position:fixed; inset:0; background:rgba(0,0,0,.6); opacity:0; visibility:hidden; transition:220ms; z-index:1000 }
.lb-overlay.open{ opacity:1; visibility:visible }
.lb-img{ position:absolute; max-width:90vw; max-height:88vh; inset:0; margin:auto; border-radius:12px; box-shadow:0 10px 40px rgba(0,0,0,.5) }
.lb-close{ position:absolute; top:16px; right:20px; font-size:28px; background:none; color:#fff; border:none; cursor:pointer }

/* 视口进入动效 */
.io-fade{ opacity:0; transform:translateY(12px); transition:600ms }
.io-fade.in{ opacity:1; transform:none }
.io-slide{ opacity:0; transform:translateX(24px); transition:600ms }
.io-slide.in{ opacity:1; transform:none }

/* v1.2：稳定滚动条槽位，减少 CLS */
html{ scrollbar-gutter: stable both-edges; }

@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}

/* 响应式：收紧右侧内容，保证对齐 */
@media (max-width: 960px){
  :root{ --nav-gap: 14px; }
  .social{ display:none; }
}
@media (max-width: 560px){
  :root{ --nav-gap: 12px; }
  .menu--glow{ gap:14px; }
}