/* =========================================================
   潘怀素 · 书法作品集  |  纯静态 · 零依赖
   设计基调：宣纸 / 水墨 / 朱印
   ========================================================= */

:root{
  --paper:        #f6f2e9;
  --paper-warm:   #efe7d5;
  --paper-card:   #fbf8f1;
  --ink:          #15181a;
  --ink-2:        #3c4145;
  --ink-3:        #6d7277;
  --ink-4:        #9aa0a4;
  --cinnabar:     #b1352b;
  --cinnabar-2:   #c9584b;
  --gold:         #a8843c;
  --line:         rgba(21,24,26,.13);
  --line-soft:    rgba(21,24,26,.07);
  --shadow-sm:    0 6px 18px -12px rgba(21,24,26,.45);
  --shadow:       0 20px 46px -28px rgba(21,24,26,.55);
  --shadow-lg:    0 34px 70px -34px rgba(21,24,26,.6);
  --serif: "Noto Serif SC","Source Han Serif SC","Songti SC","STSong","STZhongsong","SimSun",serif;
  --kai:   "Kaiti SC","STKaiti","KaiTi","楷体",var(--serif);
  --nav-h: 72px;
  --maxw:  1280px;
  --r:     14px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 12px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--serif);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 12% -10%, #fffdf7 0%, rgba(255,253,247,0) 60%),
    radial-gradient(900px 600px at 92% 8%, #f3ece0 0%, rgba(243,236,224,0) 62%),
    linear-gradient(180deg,var(--paper) 0%, var(--paper-warm) 100%);
  background-attachment:fixed;
  line-height:1.9;
  letter-spacing:.02em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 宣纸颗粒 */
.paper-grain{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:.055; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}
.svg-defs{ position:absolute; width:0; height:0; }
main, .nav, .footer, .to-top, .lightbox{ position:relative; z-index:1; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:0; background:none; color:inherit; }
::selection{ background:rgba(177,53,43,.18); }

:focus-visible{
  outline:2px solid var(--cinnabar);
  outline-offset:3px;
  border-radius:4px;
}

/* =====================  顶部导航  ===================== */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:80;
  height:var(--nav-h);
}
.nav-bg{
  position:absolute; inset:0;
  background:rgba(246,242,233,.72);
  backdrop-filter:saturate(140%) blur(14px);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.nav.is-scrolled .nav-bg{
  background:rgba(249,246,239,.92);
  border-bottom-color:var(--line);
  box-shadow:0 10px 30px -26px rgba(21,24,26,.7);
}
.nav-inner{
  position:relative; height:100%;
  max-width:var(--maxw); margin:0 auto;
  padding:0 clamp(16px,3.2vw,40px);
  display:flex; align-items:center; gap:20px;
}

/* Logo + 站名 */
.brand{ display:flex; align-items:center; gap:12px; flex:0 0 auto; }
.brand-seal{
  width:42px; height:42px; flex:0 0 42px;
  display:grid; place-items:center;
  background:linear-gradient(150deg,var(--cinnabar-2),var(--cinnabar));
  color:#fff8f0;
  font-size:15px; font-weight:600; line-height:1;
  letter-spacing:.04em; white-space:nowrap;
  border-radius:6px;
  box-shadow:0 6px 16px -8px rgba(177,53,43,.9), inset 0 0 0 1px rgba(255,255,255,.28);
  position:relative;
  transition:transform .4s cubic-bezier(.2,.8,.25,1);
}
.brand-seal::after{
  content:""; position:absolute; inset:4px;
  border:1px solid rgba(255,255,255,.45);
  border-radius:3px;
}
.brand-seal.sm{ width:34px; height:34px; flex-basis:34px; font-size:12px; }
.brand:hover .brand-seal{ transform:rotate(-6deg) scale(1.05); }

.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-text strong{
  font-size:20px; font-weight:600; letter-spacing:.18em;
}
.brand-text em{
  font-style:normal;
  font-size:9.5px; letter-spacing:.24em;
  color:var(--ink-3); margin-top:3px;
}

/* 中间文字导航 */
.nav-links{
  flex:1 1 auto;
  display:flex; align-items:center; justify-content:center;
  gap:clamp(14px,2.4vw,38px);
}
.nav-link{
  position:relative;
  font-size:15px; letter-spacing:.16em;
  color:var(--ink-2);
  padding:8px 2px;
  transition:color .3s ease;
  white-space:nowrap;
}
.nav-link::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,transparent,var(--cinnabar),transparent);
  transform:scaleX(0); transform-origin:center;
  transition:transform .38s cubic-bezier(.2,.8,.25,1);
}
.nav-link:hover{ color:var(--ink); }
.nav-link:hover::after,
.nav-link.is-active::after{ transform:scaleX(1); }
.nav-link.is-active{ color:var(--cinnabar); }

