/* ============================================================
   光屿 · 个人作品集 — 主样式
   编辑式极简：大字排版 + 大量留白 + 珊瑚暖色点缀
   无外部字体/框架依赖，国内访问快
   ============================================================ */

:root {
  --bg: #FAF6F1;            /* 米白底 */
  --bg-soft: #F3EDE5;       /* 米白浅块 */
  --ink: #1E1A16;           /* 墨色 */
  --ink-60: rgba(30, 26, 22, .6);
  --ink-40: rgba(30, 26, 22, .4);
  --line: rgba(30, 26, 22, .12);
  --accent: #E4593B;        /* 珊瑚暖橙 */
  --accent-deep: #C74327;
  --accent-soft: rgba(228, 89, 59, .09);
  --ok: #2E9E6B;
  --radius: 14px;
  --font-display: "Noto Serif SC", "Source Han Serif SC", "STSong", "SimSun", Georgia, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --maxw: 1200px;
  --nav-h: 72px;
  /* 未来感光效变量 */
  --glass: rgba(255, 255, 255, .55);
  --glass-border: rgba(255, 255, 255, .75);
  --glow-blue: #7DD3FC;
  --glow-gold: #F5C873;
  --glow-mint: #A7E8D8;
  --glow-violet: #C4B5FD;
  --neon: #FF8A5C;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.7;
  font-size: 16px;
  overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
::selection { background: var(--accent); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); }

/* ---------- 通用文字 ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .01em;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 18px;
}
.section-title { font-size: clamp(30px, 5vw, 52px); margin-bottom: 14px; }
.section-sub { color: var(--ink-60); max-width: 560px; margin-bottom: 48px; }

/* ---------- 导航 ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .3s, box-shadow .3s, border-color .3s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(250, 246, 241, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: var(--maxw); width: 100%; margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 48px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-logo { font-family: var(--font-display); font-size: 22px; font-weight: 700; }
.nav-logo em { color: var(--accent); font-style: normal; }
.nav-links { display: flex; gap: 4px; list-style: none; }
.nav-links a {
  font-size: 14px; padding: 8px 13px; border-radius: 99px;
  color: var(--ink-60); transition: color .2s, background .2s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.nav-cta {
  font-size: 13px; padding: 9px 20px; border-radius: 99px;
  background: var(--ink); color: #fff; white-space: nowrap;
  transition: background .2s;
}
.nav-cta:hover { background: var(--accent); }

/* 移动端菜单 */
.nav-burger {
  display: none; width: 42px; height: 42px; border-radius: 10px;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span {
  width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
  .nav-burger { display: flex; }
  .nav-links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column; padding: 12px 24px 24px; gap: 2px;
    transform: translateY(-8px); opacity: 0; pointer-events: none;
    transition: transform .25s, opacity .25s;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
  }
  .nav-links.show { transform: none; opacity: 1; pointer-events: auto; }
  .nav-links a { display: block; padding: 13px 12px; font-size: 16px; }
  .nav-links .nav-cta-mobile { display: block; margin-top: 10px; text-align: center; }
  .nav-cta { display: none; }
}

/* ---------- 首页 Hero ---------- */
.hero {
  position: relative; min-height: 100svh;
  display: flex; align-items: flex-end;
  color: #fff; overflow: hidden;
  background: #14110E;
}
.hero-media { position: absolute; inset: 0; }
.hero-slide {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 1.1s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide video {
  width: 100%; height: 100%; object-fit: cover;
}
/* 视频缺位时的动效背景（优雅降级） */
.hero-slide.fallback::before {
  content: ""; position: absolute; inset: -20%;
  background: conic-gradient(from 180deg at 50% 50%,
    #2A1712, #6E3320, #E4593B, #7A3A25, #1C1512, #2A1712);
  animation: heroSpin 26s linear infinite;
  filter: brightness(.85);
}
@keyframes heroSpin { to { transform: rotate(360deg); } }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(16,12,10,.82) 0%, rgba(16,12,10,.25) 45%, rgba(16,12,10,.35) 100%);
}
.hero-content {
  position: relative; z-index: 2; width: 100%;
  padding: calc(var(--nav-h) + 40px) 0 64px;
}
.hero-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; letter-spacing: .08em; color: inherit;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25);
  padding: 7px 16px; border-radius: 99px; margin-bottom: 26px;
  backdrop-filter: blur(6px);
  text-decoration: none; cursor: pointer;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.hero-status:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.45);
}
.hero-status .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #5BE3A1;
  box-shadow: 0 0 0 0 rgba(91,227,161,.6); animation: pulse 2s infinite;
}
@keyframes pulse {
  70% { box-shadow: 0 0 0 9px rgba(91,227,161,0); }
  100% { box-shadow: 0 0 0 0 rgba(91,227,161,0); }
}
.hero-title {
  font-size: clamp(35px, 7.2vw, 86px);
  min-height: 1.2em;
}
.hero-title .line {
  display: block; opacity: 0; transform: translateY(24px);
  animation: rise .8s cubic-bezier(.2,.7,.2,1) forwards;
}
@keyframes rise { to { opacity: 1; transform: none; } }
.hero-sub {
  margin-top: 22px; max-width: 560px;
  color: rgba(255,255,255,.82); font-size: clamp(15px, 1.6vw, 18px);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 30px; border-radius: 99px; font-size: 15px; font-weight: 600;
  transition: transform .2s, background .2s, color .2s, border-color .2s;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { border: 1px solid rgba(255,255,255,.4); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.14); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--accent); }

/* Hero 底部轮播指示器 */
.hero-dots {
  position: absolute; right: clamp(20px,4vw,48px); bottom: 60px; z-index: 3;
  display: flex; gap: 10px;
}
.hero-dots button {
  width: 34px; height: 4px; border-radius: 4px;
  background: rgba(255,255,255,.3); transition: background .3s;
}
.hero-dots button.active { background: var(--accent); }
.hero-slide-label {
  position: absolute; left: auto; right: clamp(20px,4vw,48px); bottom: 34px; z-index: 3;
  font-size: 12px; letter-spacing: .25em; color: rgba(255,255,255,.55);
  text-align: right;
}


