/* 阅读笔记：个人刊物（lijunyu.com.cn）的剪报本。配色、字体、刊头照搬个人刊物；
   目录排成一张报纸版面，单篇是一张剪报（红色印章 + 页边红笔批注），登录页是一份封存的文件。 */
:root{
  --paper:#F2EDE3;--paper2:#EAE3D6;--ink:#171411;--body:#3A332B;--dim:#776E62;--rule:#D1C7B7;--red:#E3402A;--on-accent:#fff;
  --pen:rgba(196,58,36,.82);--seal:rgba(214,52,32,.86);
  --serif:"Songti SC","STSong","Noto Serif SC",serif;
  --sans:"PingFang SC","Helvetica Neue","Noto Sans SC",sans-serif;
  --latin:"Iowan Old Style",Palatino,Georgia,serif;
  --mono:"SF Mono",Menlo,monospace;
  --hand:"Xingkai SC","STXingkai","Kaiti SC","STKaiti","KaiTi",serif;
}
[data-theme="night"]{--paper:#111214;--paper2:#1A1B1E;--ink:#EDEAE3;--body:#C9C5BC;--dim:#8A867E;--rule:#2E2F33;--red:#D4FF3A;--on-accent:#111;
  --pen:rgba(240,150,128,.82);--seal:rgba(244,128,104,.92)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font:16px/1.75 var(--sans);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;overflow-x:clip}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.wrap{max-width:1080px;margin:0 auto;padding:22px 32px 64px}

/* ───── 刊头 ───── */
.strip{display:flex;justify-content:space-between;align-items:center;gap:12px;font:500 12px/1 var(--mono);letter-spacing:.16em;color:var(--dim);padding-bottom:12px}
.plate{border-top:5px solid var(--ink);border-bottom:1px solid var(--ink);padding:16px 0 12px;text-align:center}
.plate h1{font:600 52px/1 var(--latin);letter-spacing:.3em;text-indent:.3em}
.plate .sub{margin-top:12px;font:400 15px/1 var(--serif);letter-spacing:.6em;text-indent:.6em}
.dl{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:3px double var(--ink);padding:9px 0;font:500 13px/1 var(--sans)}
.dl nav{display:flex;gap:6px 20px;align-items:center;flex-wrap:wrap}
.dl a:hover,.dl button:hover{color:var(--red)}
.dl form{display:inline;flex-shrink:0;white-space:nowrap}

/* 深浅切换：太阳 / 月亮，和个人刊物同一个按钮 */
.mode-btn{width:30px;height:30px;padding:0;display:inline-grid;place-items:center;border:1px solid currentColor;transition:color .25s}
.mode-btn svg{width:16px;height:16px;overflow:visible}
.mode-btn .core{transform-origin:12px 12px;transition:transform .5s cubic-bezier(.3,.8,.2,1)}
.mode-btn .bite{transition:transform .5s cubic-bezier(.3,.8,.2,1)}
.mode-btn .rays{transform-origin:12px 12px;transition:transform .5s cubic-bezier(.3,.8,.2,1),opacity .3s}
.mode-btn.moon .core{transform:scale(1.5)}
.mode-btn.moon .bite{transform:translate(-10.5px,4.5px)}
.mode-btn.moon .rays{transform:rotate(-45deg) scale(.4);opacity:0}
.mode-btn:hover{color:var(--red)}
/* 深浅切换的墨水晕开（mode.js）：旧快照不动，新快照按墨迹形状盖上去；播放期间关掉页面自己的颜色过渡，否则晕开处露出半旧的颜色、整页每帧重绘发卡。按钮的日月动画保留 */
html[data-fx],html[data-fx] :not(.mode-btn,.mode-btn *){transition:none!important}
[data-fx]::view-transition-old(root),[data-fx]::view-transition-new(root){animation:none;mix-blend-mode:normal}

