/* ============================================================
   AI楚安 个人网站 · 共享样式
   设计来源：Claude Design「AI楚安 个人网站.dc.html」画板 1a / 2a–2d / 3a
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  --paper:#F7F4EC;        /* 页面纸底 */
  --paper-deep:#E9E3D6;   /* 更深的纸色，用于分隔 */
  --white:#fff;
  --ink:#27313A;          /* 主文字 / 2px 描边 */
  --body:#3F4A54;         /* 正文 */
  --muted:#4F7090;        /* 次级信息、灰蓝 */
  --line:#E1DCD0;         /* 细分隔线 */
  --blue:#1677FF;         /* 电光蓝，主行动色 */
  --navy:#24364D;         /* 深蓝色块 */
  --navy-text:#C9D3DF;    /* 深蓝块上的正文 */
  --cyan:#75D6E7;
  --cyan-soft:#E3F7FA;
  --green:#4CA36B;
  --orange:#F28A63;

  --serif:'Noto Serif SC','Songti SC','Source Han Serif SC','Noto Serif CJK SC',serif;
  --sans:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;

  --pad:64px;             /* 页面左右留白 */
  --maxw:1200px;          /* 画板宽度 */
  --rule:2px solid var(--ink);

  /* 动效曲线：out 用于入场和位移，spring 用于小物件的弹一下 */
  --ease-out:cubic-bezier(.2,.7,.2,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  /* 纸纹：极淡的噪点，呼应插画的水彩纸纹 */
  --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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .15 0 0 0 0 .19 0 0 0 0 .23 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (max-width:1024px){ :root{ --pad:40px } }
@media (max-width:640px){  :root{ --pad:20px } }

/* ---------- 基础 ---------- */
*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}
/* 页头吸顶，锚点定位时给它留出高度，避免目标被盖住 */
[id]{scroll-margin-top:104px}

body{
  margin:0;
  background:var(--paper) var(--grain);
  font-family:var(--sans);
  color:var(--ink);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;display:block}

/* 组件的 display 会盖掉浏览器默认的 [hidden]{display:none}，这里兜底 */
[hidden]{display:none !important}

a{color:var(--blue);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--navy)}

h1,h2,h3{font-family:var(--serif);font-weight:700;margin:0;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure,dl,dd{margin:0}

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

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* 屏幕阅读器专用 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skip-link:focus{left:0;color:var(--paper)}

/* ---------- 页头 ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:var(--paper) var(--grain);
  border-bottom:var(--rule);
  view-transition-name:site-head;   /* 跨页切换时页头保持不动 */
}

.head-inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding-block:22px;
}

.brand{
  display:flex;align-items:center;gap:12px;flex:none;
  font-family:var(--serif);font-weight:700;font-size:22px;color:var(--ink);
}
.brand:hover{color:var(--ink)}
.brand img{
  width:36px;height:36px;border-radius:50%;
  border:var(--rule);object-fit:cover;background:var(--paper-deep);
}

.site-nav{display:flex;gap:36px;font-size:15px;font-weight:500}
.site-nav a{position:relative;color:var(--ink);padding-bottom:3px;border-bottom:2px solid transparent}
/* 下划线用 ::after 从左往右画出来，正好压在透明边框的位置上，不影响排版 */
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:right;
  transition:transform .3s var(--ease-out);
}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.site-nav a[aria-current="page"]::after{
  background:var(--blue);transform:scaleX(1);transform-origin:left;
  animation:draw-x .6s .15s var(--ease-out) backwards;
}

.head-cta{flex:none}

/* 汉堡按钮：仅窄屏出现 */
.nav-toggle{
  display:none;
  width:44px;height:44px;padding:0;
  background:transparent;border:var(--rule);border-radius:12px;
  cursor:pointer;
}
.nav-toggle span{
  display:block;width:20px;height:2px;margin:4px auto;
  background:var(--ink);transition:transform .2s ease,opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:900px){
  .head-inner{flex-wrap:wrap}            /* 让菜单换到品牌行下方，而不是挤在同一行 */
  .nav-toggle{display:block;order:3}
  .site-head .head-cta{display:none}  /* 加一级权重，压过后面定义的 .btn */
  .head-inner{row-gap:0}   /* 菜单折到第二行后，行间不再多出 24px 空白 */
  .site-nav{
    order:4;flex-basis:100%;flex-direction:column;gap:0;
    max-height:0;overflow:hidden;visibility:hidden;
    /* 收起时 visibility 延后切换，等高度动画走完；这样收起的菜单项不会被 Tab 选中 */
    transition:max-height .25s ease,visibility 0s .25s;
  }
  .site-nav.is-open{max-height:420px;visibility:visible;transition:max-height .3s var(--ease-out)}
  .site-nav a{
    padding:14px 0;border-bottom:1.5px solid var(--line);
    opacity:0;transform:translateY(-8px);
    transition:opacity .2s ease,transform .2s ease;
  }
  .site-nav a::after{display:none}
  .site-nav.is-open a{opacity:1;transform:none;transition-duration:.3s;transition-timing-function:var(--ease-out)}
  .site-nav.is-open a:nth-child(2){transition-delay:.04s}
  .site-nav.is-open a:nth-child(3){transition-delay:.08s}
  .site-nav.is-open a:nth-child(4){transition-delay:.12s}
  .site-nav.is-open a:nth-child(5){transition-delay:.16s}
  .site-nav.is-open a:nth-child(6){transition-delay:.2s}
  .site-nav a[aria-current="page"]{color:var(--blue)}

  /* 窄屏：往下读时页头收起，往回滑立刻出现，把屏幕让给内容 */
  .site-head{transition:transform .3s var(--ease-out)}
  .site-head.is-hidden{transform:translateY(-100%)}
  .site-nav .nav-cta{
    margin:16px 0 20px;text-align:center;border-bottom:0;
    background:var(--blue);color:#fff;border-radius:999px;padding:12px 18px;font-weight:700;
  }
  .site-nav .nav-cta:hover{color:#fff}
}
@media (min-width:901px){ .site-nav .nav-cta{display:none} }

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:700;font-size:16px;
  padding:14px 26px;border-radius:12px;border:2px solid transparent;
  cursor:pointer;transition:transform .12s ease,background .15s ease,color .15s ease;
}
.btn:active{transform:translateY(1px)}

.btn-ink{background:var(--ink);color:var(--paper)}
.btn-ink:hover{background:var(--navy);color:var(--paper)}

.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--navy);color:#fff}

.btn-line{border-color:var(--ink);color:var(--ink);padding:12px 24px}
.btn-line:hover{background:var(--ink);color:var(--paper)}