.entries { padding: clamp(72px, 10vw, 130px) 0; }
.entry-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(2, 1fr);
}
.entry-card {
  position: relative; background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(26px, 4vw, 44px);
  display: flex; flex-direction: column; gap: 8px;
  transition: transform .3s, background .3s, box-shadow .3s, border-color .3s;
  min-height: 190px;
}
.entry-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -18px rgba(30, 26, 22, .2);
  border-color: rgba(30, 26, 22, .2);
}
.entry-card.accent { border-color: transparent; }
.entry-card.accent:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px -18px rgba(199, 67, 39, .32);
}
.entry-card.accent {
  background: linear-gradient(135deg, var(--accent) 0%, #F3EDE5 72%, var(--bg) 100%);
  color: var(--ink);
}
.entry-card.accent:hover {
  background: linear-gradient(135deg, var(--accent-deep) 0%, #F3EDE5 75%, var(--bg) 100%);
}
.entry-card .meta {
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink-40);
}
.entry-card.accent .meta { color: rgba(255,255,255,.72); }
.entry-card h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 36px); font-weight: 700;
}
.entry-card p { font-size: 14px; color: var(--ink-60); }
.entry-card.accent p { color: var(--ink-60); }
.entry-card.accent h3 { color: #fff; }
.entry-card.accent .arrow { color: #fff; }
.entry-card .arrow {
  position: absolute; right: 28px; top: 30px;
  font-size: 22px; opacity: 0; transform: translateX(-8px);
  transition: opacity .3s, transform .3s;
}
.entry-card:hover .arrow { opacity: 1; transform: none; }
@media (max-width: 680px) {
  .entry-grid { grid-template-columns: 1fr; }
  .entry-card { min-height: 0; }
}

/* ---------- 首页精选作品 ---------- */
.featured {
  padding: clamp(72px, 10vw, 130px) 0;
  border-top: 1px solid var(--line);
}
.featured-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 18px; flex-wrap: wrap; margin-bottom: 44px;
}
.featured-grid {
  display: grid; gap: clamp(18px, 3vw, 28px);
  grid-template-columns: repeat(3, 1fr);
}
.featured-card {
  display: block; cursor: pointer; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .3s, box-shadow .3s;
}
.featured-card:hover { transform: translateY(-5px); box-shadow: 0 20px 46px -20px rgba(30,26,22,.22); }
.featured-media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--bg-soft);
}
.featured-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.featured-card:hover .featured-media img { transform: scale(1.05); }
.featured-media .placeholder {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: clamp(18px, 2.2vw, 24px); color: #fff; letter-spacing: .1em;
}
.featured-media .placeholder::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, #6E3320, var(--accent)); opacity: .92;
}
.featured-media .placeholder span { position: relative; }
.featured-media.article {
  display: flex; flex-direction: column; justify-content: space-between; padding: 28px;
  background: var(--ink); color: #fff;
}
.featured-media.article .article-icon { font-size: 36px; opacity: .6; }
.featured-media.article .article-excerpt {
  font-size: 14px; line-height: 1.8; opacity: .85; margin-top: 18px;
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.featured-tag {
  display: inline-block; margin: 18px 18px 4px;
  font-size: 11px; letter-spacing: .18em; color: var(--accent); font-weight: 600; text-transform: uppercase;
}
.featured-card h3 { font-size: 18px; font-weight: 650; margin: 4px 18px 22px; }
@media (max-width: 860px) { .featured-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .featured-grid { grid-template-columns: 1fr; } }

/* ---------- 页头（二级页通用） ---------- */
.page-head {
  padding: calc(var(--nav-h) + clamp(48px, 8vw, 90px)) 0 clamp(36px, 5vw, 60px);
  border-bottom: 1px solid var(--line);
}
.page-head .section-sub { margin-bottom: 0; }

/* ---------- 筛选器 ---------- */
.filters {
  display: flex; flex-wrap: wrap; gap: 10px;
  padding: 26px 0 40px;
}
.filter-btn {
  padding: 9px 22px; border-radius: 99px;
  font-size: 14px; color: var(--ink-60);
  border: 1px solid var(--line); background: transparent;
  transition: all .2s;
}
.filter-btn:hover { border-color: var(--ink); color: var(--ink); }
.filter-btn.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-btn .count { font-size: 12px; opacity: .55; margin-left: 4px; }

/* ---------- 视频网格 ---------- */
.video-grid {
  display: grid; gap: clamp(20px, 3vw, 32px);
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  padding-bottom: 90px;
}
.video-card { cursor: pointer; }
.video-cover {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius);
  overflow: hidden; background: var(--bg-soft);
  border: 1px solid var(--line);
}
.video-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.video-card:hover .video-cover img { transform: scale(1.04); }
.video-cover .placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: clamp(18px, 2.4vw, 26px);
  color: rgba(255,255,255,.9); letter-spacing: .1em;
}
.video-cover .placeholder::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, #6E3320, var(--accent));
  opacity: .92;
}
.video-cover .placeholder span { position: relative; }
.play-badge {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.55);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  transition: transform .25s, background .25s;
}
.play-badge::after {
  content: ""; margin-left: 4px;
  border-left: 14px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent;
}
.video-card:hover .play-badge { transform: translate(-50%,-50%) scale(1.12); background: var(--accent); border-color: var(--accent); }
.video-duration {
  position: absolute; right: 12px; bottom: 12px;
  font-size: 12px; font-weight: 600;
  background: rgba(0,0,0,.55); color: #fff;
  padding: 3px 9px; border-radius: 6px;
}
.video-cat {
  display: inline-block; font-size: 12px; letter-spacing: .15em;
  color: var(--accent); font-weight: 600; margin: 16px 0 6px;
}
.video-card h3 { font-size: 19px; font-weight: 650; }
.video-card .desc { font-size: 14px; color: var(--ink-60); margin-top: 6px; }
.video-card .tools { font-size: 12px; color: var(--ink-40); margin-top: 8px; }

/* ---------- 平面设计瀑布流 ---------- */
.masonry {
  columns: 3; column-gap: 24px; padding-bottom: 90px;
}
@media (max-width: 980px) { .masonry { columns: 2; } }
@media (max-width: 620px) { .masonry { columns: 1; } }
.design-card {
  break-inside: avoid; margin-bottom: 24px;
  cursor: pointer; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: #fff;
  transition: transform .3s, box-shadow .3s;
}
.design-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px rgba(30,26,22,.25); }
.design-card .ph {
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.92);
  font-family: var(--font-display); font-size: 22px; letter-spacing: .08em;
  text-align: center; padding: 20px;
}
.design-card.ratio-tall .ph { aspect-ratio: 3 / 4; }
.design-card.ratio-wide .ph { aspect-ratio: 16 / 9; }
.design-card.ratio-square .ph { aspect-ratio: 1 / 1; }
.design-card.ratio-tall .ph { background: linear-gradient(160deg, #86442D, var(--accent)); }
.design-card.ratio-wide .ph { background: linear-gradient(120deg, #4E342B, #8A5A3C); }
.design-card.ratio-square .ph { background: linear-gradient(200deg, #C74327, #E8875F); }
.design-card .info { padding: 18px 20px 20px; }
.design-card .cat { font-size: 12px; letter-spacing: .15em; color: var(--accent); font-weight: 600; }
.design-card h3 { font-size: 18px; margin: 6px 0 4px; }
.design-card p { font-size: 13.5px; color: var(--ink-60); }
.design-card .tools { font-size: 12px; color: var(--ink-40); margin-top: 8px; }

/* ---------- 文章列表 ---------- */
.article-list { padding-bottom: 90px; }
.article-row {
  display: grid; grid-template-columns: minmax(160px, 220px) 1fr auto; gap: 28px;
  align-items: center;
  padding: 30px 8px; border-bottom: 1px solid var(--line);
  transition: background .25s; border-radius: 8px;
}
.article-row:hover { background: #fff; }
.art-cover-thumb {
  position: relative;
  aspect-ratio: 2.35 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.art-cover-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.article-row:hover .art-cover-thumb img { transform: scale(1.04); }
.art-cover-thumb.no-cover {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #6E3320, var(--accent));
  color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .08em;
}
.art-summary { min-width: 0; }
.article-row h3 {
  font-family: var(--font-display); font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 700; margin-bottom: 8px; transition: color .2s;
}
.article-row:hover h3 { color: var(--accent); }
.article-row .excerpt { font-size: 14.5px; color: var(--ink-60); max-width: 640px; }
.article-row .row-meta { font-size: 12px; color: var(--ink-40); margin-top: 10px; display: flex; gap: 14px; flex-wrap: wrap; }
.article-row .go { font-size: 26px; color: var(--ink-40); transition: color .2s, transform .2s; align-self: center; }
.article-row:hover .go { color: var(--accent); transform: translateX(4px); }
@media (max-width: 720px) {
  .article-row { grid-template-columns: 1fr; gap: 16px; }
  .art-cover-thumb { max-width: 260px; }
  .article-row .go { display: none; }
}

/* ---------- 文章详情 ---------- */
.article-page { padding: calc(var(--nav-h) + 60px) 0 100px; }
.article-hero { max-width: 760px; margin: 0 auto 20px; }
.article-hero .cat { color: var(--accent); font-size: 13px; font-weight: 600; letter-spacing: .2em; }
.article-hero h1 {
  font-family: var(--font-display); font-size: clamp(30px, 5.4vw, 52px);
  line-height: 1.25; margin: 14px 0 20px;
}
.article-hero .meta { font-size: 13px; color: var(--ink-40); display: flex; gap: 18px; flex-wrap: wrap; }
.article-body {
  max-width: 700px; margin: 46px auto 0;
  font-size: 16.5px; line-height: 2;
}
.article-body .h {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  margin: 44px 0 14px; padding-left: 14px; border-left: 3px solid var(--accent);
}
.article-body p { margin-bottom: 20px; color: rgba(30,26,22,.86); }
.article-body li { margin: 0 0 10px 22px; color: rgba(30,26,22,.86); }
.wechat-btn {
  margin-top: 60px; padding: 16px 34px;
}
.article-nav {
  max-width: 700px; margin: 56px auto 0;
  display: flex; justify-content: space-between; gap: 16px;
  border-top: 1px solid var(--line); padding-top: 28px;
}
.article-nav a { font-size: 14px; color: var(--ink-60); }
.article-nav a:hover { color: var(--accent); }

/* ---------- 关于我 ---------- */
.about-grid {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px);
  padding: clamp(48px, 7vw, 90px) 0;
}
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-intro { font-size: clamp(19px, 2.4vw, 25px); line-height: 1.9; }
.about-intro strong { color: var(--accent); }
.about-facts { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.fact-tag {
  font-size: 13px; padding: 8px 18px; border-radius: 99px;
  border: 1px solid var(--line); color: var(--ink-60); background: #fff;
}
.skills .skill { margin-bottom: 22px; }
.skills .skill .row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 8px; }
.skill-bar { height: 6px; border-radius: 6px; background: var(--bg-soft); overflow: hidden; }
.skill-bar i {
  display: block; height: 100%; width: 0; border-radius: 6px;
  background: linear-gradient(90deg, var(--accent), #E8875F);
  transition: width 1.2s cubic-bezier(.2,.7,.2,1);
}

/* 时间线 */
.timeline { padding: 20px 0 100px; }
.tl-item {
  position: relative; padding: 0 0 44px 34px;
  border-left: 1px solid var(--line);
}
.tl-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.tl-item::before {
  content: ""; position: absolute; left: -5px; top: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.tl-item .period { font-size: 13px; letter-spacing: .12em; color: var(--accent); font-weight: 600; }
.tl-item h3 { font-size: 20px; margin: 6px 0 6px; font-weight: 650; }
.tl-item p { font-size: 14.5px; color: var(--ink-60); max-width: 640px; }

/* ---------- 爱好 / 现在在做 ---------- */
.hobby-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px; padding: 10px 0 100px;
}
.hobby-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 26px; transition: transform .3s, box-shadow .3s;
}
.hobby-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -18px rgba(30,26,22,.22); }
.hobby-card .icon { font-size: 34px; }
.hobby-card h3 { font-size: 19px; margin: 14px 0 6px; }
.hobby-card p { font-size: 14px; color: var(--ink-60); }

.now-list { padding: 10px 0 100px; max-width: 820px; }
.now-item {
  display: flex; gap: 24px; align-items: flex-start; justify-content: space-between;
  padding: 28px 4px; border-bottom: 1px solid var(--line);
}
.now-item.has-cover .now-main { flex: 1; min-width: 0; }
.now-item .status-badge {
  flex-shrink: 0; margin-top: 5px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  padding: 5px 12px; border-radius: 99px;
}
.now-item[data-status="doing"] .status-badge { background: var(--accent-soft); color: var(--accent); }
.now-item[data-status="learning"] .status-badge { background: rgba(46,158,107,.1); color: var(--ok); }
.now-item h3 { font-size: 19px; }
.now-item p { font-size: 14.5px; color: var(--ink-60); margin-top: 5px; }
.now-item .updated { font-size: 12px; color: var(--ink-40); margin-top: 8px; }
.now-cover {
  width: clamp(140px, 32%, 260px); aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; flex-shrink: 0;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.now-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.now-footnote { font-size: 13px; color: var(--ink-40); margin-top: 28px; }
@media (max-width: 640px) {
  .now-item { flex-direction: column; gap: 16px; }
  .now-cover { width: 100%; aspect-ratio: 16 / 9; }
}

/* ---------- 联系页 ---------- */
.contact-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px);
  padding: clamp(40px, 6vw, 80px) 0 100px;
}
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { display: flex; flex-direction: column; }
.contact-item {
  display: flex; justify-content: space-between; align-items: center;
  padding: 22px 4px; border-bottom: 1px solid var(--line);
}
.contact-item .label { font-size: 13px; letter-spacing: .1em; color: var(--ink-40); }
.contact-item .value { font-size: 16px; font-weight: 600; }
.contact-item a.value:hover { color: var(--accent); }
.resume-box {
  margin-top: 30px; padding: 28px; border-radius: var(--radius);
  background: var(--ink); color: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap;
}
.resume-box h3 { font-size: 19px; }
.resume-box p { font-size: 13px; opacity: .65; margin-top: 4px; }

.form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(24px, 3.4vw, 40px); }
.form h3 { font-family: var(--font-display); font-size: 24px; margin-bottom: 6px; }
.form .hint { font-size: 13px; color: var(--ink-40); margin-bottom: 26px; }
.form label { display: block; font-size: 13px; font-weight: 600; margin: 18px 0 8px; }
.form input, .form textarea {
  width: 100%; padding: 13px 16px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--bg);
  font-family: inherit; font-size: 15px; color: var(--ink);
  transition: border-color .2s;
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--accent);
}
.form textarea { min-height: 130px; resize: vertical; }
.form .btn { margin-top: 26px; width: 100%; justify-content: center; }
.form .tip { font-size: 12.5px; color: var(--ink-40); margin-top: 14px; text-align: center; }

/* ---------- 专业技能页 ---------- */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.2vw, 28px);
  padding: 0 0 clamp(60px, 8vw, 110px);
}
@media (max-width: 980px) { .skills-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .skills-grid { grid-template-columns: 1fr; } }

