:root{
  --paper:#f6f1e5;
  --paper-deep:#efe7d3;
  --ink:#2a2a28;
  --ink-soft:#5c584f;
  --ink-faint:#8f8a7c;
  --cinnabar:#9e2b25;
  --cinnabar-deep:#7c1f1a;
  --sage:#6b7d6a;
  --line:#d8cfba;
  --font-ui:"Songti SC","STSong","SimSun","Noto Serif CJK SC",serif;
  --font-poem:"Kaiti SC","STKaiti","KaiTi","DFKai-SB","LXGW WenKai","Songti SC","STSong",serif;
  --font-display:"Ma Shan Zheng Display","STKaiti","KaiTi",cursive;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-ui);
  overflow-x:hidden;
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(158,43,37,.03), transparent 50%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.bg-motifs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.motif{position:absolute;width:min(31vw,330px);opacity:0;will-change:opacity,transform;transition:opacity .45s ease,transform .7s ease}.motif img{display:block;width:100%;height:auto;filter:saturate(.78) contrast(.9)}
.motif-left{left:-4vw}.motif-right{right:-4vw}.motif:nth-child(1){top:8vh}.motif:nth-child(2){top:31vh}.motif:nth-child(3){top:58vh}.motif:nth-child(4){top:80vh}
::selection{background:var(--cinnabar);color:var(--paper)}