.btn-paper{border-color:var(--paper);color:var(--paper);padding:12px 24px}
.btn-paper:hover{background:var(--paper);color:var(--ink)}

.btn-pill{border-radius:999px;font-size:14px;padding:10px 18px}
.btn-sm{font-size:15px;padding:13px 26px}

.btn-row{display:flex;gap:14px;flex-wrap:wrap}

/* ---------- 通用排版件 ---------- */
.eyebrow{
  font-size:13px;font-weight:700;color:var(--muted);
  letter-spacing:.15em;margin-bottom:18px;
}

.section{padding-top:80px}
.section-head{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:24px;flex-wrap:wrap;margin-bottom:36px;
}
.section-head h2{font-size:clamp(28px,3.4vw,36px)}
.section-note{font-size:14px;color:var(--muted)}

.page-title{font-size:clamp(32px,5vw,48px);line-height:1.25}
.lede{font-size:16px;line-height:1.85;color:var(--body)}

/* 标签 / 徽章 */
.tag{
  display:inline-block;border:1.5px solid var(--ink);border-radius:999px;
  padding:6px 14px;font-size:13px;font-weight:500;
}
.badge{
  display:inline-block;font-size:12px;font-weight:700;
  border:1.5px solid currentColor;border-radius:6px;padding:2px 8px;
}
.badge--done{color:var(--green)}
.badge--wip{color:var(--orange)}
.badge--solid{background:var(--green);color:var(--paper);border-color:var(--green)}

/* 卡片通用 */
.card{
  background:var(--white);border:var(--rule);border-radius:18px;padding:26px;
}
.card--dashed{background:transparent;border:2px dashed var(--muted)}

/* 三条原则横排 */
.principles{
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:var(--rule);border-bottom:var(--rule);
}
.principles > div{padding:28px;border-right:var(--rule)}
.principles > div:first-child{padding-left:0}
.principles > div:last-child{padding-right:0;border-right:0}
.principles .n{font-size:13px;color:var(--muted);font-weight:700;margin-bottom:10px}
.principles h3{font-family:var(--serif);font-size:22px;font-weight:600}
.principles h3:not(:last-child){margin-bottom:8px}
.principles p{font-size:14px;line-height:1.7;color:var(--body)}

/* 带偏移描边的人像 */
.portrait{position:relative;display:inline-block}
.portrait::after{
  content:"";position:absolute;inset:18px -18px -18px 18px;
  border:var(--rule);border-radius:22px;
}
.portrait img{
  position:relative;z-index:1;
  border-radius:22px;border:var(--rule);
  object-fit:cover;background:var(--paper-deep);
}

/* 书封模型 */
.cover{
  position:relative;flex:none;
  border:var(--rule);border-radius:4px 10px 10px 4px;
  font-family:var(--serif);font-weight:700;line-height:1.3;
  background:var(--paper);color:var(--ink);
}
.cover .spine{position:absolute;left:0;top:0;bottom:0;border-right:var(--rule)}
.cover .t,.cover .sub{display:block;position:relative}
.cover .by{position:absolute;font-weight:400}

.cover--s{width:150px;height:210px;padding:22px 18px;font-size:22px}
.cover--s .spine{width:10px;background:var(--blue)}
.cover--s .t{margin-left:10px}
.cover--s .by{bottom:18px;left:28px;font-size:11px}

.cover--m{width:180px;height:252px;padding:24px 20px;font-size:26px;border-radius:5px 12px 12px 5px}
.cover--m .spine{width:12px;background:var(--muted)}
.cover--m .t{margin-left:12px}
.cover--m .by{bottom:22px;left:32px;font-size:12px;color:var(--muted)}

.cover--l{
  width:240px;height:336px;padding:32px 26px;font-size:32px;
  border-radius:6px 14px 14px 6px;box-shadow:10px 10px 0 var(--blue);
}
.cover--l .spine{width:16px;background:var(--blue)}
.cover--l .t{margin-left:16px}
.cover--l .sub{margin-left:16px;margin-top:14px;font-family:var(--sans);font-size:13px;font-weight:400;color:var(--muted);line-height:1.6}
.cover--l .by{bottom:28px;left:42px;font-size:12px;font-family:var(--sans);font-weight:400}

.cover--navy{background:var(--navy);color:var(--paper);box-shadow:6px 6px 0 var(--ink)}
.cover--navy .by{opacity:.8}
.cover--wip{background:var(--paper);box-shadow:none}
.cover--wip .spine{background:var(--muted)}

/* 真实书封图（assets/img/codex-cover.webp，抠自 source/codex-book-render.jpg，透明底）
   立体书自带透视和斜边，不能套方框，也不配硬边偏移阴影；用柔和的投影让书自然立在页面上。 */
.book-cover{display:block;flex:none;height:auto}
.book-cover--s{width:150px;filter:drop-shadow(0 8px 12px rgba(39,49,58,.22))}
.book-cover--l{width:240px;filter:drop-shadow(0 18px 28px rgba(0,0,0,.45))}

/* ---------- 深蓝 CTA 区块 ---------- */
.cta{
  background:var(--navy);color:var(--paper);border-radius:24px;
  padding:56px 64px;margin-top:80px;
  display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center;
}
.cta h2{font-size:clamp(26px,3.2vw,34px);margin-bottom:16px}
.cta p:not(.qr-label):not(.qr-note){font-size:16px;line-height:1.8;color:var(--navy-text);max-width:520px;margin-bottom:28px}
.cta a{color:var(--cyan)}
.cta-facts{display:flex;gap:28px;flex-wrap:wrap;font-size:14px}
.cta-facts dt{color:var(--cyan);font-weight:700;margin-bottom:4px}
.cta-facts dd{margin:0}

/* 公众号二维码（assets/img/qrcode.webp，源自 lucky-draw/public/qrcode.webp） */
.qr-card{
  background:var(--paper);border-radius:18px;padding:16px;
  text-align:center;color:var(--ink);justify-self:end;
}
.qr{
  width:160px;height:160px;margin:0 auto;display:block;
  border-radius:10px;background:#fff;
}
.qr-card .qr-label{font-size:13px;font-weight:700;margin-top:10px}
.qr--lg{width:180px;height:180px}
.qr-pair{display:flex;gap:16px;justify-self:end;flex-wrap:wrap}
.qr-card .qr-note{font-size:12px;color:var(--muted);margin-top:2px}
.qr-card .qr-note--warn{color:var(--orange);font-weight:700}
.contact-grid{grid-template-columns:1fr 1fr 1fr;max-width:none}