.skill-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 2.6vw, 32px);
  display: flex; flex-direction: column; gap: 18px;
  transition: transform .25s, box-shadow .25s;
}
.skill-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(18,14,11,.08);
}
.skill-card-head {
  display: flex; align-items: center; gap: 14px;
}
.skill-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--bg-soft);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.skill-card-head h3 {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 700;
  margin-top: 2px;
}
.skill-category {
  display: inline-block; font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
  background: rgba(232,135,95,.1); padding: 3px 10px; border-radius: 99px;
}
.skill-desc {
  font-size: 14px; color: var(--ink-60); line-height: 1.7;
  margin-top: -4px;
}
.skill-level { margin-top: auto; }
.skill-level-row {
  display: flex; justify-content: space-between; font-size: 12px;
  color: var(--ink-40); margin-bottom: 8px;
}
.skill-level-row span:last-child { font-weight: 600; color: var(--ink); }

/* 覆盖 about 页进度条容器 */
#skills .skill-bar { background: var(--bg-soft); }

/* ---------- 页脚 ---------- */
.footer {
  border-top: 1px solid var(--line);
  padding: 54px 0 44px; background: var(--bg);
}
.footer-top {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px; flex-wrap: wrap; margin-bottom: 34px;
}
.footer-big {
  display: inline-block;
  font-family: var(--font-display); font-size: clamp(34px, 6vw, 64px); font-weight: 700; line-height: 1.1;
  text-decoration: none; color: inherit; cursor: pointer;
  transition: transform .2s ease, opacity .2s ease;
}
.footer-big:hover { transform: translateY(-3px); opacity: .85; }
.footer-big em { font-style: normal; color: var(--accent); }
.footer-note { font-size: 13.5px; color: var(--ink-60); max-width: 380px; }
.footer-bottom {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  font-size: 12.5px; color: var(--ink-40);
  border-top: 1px solid var(--line); padding-top: 22px;
}
.footer-bottom > * {
  min-width: 0;
  text-align: center;
}
.footer-bottom > .footer-copy { text-align: left; }
.footer-bottom > .footer-email { text-align: right; }
.footer-bottom a:hover { color: var(--accent); }
/* 备案信息：ICP + 公安备案 */
.footer-beian {
  margin: 0;
  font-size: 12px;
  color: var(--ink-40);
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
}
.footer-beian a {
  color: var(--ink-40);
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}
.footer-beian a:hover { color: var(--accent); }
.footer-beian .beian-icon { margin-right: 0; }
.footer-beian-divider { color: var(--ink-40); opacity: .6; }

/* ---------- 灯箱 ---------- */
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(18, 14, 11, .94);
  display: none; align-items: center; justify-content: center;
  padding: 4vh 4vw;
}
.lightbox.show { display: flex; }
.lightbox img, .lightbox video {
  max-width: 92vw; max-height: 82vh; border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox iframe {
  width: min(1100px, 92vw); height: min(680px, 74vh);
  border: 0; border-radius: 10px; background: #000;
}
.lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next {
  position: fixed; color: #fff; font-size: 26px;
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover { background: var(--accent); }
.lb-close { top: 24px; right: 24px; }
.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }
.lb-caption {
  position: fixed; bottom: 24px; left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,.75); font-size: 14px;
}
.lightbox .lb-fullscreen {
  position: fixed; bottom: 58px; left: 50%; transform: translateX(-50%);
  display: none; align-items: center; gap: 8px;
  padding: 11px 24px; border-radius: 99px;
  font-size: 14px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s;
  z-index: 2;
}
.lightbox .lb-fullscreen:hover { background: var(--accent); border-color: var(--accent); }
@media (max-width: 680px) {
  .lightbox { padding: 2vh 2vw; }
  .lightbox img, .lightbox video { max-width: 97vw; max-height: 76vh; border-radius: 8px; }
  .lightbox iframe { width: 96vw; height: 70vh; border-radius: 8px; }
  .lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next {
    width: 46px; height: 46px; font-size: 22px;
  }
  .lb-close { top: 14px; right: 14px; }
  .lb-caption { bottom: 18px; font-size: 13px; padding: 0 16px; }
  .lightbox .lb-fullscreen { bottom: 52px; padding: 12px 26px; }
}

