/* ==========================================================================
   GlimmerAI · Gallery layer
   --------------------------------------------------------------------------
   一套可整体移除的增强层（删除 index.html 中对应的 <link> 即回滚）
   1) 三套外观：ide（默认，保留原 Code IDE 暗黑 + 暖金） / gallery（画廊暗黑）
      / glimmer（亮色）
   2) 全站质感：衬线签名字体、胶片颗粒、柔光幕布、暖金细线、数字对齐
   3) 开场动画：光圈图标旋转 + 文字逐字浮现（配合 js/intro.js）
   ========================================================================== */

/* 1. 设计变量 --------------------------------------------------------------- */
:root{
  /* —— Quiet Editorial Studio tokens（见 DESIGN.md） —— */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --fs-xs:12px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:22px; --fs-2xl:28px; --fs-3xl:clamp(36px,4vw,48px);
  --lh-tight:1.35; --lh-normal:1.75; --lh-loose:2.05;
  --r-sm:6px; --r-md:10px; --r-lg:14px;
  --dur-fast:160ms; --dur-mid:360ms; --dur-slow:740ms;
  --serif:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun',Georgia,serif;
  --display-en:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --display-zh:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun',Georgia,serif;
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-op:.035;
  --hairline:color-mix(in srgb,var(--accent) 16%,var(--line));
  --focus-ring:color-mix(in srgb,var(--accent) 55%,transparent);
  --veil-ease:cubic-bezier(.22,1,.36,1);
  --ease-silk:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
}
/* Gallery：更深沉的墙幕、黄铜暖金、略加粗的字重层次 */
[data-theme=gallery]{
  --bg:#14120f;--sidebar:#100e0c;--panel:#1b1814;--editor:#1e1a15;--elevated:#251f19;
  --hover:#2d2721;--line:#352f26;--soft-line:#2b251e;--text:#f0e9dc;--muted:#b8ae9b;
  --faint:#958b7a;--accent:#cba96b;--accent-bg:#2d2519;--accent-text:#191307;
  --green:#9dbb9c;--red:#d9988f;--grain-op:.05;
}

/* 2. 幕布质感：柔光 + 颗粒 --------------------------------------------------- */
body{background-image:radial-gradient(1200px 760px at 50% -8%,color-mix(in srgb,var(--accent) 7%,var(--bg)),var(--bg) 62%)}
body::before{
  content:'';position:fixed;inset:0;z-index:9998;pointer-events:none;
  opacity:var(--grain-op);mix-blend-mode:overlay;
  background-image:var(--grain);background-size:180px 180px;background-repeat:repeat;
}
[data-theme=glimmer] body::before{mix-blend-mode:multiply;opacity:.022}
[data-theme=gallery] .app-shell{box-shadow:inset 0 0 240px 46px #000000a8}

/* 3. 暖金细线与焦点 --------------------------------------------------------- */
.titlebar,.sidebar,.statusbar,.editor-tabs{border-color:var(--hairline)}
.titlebar{position:relative}
.titlebar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;opacity:.7;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 60%,transparent) 45%,transparent);
}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
.list-toolbar,.ai-header,.post-card footer,.public-section-title{border-color:var(--hairline)}
.note-time,.nav-item em,.list-tab>span,.post-card>span,.day-label em,#post-count,.reading-meta{font-variant-numeric:tabular-nums}

/* 3.5 顶栏右侧：主题胶囊 + 签名徽章（Y） */
.theme-switch{
  display:flex;align-items:center;gap:8px;min-height:34px;padding:5px 13px 5px 11px;
  border:1px solid var(--soft-line);border-radius:999px;
  background:color-mix(in srgb,var(--panel) 65%,transparent);
  color:var(--muted);font-size:15px;letter-spacing:.3px;white-space:nowrap;
  transition:background-color 220ms var(--veil-ease),border-color 220ms ease,color 200ms ease,box-shadow 220ms ease;
}
.theme-switch:hover{
  color:var(--text);border-color:color-mix(in srgb,var(--accent) 46%,var(--line));
  background:var(--accent-bg);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent);
}
.theme-switch:active{transform:scale(.98)}
.theme-switch svg{width:15px;height:15px;color:var(--accent);transition:transform 380ms var(--veil-ease)}
.theme-switch:hover svg{transform:rotate(-18deg)}
#theme-label{font-variant-numeric:tabular-nums}
@media(prefers-reduced-motion:reduce){.theme-switch:active{transform:none}.theme-switch:hover svg{transform:none}}

/* 签名徽章：暖金细环 + 内部柔光 + 衬线 Y，像一枚小印章 */
.avatar{
  position:relative;display:grid;place-items:center;width:31px;height:31px;flex-shrink:0;
  border-radius:50%;cursor:default;user-select:none;
  font:italic 17px/1 var(--serif);letter-spacing:.4px;color:var(--accent);
  background:radial-gradient(120% 120% at 30% 22%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 72%),var(--panel);
  border:1px solid color-mix(in srgb,var(--accent) 34%,var(--line));
  box-shadow:inset 0 1px 0 #ffffff16,0 2px 9px #0000001f;
  transition:border-color 260ms ease,box-shadow 260ms ease,transform 260ms var(--veil-ease);
}
.avatar::after{
  content:'';position:absolute;inset:-5px;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 0%,transparent);
  transition:border-color 260ms ease;
}
.avatar:hover{
  border-color:var(--accent);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #ffffff20,0 0 0 4px color-mix(in srgb,var(--accent) 10%,transparent),0 6px 16px #00000026;
}
.avatar:hover::after{border-color:color-mix(in srgb,var(--accent) 16%,transparent)}
@media(prefers-reduced-motion:reduce){.avatar:hover{transform:none}}

/* 4. 品牌图标的呼吸感 ------------------------------------------------------- */
.brand-symbol,.workspace-avatar,.login-mark,.about-glyph,.ai-icon,.reader-brand img{
  transition:filter 420ms var(--veil-ease),transform 420ms var(--veil-ease);
}
.brand:hover .brand-symbol{filter:drop-shadow(0 0 14px color-mix(in srgb,var(--accent) 45%,transparent))}
.login-mark{box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 12%,transparent),0 10px 30px #00000026}

/* 5. Gallery 主题的专属表现 -------------------------------------------------- */
[data-theme=gallery] .welcome-copy h1,
[data-theme=gallery] .public-hero h1,
[data-theme=gallery] .about-layout h1,
[data-theme=gallery] .reader-dialog .reading-header h1,
[data-theme=gallery] .post-card h3,
[data-theme=gallery] .about-principles h3,
[data-theme=gallery] .about-art p,
[data-theme=gallery] .about-art small,
[data-theme=gallery] .orbit-tag{font-family:var(--serif)}
[data-theme=gallery] .public-hero h1,
[data-theme=gallery] .about-layout h1{letter-spacing:.4px;font-weight:500}
[data-theme=gallery] .eyebrow{letter-spacing:2.4px}
[data-theme=gallery] .composer,[data-theme=gallery] .note-card,
[data-theme=gallery] .post-card,[data-theme=gallery] .handoff-card,
[data-theme=gallery] .reader-dialog{border-radius:14px}
[data-theme=gallery] .composer,
[data-theme=gallery] .note-card{box-shadow:inset 0 1px 0 #ffffff08,0 14px 34px #00000052}
[data-theme=gallery] .note-card:hover{border-color:color-mix(in srgb,var(--accent) 38%,var(--line));transform:translateY(-1px)}
[data-theme=gallery] .post-card:hover{box-shadow:0 16px 40px #0000005c}
[data-theme=gallery] .pane-scroll{padding:40px 42px 32px}
[data-theme=gallery] .titlebar,[data-theme=gallery] .sidebar,[data-theme=gallery] .statusbar{
  background:color-mix(in srgb,var(--sidebar) 88%,#000);
}
[data-theme=gallery] .daily-note p,
[data-theme=gallery] .about-copy,
[data-theme=gallery] .public-hero p{line-height:2.15}
[data-theme=gallery] .note-card{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 4%,var(--panel)),var(--panel))}

/* 6. 优雅入场 --------------------------------------------------------------- */
[data-theme=gallery] .public-view:not([hidden]),
[data-theme=gallery] .login-view:not([hidden]){animation:gallery-arrive 640ms var(--veil-ease)}
@keyframes gallery-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* 6.1 记录节奏：连续天数 + 十二周热力图（纯前端，按 createdAt 计算） */
.rhythm{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 24px;padding-bottom:18px;border-bottom:1px solid var(--soft-line)}
.rhythm-stats{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--faint);font-variant-numeric:tabular-nums}
.rhythm-stats span:first-child{color:var(--text)}
.rhythm-sep{width:1px;height:11px;background:var(--line);opacity:.7}
.rhythm-grid{display:grid;grid-template-rows:repeat(7,9px);grid-auto-flow:column;gap:3px;max-width:100%;overflow-x:auto;padding-bottom:2px}
.rhythm-cell{width:9px;height:9px;border-radius:2px;background:color-mix(in srgb,var(--faint) 16%,transparent)}
.rhythm-cell[data-level="1"]{background:color-mix(in srgb,var(--accent) 34%,transparent)}
.rhythm-cell[data-level="2"]{background:color-mix(in srgb,var(--accent) 62%,transparent)}
.rhythm-cell[data-level="3"]{background:var(--accent)}
.rhythm-cell.today{box-shadow:0 0 0 1.5px var(--accent)}
@media(max-width:650px){.rhythm{align-items:flex-start;gap:12px}.rhythm-grid{grid-template-rows:repeat(7,8px);gap:2.5px}.rhythm-cell{width:8px;height:8px}}