/* ---------- 页脚 ---------- */
.site-foot{margin-top:80px;border-top:var(--rule)}
.foot-inner{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding-block:40px;font-size:13px;color:var(--muted);
}

/* ============================================================
   首页（画板 1a · 纸上工作台）
   ============================================================ */
.hero{
  display:grid;grid-template-columns:1.05fr .95fr;gap:48px;
  padding-block:72px 56px;align-items:center;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:500;color:var(--muted);
  border:1.5px solid var(--muted);border-radius:999px;
  padding:5px 12px;margin-bottom:28px;
}
.hero-badge::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--blue);
}
.hero h1{
  font-size:clamp(36px,5.2vw,62px);line-height:1.18;
  letter-spacing:-.01em;margin-bottom:28px;
}
.hero p:not(.hero-badge){font-size:18px;line-height:1.85;margin-bottom:36px;max-width:480px;color:var(--body)}
.hero .portrait{justify-self:end}
.hero .portrait img{width:440px;height:440px}

/* 栏目卡（首页四列） */
.column-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.column-card{
  display:block;background:var(--white);border:var(--rule);
  border-radius:18px;padding:22px 18px;color:var(--ink);
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.column-card:hover{color:var(--ink)}
.column-card img{
  width:72px;height:88px;object-fit:contain;
  margin-bottom:18px;
}
.column-card h3{font-family:var(--sans);font-size:18px;font-weight:700;margin-bottom:8px}
.column-card p{font-size:14px;line-height:1.7;color:var(--body)}

/* 书籍两列 */
.book-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.book-row{display:flex;gap:28px;border:var(--rule);border-radius:18px;padding:28px;background:var(--white)}
.book-row--wip{border:2px dashed var(--muted);background:transparent}
.book-row h3{font-family:var(--sans);font-size:22px;font-weight:700;margin:12px 0 10px}
.book-row p:not(.badge){font-size:14px;line-height:1.75;color:var(--body);margin-bottom:16px}
.book-row p.book-meta{font-size:13px;color:var(--muted);margin:-4px 0 10px}
.book-row .more{font-weight:700;font-size:14px}

/* ============================================================
   关于我（画板 2a）
   ============================================================ */
.about-top{
  display:grid;grid-template-columns:380px 1fr;gap:64px;
  padding-top:72px;align-items:start;
}
.about-top .portrait img{width:380px;height:560px;object-position:top}  /* 与 2a 画板一致：顶部对齐，底部自然裁掉 */
.about-top h1{font-size:clamp(32px,4.6vw,44px);line-height:1.25;margin-bottom:28px}
.about-top p:not(.eyebrow){font-size:17px;line-height:1.9;color:var(--body);margin-bottom:18px}
.about-top .tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:36px}

.partner{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-top:80px}
.partner h2{font-size:clamp(26px,3.4vw,36px);margin-bottom:20px}
.partner p:not(.eyebrow){font-size:16px;line-height:1.85;color:var(--body);margin-bottom:16px}

.mood-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.mood{background:var(--white);border:var(--rule);border-radius:16px;padding:14px;text-align:center}
.mood img{width:100%;aspect-ratio:34/42;object-fit:cover;border-radius:10px;margin-bottom:10px;background:var(--paper-deep)}
.mood .n{font-size:14px;font-weight:700}
.mood .d{font-size:12px;color:var(--muted)}

.split-roles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:80px}
.role{border:var(--rule);border-radius:18px;padding:32px;background:var(--white)}
.role-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.role-head img{
  width:44px;height:44px;border-radius:50%;border:var(--rule);
  object-fit:cover;object-position:top;background:var(--paper-deep);
}
.role-head h3{font-family:var(--sans);font-size:20px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{
  background:var(--paper);border:1.5px solid var(--ink);
  border-radius:8px;padding:6px 12px;font-size:14px;
}
.chips--ai span{background:var(--cyan-soft)}

/* 数字条 */
.stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;
  border-top:var(--rule);border-bottom:var(--rule);
}
.stats > div{padding:26px 20px;border-right:var(--rule);text-align:center}
.stats > div:last-child{border-right:0}
.stats dt,.stats b{display:block;font-family:var(--serif);font-size:32px;font-weight:700;line-height:1.1;color:var(--blue)}
.stats dd,.stats > div > span{display:block;margin:8px 0 0;font-size:13px;color:var(--muted)}

.stats--link{display:grid;color:var(--ink);transition:background .15s ease}
.stats--link:hover{color:var(--ink)}
.stats-more b{color:var(--ink);transition:color .15s ease,transform .25s var(--ease-out)}
.stats b,.stats dt{font-variant-numeric:tabular-nums}   /* 数字滚动时宽度不抖 */

/* 首页合作版块 */
.coop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.coop-card{
  display:block;background:var(--white);border:var(--rule);border-radius:20px;padding:28px;color:var(--ink);
  transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out);
}
.coop-card:hover{color:var(--ink)}
.coop-card .n{
  width:40px;height:40px;border-radius:50%;border:var(--rule);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;margin-bottom:18px;
}
.coop-card h3{font-family:var(--sans);font-size:20px;font-weight:700;margin-bottom:8px}
.coop-card p:not(.n){font-size:14px;line-height:1.7;color:var(--body)}
.coop-card .exp{margin-top:12px;font-size:13px;font-weight:700;color:var(--blue)}
.coop-more{margin-top:28px}

/* 做过的事 */
.section-title{font-size:clamp(26px,3.2vw,34px);margin-bottom:28px}
.done-list{display:flex;flex-direction:column}
.done-list li{
  display:grid;grid-template-columns:96px 1fr;gap:24px;align-items:start;
  padding:22px 0;border-bottom:1.5px solid var(--line);
}
.done-list li:first-child{border-top:var(--rule)}
.done-list li:last-child{border-bottom:var(--rule)}
.done-k{
  display:inline-block;justify-self:start;
  font-size:13px;font-weight:700;color:var(--paper);background:var(--ink);
  border-radius:6px;padding:4px 10px;margin-top:2px;
}
.done-list strong{display:block;font-size:18px;font-weight:700;margin-bottom:6px}
.done-list p{font-size:14px;line-height:1.75;color:var(--body)}
.done-list p a{font-weight:700;margin-left:6px}

/* 星点小版块（关于我页底部） */
.xd-note-box{
  display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center;
  background:var(--white);border:var(--rule);border-radius:22px;padding:32px 40px;
}
.xd-note-box h2{font-size:22px;margin-bottom:10px}
.xd-note-box p:not(.eyebrow){font-size:14px;line-height:1.8;color:var(--body);max-width:560px}
.xd-note-box .eyebrow{margin-bottom:10px}
.xd-moods{display:flex;gap:22px}
.xd-moods li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.xd-moods img{width:56px;height:70px;object-fit:contain}
.xd-moods span{font-size:13px;font-weight:700;line-height:1.3}
.xd-moods small{display:block;font-size:11px;font-weight:400;color:var(--muted)}