/* ---------- 网页级全屏（微信 X5 等不支持 Fullscreen API 的兜底） ---------- */
.lightbox.lb-fill { padding: 0; background: #000; }
.lightbox.lb-fill .lb-media {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lightbox.lb-fill video,
.lightbox.lb-fill iframe {
  max-width: 100vw; max-height: 100vh; width: 100%; height: 100%;
  object-fit: contain; border-radius: 0; box-shadow: none;
}
.lightbox.lb-fill .lb-caption,
.lightbox.lb-fill .lb-prev,
.lightbox.lb-fill .lb-next { display: none; }
.lightbox.lb-fill .lb-fullscreen { bottom: max(18px, env(safe-area-inset-bottom)); }

/* 手机横屏时（手动转屏或系统全屏锁横屏），视频铺满整块屏幕 */
@media (max-width: 920px) and (orientation: landscape) {
  .lightbox { padding: 0; }
  .lightbox img, .lightbox video { max-width: 100vw; max-height: 100vh; border-radius: 0; }
  .lightbox iframe { width: 100vw; height: 100vh; border-radius: 0; }
  .lb-caption, .lb-prev, .lb-next { display: none; }
  .lightbox .lb-fullscreen { bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ---------- 滚动浮现动画 ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-slide.fallback::before { animation: none; }
}

/* ---------- 杂项 ---------- */
.empty-note {
  padding: 60px 0; text-align: center; color: var(--ink-40); font-size: 14px;
}
.marquee-note {
  margin-top: 60px; font-size: 12px; color: var(--ink-40); text-align: center;
}

/* ---------- 手机端排版放宽（间距整体加大一档，避免内容过挤） ---------- */
@media (max-width: 680px) {
  .wrap { padding: 0 24px; }
  .section-title { font-size: clamp(27px, 7.4vw, 33px); margin-bottom: 18px; }
  .section-sub { font-size: 15px; margin-bottom: 34px; }
  .eyebrow { margin-bottom: 22px; }
  .entries, .featured { padding: 84px 0; }
  .featured-head { margin-bottom: 32px; }
  .featured-grid { gap: 24px; }
  .featured-card h3 { margin: 6px 18px 24px; font-size: 19px; }
  .featured-tag { margin: 20px 18px 4px; }
  .page-head { padding: calc(var(--nav-h) + 52px) 0 48px; }
  .filters { gap: 10px 8px; padding: 30px 0 48px; }
  .filter-btn { padding: 10px 18px; font-size: 14px; }
  .video-grid { gap: 32px; padding-bottom: 110px; }
  .video-cat { margin: 18px 0 8px; }
  .video-card h3 { font-size: 20px; }
  .video-card .desc { font-size: 14.5px; margin-top: 8px; }
  .video-card .tools { margin-top: 10px; }
  .masonry { padding-bottom: 110px; }
  .design-card { margin-bottom: 32px; }
  .design-card .info { padding: 20px 20px 22px; }
  .article-list { padding-bottom: 110px; }
  .article-row { padding: 34px 4px; gap: 18px; }
  .hobby-grid { gap: 22px; padding: 10px 0 110px; }
  .hobby-card { padding: 32px 26px; }
  .now-list { padding: 10px 0 110px; }
  .now-item { padding: 32px 4px; gap: 18px; }
  .skills-grid { gap: 22px; padding-bottom: 110px; }
  .contact-grid { padding: 48px 0 110px; }
  .contact-item { padding: 26px 4px; }
  .about-grid { padding: 60px 0; }
  .timeline { padding: 20px 0 110px; }
  .tl-item { padding-bottom: 52px; }
  .article-page { padding: calc(var(--nav-h) + 52px) 0 110px; }
  .article-body { margin-top: 36px; font-size: 16px; }
  .article-body .h { margin-top: 50px; }
  .hero-content { padding: calc(var(--nav-h) + 32px) 0 28px; }
  .hero-sub { margin-top: 26px; }
  .hero-actions { gap: 12px; margin-top: 32px; }
  /* 手机端 Hero：把底部 label / dots 放进正常文档流，避免与按钮重叠 */
  .hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .hero-content { padding-bottom: 40px; }
  .hero-slide-label {
    position: relative;
    left: auto;
    bottom: auto;
    order: 2;
    /* 与按钮区拉开明显间距，避免窄屏视口下相互挤压 */
    padding: 0 24px;
    margin-top: 18px;
    font-size: 11px;
    text-align: right;
    letter-spacing: .25em;
  }
  .hero-dots {
    position: relative;
    right: auto;
    bottom: auto;
    order: 3;
    padding: 12px 24px 36px;
    justify-content: flex-end;
  }
  /* 入口卡片：手机端独立成卡，留出明显间距 */
  .entry-grid { gap: 14px; background: transparent; border: none; }
  .entry-card { min-height: 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 30px 26px; }
  .entry-card:hover { background: #fff; }
  /* AI 浮球：略小上移，避免遮挡底部内容 */
  .ai-ball { width: 52px; height: 52px; right: 18px; bottom: 80px; }
  .ai-ball:hover { width: 110px; }
  .ai-ball-icon { width: 52px; height: 52px; }
  .ai-ball-label { font-size: 13px; }
  .ai-win { right: 18px; bottom: 150px; }
}

/* ============================================================
   动效增强（effects.js 配套）
   ============================================================ */
html.fx-ready body { opacity: 0; }
html.fx-loaded body { opacity: 1; transition: opacity .5s ease; }

.fx-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 999;
  background: linear-gradient(90deg, var(--accent), #f2a65a);
  transform-origin: 0 50%; transform: scaleX(0);
  border-radius: 0 2px 2px 0;
}

/* 大标题逐字浮现 */
.fx-char { display: inline-block; opacity: 0; transform: translateY(.6em) rotate(4deg); }
.fx-title-in .fx-char {
  opacity: 1; transform: none;
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}

/* 卡片倾斜 & 磁性按钮 */
.fx-tilt, .fx-magnet {
  transition: transform .25s cubic-bezier(.2,.7,.3,1.2), box-shadow .25s ease;
  will-change: transform;
}
.fx-tilt:hover { box-shadow: 0 18px 40px -18px rgba(224,120,86,.35); }

/* 光标光晕（桌面端） */
.fx-cursor {
  position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;
  width: 260px; height: 260px; margin: -130px 0 0 -130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 200, 115, .28), rgba(228, 89, 59, .08) 50%, transparent 72%);
  mix-blend-mode: multiply;
  opacity: 0; transition: opacity .6s;
  will-change: transform;
}
#cursor-dot {
  position: fixed; left: 0; top: 0; z-index: 3; pointer-events: none;
  width: 8px; height: 8px; margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: rgba(228, 89, 59, .9);
  box-shadow: 0 0 8px rgba(228, 89, 59, .55), 0 0 18px rgba(228, 89, 59, .22);
  opacity: 0; transition: opacity .6s;
  will-change: transform;
}
body.has-cursor .fx-cursor,
body.has-cursor #cursor-dot { opacity: 1; }
@media (hover: none), (pointer: coarse) {
  .fx-cursor, #cursor-dot { display: none; }
}

html.fx-reduce .fx-char { opacity: 1; transform: none; }
html.fx-reduce .fx-cursor { display: none; }
@media (prefers-reduced-motion: reduce) {
  html.fx-ready body, html.fx-loaded body { opacity: 1; transform: none; transition: none; }
  .fx-char { opacity: 1; transform: none; }
}

/* ============================================================
   AI 助手浮窗
   ============================================================ */
.ai-ball {
  position: fixed; right: 22px; bottom: 22px; z-index: 900;
  width: 58px; height: 58px; border-radius: 50%;
  border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--accent), #e8956a);
  color: #fff; font-size: 24px;
  display: flex; align-items: center; justify-content: flex-start;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 10px 30px -8px rgba(224,120,86,.55);
  transition: transform .25s cubic-bezier(.2,.7,.3,1.4), opacity .25s, width .25s;
  animation: ai-breathe 3s ease-in-out infinite;
}
.ai-ball:hover { transform: scale(1.08); width: 120px; border-radius: 29px; }
.ai-ball.hide { opacity: 0; pointer-events: none; transform: scale(.6); }
.ai-ball-icon {
  width: 58px; height: 58px; border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  transition: opacity .2s;
}
.ai-ball-label {
  position: static; opacity: 0; font-size: 14px; font-weight: 600;
  transition: opacity .25s; pointer-events: none;
  white-space: nowrap; margin-left: 6px;
}
.ai-ball:hover .ai-ball-label { opacity: 1; }
.ai-ball-tip {
  position: absolute; right: 130px; top: 50%; transform: translateY(-50%);
  background: var(--ink); color: var(--paper); font-size: 12px;
  padding: 6px 12px; border-radius: 20px; white-space: nowrap;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.ai-ball:hover .ai-ball-tip { opacity: 1; }
@keyframes ai-breathe {
  0%, 100% { box-shadow: 0 10px 30px -8px rgba(224,120,86,.55); }
  50% { box-shadow: 0 10px 38px -6px rgba(224,120,86,.8); }
}

.ai-win {
  position: fixed; right: 22px; bottom: 94px; z-index: 901;
  width: min(360px, calc(100vw - 44px)); height: min(520px, 70vh);
  background: var(--paper); border-radius: 18px;
  box-shadow: 0 24px 60px -20px rgba(30,25,20,.35);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(16px) scale(.96); pointer-events: none;
  transition: opacity .28s ease, transform .28s cubic-bezier(.2,.7,.3,1.2);
}
.ai-win.show { opacity: 1; transform: none; pointer-events: auto; }
.ai-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; background: linear-gradient(135deg, var(--accent), #e8956a); color: #fff;
}
.ai-head-info { display: flex; align-items: center; gap: 10px; }
.ai-head-info small { display: block; opacity: .85; font-size: 11px; }
.ai-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  object-fit: cover;
  background: rgba(255,255,255,.22);
  display: block;
}
.ai-head-actions { display: flex; align-items: center; gap: 8px; }
.ai-provider-wrap { position: relative; display: flex; align-items: center; }
.ai-provider-wrap select {
  appearance: none; -webkit-appearance: none;
  background: rgba(255,255,255,.2); color: #fff;
  border: 1px solid rgba(255,255,255,.35); border-radius: 14px;
  padding: 5px 22px 5px 10px; font-size: 11px; cursor: pointer; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='%23fff'%3E%3Cpath d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center;
}
.ai-provider-wrap select option { background: #fff; color: var(--ink); }
.ai-provider-hint {
  position: absolute; right: 0; top: calc(100% + 4px);
  font-size: 10px; color: #fff; background: rgba(0,0,0,.35);
  padding: 2px 8px; border-radius: 10px; white-space: nowrap; opacity: .95;
}
.ai-provider-hint.error { background: rgba(180,40,40,.8); }
.ai-close { background: none; border: none; color: #fff; font-size: 16px; cursor: pointer; padding: 6px; }
.ai-body {
  flex: 1; overflow-y: auto; padding: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.ai-msg {
  max-width: 82%; padding: 10px 13px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.7;
}
.ai-msg.bot {
  align-self: flex-start; background: #f4ede4; color: var(--ink);
  border-bottom-left-radius: 4px;
}
.ai-msg.user {
  align-self: flex-end; background: var(--accent); color: #fff;
  border-bottom-right-radius: 4px;
}
.ai-msg.thinking { opacity: .65; animation: ai-pulse 1s ease-in-out infinite; }
@keyframes ai-pulse { 0%,100% { opacity: .45; } 50% { opacity: .85; } }
.ai-quick { display: flex; flex-wrap: wrap; gap: 6px; padding-top: 2px; }
.ai-quick-btn {
  border: 1px solid rgba(224,120,86,.45); background: rgba(224,120,86,.07);
  color: var(--accent); font-size: 12px; padding: 5px 11px;
  border-radius: 20px; cursor: pointer; transition: all .2s;
}
.ai-quick-btn:hover { background: var(--accent); color: #fff; }
.ai-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid rgba(30,25,20,.08); }
.ai-input input {
  flex: 1; border: 1px solid rgba(30,25,20,.14); border-radius: 22px;
  padding: 9px 14px; font-size: 13px; outline: none; background: #fff;
}
.ai-input input:focus { border-color: var(--accent); }
.ai-input button {
  width: 40px; height: 40px; border-radius: 50%; border: none;
  background: var(--accent); color: #fff; cursor: pointer; font-size: 15px;
  transition: transform .2s;
}
.ai-input button:hover { transform: scale(1.08); }

/* ============================================================
   爱好详情弹层
   ============================================================ */
.hobby-detail {
  position: fixed; inset: 0; z-index: 800;
  background: rgba(24,20,16,.6); backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .25s ease; padding: 20px;
}
.hobby-detail.show { opacity: 1; }
.hd-panel {
  background: var(--paper); border-radius: 20px; max-width: 720px; width: 100%;
  max-height: 86vh; overflow-y: auto; padding: 28px 30px;
  transform: translateY(20px); transition: transform .3s cubic-bezier(.2,.7,.3,1.15);
  position: relative;
}
.hobby-detail.show .hd-panel { transform: none; }
.hd-close {
  position: sticky; top: 0; float: right; z-index: 2;
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(30,25,20,.08); font-size: 14px;
}
.hd-close:hover { background: var(--accent); color: #fff; }
.hd-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.hd-icon { font-size: 34px; }
.hd-head h2 { font-size: 26px; margin: 0; }
.hd-desc { color: var(--ink-60); margin: 0 0 18px; }
.hd-main-img { position: relative; border-radius: 14px; overflow: hidden; }
.hd-main-img img { width: 100%; display: block; transition: opacity .15s ease; }
.hd-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.85); font-size: 20px; color: var(--ink);
  display: flex; align-items: center; justify-content: center;
}
.hd-arrow.prev { left: 10px; } .hd-arrow.next { right: 10px; }
.hd-arrow:hover { background: var(--accent); color: #fff; }
.hd-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 4px; }
.hd-thumbs button {
  border: 2px solid transparent; border-radius: 8px; overflow: hidden;
  padding: 0; cursor: pointer; flex: 0 0 auto; background: none; opacity: .6;
  transition: opacity .2s, border-color .2s;
}
.hd-thumbs button.active { border-color: var(--accent); opacity: 1; }
.hd-thumbs img { width: 72px; height: 48px; object-fit: cover; display: block; }
.hd-video { margin-top: 16px; border-radius: 14px; overflow: hidden; background: #000; }
.hd-video video, .hd-video iframe { width: 100%; aspect-ratio: 16/9; display: block; border: none; }
.hd-text { margin-top: 16px; }
.hd-text p { line-height: 1.9; color: var(--ink); }

/* 爱好卡片可点击状态 */
.hobby-card.clickable { cursor: pointer; }
.hobby-media-badge {
  display: inline-block; margin-top: 10px; font-size: 12px;
  color: var(--accent); background: rgba(224,120,86,.09);
  padding: 4px 10px; border-radius: 14px;
}
.hobby-card.clickable:hover .hobby-media-badge { background: var(--accent); color: #fff; }

/* ============================================================
   文章页：封面头图 + 正文图片块
   ============================================================ */
.art-cover {
  display: block; width: 100%; max-height: 480px; object-fit: cover;
  border-radius: 18px; margin: 26px auto 6px;
}
.article-body .art-img { margin: 26px 0; }
.article-body .art-img img {
  width: 100%; border-radius: 14px; cursor: zoom-in;
  transition: transform .3s ease, box-shadow .3s ease;
}
.article-body .art-img img:hover {
  transform: scale(1.005);
  box-shadow: 0 16px 40px -18px rgba(30,25,20,.3);
}
.article-body .art-img figcaption {
  text-align: center; font-size: 13px; color: var(--ink-40); margin-top: 8px;
}
.article-body blockquote {
  margin: 24px 0; padding: 14px 22px;
  border-left: 3px solid var(--accent);
  background: rgba(224,120,86,.06); border-radius: 0 12px 12px 0;
  font-size: 16.5px; color: var(--ink-60);
}

/* ============================================================
   富文本正文（后台公众号编辑器产出）
   ============================================================ */
.article-body h2, .rich-body h2 {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  margin: 40px 0 14px; padding-left: 14px; border-left: 3px solid var(--accent);
}
.article-body figure, .rich-body figure {
  margin: 26px 0;
}
.article-body figure img, .rich-body figure img {
  width: 100%; border-radius: 14px; cursor: zoom-in;
  transition: transform .3s ease, box-shadow .3s ease;
}
.article-body figure img:hover, .rich-body figure img:hover {
  box-shadow: 0 16px 40px -18px rgba(30,25,20,.3);
}
.article-body figcaption, .rich-body figcaption {
  text-align: center; font-size: 13px; color: var(--ink-40); margin-top: 8px;
}
.article-body img, .rich-body img {
  max-width: 100%; border-radius: 12px; display: block; margin: 12px auto;
}
/* 135编辑器/公众号粘贴内容加固：固定宽度容器不撑破手机屏，图片等比缩放 */
.rich-body section, .rich-body table, .article-body section, .article-body table {
  max-width: 100%;
}
.rich-body img, .article-body img { height: auto; }
.rich-body p img, .rich-body span img { display: inline-block; vertical-align: middle; margin: 0 2px; border-radius: 4px; }
.article-body ul, .article-body ol, .rich-body ul, .rich-body ol {
  margin: 0 0 20px; padding-left: 26px;
}
.article-body li, .rich-body li { margin-bottom: 8px; color: rgba(30,26,22,.86); }
.article-body hr, .rich-body hr {
  border: none; border-top: 1px solid var(--line); margin: 30px 0;
}
.article-body b, .article-body strong, .rich-body b, .rich-body strong { font-weight: 700; color: var(--ink); }
.rich-body { font-size: 15.5px; line-height: 2; }
.rich-body p { margin-bottom: 18px; color: rgba(30,26,22,.86); }
.rich-body blockquote {
  margin: 22px 0; padding: 14px 20px;
  border-left: 3px solid var(--accent); background: rgba(224,120,86,.06);
  border-radius: 0 10px 10px 0; color: var(--ink-60); font-size: .95em;
}

/* ============================================================
   爱好 / 现在 · 封面
   ============================================================ */
.hobby-cover {
  aspect-ratio: 9 / 16; width: min(100%, 176px); margin: 0 auto;
  border-radius: 14px; overflow: hidden; background: var(--bg-soft);
}
.hobby-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hd-cover {
  margin: 18px 0 0; max-width: 280px; border-radius: 14px;
  overflow: hidden; background: var(--bg-soft);
}
.hd-cover img { width: 100%; display: block; }

/* 现在在做：左侧文字 + 右侧 16:9 封面（主样式在 now-list 区域已定义） */
.now-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.now-head .status-badge { margin-top: 0; }
.now-head h3 { font-size: 19px; }
.now-rich { margin-top: 8px; font-size: 14.5px; }

/* ---------- 手机端整体缩小 25%（文字 / 组件 / 图标统一缩放） ---------- */
@media (max-width: 680px) {
  html { zoom: 0.75; }
  /* zoom 下 fixed 元素个别浏览器会有 1px 缝隙，微调兜底 */
  .lightbox { inset: -1px; }
}

/* ============================================================
   未来感首页视觉升级（v18）
   色彩保留米白+珊瑚橙，加入 3D 空间、光效、交互反馈
   ============================================================ */

/* ---- 粒子画布 & 页面转场 & 涟漪 ---- */
#particle-trail {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
}
@media (hover: none), (pointer: coarse) { #particle-trail { display: none; } }

.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(245, 200, 115, .25) 60%, transparent);
  transform: scale(0); animation: rippleAnim .7s ease-out forwards;
}
@keyframes rippleAnim { to { transform: scale(1); opacity: 0; } }

/* ---- 未来感 Hero ---- */
.hero-future {
  background: var(--bg);
  color: var(--ink);
  align-items: center;
  perspective: 1000px;
  perspective-origin: 50% 40%;
}
/* 媒体层恢复：视频轮播作为动态氛围背景（毛玻璃提亮遮罩保证文字可读） */
.hero-future .hero-media {
  display: block; z-index: 0;
}
.hero-future .hero-slide video {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.96) saturate(1.05);
}
.hero-future .hero-veil {
  display: block; z-index: 1;
  pointer-events: none;
  /* 其他 slide：不遮挡视频，只保留极淡的氛围边缘 */
  background: transparent;
  opacity: 0;
  transition: opacity .7s ease, background .7s ease, backdrop-filter .7s ease;
}
/* 第 1 个轮播 slide：保留一个彩色 UI 光晕 + 完整浅色遮罩，保证文字可读 */
.hero-future.veil-on .hero-veil {
  background:
    radial-gradient(ellipse 120% 80% at 10% 100%,
      rgba(228, 89, 59, .55) 0%,
      rgba(245, 200, 115, .35) 28%,
      rgba(125, 211, 252, .20) 56%,
      transparent 76%),
    linear-gradient(to top,
      rgba(250, 246, 240, .92) 0%,
      rgba(250, 246, 240, .42) 52%,
      rgba(250, 246, 240, .66) 100%);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  opacity: 1;
}
/* 未来感降级背景：浅色动效，贴合浅色设计语言 */
.hero-future .hero-slide.fallback::before {
  background: conic-gradient(from 180deg at 50% 50%,
    #FFF6EE, #FFDCC8, #FFB99E, #FDE7D2, #FFFDF9, #FFF6EE);
  filter: none; opacity: .78;
}
/* 未来感层级：网格 / 星尘 / 光球叠加在媒体氛围之上，文字最上层 */
.hero-future .hero-grid-floor { z-index: 2; }
.hero-future .hero-stardust { z-index: 2; }
.hero-future .orbs { z-index: 2; }
.hero-future .hero-content { z-index: 3; }
/* 轮播控件：浅色适配 */
.hero-future .hero-dots { display: flex; }
.hero-future .hero-dots button { background: rgba(30, 26, 22, .22); }
.hero-future .hero-dots button.active {
  background: var(--accent);
  box-shadow: 0 0 10px rgba(228, 89, 59, .5);
}
.hero-future .hero-slide-label {
  display: block; color: rgba(30, 26, 22, .5);
  right: clamp(90px, 8vw, 120px);
}
.hero-future .hero-dots { right: clamp(90px, 8vw, 120px); }
.hero-future .hero-content {
  padding: calc(var(--nav-h) + 48px) 0 84px;
  transform-style: preserve-3d;
}
.hero-future .hero-kicker {
  font-size: 13px; letter-spacing: .4em; text-transform: uppercase;
  color: var(--accent); font-weight: 600; margin-bottom: 22px;
  display: inline-flex; align-items: center; gap: 10px;
  opacity: 0; animation: riseIn .9s cubic-bezier(.2, .7, .2, 1) .1s forwards;
}
.hero-kicker-line {
  width: 34px; height: 1px; background: var(--accent);
  box-shadow: 0 0 8px rgba(228, 89, 59, .6);
}
.hero-future .hero-title {
  font-family: var(--font-display);
  font-size: clamp(56px, 10vw, 124px);
  font-weight: 700; line-height: 1.06; letter-spacing: .01em;
  filter: drop-shadow(0 10px 34px rgba(228, 89, 59, .16));
}
.hero-title-line { display: block; }

/* —— 首行标题：逐字立体进入 + 波浪浮动 —— */
.hero-future .hero-title .ch {
  display: inline-block;
  opacity: 0;
  transform-origin: 50% 100%;
  animation:
    chIn .8s cubic-bezier(.2, .7, .2, 1) forwards,
    floatY 7s ease-in-out infinite;
  animation-delay: var(--d, 0s), calc(var(--d, 0s) + .9s);
  will-change: transform;
}
@keyframes chIn {
  from { opacity: 0; transform: translateY(34px) rotateX(55deg); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) rotateX(0); filter: blur(0); }
}

/* —— 第二行渐变标题：打字机敲出 + 光标闪烁 + 浮动 + 辉光呼吸 + 渐变流动 —— */
.hero-title-gradient {
  background: linear-gradient(100deg, var(--ink) 22%, var(--accent) 58%, var(--neon) 82%, var(--accent-deep) 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.typewriter {
  display: inline-block;
  white-space: nowrap;
  font-size: clamp(56px, 7vw, 90px);
  clip-path: inset(0 100% 0 0);
  border-right: 2px solid transparent;
  animation:
    typing 2.4s steps(11, end) .55s forwards,
    caretBlink 1.1s steps(1) .55s infinite,
    floatY 7s ease-in-out 3.1s infinite,
    glowPulse 4.6s ease-in-out 3.5s infinite,
    gradFlow 7s ease-in-out 3.5s infinite alternate;
}
@keyframes typing { to { clip-path: inset(0 0 0 0); } }
@keyframes caretBlink {
  0%, 100% { border-color: transparent; }
  50% { border-color: var(--accent); }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
@keyframes glowPulse {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(228, 89, 59, .22)); }
  50% { filter: drop-shadow(0 0 20px rgba(228, 89, 59, .55)); }
}
@keyframes gradFlow { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

.hero-future .hero-sub {
  margin-top: 28px; max-width: 500px;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--ink-60);
  opacity: 0; animation: riseIn .9s cubic-bezier(.2, .7, .2, 1) 2.1s forwards;
}
.hero-future .hero-sub strong { color: var(--ink); font-weight: 600; }
.hero-future .hero-actions {
  opacity: 0; animation: riseIn .9s cubic-bezier(.2, .7, .2, 1) 2.4s forwards;
}
.hero-future .btn-primary {
  background: var(--ink); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(30, 26, 22, .4);
}
.hero-future .btn-primary:hover { background: var(--accent); }
.hero-future .btn-ghost {
  border: 1px solid var(--line); color: var(--ink);
  background: rgba(255, 255, 255, .4); backdrop-filter: blur(8px);
}
.hero-future .btn-ghost:hover { border-color: var(--accent); color: var(--accent); background: rgba(255, 255, 255, .6); }

@media (prefers-reduced-motion: reduce) {
  .hero-future .hero-kicker,
  .hero-future .hero-title .ch,
  .hero-future .hero-title-line,
  .hero-future .hero-sub,
  .hero-future .hero-actions {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-future .typewriter {
    clip-path: none !important;
    border-right-color: transparent;
  }
}

.hero-scroll {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font-size: 12px; letter-spacing: .3em; color: var(--ink-40);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  z-index: 2; animation: bob 2.4s ease-in-out infinite;
}
.hero-scroll span:last-child { width: 1px; height: 34px; background: var(--ink-40); }
@keyframes bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* 3D 透视网格地面 */
.hero-grid-floor {
  position: absolute; left: -30%; right: -30%; bottom: -42%; z-index: 0;
  height: 78%; pointer-events: none;
  transform: rotateX(62deg) translateZ(0);
  transform-origin: 50% 0%;
  perspective: 1000px;
}
.hero-grid-floor-inner {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(228, 89, 59, .16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 26, 22, .10) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .85), transparent 88%);
          mask-image: linear-gradient(to top, rgba(0, 0, 0, .85), transparent 88%);
  animation: gridFlow 14s linear infinite;
  will-change: background-position;
}
@keyframes gridFlow { from { background-position: 0 0, 0 0; } to { background-position: 0 64px, 64px 0; } }

/* 星尘 */
.hero-stardust {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 28%, rgba(228, 89, 59, .55), transparent 60%),
    radial-gradient(1.4px 1.4px at 32% 62%, rgba(125, 211, 252, .7), transparent 60%),
    radial-gradient(1.8px 1.8px at 48% 18%, rgba(245, 200, 115, .8), transparent 60%),
    radial-gradient(1.4px 1.4px at 66% 74%, rgba(167, 232, 216, .8), transparent 60%),
    radial-gradient(1.6px 1.6px at 78% 36%, rgba(196, 181, 253, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 88% 58%, rgba(228, 89, 59, .45), transparent 60%),
    radial-gradient(1.3px 1.3px at 22% 84%, rgba(245, 200, 115, .6), transparent 60%),
    radial-gradient(1.7px 1.7px at 58% 8%, rgba(125, 211, 252, .6), transparent 60%),
    radial-gradient(1.4px 1.4px at 94% 12%, rgba(167, 232, 216, .7), transparent 60%),
    radial-gradient(1.5px 1.5px at 8% 52%, rgba(196, 181, 253, .6), transparent 60%);
  animation: starsDrift 18s ease-in-out infinite alternate;
}
@keyframes starsDrift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-24px, 18px, 0); } }