.nav-cta{
  flex:0 0 auto;
  font-size:12.5px; letter-spacing:.14em;
  padding:9px 18px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-2);
  transition:.32s ease;
}
.nav-cta:hover{
  border-color:var(--cinnabar); color:var(--cinnabar);
  background:rgba(177,53,43,.06);
}

/* 汉堡 */
.nav-toggle{
  display:none; flex:0 0 auto;
  width:42px; height:42px; border-radius:8px;
  border:1px solid var(--line);
  position:relative;
}
.nav-toggle span{
  position:absolute; left:11px; right:11px; height:1.6px;
  background:var(--ink); border-radius:2px;
  transition:.34s cubic-bezier(.2,.8,.25,1);
}
.nav-toggle span:nth-child(1){ top:14px; }
.nav-toggle span:nth-child(2){ top:20px; }
.nav-toggle span:nth-child(3){ top:26px; }
.nav-toggle.is-open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2){ opacity:0; }
.nav-toggle.is-open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-progress{
  position:absolute; left:0; bottom:-1px; height:2px; width:0%;
  background:linear-gradient(90deg,var(--cinnabar),var(--cinnabar-2),var(--gold));
  transition:width .12s linear;
  z-index:2;
}

/* =====================  首屏  ===================== */
.hero{
  position:relative;
  min-height:100svh;
  padding:calc(var(--nav-h) + 6vh) clamp(18px,4vw,56px) 8vh;
  display:flex; flex-direction:column; justify-content:center;
  overflow:hidden;
}
.hero-deco{ position:absolute; inset:0; pointer-events:none; }
.deco-char{
  position:absolute; right:2%; top:12%;
  font-size:min(58vw,620px); line-height:.8;
  color:rgba(21,24,26,.045);
  filter:url(#inkEdge);
  user-select:none;
}
.deco-blob{
  position:absolute; border-radius:50%;
  filter:blur(46px); opacity:.5;
}
.b1{ width:340px; height:340px; left:-90px; bottom:-60px; background:rgba(21,24,26,.10); }
.b2{ width:260px; height:260px; right:8%; bottom:14%; background:rgba(177,53,43,.10); }
.b3{ width:180px; height:180px; left:38%; top:6%;  background:rgba(168,132,60,.10); }

.hero-inner{
  position:relative;
  max-width:var(--maxw); margin:0 auto; width:100%;
  display:grid; grid-template-columns:1fr auto; gap:40px;
  align-items:center;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11.5px; letter-spacing:.28em; color:var(--ink-3);
  margin:0 0 22px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%; background:var(--cinnabar);
  box-shadow:0 0 0 4px rgba(177,53,43,.14);
}

.hero-title{
  margin:0;
  display:flex; gap:clamp(4px,1vw,16px);
  font-size:clamp(58px,11.5vw,168px);
  font-weight:600; line-height:.92;
  letter-spacing:.02em;
  filter:url(#inkEdge);
}
.hero-title span{
  display:inline-block;
  text-shadow:0 22px 40px rgba(21,24,26,.14);
  animation:inkIn 1.1s cubic-bezier(.16,.9,.28,1) backwards;
}
.hero-title span:nth-child(1){ animation-delay:.05s; }
.hero-title span:nth-child(2){ animation-delay:.20s; }
.hero-title span:nth-child(3){ animation-delay:.35s; }
@keyframes inkIn{
  from{ opacity:0; transform:translateY(38px) scale(.94); filter:blur(8px); }
  to  { opacity:1; transform:none; filter:blur(0); }
}

.hero-sub{
  margin:26px 0 34px;
  font-family:var(--kai);
  font-size:clamp(15px,1.45vw,19px);
  color:var(--ink-2); line-height:2.1;
  max-width:34em;
  animation:fadeUp 1s .5s backwards;
}
@keyframes fadeUp{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:none;} }

.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; animation:fadeUp 1s .65s backwards; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 30px;
  font-size:13.5px; letter-spacing:.2em;
  border-radius:999px;
  transition:.36s cubic-bezier(.2,.8,.25,1);
  position:relative; overflow:hidden;
}
.btn-ink{
  background:var(--ink); color:var(--paper);
  box-shadow:0 16px 30px -20px rgba(21,24,26,.9);
}
.btn-ink:hover{
  background:var(--cinnabar);
  transform:translateY(-3px);
  box-shadow:0 22px 36px -22px rgba(177,53,43,.95);
}
.btn-ghost{
  border:1px solid var(--line); color:var(--ink-2);
}
.btn-ghost:hover{
  border-color:var(--ink); color:var(--ink);
  background:rgba(21,24,26,.04);
  transform:translateY(-3px);
}
.btn-more{
  border:1px dashed rgba(21,24,26,.28);
  color:var(--ink-2);
  padding:11px 34px;
}
.btn-more:hover{ border-style:solid; border-color:var(--cinnabar); color:var(--cinnabar); }
.btn-more[disabled]{ opacity:.35; cursor:default; transform:none; }