/* 6.2 私密灵感的主题标签：筛选条 + 卡片标签 */
.note-tags{display:flex;flex-wrap:wrap;gap:7px 8px;margin:0 0 18px}
.note-tag,.note-topic{
  display:inline-flex;align-items:center;gap:5px;border:1px solid var(--soft-line);border-radius:999px;
  color:var(--muted);font-size:14px;background:transparent;
  transition:background-color 150ms ease,color 150ms ease,border-color 150ms ease,transform 100ms ease;
}
.note-tag{min-height:30px;padding:4px 11px}
.note-topic{min-height:26px;padding:3px 9px;margin:10px 6px 0 0;color:var(--faint)}
.note-tag:hover,.note-topic:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));color:var(--text)}
.note-tag:active,.note-topic:active{transform:scale(.97)}
.note-tag.selected{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.note-tag em{font:13px var(--mono);font-style:normal;opacity:.6}
.note-topics{display:flex;flex-wrap:wrap;gap:0}
@media(prefers-reduced-motion:reduce){.note-tag:active,.note-topic:active{transform:none}}

/* 6.5 博客标签筛选与阅读时长 */
.post-tags{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 26px}
.post-tag{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:5px 13px;
  border:1px solid var(--soft-line);border-radius:999px;font-size:15px;color:var(--muted);
  font-family:var(--sans);
  transition:background-color 160ms ease,color 160ms ease,border-color 160ms ease,transform 100ms ease;
}
.post-tag:hover{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));color:var(--text)}
.post-tag:active{transform:scale(.97)}
.post-tag.selected{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}
.post-tag em{font:13px var(--mono);font-style:normal;opacity:.6}
.post-card .post-minutes{font:14px var(--mono);letter-spacing:.3px;color:var(--faint);margin-right:4px}
@media(prefers-reduced-motion:reduce){.post-tag:active{transform:none}}

/* 7. 作品索引：编号式清单，不喧哗、不放成果数据 */
.projects-view #projects-list{border-top:1px solid var(--hairline)}
.project-row{
  display:grid;grid-template-columns:58px minmax(0,1fr);gap:0 20px;align-items:start;
  padding:28px 6px;border-bottom:1px solid var(--soft-line);
  transition:background-color 240ms var(--veil-ease);
}
.project-row:hover{background:color-mix(in srgb,var(--accent) 3%,transparent)}
.project-index{font:14px/2.6 var(--mono);color:var(--faint);letter-spacing:1.4px}
.project-body h3{margin:0 0 10px;font-size:24px;font-weight:550;letter-spacing:-.3px;text-wrap:balance}
.project-sub{margin:0 0 12px;font-size:18px;color:var(--text);line-height:1.7}
.project-summary{margin:0 0 16px;font-size:17px;line-height:1.95;color:var(--muted);max-width:74ch;text-wrap:pretty}
.project-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:15px;color:var(--faint)}
.project-year{font:14px var(--mono);letter-spacing:.6px}
.project-chip{border:1px solid var(--soft-line);border-radius:999px;padding:2px 9px;color:var(--muted)}
.project-status{border:1px solid color-mix(in srgb,var(--accent) 32%,var(--line));border-radius:999px;padding:2px 9px;color:var(--accent);font-size:14px}
.project-spacer{flex:1;min-width:8px}
.project-link{display:inline-flex;align-items:center;gap:5px;color:var(--accent);border-bottom:1px solid transparent}
.project-link:hover{border-bottom-color:color-mix(in srgb,var(--accent) 55%,transparent)}
.project-link svg{width:13px;height:13px}
[data-theme=gallery] .project-body h3{font-family:var(--serif);font-weight:500;letter-spacing:0}
@media(max-width:650px){
  .project-row{grid-template-columns:minmax(0,1fr);gap:0;padding:22px 2px}
  .project-index{padding-bottom:6px}
}

/* 8. 开场动画：静谧编辑室（纸感 + 极慢微光） ------------------------------ */
.intro-veil{
  position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  background:
    radial-gradient(720px 520px at 50% 42%,color-mix(in srgb,var(--accent) 4%,transparent),transparent 72%),
    var(--bg);
  animation:veil-auto-out 1s ease 3.2s forwards;
}
html.intro-js .intro-veil{animation:none}
.intro-veil.is-leaving{
  opacity:0;transform:scale(1.02);filter:blur(4px);pointer-events:none;
  transition:opacity .9s var(--ease-silk),transform 1.05s var(--ease-silk),filter .9s ease;
}
@keyframes veil-auto-out{to{opacity:0;visibility:hidden}}
.intro-stage{position:relative;padding:0 24px;text-align:center;transform:translateY(-1vh)}
.intro-orbit{position:relative;width:132px;height:132px;margin:0 auto 36px;display:grid;place-items:center}
.intro-ring{
  position:absolute;inset:0;border-radius:50%;
  border:1px solid color-mix(in srgb,var(--accent) 16%,transparent);
  animation:intro-spin 18s linear infinite;
}
.intro-ring.r2{inset:18px;border-style:solid;border-color:color-mix(in srgb,var(--accent) 10%,transparent);animation-duration:28s;animation-direction:reverse}
.intro-ring.r3{inset:38px;border-color:color-mix(in srgb,var(--accent) 7%,transparent);animation-duration:40s}
.intro-mark{
  position:relative;width:64px;height:64px;z-index:1;
  animation:intro-mark 1.4s var(--ease-silk) both;
  filter:drop-shadow(0 6px 22px color-mix(in srgb,var(--accent) 22%,transparent));
}
@keyframes intro-mark{
  0%{opacity:0;transform:scale(.92);filter:blur(6px)}
  100%{opacity:1;transform:scale(1);filter:blur(0)}
}
@keyframes intro-spin{to{transform:rotate(360deg)}}
.intro-word{
  font:24px/1.25 var(--serif);letter-spacing:.42em;display:flex;justify-content:center;padding-left:.42em;color:var(--text);
}
.intro-word i{
  display:inline-block;font-style:normal;opacity:0;
  animation:intro-letter 780ms var(--ease-silk) forwards;
}
.intro-word i:nth-child(1){animation-delay:.35s}.intro-word i:nth-child(2){animation-delay:.42s}
.intro-word i:nth-child(3){animation-delay:.49s}.intro-word i:nth-child(4){animation-delay:.56s}
.intro-word i:nth-child(5){animation-delay:.63s}.intro-word i:nth-child(6){animation-delay:.7s}
.intro-word i:nth-child(7){animation-delay:.77s}.intro-word i:nth-child(8){animation-delay:.84s}
.intro-word i:nth-child(9){animation-delay:.91s}
@keyframes intro-letter{from{opacity:0;filter:blur(5px);transform:translateY(6px)}to{opacity:1;filter:blur(0);transform:none}}
.intro-line{
  font:italic 14px/1.7 var(--serif);letter-spacing:.22em;color:var(--faint);
  margin:18px 0 30px;opacity:0;animation:intro-fade 1.1s var(--ease-silk) 1.15s forwards;
}
.intro-bar{display:block;width:96px;height:1px;margin:0 auto;background:color-mix(in srgb,var(--accent) 14%,transparent)}
.intro-bar i{
  display:block;height:100%;background:var(--accent);
  transform-origin:left;transform:scaleX(0);
  animation:intro-bar 1.9s var(--ease-silk) .25s forwards;
  opacity:.85;
}
@keyframes intro-bar{to{transform:scaleX(1)}}
@keyframes intro-fade{to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .intro-veil{animation:none;display:none}
  .intro-mark,.intro-ring,.intro-word i,.intro-line,.intro-bar i{animation:none}
}
@media(max-width:650px){
  .intro-orbit{width:112px;height:112px}.intro-mark{width:54px;height:54px}
  .intro-word{font-size:20px;letter-spacing:.3em}
}
/* 页面/列表入场：静谧节奏 */
:root{--dur-enter:740ms}
.public-arrive-quiet{}
.public-view:not([hidden]),
.login-view:not([hidden]){
  animation:public-arrive var(--dur-enter) var(--ease-silk) both;
}
@keyframes public-arrive{
  0%{opacity:0;filter:blur(3px);transform:translateY(10px)}
  100%{opacity:1;filter:blur(0);transform:none}
}
@keyframes row-ink{
  0%{opacity:0;filter:blur(2px);transform:translateY(8px)}
  100%{opacity:1;filter:blur(0);transform:none}
}
#posts-list .post-label,
.projects-view #projects-list .project-row,
#journal-list .post-label{
  animation-name:row-ink;
  animation-duration:680ms;
  animation-timing-function:var(--ease-silk);
  animation-fill-mode:both;
}
#posts-list .post-label:nth-child(1),#journal-list .post-label:nth-child(1){animation-delay:120ms}
#posts-list .post-label:nth-child(2),#journal-list .post-label:nth-child(2){animation-delay:200ms}
#posts-list .post-label:nth-child(3),#journal-list .post-label:nth-child(3){animation-delay:280ms}
#posts-list .post-label:nth-child(4),#journal-list .post-label:nth-child(4){animation-delay:360ms}
#posts-list .post-label:nth-child(5),#journal-list .post-label:nth-child(5){animation-delay:440ms}
#posts-list .post-label:nth-child(n+6),#journal-list .post-label:nth-child(n+6){animation-delay:520ms}

