/* motifs.css · 2026-10-20 · 首页视觉语素：印、笺、墨、时
   只作用于首页，最后加载。撤回：在首页去掉本文件与 motifs.js 的引用即可。 */

/* 1. 题跋：眉栏山景右上角竖排当日物候，落一方季节小印（文字由 motifs.js 按北京时间推算） */
.index-page .motif-colophon{
  position:absolute;top:28px;right:40px;z-index:1;pointer-events:none;
  writing-mode:vertical-rl;
  font-family:var(--font-kai);color:rgba(246,239,228,.94);text-shadow:0 1px 10px rgba(0,0,0,.4);
  animation:motif-ink .9s ease-out both;
}
.index-page .motif-colophon[hidden]{display:none}
.motif-hou{display:block;max-height:136px;font-size:21px;line-height:1.45;letter-spacing:.28em}
.motif-colophon[data-long] .motif-hou{font-size:17px;letter-spacing:.24em}
.motif-term{display:block;margin-block-start:6px;padding-top:2.4em;font-size:12px;line-height:1.6;letter-spacing:.3em;opacity:.86}
.motif-season{
  display:inline-grid;place-items:center;width:19px;height:19px;margin-top:8px;writing-mode:horizontal-tb;
  background:rgba(173,85,68,.9);color:#f8efe6;text-shadow:none;font:normal 12px/1 var(--font-kai);
  letter-spacing:0;border-radius:2px 3px 2px 3px;transform:rotate(-4deg);
}
:root[data-theme=dark] .motif-colophon{color:#dbe3d8}
:root[data-theme=dark] .motif-season{background:rgba(204,143,122,.85);color:#283039}
@keyframes motif-ink{from{opacity:0;filter:blur(3px)}to{opacity:1;filter:none}}

/* 2. 分类小印：文 / 史 / 思 / 技，朱文 */
.motif-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;
}

/* 3. 四时折枝：手札一栏与左侧文章同在纸面上，右下角印一枝应季淡墨（春兰 夏竹 秋菊 冬梅） */
.index-page .quiet-notes{position:relative;isolation:isolate}
.index-page .quiet-notes::after{
  content:"";position:absolute;right:8px;bottom:8px;z-index:-1;width:150px;height:180px;pointer-events:none;
  background:no-repeat right bottom/contain;opacity:0;transition:opacity .8s;
}
:root[data-season] .index-page .quiet-notes::after{opacity:.5}
:root[data-season=spring] .index-page .quiet-notes::after{background-image:url("ink-sprig-spring.svg")}
:root[data-season=summer] .index-page .quiet-notes::after{background-image:url("ink-sprig-summer.svg")}
:root[data-season=autumn] .index-page .quiet-notes::after{background-image:url("ink-sprig-autumn.svg")}
:root[data-season=winter] .index-page .quiet-notes::after{background-image:url("ink-sprig-winter.svg")}
:root[data-theme=dark][data-season] .index-page .quiet-notes::after{filter:grayscale(.4) brightness(1.7);opacity:.4}

/* 4. 墨痕：「此刻，听见」上方的直线换成一笔中间浓、两头淡的墨，正中一点朱 */
.index-page .quiet-music{position:relative;border-top:0}
.index-page .quiet-music::before{
  content:"";position:absolute;left:0;right:0;top:-1px;height:3px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,var(--line-ink),var(--line-ink) 35%,transparent);
}
.index-page .quiet-music::after{
  content:"";position:absolute;left:50%;top:-4px;width:6px;height:6px;pointer-events:none;
  background:var(--paper);border:1px solid var(--cinnabar);transform:translateX(-50%) rotate(45deg);opacity:.8;
}

/* 5. 名章落款：页尾那句话后钤一方白文「若汐」 */
.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;
}

@media (min-width:1000px){
  /* 题跋与右下角的阅读入口上下错开 */
  .index-page .reading-intro{min-height:240px}
}
/* 7. 两栏等高：手札摘要收成两行；并排时矮的一栏把余白均分到每一条，末条与对面底边齐 */
.index-page .quiet-note-grid p{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
@media (min-width:701px){
  .index-page .quiet-writing,.index-page .quiet-notes{display:flex;flex-direction:column}
  /* home-quiet.css 早先给这两处留了 grid 的 gap 与 align-items，改成 flex 后须复位 */
  .index-page .quiet-stories,.index-page .quiet-note-grid{flex:1 1 auto;display:flex;flex-direction:column;gap:0}
  .index-page .quiet-story,.index-page .quiet-note-grid article{flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:0}
}
@media (max-width:700px){
  .index-page .motif-colophon{top:22px;right:18px}
  .motif-hou{max-height:104px;font-size:16px}
  .motif-term{font-size:11px}
  .index-page .quiet-notes::after{width:116px;height:140px}
}
@media (max-width:520px){
  /* 窄屏标题会占满一行：只留节气与小印，不压字 */
  .index-page .motif-colophon{top:31px;right:22px;writing-mode:horizontal-tb}
  .motif-hou{display:none}
  .motif-term{margin:0;padding:0;font-size:11px;line-height:19px;letter-spacing:.14em}
  .motif-season{width:17px;height:17px;margin:0 0 0 7px;font-size:11px;vertical-align:-3px}
}
@media (prefers-reduced-motion:reduce){
  .index-page .motif-colophon{animation:none}
  .index-page .quiet-notes::after{transition:none}
}

/* 6. 两侧留白：左「枯荷孤禽」取八大山人意，右「空亭疏林」取倪瓒一河两岸意；赭墨、干湿笔、题款钤印
   夜间反相成拓片：深底浅墨，朱印色相不变。撤回：删除本节，旧的墨莲与亭子会回来。 */
.index-page .site-shell::before{background-image:url("ink-lotus-20261020.svg");opacity:.82}
.index-page .site-shell::after{background-image:url("ink-pavilion-20261020.svg");opacity:.86}
:root[data-theme=dark] .index-page .site-shell::before,
:root[data-theme=dark] .index-page .site-shell::after{filter:invert(.88) hue-rotate(180deg);opacity:.42}

/* 8. 眉栏换图：落日、雁阵与水面（原图，不另压缩）。仍是铺满拉伸、左侧压暗；
   宽屏放大到 125%（中屏 135%）取偏左一段，太阳落在标题右侧；手机放大到 210%，太阳落在右下角入口旁。
   撤回：删除本节，回到 refine.css 里的日落群山。 */
.index-page .reading-intro{
  --hero-img:url("/assets/hero-geese-20261020.jpg");
  background-size:auto,auto,125% auto;
  background-position:0 0,0 0,0% 47%;
}
@media (min-width:701px) and (max-width:999px){
  .index-page .reading-intro{background-size:auto,auto,135% auto}
}
@media (max-width:700px){
  .index-page .reading-intro{background-size:auto,auto,auto 210%;background-position:0 0,0 0,22% 4%}
}