.hero-meta{
  list-style:none; padding:0; margin:46px 0 0;
  display:flex; gap:clamp(24px,4vw,58px);
  animation:fadeUp 1s .8s backwards;
}
.hero-meta li{ display:flex; flex-direction:column; gap:2px; }
.hero-meta b{
  font-size:clamp(22px,2.6vw,32px); font-weight:600; line-height:1;
  color:var(--ink);
}
.hero-meta span{ font-size:11.5px; letter-spacing:.18em; color:var(--ink-3); }

.hero-right{ display:flex; flex-direction:column; align-items:flex-end; gap:26px; }
.hero-scroll{
  writing-mode:vertical-rl;
  font-family:var(--kai);
  font-size:clamp(15px,1.5vw,20px);
  letter-spacing:.42em;
  color:var(--ink-2);
  padding:16px 6px;
  border-left:1px solid var(--line);
  animation:fadeUp 1.2s .9s backwards;
}
.hero-seal{
  width:74px; height:74px;
  display:grid; place-items:center;
  font-size:19px; line-height:1.15; letter-spacing:.04em;
  color:#fff8f0; text-align:center;
  background:linear-gradient(150deg,var(--cinnabar-2),var(--cinnabar));
  border-radius:8px;
  box-shadow:0 14px 28px -16px rgba(177,53,43,.95), inset 0 0 0 2px rgba(255,255,255,.35);
  transform:rotate(-5deg);
  animation:sealIn 1s .95s backwards;
}
@keyframes sealIn{ from{opacity:0;transform:rotate(-24deg) scale(.6);} to{opacity:1;transform:rotate(-5deg) scale(1);} }

.scroll-cue{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.3em; color:var(--ink-3);
}
.cue-line{
  width:1px; height:44px;
  background:linear-gradient(180deg,transparent,var(--ink-3));
  animation:cueMove 2.1s ease-in-out infinite;
}
@keyframes cueMove{ 0%,100%{opacity:.2; transform:scaleY(.5);} 50%{opacity:1; transform:scaleY(1);} }

/* =====================  区块通用  ===================== */
.section{
  max-width:var(--maxw);
  margin:0 auto;
  padding:clamp(64px,9vw,120px) clamp(18px,4vw,48px);
}
.sec-head{ margin-bottom:clamp(30px,4vw,52px); }
.sec-head.center{ text-align:center; }
.sec-title{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.sec-head.center .sec-title{ justify-content:center; }
.sec-title-zh{
  font-size:clamp(28px,3.6vw,44px); font-weight:600; letter-spacing:.16em;
  position:relative;
}
.sec-title-zh::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:42px; height:3px; background:var(--cinnabar);
  border-radius:2px;
}
.sec-head.center .sec-title-zh::after{ left:50%; transform:translateX(-50%); }
.sec-title-en{
  font-size:11px; letter-spacing:.34em; color:var(--ink-4);
}
.sec-desc{
  margin:16px 0 0; max-width:46em;
  font-family:var(--kai); font-size:15px; color:var(--ink-3);
}
.sec-head.center .sec-desc{ margin-left:auto; margin-right:auto; }

/* =====================  筛选栏  ===================== */
.filter-bar{
  display:flex; flex-wrap:wrap; gap:10px;
  margin-bottom:clamp(22px,3vw,34px);
  padding-bottom:20px;
  border-bottom:1px solid var(--line-soft);
}
.filter-btn{
  font-size:13px; letter-spacing:.12em;
  padding:8px 20px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--ink-2);
  transition:.3s cubic-bezier(.2,.8,.25,1);
}
.filter-btn:hover{ border-color:var(--ink-3); color:var(--ink); }
.filter-btn.is-active{
  background:var(--ink); border-color:var(--ink); color:var(--paper);
}
.filter-btn .num{
  font-size:10px; opacity:.55; margin-left:6px;
  letter-spacing:.06em;
}