/* 9. 公开页 · 编辑部工坊（中文衬线 + 顺滑动效） ------------------------------
   可整段删除回滚。只影响公开页观感与全站按压/切换手感。 */

:root{
  --sans:'PingFang SC','HarmonyOS Sans SC','Source Han Sans SC','Noto Sans SC','Microsoft YaHei UI','Microsoft YaHei','Segoe UI',system-ui,sans-serif;
  --serif:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun',Georgia,serif;
  --public-muted:color-mix(in srgb,var(--muted) 86%,var(--accent) 14%);
  --public-soft:color-mix(in srgb,var(--faint) 80%,var(--accent) 20%);
  --ease-silk:cubic-bezier(.22,1,.36,1);
  --ease-soft:cubic-bezier(.32,.72,0,1);
  --dur-press:140ms;
  --dur-hover:360ms;
  --dur-enter:740ms;
}

/* 9.1 中文显示字阶：标题用衬线，拉开字号与字距 */
.public-hero h1,
.about-layout h1,
.welcome-copy h1,
.reader-dialog .reading-header h1{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.12em;
  line-height:1.55;
  color:var(--text);
}
.public-hero h1 span,
.about-layout h1 span,
.welcome-copy h1 span{color:var(--accent);letter-spacing:.14em}

#blog-view .public-hero h1{
  font-size:clamp(34px,4.2vw,52px);
  letter-spacing:.1em;
  font-weight:500;
  line-height:1.45;
}
.projects-view .public-hero h1,
.about-layout h1{
  font-size:clamp(32px,3.6vw,46px);
  letter-spacing:.11em;
}

.public-hero p,
.about-copy,
.project-sub,
.project-summary{
  font-family:var(--sans);
  color:var(--public-muted);
  font-size:16px;
  line-height:2.05;
  letter-spacing:.04em;
}
.public-hero p{max-width:36em}
.project-sub{font-size:17px;color:var(--text);letter-spacing:.06em;line-height:1.85}
.project-summary{font-size:15px;line-height:2.05;letter-spacing:.03em}

.project-body h3,
.post-card h3{
  font-family:var(--serif);
  font-weight:500;
  letter-spacing:.08em;
  color:var(--text);
}
.project-body h3{font-size:clamp(22px,2vw,28px);margin:0 0 12px}
.post-card h3{font-size:clamp(22px,2vw,26px);line-height:1.6}

.public-section-title h2{
  font-family:var(--serif);
  font-size:18px;
  font-weight:500;
  letter-spacing:.14em;
}
.public-topline,
.eyebrow,
.project-index,
.post-card>span{
  font-family:var(--mono);
  letter-spacing:1.8px;
  color:var(--public-soft);
}

.project-meta,
.post-card p,
.about-principles p,
.copyright p{
  color:var(--public-muted);
  letter-spacing:.03em;
}

/* 9.2 页面切换：淡入上移 + 模糊消散，避免硬切跳出 */
.public-view:not([hidden]),
.login-view:not([hidden]){
  animation:public-arrive var(--dur-enter) var(--ease-silk) both;
}
@keyframes public-arrive{
  from{opacity:0;transform:translateY(18px);filter:blur(6px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

.public-view .public-topline{animation:public-fade 700ms var(--ease-silk) 40ms both}
.public-view .public-hero{animation:public-rise 760ms var(--ease-silk) 90ms both}
.public-view .public-section-title{animation:public-fade 700ms var(--ease-silk) 180ms both}
@keyframes public-fade{from{opacity:0}to{opacity:1}}
@keyframes public-rise{
  from{opacity:0;transform:translateY(22px)}
  to{opacity:1;transform:none}
}

/* 9.3 列表错落入场 */
.projects-view #projects-list .project-row,
#posts-list .post-card{
  animation:row-ink var(--dur-enter) var(--ease-silk) both;
}
.projects-view #projects-list .project-row:nth-child(1),
#posts-list .post-card:nth-child(1){animation-delay:200ms}
.projects-view #projects-list .project-row:nth-child(2),
#posts-list .post-card:nth-child(2){animation-delay:280ms}
.projects-view #projects-list .project-row:nth-child(3),
#posts-list .post-card:nth-child(3){animation-delay:360ms}
.projects-view #projects-list .project-row:nth-child(4),
#posts-list .post-card:nth-child(4){animation-delay:440ms}
.projects-view #projects-list .project-row:nth-child(5),
#posts-list .post-card:nth-child(5){animation-delay:520ms}
.projects-view #projects-list .project-row:nth-child(n+6),
#posts-list .post-card:nth-child(n+6){animation-delay:600ms}
@keyframes row-ink{
  from{opacity:0;transform:translateY(14px);filter:blur(3px)}
  to{opacity:1;transform:none;filter:blur(0)}
}

.project-row{
  transition:
    background-color 420ms var(--ease-silk),
    border-color 420ms ease;
}
.project-row:hover{
  background:color-mix(in srgb,var(--accent) 5%,transparent);
}
.project-row:hover .project-index{color:var(--accent)}
.project-index{transition:color var(--dur-hover) ease}

.post-card{
  transition:
    transform 420ms var(--ease-silk),
    border-color 320ms ease,
    box-shadow 420ms var(--ease-silk),
    background-color 320ms ease;
}
.post-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  box-shadow:0 18px 40px color-mix(in srgb,#000 18%,transparent);
}
.post-card:active{transform:translateY(-1px)}

/* 9.4 按压与控件：软下沉，不硬弹 */
.primary,.secondary,.danger,.text-button,.nav-item,.theme-switch,
.icon-button,.compose-type,.list-tab,.post-tag,.note-tag,.project-link,
.ai-tabs button,.search-trigger,.subtle-button{
  transition:
    background-color var(--dur-hover) ease,
    color var(--dur-hover) ease,
    border-color var(--dur-hover) ease,
    box-shadow var(--dur-hover) var(--ease-silk),
    transform var(--dur-press) var(--ease-soft),
    opacity var(--dur-press) ease,
    filter var(--dur-press) ease;
}
.primary:active,
.secondary:active,
.danger:active,
.post-tag:active,
.note-tag:active,
.note-topic:active{
  transform:translateY(1px) scale(.985);
  filter:brightness(.97);
}
.icon-button:active,.nav-item:active,.theme-switch:active{transform:scale(.97)}
.project-link{
  transition:color var(--dur-hover) ease,border-color var(--dur-hover) ease,transform var(--dur-press) var(--ease-soft);
}
.project-link:hover{transform:translateX(2px)}

.about-links a{
  transition:color var(--dur-hover) ease,transform var(--dur-hover) var(--ease-silk);
}
.about-links a:hover{color:var(--accent);transform:translateY(-1px)}

/* 9.5 公开页阅读气口 */
.about-role{
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:.12em;
  color:var(--accent);
}
.about-art p{
  font-family:var(--serif);
  letter-spacing:.08em;
  line-height:1.85;
}
.about-principles article{
  transition:transform var(--dur-hover) var(--ease-silk),opacity var(--dur-hover) ease;
}
.about-principles article:hover{transform:translateY(-2px)}
.about-principles h3{
  font-family:var(--serif);
  letter-spacing:.1em;
  font-weight:500;
}
.copyright{opacity:.92}
.public-view .about-links{animation:public-fade 700ms var(--ease-silk) 220ms both}
.public-view .about-principles{animation:public-rise 760ms var(--ease-silk) 280ms both}

@media(prefers-reduced-motion:reduce){
  .public-view:not([hidden]),
  .login-view:not([hidden]),
  .public-view .public-topline,
  .public-view .public-hero,
  .public-view .public-section-title,
  .projects-view #projects-list .project-row,
  #posts-list .post-card{animation:none!important}
  .post-card:hover,.about-principles article:hover,.about-links a:hover,.project-link:hover,
  .primary:active,.secondary:active,.danger:active,
  .post-tag:active,.note-tag:active,.note-topic:active,
  .icon-button:active,.nav-item:active,.theme-switch:active{transform:none!important}
}

@media(max-width:650px){
  .public-hero h1,.about-layout h1,.projects-view .public-hero h1{
    letter-spacing:.06em;
  }
  .project-body h3{font-size:22px}
  .public-hero p,.about-copy{font-size:15px;line-height:1.95}
}

/* 14. 阅读强调：加粗跟随主题色，不再统一发白 ------------------------------ */
.reading-body strong,
.reading-body b,
.markdown strong,
.markdown b,
#reader-content strong,
#reader-content b{
  font-weight:650;
  color:var(--accent);
  letter-spacing:.02em;
}
/* 主题切换时强调色也柔和过渡 */
.theme-changing .reading-body strong,
.theme-changing .markdown strong,
.theme-changing #reader-content strong{
  transition:color 380ms var(--ease-silk);
}
/* 强调不必再额外加粗到刺眼：略减一点字重，让颜色承担层次 */
.reading-body strong{font-weight:620}
.markdown strong{font-weight:600}
@media(prefers-reduced-motion:reduce){
  .theme-changing .reading-body strong,
  .theme-changing .markdown strong,
  .theme-changing #reader-content strong{transition:none}
}