/* ============================================================
   内容栏目（画板 2b）
   ============================================================ */
.columns-intro{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;
  padding-top:72px;padding-bottom:40px;border-bottom:var(--rule);
}
/* 注意：.columns-intro 必须是 .wrap 的子元素，
   直接挂在 .wrap 上会让下边框连同左右留白一起铺满，比正文宽出两倍 padding。 */

.column-block{
  display:grid;grid-template-columns:300px 1fr;gap:40px;
  border:var(--rule);border-radius:22px;padding:36px;background:var(--white);
}
.column-block + .column-block{margin-top:20px}
.column-block img{
  width:84px;height:104px;object-fit:contain;
  margin-bottom:20px;
}
.column-block h2{font-family:var(--sans);font-size:26px;font-weight:700;margin-bottom:10px}
.column-block p{font-size:14px;line-height:1.75;color:var(--body);margin-bottom:14px}
.column-block .meta{font-size:13px;color:var(--muted)}

.post-list{display:flex;flex-direction:column}
.post-list li{
  display:flex;justify-content:space-between;gap:24px;
  padding:16px 0;border-bottom:1.5px solid var(--line);
}
.post-list a{font-size:16px;font-weight:500;color:var(--ink)}
.post-list a:hover{color:var(--blue)}
.post-list .state{font-size:13px;color:var(--muted);flex:none;font-variant-numeric:tabular-nums}
.post-list li:last-child{padding-bottom:0;border-bottom:0}
.post-list-more{font-size:14px;font-weight:700;align-self:flex-start}

.banner{
  background:var(--navy);border-radius:24px;padding:36px 48px;margin-top:64px;
  display:flex;justify-content:space-between;align-items:center;gap:32px;
  flex-wrap:wrap;color:var(--paper);
}
.banner h2{font-size:26px;margin-bottom:6px}
.banner p{font-size:14px;color:var(--navy-text)}

/* ============================================================
   我的书（画板 2c）
   ============================================================ */
.book-hero{
  background:var(--navy);border-radius:24px;padding:56px 64px;margin-top:56px;
  display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:center;color:var(--paper);
}
.book-hero .badge{margin-bottom:16px}
.book-hero h2{font-size:clamp(28px,4vw,38px);margin-bottom:16px}
.book-hero p:not(.badge){font-size:16px;line-height:1.85;color:var(--navy-text);max-width:560px;margin-bottom:28px}
.book-hero p.book-meta{font-size:14px;color:var(--cyan);font-weight:500;margin:-6px 0 18px}
.learn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:32px}
.learn{border:1.5px solid var(--muted);border-radius:12px;padding:14px 16px}
.learn dt{font-size:13px;color:var(--cyan);font-weight:700;margin-bottom:4px}
.learn dd{margin:0;font-size:14px}

/* 购买方式：京东 + 微信扫码，两格白卡 */
.buy-box{
  display:grid;grid-template-columns:1fr 1.25fr;
  background:var(--white);border:var(--rule);border-radius:22px;margin-top:24px;overflow:hidden;
}
.buy-option{padding:36px 40px}
.buy-option + .buy-option{border-left:var(--rule)}
.buy-option h2{font-size:26px;margin-bottom:10px}
.buy-option p:not(.eyebrow){font-size:15px;line-height:1.8;color:var(--body);max-width:360px}
.buy-option .btn{margin-top:24px}
.buy-option--wechat{display:flex;align-items:center;justify-content:space-between;gap:32px;background:var(--paper)}
.buy-qr{flex:none;text-align:center}
.buy-qr img{
  width:168px;height:168px;display:block;margin:0 auto;
  background:#fff;border:var(--rule);border-radius:14px;padding:8px;
}
.buy-qr figcaption{font-size:13px;font-weight:700;margin-top:10px}
.book-row .more + .more{margin-left:18px}

.book-wip{
  border:2px dashed var(--muted);border-radius:24px;padding:48px 64px;margin-top:24px;
  display:grid;grid-template-columns:1fr 200px;gap:56px;align-items:center;
}
.book-wip h2{font-size:clamp(24px,3vw,32px);margin:14px 0}
.book-wip p:not(.badge){font-size:16px;line-height:1.85;color:var(--body);max-width:640px;margin-bottom:24px}
.progress-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.progress{
  flex:1;max-width:320px;min-width:180px;height:10px;
  border:1.5px solid var(--ink);border-radius:999px;overflow:hidden;background:var(--white);
}
.progress span{display:block;height:100%;background:var(--orange)}
.progress-row .note{font-size:13px;color:var(--muted)}
.book-wip .cover{justify-self:end}

/* 书的内容介绍 */
.book-intro{
  display:grid;grid-template-columns:380px 1fr;gap:56px;align-items:start;
  margin-top:80px;padding-top:56px;border-top:var(--rule);
}
.book-intro h2{font-size:clamp(26px,3.2vw,34px);line-height:1.3}
.book-intro-body p{font-size:16px;line-height:1.9;color:var(--body);margin-bottom:18px}
.book-intro-body .tag-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}

/* 完整目录 */
.book-toc{margin-top:80px;padding-top:56px;border-top:var(--rule)}
.book-toc-head{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;
  margin-bottom:40px;
}
.book-toc-head h2{font-size:clamp(28px,3.4vw,36px)}

.toc-part + .toc-part{margin-top:40px}
.toc-part-title{
  display:flex;align-items:baseline;gap:14px;
  font-size:22px;font-weight:700;margin-bottom:18px;
}
.toc-part-no{
  font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;
  color:var(--paper);background:var(--ink);border-radius:6px;padding:3px 9px;
}
.toc-chapters{display:grid;grid-template-columns:1fr 1fr;gap:16px}

.toc-chapter{
  background:var(--white);border:var(--rule);border-radius:18px;
  padding:6px 22px 14px;
}
.toc-chapter summary{
  display:flex;align-items:baseline;gap:12px;cursor:pointer;
  padding:14px 0;list-style:none;font-weight:700;font-size:17px;
}
.toc-chapter summary::-webkit-details-marker{display:none}
.toc-chapter summary::before{
  content:"";flex:none;width:8px;height:8px;margin-right:-4px;
  border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:translateY(-3px) rotate(45deg);transition:transform .15s ease;
}
.toc-chapter:not([open]) summary::before{transform:translateY(-1px) rotate(-45deg)}
.toc-ch-no{flex:none;font-size:13px;color:var(--muted);font-weight:700;min-width:52px}
.toc-ch-title{flex:1}
.toc-page{
  flex:none;font-size:13px;font-weight:500;color:var(--muted);
  font-variant-numeric:tabular-nums;min-width:28px;text-align:right;
}

