/* wenfang.css · 2026-10-20 · 文房层：把被 editorial.css 遮住的旧语素唤回，并延伸到各内页
   全站最后加载，只补不拆。撤回：在各页去掉本文件与 wenfang.js 的引用即可。 */

/* ---------- 0. 落墨洇纸：theme.js 点击时插入 .ink-drop，这里给它晕开的样子（原先只写在 post.css） ---------- */
.site-header .brand,.doc-row,.quiet-story,.quiet-note-grid article,.album-card,.filter-bar button{position:relative}
.ink-drop{position:absolute;z-index:0;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,var(--ink) 0%,transparent 70%);mix-blend-mode:multiply;
  animation:wf-ink .8s cubic-bezier(.16,1,.3,1) forwards}
.ink-drop--lg{width:34px;height:34px;margin:-17px 0 0 -17px}
:root[data-theme=dark] .ink-drop{mix-blend-mode:screen;background:radial-gradient(circle,var(--ink) 0%,transparent 70%)}
@keyframes wf-ink{0%{opacity:.42;transform:scale(.35);filter:blur(1px)}45%{opacity:.26}100%{opacity:0;transform:scale(6);filter:blur(5px)}}

/* 印章通用：朱文小印 */
.motif-seal,.wf-seal{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:8px;vertical-align:1px;
  border:1px solid var(--cinnabar);color:var(--cinnabar);font:normal 11px/1 var(--font-kai);border-radius:2px 3px 2px 3px;opacity:.85}
/* 名章：白文「若汐」 */
.motif-name-seal{display:inline-block;margin-left:14px;padding:4px 2px;vertical-align:middle;writing-mode:vertical-rl;
  background:var(--cinnabar);color:var(--paper);font:12px/1.05 var(--font-kai);letter-spacing:.1em;border-radius:2px 3px 2px 2px;transform:rotate(-3deg);opacity:.9}

/* ---------- 1. 四个主栏目眉栏：诗经题辞 + 朱印（.hero-side 原被隐藏） ---------- */
.page-hero:has(.hero-side){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px}
.page-hero .hero-side{display:flex;flex-direction:column;align-items:center;gap:14px;padding:0 4px 6px 0}
.page-hero .page-mark{writing-mode:vertical-rl;font:17px/1 var(--font-kai);letter-spacing:.46em;color:var(--muted);opacity:.9}
.page-hero .page-seal{display:grid;place-items:center;width:31px;height:33px;color:#f8efe6;font:19px/1 var(--font-kai);
  background:radial-gradient(40% 36% at 30% 26%,rgba(255,244,238,.2),transparent 70%),radial-gradient(46% 42% at 74% 80%,rgba(118,28,18,.3),transparent 72%),var(--cinnabar);
  border-radius:4px 2px 5px 2px/2px 5px 2px 4px;transform:rotate(-4deg);box-shadow:inset 0 0 0 1px rgba(250,246,238,.35);
  animation:wf-stamp .7s cubic-bezier(.34,1.4,.64,1) .35s both}