/* =====================  作品瀑布流  ===================== */
.gallery{
  column-count:4;
  column-gap:clamp(14px,1.6vw,22px);
}
.work-card{
  break-inside:avoid;
  margin:0 0 clamp(14px,1.6vw,22px);
  background:var(--paper-card);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform .45s cubic-bezier(.2,.8,.25,1), box-shadow .45s, border-color .45s;
  animation:cardIn .7s backwards;
}
@keyframes cardIn{ from{opacity:0; transform:translateY(26px);} to{opacity:1; transform:none;} }
.work-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  border-color:rgba(21,24,26,.16);
}
.work-media{
  position:relative;
  width:100%;
  aspect-ratio:var(--ar, .75);
  background:linear-gradient(160deg,#fdfbf6,#f0e9db);
  overflow:hidden;
}
.work-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.8,.25,1), opacity .8s ease;
}
.work-card:hover .work-media img{ transform:scale(1.045); }

/* 图片缺失（路径填错时不显示任何替代图，只给文字提示） */
.media-missing{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:12px; letter-spacing:.2em; color:var(--ink-4);
}

.work-info{
  padding:14px 16px 16px;
  display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
}
.work-title{
  font-size:15px; letter-spacing:.08em; line-height:1.5;
  margin:0;
}
.work-sub{
  margin:5px 0 0;
  font-size:11px; letter-spacing:.1em; color:var(--ink-3);
}
.work-zoom{
  flex:0 0 auto;
  width:28px; height:28px; display:grid; place-items:center;
  border-radius:50%;
  border:1px solid var(--line);
  font-size:12px; color:var(--ink-3);
  transition:.35s;
}
.work-card:hover .work-zoom{
  background:var(--cinnabar); border-color:var(--cinnabar); color:#fff;
}