/* 15. 文内来源序号：①②… 右上角圆标，文末统一列来源 --------------------- */
.reading-body .markdown sup,
.markdown sup,
#reader-content sup,
sup.cite,
.cite-mark{
  font-size:.82em;
  font-weight:650;
  color:var(--accent);
  vertical-align:super;
  line-height:0;
  letter-spacing:0;
  margin-left:2px;
  font-family:var(--mono);
}
sup.cite{
  position:relative;
  cursor:help;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:1.15em;
  height:1.15em;
  padding:0 2px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  transition:background-color 220ms var(--ease-silk),color 220ms ease,border-color 220ms ease;
}
sup.cite:hover,
sup.cite:focus-visible{
  background:var(--accent-bg);
  color:var(--accent);
  border-color:var(--accent);
  outline:none;
}
sup.cite[data-cite]::after{
  content:attr(data-cite);
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
  width:max-content;
  max-width:min(420px,72vw);
  padding:10px 12px;
  border-radius:8px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  background:color-mix(in srgb,var(--elevated) 94%,#000);
  color:var(--text);
  font:400 12px/1.55 var(--sans);
  letter-spacing:.02em;
  text-align:left;
  white-space:normal;
  box-shadow:0 12px 32px #0006;
  opacity:0;
  pointer-events:none;
  z-index:20;
  transition:opacity 220ms var(--ease-silk),transform 220ms var(--ease-silk);
}
sup.cite:hover::after,
sup.cite:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}
@media(max-width:650px){
  sup.cite[data-cite]::after{max-width:min(280px,78vw);font-size:11px}
}

/* 16. 作品展签 + 右侧抽屉 ------------------------------------------------ */
.projects-view{position:relative}
.projects-view #projects-list{border-top:1px solid var(--hairline)}
.project-label{
  display:grid;
  grid-template-columns:22px 48px minmax(0,1fr) 28px;
  gap:14px 12px;
  align-items:start;
  width:100%;
  text-align:left;
  padding:26px 4px 24px;
  border-bottom:1px solid var(--soft-line);
  background:transparent;
  transition:background-color 360ms var(--ease-silk),padding 360ms var(--ease-silk);
}
.project-label-line{
  width:1px;height:100%;min-height:56px;margin-top:2px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 55%,transparent) 20%,color-mix(in srgb,var(--accent) 55%,transparent) 80%,transparent);
  transition:background 360ms ease,transform 360ms var(--ease-silk);
}
.project-label .project-index{
  font:12px/2.2 var(--mono);
  color:var(--public-soft);
  letter-spacing:1.4px;
  padding-top:2px;
  transition:color 360ms ease;
}
.project-label-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.project-label-title{
  font-family:var(--serif);
  font-size:clamp(20px,1.8vw,26px);
  font-weight:500;
  letter-spacing:.08em;
  color:var(--text);
  line-height:1.35;
}
.project-label-sub{
  font-size:15px;
  color:var(--public-muted);
  letter-spacing:.04em;
  line-height:1.7;
}
.project-label-meta{
  font:12px var(--mono);
  color:var(--public-soft);
  letter-spacing:.08em;
}
.project-label-go{
  color:var(--accent);
  opacity:0;
  transform:translate(-4px,4px);
  transition:opacity 280ms var(--ease-silk),transform 280ms var(--ease-silk);
  padding-top:6px;
}
.project-label:hover,
.project-label.is-open{
  background:color-mix(in srgb,var(--accent) 4%,transparent);
  padding-left:10px;
  padding-right:10px;
}
.project-label:hover .project-label-line,
.project-label.is-open .project-label-line{
  transform:scaleY(1.04);
  background:linear-gradient(180deg,transparent,var(--accent) 18%,var(--accent) 82%,transparent);
}
.project-label:hover .project-index,
.project-label.is-open .project-index{color:var(--accent)}
.project-label:hover .project-label-go,
.project-label.is-open .project-label-go{opacity:1;transform:none}

.project-drawer{
  position:fixed;inset:0;z-index:80;
  background:color-mix(in srgb,#000 45%,transparent);
  opacity:0;
  transition:opacity 280ms var(--ease-silk);
}
.project-drawer.is-open{opacity:1}
.project-drawer-panel{
  position:absolute;top:0;right:0;bottom:0;
  width:min(420px,92vw);
  padding:36px 32px 40px;
  background:color-mix(in srgb,var(--bg) 96%,#000);
  border-left:1px solid color-mix(in srgb,var(--accent) 22%,var(--line));
  box-shadow:-18px 0 50px #0005;
  overflow-y:auto;
  transform:translateX(28px);
  opacity:0;
  transition:transform 320ms var(--ease-silk),opacity 280ms var(--ease-silk);
}
.project-drawer.is-open .project-drawer-panel{transform:none;opacity:1}
.project-drawer-close{position:absolute;top:16px;right:16px}
.project-drawer-index{
  display:block;
  font:12px var(--mono);
  letter-spacing:1.8px;
  color:var(--accent);
  margin-bottom:18px;
}
.project-drawer-panel h3{
  font-family:var(--serif);
  font-size:28px;
  letter-spacing:.08em;
  margin:0 0 14px;
  line-height:1.35;
}
.project-drawer-sub{
  font-size:16px;
  color:var(--text);
  letter-spacing:.04em;
  line-height:1.8;
  margin:0 0 16px;
}
.project-drawer-summary{
  font-size:15px;
  color:var(--public-muted);
  line-height:2;
  letter-spacing:.03em;
  margin:0 0 24px;
}
.project-drawer-meta{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:28px;
}
.project-drawer-link{margin-top:8px}

/* 17. 博客案头：来源折叠 + 今日抽读 -------------------------------------- */
.post-pick{
  display:inline-block;
  margin-left:10px;
  font:11px var(--mono);
  letter-spacing:1.2px;
  color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);
  border-radius:999px;
  padding:2px 8px;
  vertical-align:middle;
}
.reading-sources{
  margin-top:36px;
  border-top:1px solid var(--soft-line);
  padding-top:8px;
}
.reading-sources>summary{
  cursor:pointer;
  list-style:none;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:1.4px;
  color:var(--public-soft);
  padding:12px 0;
  display:flex;
  align-items:center;
  gap:10px;
  transition:color 240ms ease;
}
.reading-sources>summary::-webkit-details-marker{display:none}
.reading-sources>summary:hover{color:var(--accent)}
.reading-sources>summary span{color:var(--accent);font-size:11px}
.reading-sources[open]>summary{color:var(--text)}
.reading-body.has-rail{
  position:relative;
  padding-left:18px;
}
.reading-body.has-rail:before{
  content:'';
  position:absolute;left:0;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 28%,transparent) 8%,color-mix(in srgb,var(--accent) 28%,transparent) 92%,transparent);
  pointer-events:none;
}
@media(max-width:650px){
  .reading-body.has-rail{padding-left:12px}
  .project-label{grid-template-columns:16px 36px minmax(0,1fr) 22px;gap:10px 8px;padding:20px 2px}
  .project-label-title{font-size:20px}
  .project-drawer-panel{padding:28px 22px 32px}
}

/* 18. 状态栏呼吸点 -------------------------------------------------------- */
.statusbar .status-dot{
  width:5px;height:5px;
  transition:box-shadow 400ms ease,background-color 400ms ease,opacity 400ms ease;
}
.statusbar .status-dot.is-draft{
  background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent);
  animation:status-breathe 3.2s var(--ease-silk) infinite;
}
.statusbar .status-dot.is-sync{
  background:var(--accent);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 22%,transparent);
  animation:status-breathe 1.4s ease-in-out infinite;
}
@keyframes status-breathe{
  0%,100%{opacity:.55;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 10%,transparent)}
  50%{opacity:1;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
}
@media(prefers-reduced-motion:reduce){
  .statusbar .status-dot.is-draft,
  .statusbar .status-dot.is-sync{animation:none}
  .project-drawer,.project-drawer-panel,.project-label,.project-label-go{transition:none!important}
}