.kicker{font:600 12px/1.4 var(--mono);letter-spacing:.2em;color:var(--red)}
.go{display:inline-block;font:600 14px/1 var(--sans);border-bottom:2px solid var(--red);padding-bottom:3px}
.go:hover{color:var(--red)}

/* 评分：五个点，实心是分数 */
.dots{display:inline-flex;gap:3px;vertical-align:1px}
.dots i{width:7px;height:7px;border-radius:50%;border:1px solid var(--ink)}
.dots i.on{background:var(--ink)}
.rate{display:grid;grid-template-columns:auto auto;gap:7px 14px;align-items:center;font:500 12px/1 var(--mono);letter-spacing:.12em;color:var(--dim)}

/* 印章：红色双框、微微歪着，像盖上去的。精读最重，不用看最淡 */
.seal{display:inline-grid;place-items:center;min-width:76px;padding:7px 10px 6px;border:2.5px solid var(--seal);outline:1px solid var(--seal);outline-offset:2px;
  color:var(--seal);font:900 22px/1 var(--serif);letter-spacing:.18em;text-indent:.18em;transform:rotate(-7deg);opacity:.92}
.seal.skim{opacity:.72}.seal.ref{opacity:.55}.seal.skip{opacity:.4;text-decoration:line-through}
.seal.sm{min-width:0;padding:3px 6px 2px;border-width:1.5px;outline-offset:1.5px;font-size:13px;letter-spacing:.1em;text-indent:.1em;transform:rotate(-5deg)}

/* ───── 目录：一栏剪报 ───── */
.issue{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--rule);font:500 12px/1.4 var(--mono);letter-spacing:.14em;color:var(--dim)}
/* 一栏剪报，从新到旧一条接一条：左边日期，中间标题、一句话、出处，右边小印章 */
.list{list-style:none;padding:0;border-bottom:1px solid var(--ink)}
.item{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:0 28px;align-items:start;padding:24px 0;border-bottom:1px solid var(--rule)}
.list li:last-child .item{border-bottom:0}
.item time{padding-top:7px;font:500 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--dim)}
.item h3{font:800 22px/1.4 var(--serif);color:var(--ink);text-wrap:pretty}
.item:hover h3{color:var(--red)}
.item p{margin-top:8px;font:400 15.5px/1.85 var(--serif);color:var(--body)}
.item .by{margin-top:10px;font:500 12px/1.5 var(--mono);letter-spacing:.06em;color:var(--dim)}
.item .seal{margin-top:4px}
.empty{padding:60px 0;text-align:center;font:400 22px/1.6 var(--hand);color:var(--pen)}