.toc-secs{border-top:1.5px solid var(--line);padding-top:6px}
.toc-sec{
  display:flex;align-items:baseline;gap:12px;
  padding:7px 0;font-size:14px;line-height:1.6;color:var(--body);
}
.toc-sec-no{flex:none;min-width:52px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.toc-sec-title{flex:1}
.toc-sec--drill .toc-sec-title{color:var(--muted);font-style:italic}

.toc-tail{
  display:grid;grid-template-columns:1fr 1fr;gap:0 40px;
  border-top:var(--rule);border-bottom:var(--rule);margin-top:40px;
}
.toc-tail li{
  display:flex;align-items:baseline;gap:12px;
  padding:14px 0;font-size:16px;font-weight:500;border-bottom:1.5px solid var(--line);
}
.toc-tail li:nth-last-child(-n+2){border-bottom:0}

/* ============================================================
   合作（画板 2d）
   ============================================================ */
.intro-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:end;padding-top:72px}

.offer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:56px}
.offer{border:var(--rule);border-radius:20px;padding:32px;background:var(--white)}
.offer .n{
  width:44px;height:44px;border-radius:50%;border:var(--rule);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;margin-bottom:22px;
}
.offer h2{font-family:var(--sans);font-size:22px;font-weight:700;margin-bottom:10px}
.offer p{font-size:14px;line-height:1.75;color:var(--body);margin-bottom:18px}
.offer .exp{
  font-size:13px;line-height:1.7;color:var(--body);
  background:var(--paper);border-radius:10px;padding:10px 12px;margin-bottom:16px;
}
.offer .exp span{
  display:inline-block;font-size:11px;font-weight:700;color:var(--blue);
  border:1.5px solid var(--blue);border-radius:5px;padding:0 6px;margin-right:8px;vertical-align:1px;
}
.offer .fit{font-size:13px;color:var(--muted)}
.n--cyan{background:var(--cyan)}
.n--orange{background:var(--orange);color:#fff}
.n--green{background:var(--green);color:#fff}

.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;font-size:15px;max-width:520px}
.contact-grid dl{border:1.5px solid var(--muted);border-radius:12px;padding:16px 18px}
.contact-grid dt{color:var(--cyan);font-weight:700;font-size:13px;margin-bottom:6px}
.contact-grid dd{margin:0}
.contact-grid a{color:var(--paper)}
.contact-grid a:hover{color:var(--cyan)}

/* ============================================================
   文章列表（画板 3a）
   ============================================================ */
.list-head{
  display:flex;justify-content:space-between;align-items:end;gap:40px;
  flex-wrap:wrap;padding-top:64px;
}
.list-head h1{font-size:clamp(32px,4.6vw,44px);line-height:1.25}

.filters{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.filter{
  border:var(--rule);border-radius:999px;padding:7px 16px;
  font-size:14px;font-weight:500;font-family:var(--sans);
  color:var(--ink);cursor:pointer;
  /* 选中时墨色从左往右灌满 */
  background:linear-gradient(var(--ink),var(--ink)) no-repeat left center / 0% 100%;
  background-color:transparent;
  transition:background-size .35s var(--ease-out),background-color .15s ease,color .2s ease;
}
.filter[aria-pressed="true"]{background-size:100% 100%;color:var(--paper)}

.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding-top:40px}
.article{
  background:var(--white);border:var(--rule);border-radius:18px;padding:26px;
  display:flex;flex-direction:column;gap:14px;
}
.article-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.article-cat{font-size:12px;font-weight:700;border:1.5px solid currentColor;border-radius:6px;padding:2px 8px}
.article time{font-size:12px;color:var(--muted)}
.article h2{font-family:var(--sans);font-size:20px;font-weight:700;line-height:1.4}
.article h2 a{color:var(--ink)}
.article h2 a:hover{color:var(--blue)}
.article p{font-size:14px;line-height:1.7;color:var(--body);flex:1}
.article-foot{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding-top:12px;border-top:1.5px solid var(--line);
}
.article-foot .read{font-size:13px;color:var(--muted)}
.article-foot a{font-size:14px;font-weight:700}

/* 分类色（五个栏目） */
.c-work{color:var(--blue)}
.c-image{color:var(--green)}
.c-video{color:var(--orange)}
.c-review{color:var(--muted)}
.c-think{color:var(--navy)}

.article--placeholder{
  border:2px dashed var(--muted);background:transparent;
  align-items:center;justify-content:center;text-align:center;
  gap:10px;color:var(--muted);
}
.article--placeholder img{
  width:56px;height:70px;object-fit:cover;object-position:top;
  border-radius:10px;background:var(--paper-deep);
}
.article--placeholder p{font-size:14px;line-height:1.7;flex:0}

.pager{display:flex;justify-content:center;gap:8px;padding-top:40px;font-size:14px;font-weight:500}
.pager button{
  width:36px;height:36px;border:var(--rule);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:transparent;color:var(--ink);font-family:var(--sans);
  font-size:14px;font-weight:500;cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.pager button[aria-current="true"]{background:var(--ink);color:var(--paper)}
.pager button:disabled{opacity:.35;cursor:not-allowed}

.empty-note{
  padding:48px 0;text-align:center;color:var(--muted);font-size:15px;
}

/* ============================================================
   响应式收敛
   ============================================================ */
@media (max-width:1024px){
  .hero{grid-template-columns:1fr;gap:40px}
  /* 宽度定在外框上，否则外框会被网格撑满，偏移描边框拉得比图还长 */
  .hero .portrait{justify-self:start;width:min(420px,100%)}
  .hero .portrait img{width:100%;height:auto;aspect-ratio:1}
  .column-grid{grid-template-columns:repeat(3,1fr)}
  .book-grid,.split-roles,.partner,.about-top,.columns-intro,.intro-split,.book-wip{grid-template-columns:1fr}
  .xd-note-box{grid-template-columns:1fr;gap:24px}
  .stats{grid-template-columns:repeat(3,1fr);grid-auto-flow:row}
  .stats-more{grid-column:span 2;border-right:0 !important}
  .coop-grid{grid-template-columns:1fr}
  .stats > div:nth-child(3n){border-right:0}
  .stats > div:nth-child(-n+3){border-bottom:var(--rule)}
  .about-top{gap:40px}
  .about-top .portrait{justify-self:start;width:min(380px,100%)}
  .about-top .portrait img{width:100%;height:auto;aspect-ratio:380/560}
  .book-wip .cover{justify-self:start}
  .offer-grid{grid-template-columns:1fr}
  .article-grid{grid-template-columns:repeat(2,1fr)}
  .cta,.book-hero{grid-template-columns:1fr;padding:40px}
  .qr-card,.qr-pair{justify-self:start}
  .column-block{grid-template-columns:1fr;gap:24px}
  .book-hero .cover--l,.book-hero .book-cover--l{justify-self:start}
  .buy-box,.book-intro,.book-toc-head,.toc-chapters{grid-template-columns:1fr}
  .buy-option + .buy-option{border-left:0;border-top:var(--rule)}
  .book-intro{gap:24px}
}

@media (max-width:640px){
  /* 给 ::after 的 -18px 留出位置，否则描边探出视口造成横向滚动 */
  .portrait,.hero .portrait,.about-top .portrait{display:block;width:auto;margin-right:18px}
  .hero .portrait img,.about-top .portrait img{width:100%;height:auto}

  .stats{grid-template-columns:repeat(2,1fr);grid-auto-flow:row}
  .stats-more{grid-column:1/-1}
  .stats > div{padding:20px 12px}
  .stats > div:nth-child(3n){border-right:var(--rule)}
  .stats > div:nth-child(2n){border-right:0}
  .stats > div:nth-child(-n+4){border-bottom:var(--rule)}
  .stats > div:nth-child(3){border-bottom:var(--rule)}
  .stats dt,.stats b{font-size:26px}
  .done-list li{grid-template-columns:1fr;gap:10px}
  .xd-note-box{padding:24px 20px}
  .xd-moods{gap:12px;justify-content:space-between;width:100%}
  .principles{grid-template-columns:1fr}
  .principles > div{padding:24px 0;border-right:0;border-bottom:var(--rule)}
  .principles > div:last-child{border-bottom:0}
  .column-grid,.mood-grid,.article-grid,.learn-grid,.contact-grid{grid-template-columns:1fr}
  .mood-grid{grid-template-columns:repeat(2,1fr)}
  .book-row{flex-direction:column}
  .list-head,.section-head{flex-direction:column;align-items:flex-start}
  .filters{justify-content:flex-start}
  .cta,.book-hero,.banner,.book-wip{padding:32px 24px;border-radius:18px}
  .buy-option{padding:28px 24px}
  .buy-option--wechat{flex-direction:column;align-items:flex-start}
  .buy-qr{align-self:center}
  .toc-tail{grid-template-columns:1fr}
  .toc-tail li:nth-last-child(2){border-bottom:1.5px solid var(--line)}
  .toc-chapter{padding:4px 16px 12px}
  .toc-ch-no,.toc-sec-no{min-width:40px}
  .section{padding-top:56px}
  .foot-inner{flex-direction:column;gap:6px}
}

/* ============================================================
   动效
   原则：像纸片、铅笔、便签，不上毛玻璃和发光；只动 transform / opacity。
   hover 效果只给有鼠标的设备，触屏用按下反馈代替，避免点完“卡”在悬停态。
   入场动画由 site.js 给视口外的元素打 data-reveal，脚本不执行时一切照常可见。
   ============================================================ */

/* ---------- 通用关键帧 ---------- */
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
@keyframes fade-in{from{opacity:0}}
@keyframes draw-x{from{transform:scaleX(0)}}
@keyframes draw-stroke{from{stroke-dashoffset:1}}
@keyframes pop-in{from{opacity:0;transform:scale(.92)}}
@keyframes paper-slide{from{opacity:0;transform:translate(-18px,-18px)}}
@keyframes pulse-ring{
  0%{box-shadow:0 0 0 0 rgba(22,119,255,.45)}
  70%,100%{box-shadow:0 0 0 8px rgba(22,119,255,0)}
}
@keyframes corner-breathe{50%{transform:scale(1.035)}}
@keyframes stripes{to{background-position:16px 0}}
@keyframes read-progress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes deal{from{opacity:0;transform:translateY(14px) scale(.98)}}

/* ---------- 首屏入场（纯 CSS，页面一画出来就开始） ---------- */
.hero > div:first-child > *,
.about-top > div:last-child > *,
.page-intro > *,
.columns-intro > *,
.intro-split > *,
.list-head > *{
  animation:rise .7s var(--ease-out) backwards;
}
.hero > div:first-child > :nth-child(2),
.about-top > div:last-child > :nth-child(2),
.page-intro > :nth-child(2),
.columns-intro > :nth-child(2),
.intro-split > :nth-child(2),
.list-head > :nth-child(2){animation-delay:.08s}
.hero > div:first-child > :nth-child(3),
.about-top > div:last-child > :nth-child(3){animation-delay:.18s}
.hero > div:first-child > :nth-child(4),
.about-top > div:last-child > :nth-child(4){animation-delay:.28s}
.about-top > div:last-child > :nth-child(n+5){animation-delay:.36s}

/* 人像：图先浮现，偏移描边框再从背后滑出来，像两张纸错开叠放 */
.hero .portrait img,.about-top .portrait img{
  animation:pop-in .8s .1s var(--ease-out) backwards;
}
.hero .portrait::after,.about-top .portrait::after{
  animation:paper-slide .7s .45s var(--ease-out) backwards;
}

/* 人像视差：鼠标移动时人像和描边框反向微动（变量由 site.js 写入，只在有鼠标时） */
.portrait img{
  translate:calc(var(--px,0) * -6px) calc(var(--py,0) * -6px);
  transition:translate .5s var(--ease-out);
}
.portrait::after{
  translate:calc(var(--px,0) * 7px) calc(var(--py,0) * 7px);
  transition:translate .5s var(--ease-out);
}

/* 首页标题：手绘马克笔下划线，标题落定后画出来 */
.scribble{position:relative;white-space:nowrap}
.scribble svg{
  position:absolute;left:-4%;bottom:-.1em;z-index:-1;
  width:108%;height:auto;overflow:visible;pointer-events:none;
}
.scribble path{
  fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:0;
  animation:draw-stroke .8s .75s var(--ease-out) backwards;
}
.scribble--cyan path{stroke:var(--cyan);stroke-width:7;animation-delay:1s}
.hero h1{position:relative;z-index:0}   /* 让下划线的 z-index:-1 留在标题层内，不钻到纸底下 */

/* 首屏徽章的蓝点：慢速呼吸 */
.hero-badge::before{animation:pulse-ring 2.4s 1.2s ease-out infinite}

/* ---------- 滚动入场 ---------- */
[data-reveal]{
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out);
}
[data-reveal]:not(.is-in){opacity:0;transform:translateY(28px);transition:none}   /* 藏起来要瞬间，出来才走动画 */
[data-reveal="pop"]{transition-timing-function:ease,var(--ease-spring)}
[data-reveal="pop"]:not(.is-in){transform:translateY(6px) scale(.88)}
@media (max-width:640px){
  [data-reveal]:not(.is-in){transform:translateY(18px)}   /* 小屏位移短一点，读起来不晃 */
}

/* “做过的事”：每一条滑进来时，左侧标签从浅灰变成墨色，像逐条打勾 */
.done-k{transition:background-color .5s .25s ease,color .5s .25s ease}
.done-list li[data-reveal]:not(.is-in) .done-k{background:var(--line);color:var(--muted)}

/* 写作进度条：进入视口时从 0 长到目标值，斜纹一直流动表示“还在写” */
.progress span{
  transform-origin:left;transition:transform 1.4s .35s var(--ease-out);
  background-image:linear-gradient(-45deg,rgba(255,255,255,.35) 25%,transparent 25% 50%,rgba(255,255,255,.35) 50% 75%,transparent 75%);
  background-size:16px 16px;
  animation:stripes 1s linear infinite;
}
.book-wip[data-reveal]:not(.is-in) .progress span{transform:scaleX(0)}

/* ---------- 星点的小动作：每种表情一套，悬停时和第一次滑进视口时各做一次 ---------- */
@keyframes xd-hop{   /* 微笑：蹦一下，落地压扁 */
  0%,100%{transform:none}
  30%{transform:translateY(-10px) scale(1.02,.98)}
  55%{transform:scale(1.05,.93)}
  75%{transform:translateY(-3px)}
}
@keyframes xd-tilt{  /* 专注：歪头想一想 */
  0%,100%{transform:none}
  30%{transform:rotate(-7deg)}
  65%{transform:rotate(4deg)}
}
@keyframes xd-shake{ /* 惊讶：一惊，抖两下 */
  0%,100%{transform:none}
  15%{transform:translateY(-7px)}
  30%{transform:translate(-3px,-7px)}
  45%{transform:translate(3px,-4px)}
  60%{transform:translate(-2px,-2px)}
  75%{transform:translate(2px,0)}
}
@keyframes xd-scan{  /* 审视：左右打量 */
  0%,100%{transform:none}
  25%{transform:translateX(-4px) rotate(-3deg)}
  60%{transform:translateX(4px) rotate(3deg)}
}
@keyframes xd-wobble{ /* 翻车：晃悠几下才站稳 */
  0%,100%{transform:none}
  20%{transform:rotate(-9deg)}
  40%{transform:rotate(7deg)}
  60%{transform:rotate(-5deg)}
  80%{transform:rotate(3deg)}
}
img[src*="xd-smile"]{--xd:xd-hop}
img[src*="xd-focus"]{--xd:xd-tilt}
img[src*="xd-surprise"]{--xd:xd-shake}
img[src*="xd-front"]{--xd:xd-scan}
img[src*="xd-fail"]{--xd:xd-wobble}
img[src*="/xd-"]{transform-origin:50% 100%}
img.xd-play{animation:var(--xd) .9s .3s var(--ease-out)}

/* ---------- 书封 3D 倾斜（变量由 site.js 按鼠标位置写入） ---------- */
.book-cover,.book-hero .cover,.book-row .cover,.book-wip .cover{
  transform:perspective(900px) rotateY(calc(var(--tx,0) * 12deg)) rotateX(calc(var(--ty,0) * -10deg));
  transition:transform .6s var(--ease-out),filter .6s var(--ease-out);
}
.book-cover--s{filter:drop-shadow(calc(var(--tx,0) * -6px) calc(8px + var(--ty,0) * -4px) 12px rgba(39,49,58,.22))}
.book-cover--l{filter:drop-shadow(calc(var(--tx,0) * -14px) calc(18px + var(--ty,0) * -8px) 28px rgba(0,0,0,.45))}
.is-tilting{transition-duration:.12s !important}
/* 书页大封面：滑进视口时从微斜的角度立起来 */
.book-hero .book-cover--l{transition:transform .6s var(--ease-out),filter .6s var(--ease-out),translate .9s var(--ease-out),rotate .9s var(--ease-spring)}
.book-hero[data-reveal]:not(.is-in) .book-cover--l{translate:0 24px;rotate:-6deg}

/* ---------- 二维码：四角扫码框轻轻呼吸，提示“扫这里” ---------- */
.qr-card,.buy-qr{position:relative}
.qr-card::before,.buy-qr::before{
  --c:var(--cyan);--l:18px;--w:2.5px;
  content:"";position:absolute;inset:-8px;pointer-events:none;border-radius:4px;
  background:
    linear-gradient(var(--c) 0 0) top left / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) top left / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) top right / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) top right / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) bottom left / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) bottom left / var(--w) var(--l),
    linear-gradient(var(--c) 0 0) bottom right / var(--l) var(--w),
    linear-gradient(var(--c) 0 0) bottom right / var(--w) var(--l);
  background-repeat:no-repeat;
  animation:corner-breathe 2.8s ease-in-out infinite;
}
.buy-qr::before{--c:var(--blue);bottom:auto;height:184px}   /* 只框住二维码图，不含下面的说明文字 */
.qr-card{transition:rotate .35s var(--ease-spring)}