/* 22. 设计语言落地：公开页统一尺子（token 驱动，克制动效） --------------- */
:root{--dur-enter:var(--dur-slow);--dur-hover:var(--dur-mid);--dur-press:var(--dur-fast)}

.public-view{padding:var(--sp-6) clamp(var(--sp-5),4vw,var(--sp-8)) var(--sp-8)}
.public-hero{padding:var(--sp-8) 0 var(--sp-6)}
.public-hero h1,
.about-layout h1,
.journal-view .public-hero h1{
  font-family:var(--display-zh);
  font-size:var(--fs-3xl);
  line-height:var(--lh-tight);
  letter-spacing:.1em;
  margin:var(--sp-4) 0 var(--sp-5);
}
html[lang="en"] .public-hero h1,
html[lang="en"] .about-layout h1{
  font-family:var(--display-en);
  font-style:italic;
  letter-spacing:.015em;
}
.public-hero p,
.about-copy,
.project-label-excerpt,
.post-label-excerpt{
  font-size:var(--fs-lg);
  line-height:var(--lh-loose);
  letter-spacing:.03em;
  color:var(--public-muted);
  max-width:40em;
}
.public-section-title{
  margin-top:var(--sp-6);
  margin-bottom:var(--sp-4);
  padding-top:var(--sp-4);
  border-color:var(--hairline);
}
.public-section-title h2{
  font-family:var(--display-zh);
  font-size:var(--fs-xl);
  letter-spacing:.12em;
  line-height:var(--lh-tight);
}

#posts-list .post-label,
.projects-view .project-label,
#journal-list .post-label{
  padding-top:var(--sp-5);
  padding-bottom:var(--sp-5);
  border-radius:0;
  transition:background-color var(--dur-mid) var(--ease-silk),padding var(--dur-mid) var(--ease-silk);
}
.post-label-title,
.project-label-title{
  font-family:var(--display-zh);
  font-size:var(--fs-xl);
  line-height:var(--lh-tight);
  letter-spacing:.08em;
  margin:0;
}
html[lang="en"] .post-label-title,
html[lang="en"] .project-label-title{
  font-family:var(--display-en);
  font-style:italic;
  letter-spacing:.02em;
}
.post-label-date,
.project-label-meta,
.project-index,
.post-index{
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:1.2px;
  color:var(--public-soft);
}
.blog-search{
  min-height:44px;
  border-radius:999px;
  padding:0 var(--sp-4);
  gap:var(--sp-3);
  transition:border-color var(--dur-mid) var(--ease-silk),box-shadow var(--dur-mid) var(--ease-silk);
}
.blog-search input{font-size:var(--fs-md);padding:var(--sp-3) 0}
.post-tag,.note-tag{
  border-radius:999px;
  min-height:32px;
  padding:var(--sp-1) var(--sp-3);
  font-size:var(--fs-sm);
  transition:background-color var(--dur-mid) var(--ease-silk),color var(--dur-mid) ease,border-color var(--dur-mid) ease,transform var(--dur-fast) var(--ease-soft);
}
.project-drawer-panel{
  width:min(440px,92vw);
  padding:var(--sp-7) var(--sp-6) var(--sp-8);
  border-radius:var(--r-lg) 0 0 var(--r-lg);
  transition:transform var(--dur-slow) var(--ease-silk),opacity var(--dur-mid) ease;
}
.project-drawer-panel h3,
.project-drawer-title{
  font-family:var(--display-zh);
  font-size:var(--fs-2xl);
  line-height:var(--lh-tight);
  letter-spacing:.08em;
}
html[lang="en"] .project-drawer-panel h3{font-family:var(--display-en);font-style:italic}
.project-drawer-summary{font-size:var(--fs-md);line-height:var(--lh-loose)}
.project-drawer-process .markdown{font-size:var(--fs-md);line-height:var(--lh-loose)}

/* 动效收敛：入场只 opacity+轻位移，列表阶梯不超过 0.52s 总延时 */
@keyframes public-arrive{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:none}
}
@keyframes row-ink{
  0%{opacity:0;transform:translateY(6px)}
  100%{opacity:1;transform:none}
}
.public-view:not([hidden]),
.login-view:not([hidden]){
  animation:public-arrive var(--dur-slow) var(--ease-silk) both;
  filter:none;
}
#posts-list .post-label,
.projects-view .project-label,
#journal-list .post-label{
  animation-name:row-ink;
  animation-duration:var(--dur-mid);
  animation-timing-function:var(--ease-silk);
  animation-fill-mode:both;
}
#posts-list .post-label:nth-child(1),#journal-list .post-label:nth-child(1){animation-delay:80ms}
#posts-list .post-label:nth-child(2),#journal-list .post-label:nth-child(2){animation-delay:140ms}
#posts-list .post-label:nth-child(3),#journal-list .post-label:nth-child(3){animation-delay:200ms}
#posts-list .post-label:nth-child(4),#journal-list .post-label:nth-child(4){animation-delay:260ms}
#posts-list .post-label:nth-child(5),#journal-list .post-label:nth-child(5){animation-delay:320ms}
#posts-list .post-label:nth-child(n+6),#journal-list .post-label:nth-child(n+6){animation-delay:380ms}
.post-label-go,.project-label-go{transition:opacity var(--dur-mid) var(--ease-silk),transform var(--dur-mid) var(--ease-silk)}
.primary:active,.secondary:active{transform:translateY(1px) scale(.99);transition:transform var(--dur-fast) var(--ease-soft)}

/* 19. 博客索引：与作品展签同构，去掉特写卡 -------------------------------- */
#posts-list{
  display:block;
  border-top:1px solid var(--hairline);
}
#posts-list .post-label{
  display:grid;
  grid-template-columns:22px 64px minmax(0,1fr) 28px;
  gap:14px 14px;
  align-items:start;
  width:100%;
  text-align:left;
  padding:28px 4px 26px;
  border:0;
  border-bottom:1px solid var(--soft-line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
  transform:none;
  transition:background-color 360ms var(--ease-silk),padding 360ms var(--ease-silk);
}
#posts-list .post-label:hover,
#posts-list .post-label:active{
  transform:none;
  box-shadow:none;
  background:color-mix(in srgb,var(--accent) 4%,transparent);
  padding-left:10px;
  padding-right:10px;
  border-color:var(--soft-line);
}
.post-label-line{
  width:1px;height:100%;min-height:64px;margin-top:2px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 45%,transparent) 18%,color-mix(in srgb,var(--accent) 45%,transparent) 82%,transparent);
  transition:background 360ms ease,transform 360ms var(--ease-silk);
}
#posts-list .post-label:hover .post-label-line{
  transform:scaleY(1.03);
  background:linear-gradient(180deg,transparent,var(--accent) 16%,var(--accent) 84%,transparent);
}
#posts-list .post-index{
  font:12px/2.2 var(--mono);
  color:var(--public-soft);
  letter-spacing:1.4px;
  padding-top:2px;
  margin:0;
  transition:color 360ms ease;
}
#posts-list .post-label:hover .post-index{color:var(--accent)}
.post-label-main{display:flex;flex-direction:column;gap:8px;min-width:0}
.post-label-date{
  font:12px var(--mono);
  letter-spacing:1px;
  color:var(--public-soft);
}
.post-label-title{
  font-family:var(--serif);
  font-size:clamp(21px,2vw,28px);
  font-weight:500;
  letter-spacing:.08em;
  color:var(--text);
  line-height:1.4;
  text-wrap:balance;
}
.post-label-excerpt{
  font-size:15px;
  color:var(--public-muted);
  line-height:1.85;
  letter-spacing:.03em;
  max-width:52em;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-label-meta{
  font:12px var(--mono);
  color:var(--public-soft);
  letter-spacing:.06em;
}
.post-label-go{
  color:var(--accent);
  opacity:0;
  transform:translate(-4px,4px);
  transition:opacity 280ms var(--ease-silk),transform 280ms var(--ease-silk);
  padding-top:8px;
}
#posts-list .post-label:hover .post-label-go{opacity:1;transform:none}

/* 废弃旧卡片网格 / 今日抽读，避免残留样式干扰 */
#posts-list .post-card,
#posts-list .post-card.is-featured,
.post-pick{display:none!important}
#posts-list{
  display:block;
  grid-template-columns:none;
  gap:0;
}

.blog-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;
  margin:0 0 8px;padding:10px 0 18px;
  border:0;
  border-bottom:1px solid var(--soft-line);
}

@media(max-width:650px){
  #posts-list .post-label{
    grid-template-columns:16px 40px minmax(0,1fr) 20px;
    gap:10px 8px;
    padding:22px 2px;
  }
  .post-label-title{font-size:20px;letter-spacing:.05em}
  .post-label-excerpt{font-size:14px;line-height:1.75}
}