/* 光斑 */
.orbs { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.orb {
  position: absolute; border-radius: 50%;
  filter: blur(46px); opacity: .55; will-change: transform;
}
.orb-1 { width: 520px; height: 520px; background: var(--glow-blue); top: -140px; right: -100px; animation: drift1 26s ease-in-out infinite alternate; }
.orb-2 { width: 440px; height: 440px; background: var(--glow-gold); bottom: -120px; left: -120px; animation: drift2 32s ease-in-out infinite alternate; }
.orb-3 { width: 300px; height: 300px; background: var(--glow-mint); top: 38%; left: 52%; opacity: .4; animation: drift3 24s ease-in-out infinite alternate; }
.orb-4 { width: 220px; height: 220px; background: var(--accent); top: 22%; left: 12%; opacity: .14; animation: drift1 38s ease-in-out infinite alternate-reverse; }
.orb-5 { width: 340px; height: 340px; background: var(--glow-violet); top: 8%; left: 38%; opacity: .35; animation: drift2 36s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(70px, 46px) scale(1.12); } }
@keyframes drift2 { to { transform: translate(-60px, -40px) scale(1.08); } }
@keyframes drift3 { to { transform: translate(44px, -52px) scale(.94); } }

/* ---- 入口卡片玻璃拟态升级 ---- */
.entry-grid { perspective: 1200px; }
.entry-card {
  position: relative;
  background: var(--glass);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--glass-border);
  transform-style: preserve-3d;
  overflow: hidden;
}
.entry-card::before {
  content: ""; position: absolute; top: -60px; right: -60px; width: 180px; height: 180px; border-radius: 50%;
  background: var(--orb-c, var(--glow-blue)); opacity: .34; filter: blur(36px);
  transition: opacity .35s, transform .6s;
  transform: translateZ(30px);
}
.entry-card::after {
  content: ""; position: absolute; top: 0; left: -90%; width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.entry-card:hover::after { left: 140%; }
.entry-card:hover { box-shadow: 0 30px 60px -18px rgba(30, 26, 22, .24), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.entry-card:hover::before { opacity: .55; transform: translateZ(30px) scale(1.4); }
.entry-card.accent {
  background: linear-gradient(135deg, rgba(228, 89, 59, .9) 0%, rgba(243, 237, 229, .92) 72%, rgba(250, 246, 241, .9) 100%);
  color: var(--ink); border-color: rgba(255, 255, 255, .7);
}
.entry-card.accent h3,
.entry-card.accent .arrow,
.entry-card.accent .meta { color: var(--ink); }

/* ---- 精选作品 hover 光晕 ---- */
.featured-card {
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .35s;
}
.featured-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(420px 220px at var(--mx, 50%) var(--my, 20%), rgba(228, 89, 59, .16), transparent 70%);
  opacity: 0; transition: opacity .35s; pointer-events: none;
}
.featured-card:hover::before { opacity: 1; }
.featured-card:hover { box-shadow: 0 30px 60px -18px rgba(30, 26, 22, .26); }

/* ---- 移动端适配 ---- */
@media (hover: none), (pointer: coarse) {
  .entry-card, .featured-card { transform: none !important; transition: transform .35s, box-shadow .35s; }
  .entry-card:hover { transform: translateY(-6px) !important; }
  .featured-card:hover { transform: translateY(-6px) !important; }
  .hero-grid-floor { opacity: .5; }
  .hero-future { perspective: none; }
}
@media (max-width: 680px) {
  .hero-future .hero-title { font-size: clamp(40px, 12vw, 64px); }
  .hero-grid-floor { bottom: -30%; background-size: 46px 46px; }
  .hero-future .hero-content { padding: calc(var(--nav-h) + 36px) 0 64px; }
  .hero-future .hero-scroll { display: none; }
  /* 手机端单行放不下打字机 → 静态渐变，跟随标题字号（可换行） */
  .hero-future .typewriter {
    white-space: normal;
    font-size: inherit;
    clip-path: none;
    border-right: none;
    animation:
      floatY 7s ease-in-out 3.1s infinite,
      glowPulse 4.6s ease-in-out 3.5s infinite,
      gradFlow 7s ease-in-out 3.5s infinite alternate;
  }
}

/* ============================================================
   全站未来感升级（v21）
   ------------------------------------------------------------
   把首页「光屿光影」视觉语言扩展到全站：
   柔光底色 / 导航发光 / 页头光感网格 / 卡片玻璃拟态 / 表单辉光 /
   筛选器渐变 / 时间线光点 / 页脚光晕 / 按钮渐变。
   全部沿用 :root 光效变量，整体换肤只改变量即可。
   本区块追加在文件末尾，想回滚整段删除即可。
   ============================================================ */

/* ---- 0. 全站柔光底色（让玻璃卡有东西可模糊） ---- */
body { position: relative; }
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 620px at 88% -12%, rgba(125, 211, 252, .15), transparent 70%),
    radial-gradient(780px 540px at -4% 32%, rgba(245, 200, 115, .14), transparent 70%),
    radial-gradient(720px 520px at 104% 80%, rgba(196, 181, 253, .12), transparent 70%),
    radial-gradient(660px 480px at 8% 96%, rgba(167, 232, 216, .13), transparent 70%);
}