/* ───── 单篇：一张剪报 ───── */
/* 单栏，正文收窄到适合阅读的宽度 */
.clip{max-width:760px;margin:0 auto;padding-top:30px}
.clip .main{min-width:0}
.clip .head{position:relative;padding-right:120px}
.clip .head .seal{position:absolute;right:4px;top:6px}
.clip h2{margin-top:12px;font:800 38px/1.28 var(--serif);text-wrap:pretty}
.clip .byline{margin-top:14px;font:400 13px/1.7 var(--sans);color:var(--dim)}
.clip .byline b{font-weight:600;color:var(--ink)}
.clip .rate{margin-top:18px;display:inline-grid;grid-template-columns:repeat(3,auto auto);gap:7px 14px;padding:10px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.deck{margin-top:26px;padding:4px 0 4px 18px;border-left:3px solid var(--red);font:700 21px/1.65 var(--serif)}
/* 批注：编者按下面一行红笔手写的个人短评 */
.remark{margin:18px 0 0 18px;font:400 19px/1.6 var(--hand);color:var(--pen);transform:rotate(-.8deg);transform-origin:left}
.remark b{font-weight:400;color:inherit}
.remark .lab{margin-right:12px;font-size:21px;text-decoration:underline wavy var(--pen);text-decoration-thickness:1px;text-underline-offset:5px}
.sec{font:600 12px/1 var(--mono);letter-spacing:.2em;color:var(--dim);padding-bottom:10px;border-bottom:3px double var(--ink);margin:36px 0 10px}
.body{display:flow-root}
.body p,.body li{font:400 16.5px/1.95 var(--serif);color:var(--body)}
.body p+p{margin-top:.5em}
.body ul{list-style:none}
.body ul li{position:relative;padding-left:1.1em;margin:5px 0}
.body ul li::before{content:"";position:absolute;left:0;top:.85em;width:6px;height:6px;background:var(--red)}
.body b{color:var(--ink);font-weight:700}
.body a{border-bottom:1px solid var(--rule);overflow-wrap:anywhere}
.body a:hover{color:var(--red);border-color:var(--red)}
.body.first>p:first-child::first-letter{float:left;margin:.08em .14em 0 0;font:900 3.3em/.9 var(--serif);color:var(--ink)}
.src{margin-top:36px;padding-top:12px;border-top:1px solid var(--rule);font:400 12px/1.7 var(--sans);color:var(--dim);word-break:break-all}
.src a{border-bottom:1px solid var(--rule)}
.src a:hover{color:var(--red)}

/* ───── 页脚 ───── */
.foot{margin-top:44px;padding-top:12px;border-top:1px solid var(--ink);display:flex;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;font:400 12px/1.6 var(--sans);color:var(--dim)}
.foot a:hover{color:var(--red)}
.foot .beian{display:flex;gap:6px 18px;flex-wrap:wrap}
.foot .badge{width:14px;height:14px;margin-right:4px;vertical-align:-2px}

/* ───── 点缀：都是 codex 生成的实物图，用伪元素挂上去，不占版面 ───── */
/* 目录：“共 N 篇”那条线是剪裁虚线，旧剪刀正沿线剪 */
.issue{position:relative;border-bottom:1.5px dashed var(--dim);padding-left:84px}
.issue::before{content:"";position:absolute;left:-6px;bottom:-24px;width:84px;height:72px;background:url(/scissors.webp) center/contain no-repeat;transform:rotate(-8deg);pointer-events:none}
/* 单篇：胶带骑在刊头双线上，像把剪报贴在本子上；回形针别住印章，文末出处旁夹一片银杏叶 */
.clip .main{position:relative}
.clip .main::before{content:"";position:absolute;left:50%;top:-44px;width:150px;height:32px;margin-left:-75px;background:url(/tape.webp) center/100% 100% no-repeat;transform:rotate(-2deg);opacity:.9;pointer-events:none}
.clip .head::after{content:"";position:absolute;right:62px;top:-18px;width:18px;height:72px;background:url(/clip.webp) center/contain no-repeat;transform:rotate(12deg);pointer-events:none}
.clip .main::after{content:"";position:absolute;right:-18px;bottom:-34px;width:112px;height:94px;background:url(/ginkgo.webp) center/contain no-repeat;transform:rotate(14deg);opacity:.95;pointer-events:none}
.src{padding-right:110px}

@media (max-width:640px){
  .wrap{padding:18px 16px 50px}
  .plate h1{font-size:40px;letter-spacing:.2em;text-indent:.2em}
  .plate .sub{letter-spacing:.4em;text-indent:.4em}
  .clip .head{padding-right:0}
  .clip .head .seal{position:static;margin-bottom:6px}
  .clip h2{font-size:28px}
  .clip .rate{grid-template-columns:auto auto}
  .deck{font-size:18.5px}
  .item{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:20px 0}
  .item time{grid-column:1/-1;padding-top:0}
  .item h3{font-size:19px}
  .issue{padding-left:70px}
  .issue::before{width:68px;height:58px;bottom:-20px}
  .clip .head::after{display:none}
  .clip .main::after{right:-6px;bottom:-30px;width:80px;height:68px}
  .src{padding-right:76px}
  .remark{margin-left:0;font-size:18px}
}