/* 20. 工作日志月份分组 + 作品过程展签 ------------------------------------ */
.journal-month{
  margin:28px 0 4px;
  padding-top:8px;
  font:11px var(--mono);
  letter-spacing:2px;
  color:var(--accent);
}
.journal-month span{opacity:.85}
#journal-list .journal-label{padding-top:18px;padding-bottom:18px}
#journal-list .post-label-title{font-size:clamp(18px,1.6vw,22px);letter-spacing:.06em}
#journal-list .post-label-excerpt{-webkit-line-clamp:3}

.project-drawer-process{
  margin:0 0 22px;
  padding-top:8px;
  border-top:1px solid var(--soft-line);
}
.project-drawer-process section{padding:16px 0 4px}
.project-drawer-process h4{
  margin:0 0 10px;
  font:11px var(--mono);
  letter-spacing:1.8px;
  color:var(--accent);
}
.project-drawer-process .markdown{
  font-size:14px;
  line-height:1.95;
  color:var(--public-muted);
  letter-spacing:.02em;
}
.project-drawer-process .markdown p{margin:0 0 8px}
.project-drawer-process .markdown strong{color:var(--accent)}

/* 10. 中英字体气质 + 语言切换过渡 -------------------------------------------- */

:root{
  --display-en:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,'Times New Roman',serif;
  --display-zh:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong','SimSun',Georgia,serif;
}

/* 字帘主句：中文正宋，英文斜体衬线；副句与英文 tagline 统一优雅 */
.curtain-message>span{
  font-family:var(--display-zh);
  font-size:13px;
  letter-spacing:.55em;
  color:var(--public-soft);
  text-indent:.55em;
}
.curtain-message strong{
  font-family:var(--display-zh);
  font-weight:500;
  letter-spacing:.28em;
  text-indent:.28em;
  color:var(--text);
}
.curtain-message i{
  font-family:var(--display-en);
  font-style:italic;
  font-size:12px;
  letter-spacing:.22em;
  color:var(--public-soft);
  font-weight:400;
}

html[lang="en"] .curtain-message>span{
  font-family:var(--display-en);
  font-style:italic;
  letter-spacing:.28em;
  text-indent:.28em;
  text-transform:none;
  font-size:12px;
}
html[lang="en"] .curtain-message strong{
  font-family:var(--display-en);
  font-style:italic;
  font-weight:400;
  letter-spacing:.04em;
  text-indent:0;
  font-size:clamp(28px,2.6vw,38px);
}
html[lang="en"] .curtain-caption span:first-child{
  font-family:var(--display-en);
  font-style:italic;
  letter-spacing:.18em;
}

/* 公开页英文：斜体衬线，与中文正宋形成同一套「编辑部」气质 */
html[lang="en"] .public-hero h1,
html[lang="en"] .about-layout h1,
html[lang="en"] .welcome-copy h1,
html[lang="en"] .reader-dialog .reading-header h1,
html[lang="en"] .post-card h3,
html[lang="en"] .project-body h3,
html[lang="en"] .about-principles h3,
html[lang="en"] .about-role,
html[lang="en"] .about-art p,
html[lang="en"] .intro-word,
html[lang="en"] .intro-line{
  font-family:var(--display-en);
  font-style:italic;
  font-weight:400;
  letter-spacing:.015em;
}
html[lang="en"] .public-hero h1 span,
html[lang="en"] .about-layout h1 span,
html[lang="en"] .welcome-copy h1 span{
  font-style:italic;
  letter-spacing:.01em;
}
html[lang="en"] .public-hero p,
html[lang="en"] .about-copy,
html[lang="en"] .project-sub,
html[lang="en"] .project-summary{
  font-family:var(--display-en);
  font-style:normal;
  letter-spacing:.01em;
  line-height:1.85;
}

/* 中文公开页继续用正宋，强化与英文斜体的对照 */
html[lang="zh-CN"] .public-hero h1,
html[lang="zh-CN"] .about-layout h1,
html[lang="zh-CN"] .welcome-copy h1{
  font-family:var(--display-zh);
  font-style:normal;
}

/* 语言切换：柔和交叉淡入，避免生硬替换 */
html.is-lang-switching .curtain-message,
html.is-lang-switching .curtain-caption,
html.is-lang-switching .public-hero,
html.is-lang-switching .public-topline,
html.is-lang-switching .about-layout,
html.is-lang-switching .welcome-copy,
html.is-lang-switching .post-card,
html.is-lang-switching .project-row,
html.is-lang-switching .about-principles{
  animation:lang-silk 480ms var(--ease-silk) both;
}
html.is-lang-switching .curtain-message{animation-delay:20ms}
html.is-lang-switching .public-hero,
html.is-lang-switching .welcome-copy,
html.is-lang-switching .about-layout{animation-delay:40ms}
html.is-lang-switching .post-card:nth-child(1),
html.is-lang-switching .project-row:nth-child(1){animation-delay:80ms}
html.is-lang-switching .post-card:nth-child(2),
html.is-lang-switching .project-row:nth-child(2){animation-delay:120ms}
html.is-lang-switching .post-card:nth-child(3),
html.is-lang-switching .project-row:nth-child(3){animation-delay:160ms}
@keyframes lang-silk{
  0%{opacity:1;filter:blur(0);transform:translateY(0)}
  38%{opacity:0;filter:blur(5px);transform:translateY(8px)}
  100%{opacity:1;filter:blur(0);transform:translateY(0)}
}

/* 11. 顶栏重设计：杂志刊头 --------------------------------------------------- */

.app-shell{grid-template-rows:60px minmax(0,1fr) 29px}
.titlebar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:0 clamp(16px,2.2vw,32px);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 4%,transparent),transparent 70%),
    color-mix(in srgb,var(--sidebar) 94%,#000);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 14%,var(--line));
}
.titlebar::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;opacity:.85;
  background:linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb,var(--accent) 55%,transparent) 18%,
    color-mix(in srgb,var(--accent) 75%,transparent) 50%,
    color-mix(in srgb,var(--accent) 55%,transparent) 82%,
    transparent 100%
  );
}
.titlebar-left,.titlebar-right{display:flex;align-items:center;gap:14px;min-width:0}
.titlebar-right{gap:10px;flex-shrink:0}

/* 站名锁扣：Glimmer + AI 同为斜体衬线，像一枚完整刊名 */
.brand{
  display:inline-flex;align-items:center;gap:12px;
  color:inherit;text-decoration:none;flex-shrink:0;
  padding:4px 2px;border-radius:10px;
  transition:opacity 280ms var(--ease-silk);
}
.brand:hover{opacity:.92}
.brand-symbol{
  width:34px;height:34px;flex-shrink:0;
  filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--accent) 28%,transparent));
}
.brand:hover .brand-symbol{
  filter:drop-shadow(0 6px 18px color-mix(in srgb,var(--accent) 48%,transparent));
  transform:rotate(-6deg) scale(1.03);
}
.brand-text{
  display:inline-flex;align-items:baseline;gap:.22em;line-height:1;
  padding-right:2px;
}
.brand-name{
  font-family:var(--display-en,'Iowan Old Style',Georgia,serif);
  font-style:italic;font-weight:400;
  font-size:25px;letter-spacing:.01em;
  color:var(--text);
  line-height:1;
}
.brand-ai{
  font-family:var(--display-en,'Iowan Old Style',Georgia,serif);
  font-style:italic;font-weight:400;
  font-size:21px;letter-spacing:.02em;
  color:var(--accent);
  line-height:1;
  opacity:.92;
  transition:opacity 280ms ease,color 280ms ease;
}
.brand:hover .brand-ai{opacity:1}

.title-divider{
  width:1px;height:15px;flex-shrink:0;margin:0 4px;
  background:linear-gradient(
    180deg,
    transparent,
    color-mix(in srgb,var(--accent) 40%,var(--line)) 30%,
    color-mix(in srgb,var(--accent) 40%,var(--line)) 70%,
    transparent
  );
  opacity:.75;
}
/* 副标题：与站名同一套优雅衬线，不再用等宽 IDE 字 */
.title-sub{
  font-family:var(--display-en,'Iowan Old Style',Georgia,serif);
  font-style:italic;font-weight:400;
  font-size:14px;letter-spacing:.04em;
  text-transform:none;
  color:var(--public-soft);
  white-space:nowrap;
  line-height:1;
  padding-bottom:1px;
}
html[lang="zh-CN"] .title-sub{
  font-family:var(--display-zh,'Songti SC',serif);
  font-style:normal;
  font-size:13px;
  letter-spacing:.18em;
  padding-bottom:0;
}