:root[data-theme=dark] .page-hero .page-seal{color:#283039}
@keyframes wf-stamp{from{opacity:0;transform:scale(1.35) rotate(-4deg)}to{opacity:1;transform:scale(1) rotate(-4deg)}}
@media(max-width:480px){
  .page-hero:has(.hero-side){gap:16px}
  .page-hero .page-mark{font-size:13px;letter-spacing:.32em}
  .page-hero .page-seal{width:24px;height:26px;font-size:15px}
}

/* ---------- 2. 首页：画心裱边、手札余味、日期小点 ---------- */
/* 眉栏照片像裱在书页上的一帧画心：一圈纸边 + 一道细线，底边向纸色微微洇开 */
.index-page .reading-intro{border-radius:3px;margin-top:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 -26px 34px -24px rgba(248,245,237,.32),
    0 0 0 7px var(--surface),0 0 0 8px var(--line),0 22px 40px -22px rgba(37,48,38,.3)}
:root[data-theme=dark] .index-page .reading-intro{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 7px var(--surface),0 0 0 8px var(--line),0 22px 40px -22px rgba(0,0,0,.4)}
@media(max-width:700px){.index-page .reading-intro{box-shadow:0 0 0 5px var(--surface),0 0 0 6px var(--line),0 16px 30px -20px rgba(37,48,38,.3)}}
/* 手札摘要：第二行末尾渐隐，话未说完 */
.index-page .quiet-note-grid p{text-overflow:clip;
  -webkit-mask-image:linear-gradient(#000 0 50%,transparent 50%),linear-gradient(90deg,#000 45%,transparent 97%);
          mask-image:linear-gradient(#000 0 50%,transparent 50%),linear-gradient(90deg,#000 45%,transparent 97%)}
/* 日期前一粒朱砂，后缀当日节气小字（wenfang.js 写入） */
.index-page .quiet-note-grid time::before{content:"";display:inline-block;width:5px;height:5px;margin-right:9px;border-radius:50%;background:var(--cinnabar);vertical-align:2px;opacity:.8}
.wf-term{margin-left:10px;padding-left:10px;border-left:1px solid var(--line-ink);font:12px/1.8 var(--font-kai);color:var(--moss);letter-spacing:.14em}

/* ---------- 3. 文章目录：卷号、分类小印、书签式筛选 ---------- */
.doc-row{grid-template-columns:26px 90px minmax(0,1fr) 96px}
.doc-no{display:block;grid-row:1/span 2;writing-mode:vertical-rl;text-orientation:upright;font:13px/1 var(--font-kai);letter-spacing:.16em;color:var(--muted);padding-top:7px;opacity:.82}
.doc-cat{white-space:nowrap}
.doc-row .doc-cat::before{display:inline-grid;place-items:center;width:17px;height:17px;margin-right:7px;vertical-align:1px;border:1px solid var(--cinnabar);color:var(--cinnabar);font:normal 11px/1 var(--font-kai);border-radius:2px 3px 2px 3px;opacity:.85}
.doc-row[data-category=literature] .doc-cat::before{content:"文"}
.doc-row[data-category=history] .doc-cat::before{content:"史"}
.doc-row[data-category=life] .doc-cat::before{content:"思"}
.doc-row[data-category=tech] .doc-cat::before{content:"技"}
@media(max-width:760px){
  .doc-row{grid-template-columns:22px 78px minmax(0,1fr)}
  .doc-cat{grid-column:3}
}
@media(max-width:480px){
  .doc-row{position:relative}
  .doc-no{position:absolute;right:0;top:25px;writing-mode:horizontal-tb;padding:0;font-size:12px;letter-spacing:.1em}
}
/* 筛选：去掉方框与整块墨底，选中处落一笔朱砂 */
.filter-bar{gap:4px 24px}
.filter-bar button,.filter-bar button[aria-pressed]{border:0;border-radius:0;padding:6px 2px 10px;background:none;color:var(--muted);font:15px/1.5 var(--font-kai);letter-spacing:.08em}
.filter-bar button:hover{color:var(--ink)}
.filter-bar button[aria-pressed=true]{color:var(--ink);background:none;
  background-image:radial-gradient(ellipse 22% 100% at 12% 50%,var(--cinnabar) 0 35%,transparent 72%),
    linear-gradient(90deg,transparent 0,var(--cinnabar) 10%,color-mix(in srgb,var(--cinnabar) 70%,transparent) 76%,transparent 100%);
  background-repeat:no-repeat;background-position:50% calc(100% - 2px);background-size:92% 3px}
@media(max-width:480px){.filter-bar{gap:2px 16px}.filter-bar button,.filter-bar button[aria-pressed]{font-size:14px;padding:6px 1px 9px}}
.pager-btn{border-color:transparent;font-family:var(--font-kai);font-size:14px}
.pager-btn.is-current{background:none;color:var(--cinnabar);border:1px solid var(--cinnabar);border-radius:2px 3px 2px 3px}

/* ---------- 4. 长文页：古籍版刻（界栏、首字、鱼尾、宣纸） ---------- */
@media(min-width:900px){
  .article-page .article{max-width:768px;padding-left:48px;padding-right:48px;
    border-left:3px double color-mix(in srgb,var(--line-ink) 75%,transparent);border-right:3px double color-mix(in srgb,var(--line-ink) 75%,transparent)}
}
.article-page .article .dropcap{float:left;margin:.08em .14em 0 0;font:3.05em/.86 var(--font-title);color:var(--cinnabar)}
.article-page .article h2:first-of-type + p::first-letter{float:none;margin:0;font:inherit;line-height:inherit;color:inherit}
.article-page .article .dropcap-p{font-size:.36em;vertical-align:top;color:var(--muted)}
.article-page .article h2:not(:first-of-type){margin-top:3.4rem}
.article-page .article h2:not(:first-of-type)::before{content:"";display:block;position:static;width:2.5rem;height:.78rem;margin:0 auto 2.4rem;
  background:var(--muted);opacity:.42;clip-path:polygon(0 0,100% 0,100% 100%,50% 42%,0 100%)}
.article-page .article blockquote{font-family:var(--font-kai)}
body.article-page::after{content:"";display:block;position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.42;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .40 0 0 0 0 .33 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
:root[data-theme=dark] body.article-page::after{opacity:.22;mix-blend-mode:screen}
/* 朱批：楷体朱砂小字，用于金句、批语。写法：<blockquote class="zhupi">…</blockquote> 或 <p class="zhupi">…</p> */
.article-page .article .zhupi{position:relative;margin:1.8em 0;padding:0 0 0 2.1em;border:0;background:none;
  font:16px/1.95 var(--font-kai);color:var(--cinnabar-deep);letter-spacing:.03em}
.article-page .article .zhupi p{margin:0;font:inherit;color:inherit}
.article-page .article .zhupi::before{content:"批";position:absolute;left:0;top:.35em;display:grid;place-items:center;width:1.35em;height:1.35em;
  border:1px solid currentColor;border-radius:2px 3px 2px 3px;font:12px/1 var(--font-kai);opacity:.75}
/* 眉批：宽屏移到正文右侧天头，窄屏与朱批同 */
@media(min-width:1240px){
  .article-page .article .meipi{float:right;clear:right;width:180px;margin:.3em -236px 1em 0;padding:10px 0 0 0;border:0;border-top:1px solid color-mix(in srgb,var(--cinnabar) 45%,transparent);background:none;
    font:14px/1.9 var(--font-kai);color:var(--cinnabar-deep)}
  .article-page .article .meipi::before{display:none}
  .article-page .article .meipi p{margin:0;font:inherit;color:inherit}
}

/* ---------- 5. 手札：卷首随时令、折枝底纹、统一的眉标与落款 ---------- */
.notes-preface{position:relative;isolation:isolate;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.notes-preface::after{content:"";position:absolute;right:6px;bottom:-6px;z-index:-1;width:112px;height:134px;pointer-events:none;
  background:no-repeat right bottom/contain;opacity:.36}
:root[data-season=spring] .notes-preface::after{background-image:url("/ink-sprig-spring.svg")}
:root[data-season=summer] .notes-preface::after{background-image:url("/ink-sprig-summer.svg")}
:root[data-season=autumn] .notes-preface::after{background-image:url("/ink-sprig-autumn.svg")}
:root[data-season=winter] .notes-preface::after{background-image:url("/ink-sprig-winter.svg")}
:root[data-theme=dark] .notes-preface::after{filter:grayscale(.4) brightness(1.7);opacity:.28}
.notes-preface-copy{padding-right:70px}
@media(max-width:760px){.notes-preface-copy{padding-right:0}.notes-preface::after{width:84px;height:100px;opacity:.26}}
.jot-note-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.jot-note-head .jot-kicker{margin:0;font:12px/1.6 var(--font-kai);letter-spacing:.2em;color:var(--moss)}
.jot-note-head .jot-index{float:none;font:12px/1.6 var(--font-kai);letter-spacing:.12em;color:var(--muted)}
.jot .place{display:block;margin-top:20px;text-align:right;font:14px/1.8 var(--font-kai);letter-spacing:.12em;color:var(--muted)}
.jot .place::before{content:"";display:inline-block;width:22px;height:1px;margin-right:10px;background:var(--line-ink);vertical-align:.35em}

/* ---------- 6. 影像：看图弹窗也带题签 ---------- */
.image-dialog{background:var(--surface);box-shadow:inset 0 0 0 7px var(--surface),inset 0 0 0 8px var(--line),0 30px 80px -30px rgba(0,0,0,.5)}
.image-dialog p{font:14px/1.9 var(--font-kai);color:var(--ink-2)}
.wf-cap-idx{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 3px;margin:0 10px 0 0;vertical-align:1px;
  background:var(--cinnabar);color:#f8efe6;font:13px/1 var(--font-kai);border-radius:2px 3px 2px 3px;transform:rotate(-3deg)}
.wf-cap-title{font:17px/1.7 var(--font-title);color:var(--ink);letter-spacing:.1em}
.wf-cap-sub{display:block;margin-top:4px;font-size:13px;color:var(--muted)}
@media(min-width:760px){
  .image-dialog[open]{display:grid;grid-template-columns:auto auto;align-items:start;gap:0 24px;padding:58px 30px 30px 34px}
  .image-dialog img{grid-column:1;max-height:80dvh;max-width:calc(92vw - 170px)}
  .image-dialog p{grid-column:2;margin:0;max-height:80dvh;writing-mode:vertical-rl;text-align:start;letter-spacing:.14em}
  .image-dialog .wf-cap-idx{margin:0 0 12px;transform:rotate(-3deg)}
  .image-dialog .wf-cap-idx,.image-dialog .wf-cap-idx *{writing-mode:horizontal-tb}
  .image-dialog .wf-cap-sub{margin:0 10px 0 0;font-size:13px;letter-spacing:.1em}
}

/* ---------- 7. 曲库：封面加纸框，播放中钤一枚音符朱印 ---------- */
.library-pick img,.library-cover-placeholder{padding:3px;background:var(--surface);border:1px solid var(--line);box-shadow:0 3px 8px -5px rgba(37,48,38,.35);border-radius:1px}
.library-play{position:relative;border-radius:2px 3px 2px 3px;border-color:color-mix(in srgb,var(--cinnabar) 55%,transparent);color:var(--cinnabar);transform:rotate(-3deg)}
.library-pick[aria-pressed=true] .library-play{background:var(--cinnabar);border-color:var(--cinnabar);color:#f8efe6;font-size:0}
.library-pick[aria-pressed=true] .library-play::before{content:"♪";font:15px/1 var(--font-kai)}
.library-pick[aria-pressed=true] .library-play::after{content:"";position:absolute;inset:-1px;border:1px solid var(--cinnabar);border-radius:inherit;animation:wf-ripple 2.6s ease-out infinite}
.library-pick:hover .library-title,.library-pick[aria-pressed=true] .library-title{color:var(--cinnabar)}
@keyframes wf-ripple{from{opacity:.55;transform:scale(1)}to{opacity:0;transform:scale(2.2)}}

/* ---------- 8. 关于：做成一页花笺 ---------- */
.about-letter{position:relative;max-width:760px;padding:46px 52px 40px;border:1px solid var(--line);
  background-color:transparent;
  background-image:repeating-linear-gradient(90deg,transparent 0 calc(3.4em - 1px),color-mix(in srgb,var(--cinnabar) 8%,transparent) calc(3.4em - 1px) 3.4em),linear-gradient(var(--surface),var(--surface));
  background-origin:content-box,border-box;background-clip:content-box,border-box;
  outline:1px solid color-mix(in srgb,var(--cinnabar) 22%,transparent);outline-offset:-15px;
  box-shadow:0 18px 40px -26px rgba(37,48,38,.35)}
.about-letter .about-reading{border-color:color-mix(in srgb,var(--cinnabar) 18%,var(--line))}
.letter-sign{margin:34px 0 0;text-align:right;font:17px/2 var(--font-kai);letter-spacing:.24em;color:var(--ink-2)}
.letter-sign small{display:block;font-size:13px;letter-spacing:.14em;color:var(--muted)}
@media(max-width:760px){.about-letter{padding:30px 24px 28px;outline-offset:-10px}.letter-sign{margin-top:26px}}

/* ---------- 9. 内页两侧：只留一侧极淡的应季折枝，像同一本册页 ---------- */
@media(min-width:1380px){
  body:not(.index-page)::before{content:"";display:block;position:fixed;z-index:-1;right:22px;bottom:34px;pointer-events:none;
    width:clamp(120px,calc((100vw - 1096px)/2 - 60px),200px);aspect-ratio:200/240;background:no-repeat right bottom/contain;opacity:.3}
  :root[data-season=spring] body:not(.index-page)::before{background-image:url("/ink-sprig-spring.svg")}
  :root[data-season=summer] body:not(.index-page)::before{background-image:url("/ink-sprig-summer.svg")}
  :root[data-season=autumn] body:not(.index-page)::before{background-image:url("/ink-sprig-autumn.svg")}
  :root[data-season=winter] body:not(.index-page)::before{background-image:url("/ink-sprig-winter.svg")}
  /* 手札卷首已有一枝，这一页换成淡淡的空亭 */
  :root[data-season] body.notes-page::before{background-image:url("/ink-pavilion-20261020.svg");width:clamp(130px,calc((100vw - 1096px)/2 - 50px),240px);aspect-ratio:auto;height:520px;opacity:.22}
  :root[data-theme=dark] body:not(.index-page)::before{filter:grayscale(.4) brightness(1.7);opacity:.2}
  :root[data-theme=dark] body.notes-page::before{filter:invert(.88) hue-rotate(180deg);opacity:.16}
}

@media(prefers-reduced-motion:reduce){
  .page-hero .page-seal,.library-pick[aria-pressed=true] .library-play::after{animation:none}
}