/* ---- 1. 导航：logo 渐变辉光 + 活动态发光 + CTA 渐变 ---- */
.nav-logo {
  background: linear-gradient(100deg, var(--ink) 18%, var(--accent) 58%, var(--neon) 92%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradFlow 8s ease-in-out infinite alternate;
  filter: drop-shadow(0 2px 8px rgba(228, 89, 59, .28));
}
.nav-logo em { background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); }
.nav.scrolled {
  background: rgba(250, 246, 241, .72);
  border-bottom-color: rgba(228, 89, 59, .16);
  box-shadow: 0 12px 32px -20px rgba(30, 26, 22, .22);
}
.nav-links a { position: relative; }
.nav-links a:hover { color: var(--accent-deep); }
.nav-links a.active {
  background: linear-gradient(135deg, rgba(228, 89, 59, .12), rgba(245, 200, 115, .22));
  color: var(--accent-deep);
  box-shadow: inset 0 0 0 1px rgba(228, 89, 59, .32), 0 4px 16px -6px rgba(228, 89, 59, .5);
}
.nav-cta {
  background: linear-gradient(135deg, var(--accent), #f2a65a);
  box-shadow: 0 10px 24px -10px rgba(228, 89, 59, .65);
}
.nav-cta:hover {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  box-shadow: 0 14px 30px -10px rgba(228, 89, 59, .78);
  transform: translateY(-1px);
}

/* ---- 2. 二级页页头：光感网格 + 渐变标题 + 底部光带 ---- */
.page-head {
  position: relative;
  border-bottom-color: transparent;
  background:
    radial-gradient(680px 320px at 86% -24%, rgba(125, 211, 252, .22), transparent 72%),
    radial-gradient(600px 280px at 2% -44%, rgba(245, 200, 115, .2), transparent 72%),
    linear-gradient(to bottom, rgba(250, 246, 241, 0), var(--bg) 26%);
  overflow: hidden;
}
.page-head::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(228, 89, 59, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 26, 22, .06) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent 94%);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .72), transparent 94%);
  animation: gridFlow 18s linear infinite;
}
.page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 89, 59, .5) 28%, rgba(125, 211, 252, .55) 72%, transparent);
}
.page-head > * { position: relative; z-index: 1; }
.page-head .section-title {
  background: linear-gradient(100deg, var(--ink) 24%, var(--accent) 56%, var(--neon) 86%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0;
  animation:
    pageHeadRise .9s cubic-bezier(.2, .7, .2, 1) .25s forwards,
    gradFlow 8s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 26px rgba(228, 89, 59, .16));
}
@keyframes pageHeadRise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ---- 3. 内容卡片玻璃拟态统一 ---- */
.video-card,
.design-card,
.skill-card,
.hobby-card {
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 4px 18px -10px rgba(30, 26, 22, .14);
  transition: transform .3s cubic-bezier(.2, .7, .3, 1.1), box-shadow .4s, border-color .3s;
}
.video-card { padding: 14px 14px 22px; border-radius: calc(var(--radius) + 4px); }
.video-card:hover,
.design-card:hover,
.skill-card:hover,
.hobby-card:hover {
  transform: translateY(-6px);
  border-color: rgba(228, 89, 59, .34);
  box-shadow: 0 26px 54px -22px rgba(30, 26, 22, .26),
              0 0 0 1px rgba(228, 89, 59, .1) inset,
              0 0 32px -10px rgba(245, 200, 115, .45);
}