/* 中央状态：安静、轻盈 */
.titlebar-center{
  display:flex;align-items:center;gap:8px;
  font-family:var(--display-en,'Iowan Old Style',Georgia,serif);
  font-style:italic;
  font-size:13px;letter-spacing:.03em;
  color:var(--public-soft);
  position:absolute;left:50%;transform:translateX(-50%);
  pointer-events:none;
}
html[lang="zh-CN"] .titlebar-center{
  font-family:var(--sans);
  font-style:normal;
  font-size:12px;
  letter-spacing:.14em;
}
.titlebar-center .status-dot{
  width:5px;height:5px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 12%,transparent);
}

/* 右侧控件：细金边、衬线字，与刊头同族 */
.theme-switch,
.language-toggle{
  min-height:34px;
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--soft-line));
  border-radius:999px;
  background:color-mix(in srgb,var(--panel) 55%,transparent);
  color:var(--muted);
  font-family:var(--display-en,'Iowan Old Style',Georgia,serif);
  font-style:italic;
  font-size:13px;letter-spacing:.03em;
  padding:5px 14px;
  transition:
    background-color 280ms var(--ease-silk),
    border-color 280ms ease,
    color 240ms ease,
    box-shadow 280ms var(--ease-silk),
    transform 140ms var(--ease-soft);
}
html[lang="zh-CN"] .theme-switch{
  font-family:var(--sans);
  font-style:normal;
  font-size:13px;
  letter-spacing:.06em;
}
.theme-switch:hover,
.language-toggle:hover{
  color:var(--text);
  border-color:color-mix(in srgb,var(--accent) 52%,var(--line));
  background:var(--accent-bg);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 8%,transparent);
}
.theme-switch svg{
  width:14px;height:14px;
  color:var(--accent);
  transition:transform 380ms var(--veil-ease);
}
.theme-switch:hover svg{transform:rotate(-18deg)}
.language-toggle{
  font-style:italic;
  font-size:13px;font-weight:400;
  letter-spacing:.08em;
  min-width:44px;
}
.builder-avatar{
  width:36px;height:36px;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  box-shadow:inset 0 1px 0 #ffffff12,0 2px 10px #0000001f;
  transition:border-color 260ms ease,box-shadow 260ms ease,transform 260ms var(--ease-silk);
}
.builder-avatar:hover{
  border-color:var(--accent);
  transform:translateY(-1px);
  box-shadow:inset 0 1px 0 #ffffff18,0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent),0 6px 14px #00000022;
}

/* 中英统一：站名始终斜体拉丁刊名 */
html[lang="zh-CN"] .brand-name,
html[lang="en"] .brand-name,
html[lang="zh-CN"] .brand-ai,
html[lang="en"] .brand-ai{
  font-style:italic;
  font-family:var(--display-en,'Iowan Old Style',Georgia,serif);
}

@media(max-width:980px){
  .titlebar-center{display:none}
  .title-sub{display:none}
  .title-divider{display:none}
}
@media(max-width:650px){
  .app-shell{grid-template-rows:56px minmax(0,1fr) 31px}
  .titlebar{padding:0 12px;gap:10px}
  .titlebar-left,.titlebar-right{gap:8px}
  .brand{gap:8px}
  .brand-symbol{width:30px;height:30px}
  .brand-name{font-size:20px}
  .brand-ai{font-size:17px}
  .theme-switch{padding:5px 8px}
  .theme-switch #theme-label{display:none}
  .language-toggle{min-width:36px;padding:5px 7px}
  .builder-avatar{width:32px;height:32px}
}
@media(prefers-reduced-motion:reduce){
  .brand:hover .brand-symbol{transform:none}
  .builder-avatar:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  html.is-lang-switching .curtain-message,
  html.is-lang-switching .curtain-caption,
  html.is-lang-switching .public-hero,
  html.is-lang-switching .public-topline,
  html.is-lang-switching .about-layout,
  html.is-lang-switching .welcome-copy,
  html.is-lang-switching .post-card,
  html.is-lang-switching .project-row,
  html.is-lang-switching .about-principles{animation:none!important}
}

/* 12. 博客：搜索栏 + 编辑部卡片网格 ------------------------------------------ */

.blog-toolbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;
  margin:0 0 28px;padding:14px 0;
  border-top:1px solid var(--soft-line);
  border-bottom:1px solid var(--soft-line);
}
.blog-search{
  display:flex;align-items:center;gap:10px;
  flex:1 1 220px;max-width:360px;min-height:42px;
  padding:0 16px;
  border:1px solid color-mix(in srgb,var(--accent) 18%,var(--soft-line));
  border-radius:999px;
  background:color-mix(in srgb,var(--panel) 70%,transparent);
  color:var(--public-soft);
  transition:border-color 280ms ease,box-shadow 280ms var(--ease-silk),background-color 280ms ease;
}
.blog-search:focus-within{
  border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent);
  background:var(--editor);
}
.blog-search svg{width:15px;height:15px;color:var(--accent);opacity:.85;flex-shrink:0}
.blog-search input{
  flex:1;min-width:0;border:0;background:transparent;outline:0;
  font-family:var(--sans);
  font-size:14px;letter-spacing:.04em;
  color:var(--text);
  padding:10px 0;
}
html[lang="en"] .blog-search input{font-family:var(--display-en);font-style:italic;letter-spacing:.02em}
.blog-search input::placeholder{color:var(--faint)}
.blog-toolbar .post-tags{margin:0;flex:1 1 auto}

/* 首篇特写 + 其余网格 */
.posts-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px 20px;
}
.post-card.is-featured{
  grid-column:1/-1;
  padding:36px 38px 32px;
  background:
    linear-gradient(145deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 48%),
    var(--panel);
  border-color:color-mix(in srgb,var(--accent) 22%,var(--line));
}
.post-card.is-featured h3{
  font-size:clamp(28px,3vw,36px);
  max-width:18em;
  margin-top:14px;
}
.post-card.is-featured p{
  font-size:17px;
  max-width:40em;
  margin-bottom:28px;
}
.post-card .post-index{
  font-family:var(--mono);
  font-size:11px;letter-spacing:1.6px;
  color:var(--accent);
  margin-right:12px;
}
.post-card .post-date{
  font-family:var(--mono);
  font-size:12px;letter-spacing:.8px;
  color:var(--public-soft);
}
.post-card>span:first-child{display:inline}

/* 13. 关于页：宣言式排版 + 气口艺术 ------------------------------------------ */

.about-view .about-layout{
  gap:48px;
  padding:28px 0 48px;
  align-items:end;
}
.about-view .eyebrow{margin-bottom:8px}
.about-view h1{
  font-size:clamp(36px,4.2vw,52px);
  letter-spacing:.14em;
  line-height:1.48;
  margin:18px 0 28px;
}
.about-role{
  display:inline-block;
  margin:0 0 22px;
  padding-bottom:10px;
  border-bottom:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
}
.about-copy{
  max-width:36em;
  line-height:2.15;
}
.about-links{
  margin-top:36px;
  gap:28px;
  font-size:15px;
}
.about-links a{
  position:relative;
  padding-bottom:4px;
}
.about-links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:color-mix(in srgb,var(--accent) 40%,transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform 360ms var(--ease-silk);
}
.about-links a:hover::after{transform:scaleX(1)}

.about-art{
  position:relative;
  border-left:1px solid var(--soft-line);
  padding:28px 0 28px 36px;
  min-height:280px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
}
.about-art::before{
  content:'';position:absolute;inset:18% 10% 18% 18%;
  background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--accent) 14%,transparent),transparent 68%);
  pointer-events:none;
}
.about-glyph{
  width:120px;height:120px;
  margin-bottom:28px;
  filter:drop-shadow(0 12px 36px color-mix(in srgb,var(--accent) 35%,transparent));
}
.about-art p{
  font-size:22px;
  line-height:1.75;
  margin-bottom:14px;
  position:relative;
}
.about-art small{
  font-family:var(--display-zh);
  font-size:12px;
  letter-spacing:.28em;
  color:var(--faint);
}

.about-principles{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--soft-line);
  padding-top:0;
}
.about-principles article{
  padding:32px 28px 28px 0;
  border-right:1px solid var(--soft-line);
  position:relative;
}
.about-principles article:last-child{border-right:0;padding-right:0}
.about-principles article:not(:first-child){padding-left:28px}
.about-principles article>span{
  display:block;
  font-family:var(--mono);
  font-size:11px;letter-spacing:2px;
  color:var(--accent);
  margin-bottom:18px;
}
.about-principles h3{
  font-size:22px;
  margin:0 0 12px;
  letter-spacing:.16em;
}
.about-principles p{
  font-size:15px;
  line-height:2;
  margin:0;
  max-width:22em;
}

.copyright{
  margin-top:8px;
  opacity:.85;
}
.copyright h3{
  font-family:var(--display-zh);
  letter-spacing:.2em;
  font-size:13px;
  color:var(--faint);
  margin-bottom:8px;
}