/* ---------- 目录：展开收起有高度过渡（支持的浏览器才有，其他瞬开瞬合） ---------- */
@supports selector(::details-content){
  .toc-chapter{interpolate-size:allow-keywords}
  .toc-chapter::details-content{
    block-size:0;overflow:hidden;opacity:0;
    transition:block-size .35s var(--ease-out),opacity .25s ease,content-visibility .35s allow-discrete;
  }
  .toc-chapter[open]::details-content{block-size:auto;opacity:1}
}

/* ---------- 编号圆圈：悬停转一圈 ---------- */
.coop-card .n,.offer .n{transition:transform .6s var(--ease-spring)}

/* ---------- 内容栏目：文章行左侧的蓝色标记 ---------- */
.post-list li{position:relative}
.post-list li::before{
  content:"";position:absolute;left:-16px;top:18px;bottom:18px;width:3px;border-radius:2px;
  background:var(--blue);transform:scaleY(0);transition:transform .25s var(--ease-out);
}
.post-list li:last-child::before{bottom:2px}
.post-list li > a:first-child{transition:color .15s ease,transform .25s var(--ease-out)}
.post-list li:has(.post-list-more)::before{display:none}

/* ---------- 文章列表：翻页、筛选时卡片依次发出来 ---------- */
.article.is-dealt{animation:deal .45s var(--ease-out) backwards;animation-delay:calc(var(--i,0) * 45ms)}
.article-grid{scroll-margin-top:96px}