/* 空状态：作品尚未上传 */
.gallery-blank{
  text-align:center;
  padding:clamp(46px,8vw,90px) clamp(20px,5vw,48px);
  border:1px dashed rgba(21,24,26,.18);
  border-radius:18px;
  background:linear-gradient(160deg,rgba(255,255,255,.6),rgba(239,231,213,.35));
}
.gallery-blank[hidden]{ display:none; }
.blank-seal{
  display:inline-grid; place-items:center;
  width:62px; height:62px; margin-bottom:22px;
  font-size:26px; color:#fff8f0;
  background:linear-gradient(150deg,var(--cinnabar-2),var(--cinnabar));
  border-radius:8px; transform:rotate(-6deg);
  box-shadow:0 14px 26px -16px rgba(177,53,43,.9), inset 0 0 0 2px rgba(255,255,255,.35);
}
.blank-title{
  margin:0;
  font-size:clamp(19px,2.4vw,26px); font-weight:600; letter-spacing:.3em;
}
.gallery-foot{
  margin-top:clamp(26px,3vw,40px);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
.gallery-count{ font-size:11.5px; letter-spacing:.16em; color:var(--ink-4); }

/* =====================  个人简介  ===================== */
.about{ position:relative; }
.about-grid{
  display:grid;
  grid-template-columns:minmax(220px,320px) 1fr;
  gap:clamp(28px,5vw,72px);
  align-items:start;
}
.about-side{ display:flex; flex-direction:column; gap:26px; }
.v-title{
  display:flex; align-items:flex-start; gap:14px;
}
.v-title-zh{
  writing-mode:vertical-rl;
  font-size:clamp(26px,2.6vw,34px); font-weight:600; letter-spacing:.3em;
  position:relative; padding-bottom:8px;
}
.v-title-zh::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  bottom:-2px; width:3px; height:44px; background:var(--cinnabar); border-radius:2px;
}
.v-title-en{
  writing-mode:vertical-rl;
  font-size:10px; letter-spacing:.34em; color:var(--ink-4);
  padding-top:4px;
}
.portrait{ position:relative; align-self:flex-start; }
.portrait-frame{
  width:100%; max-width:300px;
  aspect-ratio:.8;
  display:grid; place-items:center;
  background:linear-gradient(160deg,#fdfbf6,#efe7d5);
  border:1px solid var(--line);
  border-radius:var(--r);
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.portrait-frame::before{
  content:""; position:absolute; inset:12px;
  border:1px solid rgba(21,24,26,.08); border-radius:8px;
}
.portrait-char{
  font-size:96px; color:rgba(21,24,26,.09);
  filter:url(#inkEdge);
}
.portrait-tag{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.2em; color:var(--ink-4);
}
.portrait-seal{
  position:absolute; right:-14px; bottom:-14px;
  width:60px; height:60px; display:grid; place-items:center;
  font-size:19px; color:#fff8f0;
  letter-spacing:.04em; white-space:nowrap;
  background:linear-gradient(150deg,var(--cinnabar-2),var(--cinnabar));
  border-radius:7px;
  transform:rotate(-7deg);
  box-shadow:0 12px 24px -14px rgba(177,53,43,.95), inset 0 0 0 2px rgba(255,255,255,.35);
}

.about-name{
  margin:0 0 18px;
  font-size:clamp(22px,2.4vw,30px); font-weight:600; letter-spacing:.1em;
}
.about-name i{
  font-style:normal; font-size:13px; letter-spacing:.2em;
  color:var(--ink-3); margin-left:10px;
}
.about-main p{
  margin:0 0 16px;
  font-size:15px; color:var(--ink-2); line-height:2.15;
}
.about-lead{
  font-family:var(--kai);
  font-size:clamp(15px,1.5vw,17.5px) !important;
  color:var(--ink) !important;
  border-left:3px solid var(--cinnabar);
  padding-left:16px;
}

.timeline{
  list-style:none; margin:34px 0 0; padding:0 0 0 22px;
  border-left:1px solid var(--line);
}
.timeline li{
  position:relative; padding:0 0 22px;
  display:grid; grid-template-columns:58px 1fr; gap:14px;
  align-items:baseline;
}
.timeline li::before{
  content:""; position:absolute; left:-27px; top:9px;
  width:9px; height:9px; border-radius:50%;
  background:var(--paper);
  border:2px solid var(--cinnabar);
}
.timeline b{ font-size:14px; letter-spacing:.08em; color:var(--cinnabar); font-weight:600; }
.timeline span{ font-size:14px; color:var(--ink-2); line-height:1.9; }

/* =====================  随笔  ===================== */
.notes-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(16px,2vw,24px);
}
.note-card{
  position:relative;
  padding:30px 26px 28px;
  background:var(--paper-card);
  border:1px solid var(--line-soft);
  border-radius:var(--r);
  box-shadow:var(--shadow-sm);
  transition:.45s cubic-bezier(.2,.8,.25,1);
}
.note-card:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  border-color:rgba(177,53,43,.28);
}
.note-no{
  position:absolute; top:14px; right:18px;
  font-size:44px; color:rgba(21,24,26,.06);
  filter:url(#inkEdge); line-height:1;
}
.note-card h4{
  margin:0 0 12px;
  font-size:18px; font-weight:600; letter-spacing:.16em;
}
.note-card p{
  margin:0; font-family:var(--kai);
  font-size:14.5px; color:var(--ink-2); line-height:2.05;
}

/* =====================  联系  ===================== */
.contact{ padding-bottom:clamp(70px,10vw,130px); }
.contact-box{
  position:relative;
  text-align:center;
  padding:clamp(46px,6vw,80px) clamp(24px,5vw,64px);
  background:
    radial-gradient(600px 300px at 50% 0%, rgba(255,255,255,.9), rgba(255,255,255,0)),
    linear-gradient(160deg,#fdfbf6,#efe7d5);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.contact-box::before{
  content:""; position:absolute; inset:14px;
  border:1px solid rgba(21,24,26,.07);
  border-radius:12px; pointer-events:none;
}
.contact-seal{
  width:66px; height:66px; margin:0 auto 22px;
  display:grid; place-items:center;
  font-size:28px; color:#fff8f0;
  background:linear-gradient(150deg,var(--cinnabar-2),var(--cinnabar));
  border-radius:8px; transform:rotate(-6deg);
  box-shadow:0 14px 28px -16px rgba(177,53,43,.95), inset 0 0 0 2px rgba(255,255,255,.35);
}
.contact-title{
  margin:0 0 10px;
  font-size:clamp(22px,2.8vw,34px); font-weight:600; letter-spacing:.14em;
}
.contact-sub{
  margin:0 0 30px; font-family:var(--kai);
  font-size:14.5px; color:var(--ink-3);
}
.contact-list{
  list-style:none; padding:0; margin:0 0 32px;
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:12px clamp(20px,4vw,48px);
}
.contact-list li{ display:flex; flex-direction:column; gap:4px; }
.contact-list span{ font-size:10.5px; letter-spacing:.24em; color:var(--ink-4); }
.contact-list a{ font-size:14.5px; letter-spacing:.06em; color:var(--ink-2); transition:color .3s; }
.contact-list a:hover{ color:var(--cinnabar); }

/* =====================  页脚  ===================== */
.footer{
  border-top:1px solid var(--line);
  background:rgba(255,255,255,.35);
  padding:clamp(30px,4vw,46px) clamp(18px,4vw,48px);
}
.footer-inner{
  max-width:var(--maxw); margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:18px 28px;
}
.footer-brand{ display:flex; align-items:center; gap:10px; font-size:14px; letter-spacing:.1em; }
.footer-nav{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-nav a{ font-size:13px; color:var(--ink-3); transition:color .3s; }
.footer-nav a:hover{ color:var(--cinnabar); }
.footer-copy{
  width:100%; margin:6px 0 0;
  font-size:11.5px; letter-spacing:.1em; color:var(--ink-4);
  text-align:center;
}

/* =====================  返回顶部  ===================== */
.to-top{
  position:fixed; right:clamp(16px,2.4vw,34px); bottom:clamp(20px,3vw,36px);
  z-index:70;
  width:56px; height:56px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(251,248,241,.92);
  border:1px solid var(--line);
  backdrop-filter:blur(10px);
  box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.9);
  transition:.45s cubic-bezier(.2,.8,.25,1);
}
.to-top.is-show{ opacity:1; visibility:visible; transform:none; }
.to-top-ring{
  position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(-90deg);
}
.to-top-ring circle{ fill:none; stroke-width:1.6; }
.ring-bg{ stroke:rgba(21,24,26,.13); transition:stroke .35s; }
.ring-fg{
  stroke:var(--cinnabar); stroke-linecap:round;
  stroke-dasharray:131.95; stroke-dashoffset:131.95;
  transition:stroke-dashoffset .15s linear, stroke .35s;
}
.to-top-arrow{
  position:relative;
  width:22px; height:22px; fill:none;
  stroke:var(--ink); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  transition:.35s;
}
.to-top:hover{
  background:var(--cinnabar); border-color:var(--cinnabar);
  transform:translateY(-4px);
}
.to-top:hover .to-top-arrow{ stroke:#fff; }
.to-top:hover .ring-bg{ stroke:rgba(255,255,255,.35); }
.to-top:hover .ring-fg{ stroke:#fff; }
.to-top-text{
  position:absolute; bottom:-2px; right:-2px;
  font-size:9px; color:var(--cinnabar);
  opacity:.75;
}
.to-top:hover .to-top-text{ color:#fff; }

/* =====================  灯箱  ===================== */
.lightbox{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:clamp(16px,4vw,48px);
  background:rgba(244,240,231,.94);
  backdrop-filter:blur(12px);
  opacity:0; transition:opacity .35s ease;
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lb-figure{
  margin:0; max-width:min(1100px,92vw); width:100%;
  display:flex; flex-direction:column; align-items:center; gap:18px;
  animation:lbIn .45s cubic-bezier(.2,.8,.25,1);
}
@keyframes lbIn{ from{opacity:0; transform:scale(.96) translateY(14px);} to{opacity:1; transform:none;} }
.lb-stage{
  max-height:74vh; width:100%;
  display:grid; place-items:center;
}
.lb-stage img{
  max-height:74vh; max-width:100%; width:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:var(--shadow-lg);
  background:#fff;
}
.lb-caption{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:8px 18px;
  font-size:13px; color:var(--ink-2);
}
.lb-title{ font-size:17px; letter-spacing:.12em; color:var(--ink); }
.lb-meta{ color:var(--ink-3); letter-spacing:.1em; }
.lb-index{ color:var(--ink-4); letter-spacing:.14em; }

.lb-close,.lb-nav{
  position:absolute;
  display:grid; place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.7);
  border:1px solid var(--line);
  color:var(--ink-2);
  transition:.3s cubic-bezier(.2,.8,.25,1);
}
.lb-close{ top:clamp(14px,3vw,28px); right:clamp(14px,3vw,28px); width:46px; height:46px; font-size:16px; }
.lb-nav{
  top:50%; transform:translateY(-50%);
  width:52px; height:52px; font-size:30px; line-height:1; padding-bottom:4px;
}
.lb-prev{ left:clamp(10px,2.5vw,26px); }
.lb-next{ right:clamp(10px,2.5vw,26px); }
.lb-close:hover,.lb-nav:hover{
  background:var(--cinnabar); border-color:var(--cinnabar); color:#fff;
  transform:translateY(-50%) scale(1.06);
}
.lb-close:hover{ transform:scale(1.06); }

/* =====================  入场动画  ===================== */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.25,1); }
.reveal.is-in{ opacity:1; transform:none; }

/* =====================  动态效果  ===================== */
/* 1) 漂浮墨点 */
.ink-field{
  position:fixed; inset:0; z-index:0;
  pointer-events:none; overflow:hidden;
}
.ink-dot{
  position:absolute;
  left:var(--x); top:var(--y);
  width:var(--s); height:var(--s);
  border-radius:50%;
  opacity:0;
  will-change:transform, opacity;
  background:radial-gradient(circle at 36% 34%,
    rgba(21,24,26,.55) 0%, rgba(21,24,26,.22) 52%, rgba(21,24,26,0) 76%);
  animation:inkDrift var(--d, 20s) var(--delay, 0s) ease-in-out infinite;
}
.ink-dot.is-red{
  background:radial-gradient(circle at 36% 34%,
    rgba(177,53,43,.5) 0%, rgba(177,53,43,.18) 52%, rgba(177,53,43,0) 76%);
}
@keyframes inkDrift{
  0%  { transform:translate3d(0,0,0) scale(.55);            opacity:0; }
  14% { opacity:var(--o,.4); }
  50% { transform:translate3d(var(--dx), calc(var(--dy) * -1), 0) scale(1.08); }
  86% { opacity:var(--o,.4); }
  100%{ transform:translate3d(calc(var(--dx) * 2), calc(var(--dy) * -2), 0) scale(.6); opacity:0; }
}

/* 1.5) 缓缓飘落的落英 */
.fall-field{
  position:fixed; inset:0; z-index:2;
  pointer-events:none; overflow:hidden;
}
.petal{
  position:absolute;
  left:var(--x); top:0;
  width:var(--s); height:calc(var(--s) * 1.25);
  border-radius:78% 6% 78% 6%;
  opacity:0;
  will-change:transform, opacity;
  background:linear-gradient(158deg,
    rgba(21,24,26,.40) 0%, rgba(21,24,26,.16) 62%, rgba(21,24,26,.05) 100%);
  animation:petalFall var(--d, 26s) var(--delay, 0s) linear infinite;
}
.petal.is-red{
  background:linear-gradient(158deg,
    rgba(177,53,43,.46) 0%, rgba(177,53,43,.18) 62%, rgba(177,53,43,.05) 100%);
}
.petal.is-gold{
  background:linear-gradient(158deg,
    rgba(168,132,60,.46) 0%, rgba(168,132,60,.18) 62%, rgba(168,132,60,.05) 100%);
}
@keyframes petalFall{
  0%  { transform:translate3d(0, -8vh, 0) rotate(0deg);      opacity:0; }
  6%  { opacity:var(--o,.3); }
  35% { transform:translate3d(var(--sw), 34vh, 0) rotate(150deg); }
  70% { transform:translate3d(calc(var(--sw) * -0.7), 72vh, 0) rotate(300deg); }
  94% { opacity:var(--o,.3); }
  100%{ transform:translate3d(calc(var(--sw) * 0.35), 112vh, 0) rotate(430deg); opacity:0; }
}

/* 2) 墨晕光标（跟随鼠标） */
.ink-cursor{
  position:fixed; top:0; left:0; z-index:4;
  width:150px; height:150px; margin:-75px 0 0 -75px;
  border-radius:50%;
  background:radial-gradient(circle,
    rgba(21,24,26,.10) 0%, rgba(21,24,26,.04) 38%, rgba(21,24,26,0) 68%);
  mix-blend-mode:multiply;
  pointer-events:none;
  opacity:0;
  transform:translate3d(-999px,-999px,0) scale(var(--cs,1));
  transition:opacity .5s ease, transform .3s cubic-bezier(.2,.8,.25,1);
  will-change:transform;
}
.ink-cursor.is-on{ opacity:1; }
.ink-cursor.is-down{ --cs:1.5; }

/* 3) 墨点涟漪 */
.btn,.filter-btn,.nav-cta,.nav-toggle{ position:relative; overflow:hidden; }
.ripple{
  position:absolute; border-radius:50%;
  background:radial-gradient(circle,rgba(21,24,26,.26),rgba(21,24,26,0) 70%);
  pointer-events:none;
  animation:rippleOut .62s cubic-bezier(.2,.8,.25,1) forwards;
}
.btn-ink .ripple{ background:radial-gradient(circle,rgba(255,255,255,.32),rgba(255,255,255,0) 70%); }
@keyframes rippleOut{
  from{ transform:translate(-50%,-50%) scale(0); opacity:.9; }
  to  { transform:translate(-50%,-50%) scale(1); opacity:0; }
}

/* 4) 首屏装饰：鼠标 + 滚动视差 */
.deco-char{
  transform:translate3d(calc(var(--mx,0) * -18px), calc(var(--my,0) * -14px + var(--sy,0px)), 0);
  transition:transform .7s cubic-bezier(.2,.8,.25,1);
}
.deco-blob{
  transform:translate3d(calc(var(--mx,0) * 30px), calc(var(--my,0) * 22px), 0);
  transition:transform 1s cubic-bezier(.2,.8,.25,1);
}

/* 5) 印章呼吸 / 悬停 */
@keyframes sealFloat{
  0%,100%{ transform:rotate(-5deg) translateY(0); }
  50%    { transform:rotate(-2deg) translateY(-9px); }
}
.hero-seal{ animation:sealIn 1s .95s backwards, sealFloat 6.5s 2.2s ease-in-out infinite; }
.contact-seal{ transition:transform .55s cubic-bezier(.2,.8,.25,1); }
.contact-box:hover .contact-seal{ transform:rotate(7deg) scale(1.07); }
.blank-seal{ transition:transform .55s cubic-bezier(.2,.8,.25,1); }
.gallery-blank:hover .blank-seal{ transform:rotate(6deg) scale(1.06); }

/* 6) 区块标题朱线生长 */
.sec-title-zh::after{ width:0; transition:width .95s .25s cubic-bezier(.2,.8,.25,1); }
.sec-head.is-in .sec-title-zh::after{ width:42px; }

/* 7) 时间轴墨点 */
.timeline li::before{ transform:scale(0); transition:transform .55s cubic-bezier(.2,.8,.25,1); }
.timeline li.is-in::before{ transform:scale(1); }

/* 8) 随笔序号 */
.note-no{ transition:transform .55s cubic-bezier(.2,.8,.25,1), color .55s; }
.note-card:hover .note-no{ transform:scale(1.14) rotate(-5deg); color:rgba(177,53,43,.16); }

/* 9) 导航链接微动 */
.nav-link{ transition:color .3s ease, transform .3s cubic-bezier(.2,.8,.25,1); }
.nav-link:hover{ transform:translateY(-2px); }

/* 10) 作品图淡入 */
.work-media img{ opacity:0; }
.work-media img.is-loaded{ opacity:1; }

/* 11) 联系方式：待填虚线 */
.contact-list a.is-empty{
  display:inline-block; min-width:132px; height:1.7em;
  border-bottom:1px dashed rgba(21,24,26,.24);
  vertical-align:bottom;
  transition:border-color .3s;
}
.contact-list a.is-empty:hover{ border-bottom-color:rgba(177,53,43,.5); }

/* =====================  响应式  ===================== */
@media (max-width:1180px){
  .gallery{ column-count:3; }
}
@media (max-width:1024px){
  .nav-links{
    position:fixed; inset:var(--nav-h) 0 auto 0;
    flex-direction:column; align-items:flex-start;
    gap:0;
    padding:14px clamp(20px,6vw,40px) 26px;
    background:rgba(249,246,239,.98);
    backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
    transform:translateY(-12px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:.38s cubic-bezier(.2,.8,.25,1);
    max-height:calc(100svh - var(--nav-h));
    overflow-y:auto;
  }
  .nav-links.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
  .nav-link{
    width:100%; font-size:17px; letter-spacing:.2em;
    padding:16px 0; border-bottom:1px solid var(--line-soft);
  }
  .nav-link::after{ display:none; }
  .nav-link.is-active{ color:var(--cinnabar); }
  .nav-cta{ display:none; }
  .nav-toggle{ display:block; }
  .hero-inner{ grid-template-columns:1fr; gap:34px; }
  .hero-right{ flex-direction:row; align-items:center; justify-content:space-between; width:100%; }
  .hero-scroll{ writing-mode:horizontal-tb; letter-spacing:.3em; border-left:0; border-top:1px solid var(--line); padding:12px 0 0; }
  .about-grid{ grid-template-columns:1fr; }
  .about-side{ flex-direction:row; align-items:flex-start; gap:24px; }
  .portrait-frame{ max-width:220px; }
}
@media (max-width:860px){
  .gallery{ column-count:2; }
}
@media (max-width:640px){
  :root{ --nav-h:64px; }
  body{ line-height:1.85; }
  .hero{ min-height:auto; padding-top:calc(var(--nav-h) + 8vh); padding-bottom:14vh; }
  .hero-title{ letter-spacing:0; }
  .hero-meta{ gap:24px; margin-top:34px; }
  .hero-right{ flex-direction:row-reverse; }
  .hero-seal{ width:58px; height:58px; font-size:15px; }
  .scroll-cue{ display:none; }
  .gallery{ column-count:1; }
  .filter-bar{ gap:8px; }
  .filter-btn{ padding:7px 15px; font-size:12px; }
  .sec-title{ gap:10px; }
  .about-side{ flex-direction:column; }
  .portrait-frame{ max-width:100%; }
  .timeline li{ grid-template-columns:1fr; gap:2px; }
  .lb-nav{ width:42px; height:42px; font-size:24px; }
  .to-top{ width:48px; height:48px; }
}
@media (max-width:400px){
  .brand-text em{ display:none; }
  .hero-title{ font-size:clamp(48px,15vw,80px); }
}

/* 减少动效偏好 */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}

/* 打印 */
@media print{
  .nav,.to-top,.lightbox,.scroll-cue,.paper-grain{ display:none !important; }
  body{ background:#fff; }
}