/* ===== 卷轴式导航 ===== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:space-between;align-items:center;
  padding:18px 5vw;
  background:linear-gradient(to bottom, rgba(246,241,229,.96), rgba(246,241,229,.85));
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--line);
  transition:transform .4s ease;
}
nav.hidden{transform:translateY(-100%)}
.nav-brand{
  font-family:var(--font-display);
  font-size:26px;letter-spacing:4px;color:var(--ink);
  display:flex;align-items:center;gap:12px;text-decoration:none;
}
.nav-seal{
  width:30px;height:30px;background:var(--cinnabar);color:#fff;
  display:grid;place-items:center;border-radius:4px;
  font-size:15px;letter-spacing:0;
  box-shadow:2px 2px 0 rgba(42,42,40,.15);
  transform:rotate(-3deg);
}
.nav-logo{width:30px;height:30px;object-fit:contain}
.nav-links{display:flex;gap:34px;list-style:none}
.nav-links a{
  text-decoration:none;color:var(--ink-soft);font-size:15px;
  letter-spacing:6px;position:relative;padding:4px 0;
  transition:color .3s;
}
.nav-links a::after{
  content:"";position:absolute;left:50%;bottom:-4px;width:0;height:2px;
  background:var(--cinnabar);transition:all .35s;transform:translateX(-50%);
}
.nav-links a:hover{color:var(--cinnabar)}
.nav-links a:hover::after{width:100%}

/* ===== Banner ===== */
.hero{
  position:relative;height:100vh;min-height:640px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ink-mountains{position:absolute;inset:0;pointer-events:none}
.mist{
  position:absolute;border-radius:50%;filter:blur(60px);
  background:rgba(255,255,255,.55);
  animation:drift 26s ease-in-out infinite alternate;
}
.mist.m1{width:44vw;height:16vh;top:56%;left:-6%}
.mist.m2{width:36vw;height:14vh;top:68%;right:-4%;animation-duration:32s;animation-delay:-8s}
.mist.m3{width:28vw;height:10vh;top:44%;left:30%;animation-duration:38s;animation-delay:-16s;opacity:.5}
@keyframes drift{
  from{transform:translateX(-3vw)}
  to{transform:translateX(4vw)}
}
.hero-content{
  position:relative;z-index:2;display:flex;align-items:center;
  gap:6vw;flex-direction:row-reverse;
}
.hero-title{
  writing-mode:vertical-rl;
  font-family:var(--font-display);
  font-size:clamp(64px,10vw,128px);
  letter-spacing:.18em;color:var(--ink);
  text-shadow:0 2px 0 rgba(255,255,255,.4);
  animation:inkIn 1.6s cubic-bezier(.2,.8,.2,1) both;
}
.hero-sub{
  writing-mode:vertical-rl;
  font-size:clamp(16px,1.6vw,21px);letter-spacing:.9em;
  color:var(--ink-soft);height:auto;max-height:60vh;
  animation:inkIn 1.6s .35s cubic-bezier(.2,.8,.2,1) both;
  border-right:1px solid var(--line);padding-right:18px;
}
@keyframes inkIn{
  from{opacity:0;filter:blur(10px);transform:translateY(24px)}
  to{opacity:1;filter:blur(0);transform:translateY(0)}
}
.hero-seal{
  position:absolute;bottom:12vh;right:calc(50% - min(38vw,340px));
  width:92px;height:92px;display:grid;place-items:center;
  transform:rotate(4deg);z-index:3;
  filter:drop-shadow(3px 3px 1px rgba(42,42,40,.2));
  animation:stampIn .5s 1.5s cubic-bezier(.3,1.6,.4,1) both;
}
.hero-seal img{width:100%;height:100%;object-fit:contain}
@keyframes stampIn{
  from{opacity:0;transform:rotate(14deg) scale(2.2)}
  to{opacity:1;transform:rotate(4deg) scale(1)}
}
.scroll-hint{
  position:absolute;bottom:34px;left:50%;transform:translateX(-50%);
  z-index:3;color:var(--ink-faint);font-size:13px;letter-spacing:6px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.scroll-hint::after{
  content:"";width:1px;height:44px;
  background:linear-gradient(var(--ink-faint),transparent);
  animation:thread 2s ease-in-out infinite;
}
@keyframes thread{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ===== 通用节 ===== */
section{position:relative}
.wrap{max-width:1180px;margin:0 auto;padding:0 5vw}
.sec-head{
  display:flex;align-items:baseline;gap:22px;
  padding:110px 0 50px;flex-wrap:wrap;
}
.sec-head .v-label{
  writing-mode:vertical-rl;font-size:13px;letter-spacing:8px;
  color:var(--cinnabar);border-left:1px solid var(--cinnabar);padding-left:10px;
  height:72px;
}
.sec-head h2{
  font-family:var(--font-display);
  font-size:clamp(34px,4.5vw,52px);font-weight:400;letter-spacing:10px;
}
.sec-head .en{
  font-size:12px;letter-spacing:5px;color:var(--ink-faint);
  text-transform:uppercase;margin-left:auto;
}
.ink-divider{
  height:1px;border:none;
  background:linear-gradient(to right,var(--line),var(--cinnabar) 30%,var(--line) 70%,transparent);
  opacity:.6;
}

/* ===== 诗人介绍 ===== */
#poet{background:var(--paper-deep)}
.poet-grid{display:grid;grid-template-columns:340px 1fr;gap:6vw;padding-bottom:110px;align-items:start}
.poet-portrait{
  position:relative;aspect-ratio:3/4;
  background:linear-gradient(160deg,#efe8d6,#e6dcc2);
  border:1px solid var(--line);
  box-shadow:6px 6px 0 rgba(42,42,40,.08);
  display:grid;place-items:center;overflow:hidden;
}
.poet-portrait img{width:100%;height:100%;object-fit:cover;filter:sepia(.16) contrast(.96)}
.portrait-frame{
  position:absolute;inset:12px;border:1px solid rgba(158,43,37,.35);pointer-events:none;
}
.portrait-caption{
  position:absolute;bottom:18px;right:18px;
  writing-mode:vertical-rl;font-size:13px;letter-spacing:6px;color:var(--ink-soft);
}
.poet-text .poet-name{
  font-family:var(--font-display);
  font-size:44px;letter-spacing:8px;margin-bottom:6px;
}
.poet-text .poet-zi{font-size:14px;color:var(--cinnabar);letter-spacing:4px;margin-bottom:28px}
.poet-text p{
  font-size:16.5px;line-height:2.2;color:var(--ink-soft);
  text-align:justify;margin-bottom:18px;text-indent:2em;
}
.poet-stats{
  display:flex;gap:0;margin-top:36px;border-top:1px solid var(--line);
}
.stat{
  flex:1;padding:22px 8px 4px;text-align:center;
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:none}
.stat b{
  display:block;font-size:34px;font-weight:600;color:var(--cinnabar);
  font-family:var(--font-ui);
}
.stat span{font-size:13px;letter-spacing:4px;color:var(--ink-faint)}

/* ===== 瀑布流 ===== */
.filter-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:16px;padding-top:44px}
.filter-select,.poem-search{width:100%;min-height:45px;padding:9px 14px;border:1px solid var(--line);border-radius:2px;background:rgba(251,247,236,.88);color:var(--ink);font:inherit;letter-spacing:2px;outline:none}
.filter-select:focus,.poem-search:focus{border-color:var(--cinnabar)}
.poem-search-row{margin-bottom:44px}
.filter-btn{
  font-family:inherit;font-size:14px;letter-spacing:4px;
  padding:9px 22px 9px 26px;background:transparent;
  border:1px solid var(--line);color:var(--ink-soft);
  cursor:pointer;transition:all .3s;border-radius:2px;
}
.filter-btn:hover{border-color:var(--cinnabar);color:var(--cinnabar)}
.filter-btn.active{
  background:var(--cinnabar);border-color:var(--cinnabar);color:#fdf8ec;
  box-shadow:2px 2px 0 rgba(42,42,40,.15);
}
.waterfall{columns:3 300px;column-gap:26px;padding-bottom:110px}
.poem-card{
  break-inside:avoid;margin-bottom:26px;
  background:#fbf7ec;
  border:1px solid var(--line);
  padding:30px 26px 24px;position:relative;
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);
  opacity:0;transform:translateY(26px);
}
.poem-card.show{opacity:1;transform:translateY(0)}
.poem-card::before{
  content:"";position:absolute;top:10px;left:10px;right:10px;bottom:10px;
  border:1px solid rgba(216,207,186,.55);pointer-events:none;
}
.poem-tag{
  position:absolute;top:-1px;right:22px;
  writing-mode:vertical-rl;
  background:var(--cinnabar);color:#fdf8ec;
  font-size:11px;letter-spacing:3px;padding:10px 5px;
  border-radius:0 0 3px 3px;
}
.poem-card h3{
  font-family:var(--font-poem);
  font-size:25px;font-weight:600;letter-spacing:3px;margin-bottom:8px;
}
.poem-meta{font-size:12.5px;color:var(--ink-faint);letter-spacing:3px;margin-bottom:16px}
.poem-meta em{font-style:normal;color:var(--cinnabar)}
.poem-preview{margin:14px 0 2px;white-space:pre-wrap;color:var(--ink-soft);font:15.5px/2.05 var(--font-poem);max-height:none;overflow-wrap:normal}
.poem-foot{
  margin-top:20px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:12px;color:var(--ink-faint);letter-spacing:2px;
  display:flex;justify-content:space-between;
}

/* ===== 页脚 ===== */
footer{
  background:#26241f;color:#b9b2a0;
  padding:70px 5vw 40px;text-align:center;position:relative;overflow:hidden;
}
footer .f-title{
  font-family:var(--font-display);
  font-size:34px;letter-spacing:12px;color:#e8e0cb;margin-bottom:14px;
}
footer .f-line{font-size:13.5px;letter-spacing:5px;line-height:2.4;color:#8d8672}
footer .f-ink{
  position:absolute;bottom:-60px;left:50%;transform:translateX(-50%);
  width:120%;opacity:.06;pointer-events:none;
}
footer hr{border:none;height:1px;background:#3a372f;margin:34px auto 22px;max-width:520px}
footer .f-copy{font-size:12px;letter-spacing:3px;color:#6c6656}

@media (max-width:820px){
  .poet-grid{grid-template-columns:1fr;gap:44px}
  .poet-portrait{max-width:320px;margin:0 auto}
  .hero-content{gap:10vw}
  .hero-seal{right:8vw;bottom:9vh;width:58px;height:58px}
  .hero-seal span{font-size:20px}
  .nav-links{display:none}
  .motif{width:52vw;opacity:.09}
  .filter-bar{grid-template-columns:1fr}
}