@media(max-width:980px){
  .posts-grid{grid-template-columns:1fr}
  .post-card.is-featured{padding:28px 24px}
  .about-view .about-layout{grid-template-columns:1fr;gap:28px}
  .about-art{display:none}
  .about-principles{grid-template-columns:1fr}
  .about-principles article{
    border-right:0;border-bottom:1px solid var(--soft-line);
    padding:24px 0!important;
  }
  .about-principles article:last-child{border-bottom:0}
}
@media(max-width:650px){
  .blog-toolbar{flex-direction:column;align-items:stretch}
  .blog-search{max-width:none}
  .post-card.is-featured h3{font-size:24px}
  .about-view h1{letter-spacing:.08em}
}

/* 21. 刊记 */
.footer-links .colophon{font-family:var(--display-en,'Iowan Old Style',Georgia,serif);font-style:italic;letter-spacing:.04em;color:var(--public-soft)}
html[lang="zh-CN"] .footer-links .colophon{font-family:var(--display-zh,'Songti SC',serif);font-style:normal;letter-spacing:.12em}

/* 23. 墨色画廊 Ink Gallery Atelier —— 公开层展墙构图 -------------------- */
/* 设计读：作品集/编辑档案 · VARIANCE 8 / MOTION 5 / DENSITY 2
   纪律：非对称、窄栏、一次揭示；禁粒子/故障/glitch */

/* 侧栏在公开阅读时视觉降权（功能保留） */
.app-shell:has(.public-view:not([hidden])) .sidebar,
.app-shell:has(.public-view:not([hidden])) .titlebar{
  background:color-mix(in srgb,var(--sidebar) 92%,transparent);
}
.app-shell:has(.public-view:not([hidden])) .sidebar{
  border-right-color:color-mix(in srgb,var(--accent) 10%,var(--line));
  opacity:.92;
}
.app-shell:has(.public-view:not([hidden])) .nav-item{
  font-size:14px;
  color:var(--public-soft);
}

/* 公开页：展墙 */
.public-view{
  position:relative;
  padding:var(--sp-7) clamp(var(--sp-5),5vw,var(--sp-8)) var(--sp-8);
}
.public-view:before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 420px at 18% 0%,color-mix(in srgb,var(--accent) 5%,transparent),transparent 70%);
}
.public-view>*{position:relative;z-index:1}

/* Hero：非对称 —— 标题左重，右侧留白；编号/竖排英文贴边 */
.public-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:var(--sp-6);
  align-items:end;
  padding:var(--sp-8) 0 var(--sp-7);
  max-width:none;
}
.public-hero .eyebrow{
  grid-column:1/-1;
  font-family:var(--mono);
  font-size:var(--fs-xs);
  letter-spacing:2px;
  color:var(--public-soft);
}
.public-hero h1{
  grid-column:1;
  margin:var(--sp-4) 0 var(--sp-5);
  font-family:var(--display-zh);
  font-weight:500;
  font-size:clamp(34px,4.6vw,52px);
  line-height:var(--lh-tight);
  letter-spacing:.12em;
  text-wrap:balance;
  /* 揭示：一次 mask 上移，克制 */
  animation:gallery-mask var(--dur-slow) var(--ease-silk) both;
}
html[lang="en"] .public-hero h1{
  font-family:var(--display-en);
  font-style:italic;
  letter-spacing:.02em;
  font-weight:400;
}
.public-hero p{
  grid-column:1;
  max-width:34em;
  font-size:var(--fs-lg);
  line-height:var(--lh-loose);
  color:var(--public-muted);
  letter-spacing:.04em;
  animation:gallery-fade var(--dur-slow) var(--ease-silk) 120ms both;
}
/* 右栏：空场 + 细金线竖注（装饰位，非控件） */
.public-hero:after{
  content:'';justify-self:end;align-self:stretch;width:1px;margin-bottom:var(--sp-2);
  background:linear-gradient(180deg,transparent,var(--accent) 30%,var(--accent) 70%,transparent);
  opacity:.35;
  animation:gallery-fade 1s var(--ease-silk) 200ms both;
}
#blog-view .public-hero h1,
.projects-view .public-hero h1,
.journal-view .public-hero h1,
.about-layout h1{
  font-family:var(--display-zh);
  font-size:clamp(34px,4.6vw,52px);
  letter-spacing:.12em;
  line-height:var(--lh-tight);
}
html[lang="en"] #blog-view .public-hero h1,
html[lang="en"] .projects-view .public-hero h1,
html[lang="en"] .journal-view .public-hero h1,
html[lang="en"] .about-layout h1{
  font-family:var(--display-en);
  font-style:italic;
  letter-spacing:.02em;
}

@keyframes gallery-mask{
  0%{opacity:0;clip-path:inset(0 0 18% 0);transform:translateY(14px)}
  100%{opacity:1;clip-path:inset(0 0 0 0);transform:none}
}
@keyframes gallery-fade{
  0%{opacity:0;transform:translateY(8px)}
  100%{opacity:1;transform:none}
}

/* 区块标题：左对齐 + 年份感 meta，不用居中对称 */
.public-section-title{
  display:flex;
  align-items:baseline;
  justify-content:flex-start;
  gap:var(--sp-4);
  border-top:1px solid var(--hairline);
  padding-top:var(--sp-5);
  margin:var(--sp-7) 0 var(--sp-4);
}
.public-section-title h2{
  font-family:var(--display-zh);
  font-size:var(--fs-xl);
  letter-spacing:.16em;
  font-weight:500;
  margin:0;
}
.public-section-title>span{
  margin-left:auto;
  font-family:var(--display-en);
  font-style:italic;
  font-size:var(--fs-sm);
  color:var(--public-soft);
}

/* 索引行：展签强化 —— 编号更大、标题更「墙上的名字」 */
#posts-list .post-label,
.projects-view .project-label,
#journal-list .post-label{
  grid-template-columns:28px 72px minmax(0,1fr) 32px;
  gap:var(--sp-3) var(--sp-4);
  padding:var(--sp-6) var(--sp-2);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 12%,var(--soft-line));
  animation:gallery-fade var(--dur-mid) var(--ease-silk) both;
}
#posts-list .post-label:nth-child(1){animation-delay:100ms}
#posts-list .post-label:nth-child(2){animation-delay:160ms}
#posts-list .post-label:nth-child(3){animation-delay:220ms}
#posts-list .post-label:nth-child(4){animation-delay:280ms}
#posts-list .post-label:nth-child(5){animation-delay:340ms}
#posts-list .post-label:nth-child(n+6){animation-delay:400ms}
.projects-view .project-label:nth-child(1){animation-delay:100ms}
.projects-view .project-label:nth-child(2){animation-delay:180ms}
.projects-view .project-label:nth-child(3){animation-delay:260ms}
#journal-list .post-label:nth-child(1){animation-delay:80ms}
#journal-list .post-label:nth-child(2){animation-delay:140ms}
#journal-list .post-label:nth-child(3){animation-delay:200ms}
#journal-list .post-label:nth-child(4){animation-delay:260ms}
#journal-list .post-label:nth-child(5){animation-delay:320ms}
#journal-list .post-label:nth-child(n+6){animation-delay:380ms}

.post-label-line{
  width:2px;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 70%,transparent) 20%,color-mix(in srgb,var(--accent) 70%,transparent) 80%,transparent);
}
#posts-list .post-label .post-index,
.projects-view .project-label .project-index,
#journal-list .post-index{
  font-family:var(--mono);
  font-size:var(--fs-md);
  letter-spacing:.12em;
  color:var(--accent);
  opacity:.75;
  padding-top:4px;
}
.post-label-title,
.project-label-title{
  font-size:clamp(24px,2.4vw,32px);
  letter-spacing:.1em;
  line-height:var(--lh-tight);
  font-weight:500;
}
html[lang="en"] .post-label-title,
html[lang="en"] .project-label-title{
  font-family:var(--display-en);
  font-style:italic;
  font-weight:400;
  letter-spacing:.01em;
}
.post-label-excerpt,
.project-label-sub,
.project-label-meta{
  max-width:42em;
}

/* 关于页：画廊气口 */
.about-view .about-layout{
  padding-top:var(--sp-7);
  gap:var(--sp-7);
}
.about-view h1{
  letter-spacing:.14em;
}
.about-art{
  position:relative;
  padding:var(--sp-6) 0 var(--sp-6) var(--sp-6);
}
.about-art:before{
  content:'';position:absolute;left:0;top:10%;bottom:10%;width:1px;
  background:linear-gradient(180deg,transparent,var(--accent),transparent);
  opacity:.45;
}

@media(max-width:980px){
  .public-hero{grid-template-columns:1fr;gap:var(--sp-4)}
  .public-hero:after{display:none}
  #posts-list .post-label,
  .projects-view .project-label,
  #journal-list .post-label{
    grid-template-columns:18px 40px minmax(0,1fr);
  }
}
@media(prefers-reduced-motion:reduce){
  .public-hero h1,.public-hero p,.public-hero:after,
  #posts-list .post-label,.projects-view .project-label,#journal-list .post-label{
    animation:none!important;
  }
}