/* 技能图标微光 */
.skill-icon {
  background: linear-gradient(135deg, rgba(245, 200, 115, .32), rgba(228, 89, 59, .12));
  border: 1px solid rgba(228, 89, 59, .16);
  box-shadow: 0 8px 18px -8px rgba(228, 89, 59, .4);
}

/* ---- 4. 列表行 hover 光感（文章 / 现在在做 / 联系） ---- */
.article-row,
.now-item,
.contact-item { position: relative; transition: background .3s, transform .3s; }
.article-row::before {
  content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px;
  border-radius: 3px;
  background: linear-gradient(to bottom, var(--accent), var(--glow-gold));
  opacity: 0; transform: scaleY(.35); transition: opacity .3s, transform .3s;
}
.article-row:hover::before { opacity: 1; transform: scaleY(1); }
.article-row:hover {
  background: linear-gradient(90deg, rgba(228, 89, 59, .07), rgba(255, 255, 255, .5) 58%, transparent);
  transform: translateX(4px);
}
.now-item:hover,
.contact-item:hover {
  background: linear-gradient(90deg, rgba(228, 89, 59, .06), transparent 60%);
  border-radius: 12px;
}

/* ---- 5. 表单辉光 ---- */
.form {
  background: rgba(255, 255, 255, .7);
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-color: rgba(255, 255, 255, .92);
  box-shadow: 0 34px 80px -36px rgba(30, 26, 22, .28), 0 0 0 1px rgba(228, 89, 59, .06);
}
.form input, .form textarea {
  background: rgba(255, 255, 255, .84);
  border-color: rgba(30, 26, 22, .14);
  transition: border-color .25s, box-shadow .3s, background .25s;
}
.form input:focus, .form textarea:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(228, 89, 59, .13), 0 8px 24px -8px rgba(245, 200, 115, .55);
}