/* ---------- 回到顶部：星点 ---------- */
.to-top{
  position:fixed;z-index:40;
  right:max(16px,env(safe-area-inset-right));
  bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));
  width:52px;height:52px;padding:0;
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  background:var(--white);border:var(--rule);border-radius:50%;
  box-shadow:3px 4px 0 var(--ink);cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.85);
  transition:opacity .25s ease,transform .35s var(--ease-spring),visibility 0s .35s,box-shadow .2s ease;
}
.to-top.is-shown{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.to-top img{width:34px;height:auto;margin-bottom:-4px}
.to-top:active{transform:translateY(2px);box-shadow:1px 2px 0 var(--ink)}

/* ---------- 阅读进度：页头底边一条细蓝线，纯 CSS 滚动驱动 ---------- */
@supports (animation-timeline:scroll()){
  .site-head::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;
    background:var(--blue);transform-origin:left;transform:scaleX(0);
    animation:read-progress linear both;animation-timeline:scroll(root);
  }
}

/* ---------- 只给有鼠标的设备：悬停效果 ---------- */
@media (hover:hover) and (pointer:fine){
  /* 能点进去的卡片：浮起 + 墨色硬阴影 */
  .column-card:hover,.coop-card:hover,
  .article:not(.article--placeholder):hover,
  .book-row:not(.book-row--wip):hover{
    transform:translateY(-3px);box-shadow:6px 8px 0 var(--ink);
  }
  .article,.book-row{transition:transform .2s var(--ease-out),box-shadow .2s var(--ease-out)}

  /* 纯展示的卡片：只落一层浅阴影，不浮起，免得让人以为能点 */
  .offer,.role,.mood,.toc-chapter,.book-row--wip{transition:box-shadow .2s var(--ease-out)}
  .offer:hover,.role:hover,.mood:hover,.toc-chapter:hover{box-shadow:5px 6px 0 var(--paper-deep)}

  .stats--link:hover{background:var(--white)}
  .stats--link:hover .stats-more b{color:var(--blue);transform:translateX(4px)}

  .column-card:hover img,.column-block:hover img,.mood:hover img,
  .xd-moods li:hover img,.to-top:hover img{animation:var(--xd) .9s var(--ease-out)}

  .coop-card:hover .n,.offer:hover .n{transform:rotate(360deg)}
  .qr-card:hover{rotate:-2deg}
  .buy-qr img{transition:rotate .35s var(--ease-spring)}
  .buy-qr:hover img{rotate:-2deg}

  .post-list li:hover::before{transform:scaleY(1)}
  .post-list li:hover > a:first-child{transform:translateX(4px)}

  .filter:hover{background-color:var(--paper-deep)}
  .pager button:hover:not(:disabled):not([aria-current="true"]){background:var(--paper-deep)}

  .to-top:hover{box-shadow:4px 6px 0 var(--ink);transform:translateY(-2px)}
}