/* ---- 6. 筛选器渐变 ---- */
.filter-btn { transition: color .22s, background .22s, border-color .22s, box-shadow .22s; }
.filter-btn:hover { border-color: var(--accent); color: var(--accent-deep); background: rgba(228, 89, 59, .06); }
.filter-btn.active {
  background: linear-gradient(135deg, var(--accent), #f2a65a);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 10px 22px -9px rgba(228, 89, 59, .65);
}

/* ---- 7. 按钮渐变辉光 ---- */
.btn-primary {
  background: linear-gradient(135deg, var(--accent), #f08d5e);
  box-shadow: 0 12px 28px -12px rgba(228, 89, 59, .7);
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--accent-deep), var(--accent));
  box-shadow: 0 16px 34px -12px rgba(228, 89, 59, .8);
  transform: translateY(-1px);
}
.btn-dark { box-shadow: 0 12px 26px -14px rgba(30, 26, 22, .5); }
.btn-dark:hover { box-shadow: 0 16px 32px -14px rgba(228, 89, 59, .55); }

/* ---- 8. 时间线光点 ---- */
.tl-item::before {
  background: linear-gradient(135deg, var(--accent), var(--glow-gold));
  box-shadow: 0 0 0 4px var(--accent-soft), 0 0 16px 2px rgba(245, 200, 115, .55);
}

/* ---- 9. 页脚光晕 ---- */
.footer {
  position: relative;
  border-top-color: transparent;
  background: linear-gradient(to top, rgba(245, 200, 115, .1), var(--bg) 55%);
}
.footer::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(228, 89, 59, .55) 28%, rgba(125, 211, 252, .55) 72%, transparent);
}
.footer-big {
  background: linear-gradient(100deg, var(--ink) 16%, var(--accent) 55%, var(--neon) 92%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradFlow 9s ease-in-out infinite alternate;
}
.footer-big em { background: none; -webkit-text-fill-color: var(--accent); color: var(--accent); }
.footer-bottom { border-top-color: rgba(30, 26, 22, .08); }

/* ---- 10. 文章详情页标题渐变 ---- */
.article-hero h1 {
  background: linear-gradient(100deg, var(--ink) 24%, var(--accent) 58%, var(--neon) 88%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: gradFlow 9s ease-in-out infinite alternate;
  filter: drop-shadow(0 8px 26px rgba(228, 89, 59, .14));
}

/* ---- 11. 简历卡片 ---- */
.resume-box {
  background: linear-gradient(135deg, #2A241E, var(--ink) 62%, #46392B);
  box-shadow: 0 22px 48px -22px rgba(30, 26, 22, .55);
}

/* ---- 降级：减弱动效 & 移动端 ---- */
@media (prefers-reduced-motion: reduce) {
  .nav-logo, .page-head .section-title, .footer-big, .article-hero h1 {
    background: none; -webkit-text-fill-color: var(--ink); color: var(--ink);
    animation: none; filter: none; opacity: 1;
  }
  .page-head::before { animation: none; }
}
@media (max-width: 680px) {
  .page-head::before { opacity: .5; }
  .footer-bottom {
    grid-template-columns: 1fr;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .footer-bottom > *,
  .footer-bottom > .footer-copy,
  .footer-bottom > .footer-email { text-align: center; width: 100%; }
  .footer-beian { justify-content: center; }
}

/* ============================================================
   v24 整站比例缩放 10% + 文字缩小 20%（PC / 平板）
   - html zoom 0.9 → 布局 / 图片 / 间距整体缩 10%
   - 文字在 zoom 基础上再缩 0.889（body 基准 16 → 14.22px），
     继承字号正文累计约原始 80%；大标题单独精确覆盖 ×0.889
   ============================================================ */
@media (min-width: 681px) {
  html { zoom: 0.9; }
  body { font-size: 14.22px; }

  /* 大标题精确缩到原始 80%（×0.889，覆盖 clamp / px 字号） */
  .nav-logo { font-size: 19.5px; }
  .section-title { font-size: clamp(27px, 4.45vw, 46px); }
  .hero-title { font-size: clamp(31px, 6.4vw, 76px); }
  .entry-card h3 { font-size: clamp(21px, 2.85vw, 32px); }
  .featured-card h3 { font-size: 16px; }
  .video-card h3 { font-size: 17px; }
  .design-card h3 { font-size: 16px; }
  .article-hero h1 { font-size: clamp(27px, 4.8vw, 46px); }
  .about-intro { font-size: clamp(17px, 2.15vw, 22px); }
  .footer-big { font-size: clamp(30px, 5.35vw, 57px); }
  .tl-item h3 { font-size: 18px; }
  .hobby-card h3 { font-size: 17px; }
  .now-item h3 { font-size: 17px; }
  .article-body { font-size: 14.7px; }
  /* 未来感首页 Hero 大标题（特异性更高，需再次精确覆盖） */
  .hero-future .hero-title { font-size: clamp(50px, 8.9vw, 110px); }
  .hero-future .typewriter { font-size: clamp(50px, 6.2vw, 80px); }

  /* Hero 动态视频背景不随整站缩放：反向 scale 补偿（1/0.9 ≈ 1.1111），
     视频/动效背景恢复原始覆盖尺寸；dots/label/文字仍保持缩小 */
  .hero-future .hero-media {
    transform: scale(1.1111);
    transform-origin: center;
  }
}