/* ---------- 触屏：按下反馈 ---------- */
@media (hover:none){
  .column-card,.coop-card,.stats--link,.filter,.pager button{-webkit-tap-highlight-color:transparent}
  .column-card:active,.coop-card:active{transform:scale(.98);box-shadow:3px 4px 0 var(--ink)}
  .stats--link:active{background:var(--white)}
  .filter:active,.pager button:active{transform:scale(.95)}
  .filter,.pager button{transition-property:background-size,background-color,color,transform;transition-duration:.35s,.15s,.2s,.12s}
}

/* ---------- 移动端体验 ---------- */
@media (max-width:640px){
  .head-inner{padding-block:12px}
  .brand{font-size:20px}

  /* 栏目卡改成“图左字右”，五张卡不用刷五屏 */
  .column-card{
    display:grid;grid-template-columns:60px 1fr;column-gap:16px;align-items:center;
    padding:18px;
  }
  .column-card img{grid-row:span 2;width:60px;height:74px;margin:0}
  .column-card h3{margin-bottom:2px;align-self:end}
  .column-card p{align-self:start}

  /* 筛选按钮改成一行横滑，右边淡出提示还能滑 */
  .list-head .filters{
    width:calc(100% + var(--pad) * 2);flex-wrap:nowrap;overflow-x:auto;
    margin-inline:calc(var(--pad) * -1);padding:2px var(--pad) 6px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    scroll-padding-inline:var(--pad);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);
  }
  .list-head .filters::-webkit-scrollbar{display:none}
  .filter{flex:none;padding:10px 16px}      /* 触控目标不小于 44px */
  .pager{gap:6px;flex-wrap:wrap}
  .pager button{width:44px;height:44px}

  /* 栏目页文章行：标题在上、日期在下，长标题不再被挤成窄条 */
  .post-list li{flex-direction:column;gap:4px}
  .post-list li::before{left:-12px;top:16px;bottom:16px}

  .to-top{width:48px;height:48px}
  .to-top img{width:30px}
}

/* ---------- 跨页切换：一行开启，页头不动，正文淡入 ---------- */
@view-transition{navigation:auto}
::view-transition-old(root){animation:.16s ease-in both vt-out}
::view-transition-new(root){animation:.34s var(--ease-out) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}

/* 文章筛选用的是同页过渡：整页不动，只让卡片挪位置 */
.vt-filter::view-transition-old(root),
.vt-filter::view-transition-new(root){animation:none}
.vt-filter::view-transition-group(*){animation-duration:.42s;animation-timing-function:var(--ease-out)}
.vt-filter::view-transition-new(*):only-child{animation:.36s .08s var(--ease-out) both vt-card-in}
.vt-filter::view-transition-old(*):only-child{animation:.2s ease-in both vt-card-out}
@keyframes vt-card-in{from{opacity:0;transform:translateY(12px) scale(.97)}}
@keyframes vt-card-out{to{opacity:0;transform:scale(.97)}}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;animation-iteration-count:1 !important}
  .portrait img,.portrait::after{translate:none}
  .book-cover,.cover{transform:none}
}

/* ---------- 打印 ---------- */
@media print{
  .site-head,.nav-toggle,.filters,.pager,.btn-row,.to-top{display:none}
  body{background:#fff}
  .card,.article,.column-card{break-inside:avoid}
  [data-reveal]{opacity:1 !important;transform:none !important}
}