/* ============================================================
   RLIBRARY — BLACK & WHITE COLLAGE READING NOTES
   黑白拼贴 / 超大标题 / 细线网格 / 纸张噪点 / 错位排版
   ============================================================ */
:root{
  --ink:#0a0a0a;
  --paper:#f4f2ee;
  --paper-bright:#ffffff;
  --grid-fine:rgba(10,10,10,.055);
  --grid-bold:rgba(10,10,10,.10);
  --accent-line:#0a0a0a;
  --mono:"Courier New",Consolas,monospace;
  --serif:Georgia,"Times New Roman","Songti SC","SimSun",serif;
  --sans:"Helvetica Neue",Arial,"Arial Black","Microsoft YaHei","SimHei",sans-serif;
  --w-page:min(1060px, calc(100vw - 48px));
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.hubbar{
  position:relative;z-index:20;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  min-height:54px;padding:0 18px;border-bottom:1.5px solid var(--ink);
  background:var(--paper);font:700 10px/1 var(--mono);letter-spacing:.12em;
}
.hubbar a{color:var(--ink);text-decoration:none;}
.hubbar a:first-child{font-family:var(--sans);font-size:19px;font-weight:900;letter-spacing:-.06em;}
.hubbar a:last-child{justify-self:end;border-bottom:1px solid var(--ink);padding-bottom:3px;}
.hubbar a:last-child:hover,.hubbar a:last-child:focus-visible{background:var(--ink);color:var(--paper);outline:4px solid var(--ink);}
@media(max-width:640px){.hubbar{grid-template-columns:1fr auto;padding:0 12px}.hubbar>span{display:none}}
/* 细线网格 + 纸张噪点：铺满视口的固定层 */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, var(--grid-fine) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--grid-fine) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(0deg, var(--grid-bold) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, var(--grid-bold) 0 1px, transparent 1px 120px);
}
body::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
main{position:relative;z-index:1;}

/* ---------- 顶部工具条 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:stretch;gap:0;
  background:var(--ink);color:var(--paper);
  border-bottom:2px solid var(--ink);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
}
.topbar a{color:var(--paper);text-decoration:none;}
.topbar .tb-home{
  display:flex;align-items:center;padding:0 16px;
  background:var(--paper);color:var(--ink);border-right:2px solid var(--ink);
  font-weight:bold;white-space:nowrap;
}
.topbar .tb-title{
  flex:1;display:flex;align-items:center;padding:0 16px;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis;font-weight:bold;
}
.topbar .tb-ctrl{
  display:flex;align-items:center;gap:0;border-left:2px solid var(--paper);
}
.tb-btn{
  appearance:none;background:var(--ink);color:var(--paper);
  border:0;border-left:1px solid rgba(244,242,238,.35);
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  padding:12px 14px;cursor:pointer;white-space:nowrap;
}
.tb-btn:hover{background:var(--paper);color:var(--ink);}
.tb-search input{
  appearance:none;background:var(--paper);color:var(--ink);
  border:0;padding:12px 14px;font-family:var(--mono);font-size:11px;
  letter-spacing:.08em;min-width:150px;width:16vw;max-width:240px;outline:none;
}
/* 进度条 */
.progress{position:fixed;left:0;bottom:0;height:3px;background:var(--ink);z-index:60;width:0;}

/* ---------- TOC 抽屉 ---------- */
.toc{
  position:fixed;top:0;left:0;bottom:0;width:min(340px,86vw);
  background:var(--paper);border-right:2px solid var(--ink);
  z-index:70;transform:translateX(-102%);transition:transform .22s ease;
  display:flex;flex-direction:column;overflow:hidden;
}
.toc.open{transform:translateX(0);}
.toc-head{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px solid var(--ink);padding:10px 14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
}
.toc-head button{background:var(--paper);color:var(--ink);border:1px solid var(--paper);font-family:var(--mono);font-size:11px;padding:4px 10px;cursor:pointer;}
.toc-body{flex:1;overflow-y:auto;padding:10px 0 60px;}
.toc-body a{
  display:flex;gap:10px;align-items:baseline;
  padding:7px 16px;color:var(--ink);text-decoration:none;
  font-size:14px;border-left:3px solid transparent;
}
.toc-body a .no{font-family:var(--mono);font-size:10px;opacity:.6;min-width:2.2em;text-align:right;}
.toc-body a:hover{background:rgba(10,10,10,.07);}
.toc-body a.cur{background:var(--ink);color:var(--paper);border-left-color:var(--ink);}
.toc-mask{position:fixed;inset:0;background:rgba(10,10,10,.4);z-index:65;display:none;}
.toc-mask.show{display:block;}

/* ---------- 页面区块 ---------- */
.pg{
  position:relative;
  width:var(--w-page);margin:0 auto;
  padding:72px 40px 96px;
}
.pg + .pg{border-top:1.4px solid var(--ink);}
.pg-head{
  display:flex;justify-content:space-between;align-items:flex-start;gap:20px;
  margin-bottom:26px;
}
.pg-no{
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;
  padding:4px 10px;border:1.4px solid var(--ink);white-space:nowrap;
  transform:rotate(-1.6deg);
}
.kicker{
  font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  display:flex;align-items:center;gap:10px;margin-bottom:10px;opacity:.85;
}
.kicker::before{content:"";display:inline-block;width:34px;height:9px;background:var(--ink);}
.kicker::after{content:"";flex:1;height:1.2px;background:var(--ink);opacity:.4;}

/* 超大标题（完整显示 + 错位双印） */
.h-title{
  position:relative;display:inline-block;
  font-family:var(--sans);font-weight:900;
  font-size:clamp(46px, 7.2vw, 92px);
  line-height:1.02;letter-spacing:-.015em;
  text-transform:uppercase;
}
.h-title .t-main{position:relative;z-index:1;}
.h-title .t-ghost{
  position:absolute;left:.055em;top:.06em;z-index:0;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1.6px rgba(10,10,10,.30);
}
.h-title.zh{text-transform:none;letter-spacing:.02em;}

/* 页内内容 */
.pg-body{margin-top:8px;}
.pg-body .para{max-width:76ch;}
.pg-body .para + .para{margin-top:14px;}
.pg-body h2{
  font-family:var(--sans);font-weight:900;font-size:22px;
  letter-spacing:.02em;margin:26px 0 12px;display:flex;align-items:center;gap:12px;
}
.pg-body h2::before{content:"";width:18px;height:18px;background:var(--ink);flex:none;}
.pg-body h2.wire::before{background:transparent;border:1.6px solid var(--ink);}

/* 概念卡（折叠） */
details.concept{
  border:1.6px solid var(--ink);margin:14px 0;
  background:var(--paper-bright);
  transform:rotate(-.3deg);
}
details.concept:nth-of-type(even){transform:rotate(.3deg);}
details.concept summary{
  list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:14px;
  padding:14px 18px;font-family:var(--sans);font-weight:900;font-size:19px;
}
details.concept summary::-webkit-details-marker{display:none;}
details.concept summary .plus{
  font-family:var(--mono);font-weight:normal;font-size:13px;
  border:1.4px solid var(--ink);padding:0 7px;flex:none;background:var(--ink);color:var(--paper);
}
details.concept[open] summary .plus{background:var(--paper);color:var(--ink);}
details.concept summary .en{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  opacity:.65;font-weight:normal;margin-left:auto;text-align:right;
}
details.concept .c-body{padding:0 18px 16px;border-top:1px dashed var(--ink);}
details.concept .c-def{padding-top:12px;font-size:15.5px;}
details.concept .c-note{
  margin-top:10px;padding:10px 14px;background:var(--ink);color:var(--paper);
  font-size:14.5px;line-height:1.7;
}
details.concept .c-note b{color:var(--paper);}

/* 引文卡 */
.quote{
  position:relative;border:1.6px solid var(--ink);margin:20px 0;
  padding:26px 28px 20px;background:var(--paper-bright);
}
.quote::before{
  content:"\201C";position:absolute;top:-30px;left:10px;
  font-family:var(--sans);font-weight:900;font-size:96px;line-height:1;
  background:var(--paper);padding:0 10px;
}
.quote.invert{background:var(--ink);color:var(--paper);}
.quote.invert::before{background:var(--paper);color:var(--ink);}
.quote .q{
  font-family:var(--sans);font-weight:700;
  font-size:clamp(22px, 3vw, 30px);line-height:1.5;
}
.quote .src{
  margin-top:12px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;opacity:.7;
}
.quote .note{
  margin-top:12px;font-size:14.5px;border-top:1px dashed currentColor;padding-top:10px;
}
.copy-btn{
  position:absolute;top:10px;right:10px;
  appearance:none;background:var(--paper);color:var(--ink);
  border:1.4px solid var(--ink);font-family:var(--mono);font-size:9.5px;
  letter-spacing:.1em;padding:3px 9px;cursor:pointer;text-transform:uppercase;
}
.quote.invert .copy-btn{background:var(--ink);color:var(--paper);border-color:var(--paper);}

/* 编号要点 */
ul.blist{list-style:none;margin:14px 0;}
ul.blist li{
  display:flex;gap:16px;align-items:flex-start;padding:9px 0;
  border-bottom:1px dashed rgba(10,10,10,.4);
}
ul.blist li:last-child{border-bottom:none;}
ul.blist li .no{
  font-family:var(--mono);font-weight:bold;font-size:12px;
  min-width:2.4em;text-align:right;flex:none;padding-top:3px;
}
ul.blist li .no::after{content:"";display:block;width:100%;height:6px;background:var(--ink);margin-top:3px;}

/* 思考题 / 评注（折叠） */
details.qa{border-left:7px solid var(--ink);background:var(--paper-bright);margin:16px 0;}
details.qa summary{
  list-style:none;cursor:pointer;padding:12px 18px;
  font-family:var(--sans);font-weight:900;font-size:16px;
  display:flex;gap:12px;align-items:baseline;
}
details.qa summary::-webkit-details-marker{display:none;}
details.qa summary::before{content:"Q";font-family:var(--mono);border:1.4px solid var(--ink);padding:0 7px;font-size:11px;}
details.qa .a{padding:2px 18px 16px 58px;font-size:15.5px;}
details.note-strip{border:1.6px solid var(--ink);margin:16px 0;background:var(--ink);color:var(--paper);transform:rotate(.25deg);}
details.note-strip summary{
  list-style:none;cursor:pointer;padding:10px 16px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
}
details.note-strip summary::-webkit-details-marker{display:none;}
details.note-strip .n-body{padding:0 16px 14px;font-size:15px;line-height:1.8;border-top:1px dashed rgba(244,242,238,.5);}

/* 表格 */
.tbl{border-collapse:collapse;width:100%;margin:18px 0;font-size:14.5px;}
.tbl th,.tbl td{border:1.4px solid var(--ink);padding:10px 13px;text-align:left;vertical-align:top;}
.tbl th{background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;}
.tbl tr:nth-child(even) td{background:rgba(10,10,10,.045);}

/* 延伸阅读行 */
.ref-row{
  display:flex;gap:14px;padding:10px 0;border-bottom:1px dashed rgba(10,10,10,.4);
  font-size:15px;
}
.ref-row:last-child{border-bottom:none;}
.ref-row .idx{font-family:var(--mono);font-weight:bold;flex:none;}

/* 装饰 */
.deco-bar{display:flex;gap:0;height:12px;margin:22px 0;border:1.4px solid var(--ink);}
.deco-bar i{flex:1;border-right:1px solid var(--ink);}
.deco-bar i:nth-child(odd){background:var(--ink);}
.deco-bar i:last-child{border-right:none;}
.dots{background-image:radial-gradient(var(--ink) 1.5px,transparent 1.6px);background-size:11px 11px;}
.zebra{background:repeating-linear-gradient(-45deg,var(--ink) 0 9px,var(--paper) 9px 18px);}
.tag{
  display:inline-block;border:1.4px solid var(--ink);padding:2px 12px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  background:var(--paper-bright);
}
.tag.ink{background:var(--ink);color:var(--paper);}

/* 封面页 */
.pg-cover{min-height:82vh;display:flex;flex-direction:column;justify-content:center;}
.cover-super{
  font-family:var(--sans);font-weight:900;text-transform:uppercase;
  font-size:clamp(56px, 9.5vw, 150px);line-height:.98;letter-spacing:-.02em;
}
.cover-super .ln{display:block;position:relative;}
.cover-super .ln.shift1{margin-left:.06em;}
.cover-super .ln.shift2{margin-left:-.05em;}
.cover-super .ln.shift3{margin-left:.09em;}
.cover-super .ln.gh{color:transparent;-webkit-text-stroke:2px var(--ink);}
.cover-super .ln.blk{background:var(--ink);color:var(--paper);display:inline-block;padding:0 .12em;}
.cover-meta{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
}

/* 页脚翻页导航 */
.pg-nav{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:40px;border-top:1.4px solid var(--ink);padding-top:16px;
}
.pg-nav a{
  font-family:var(--sans);font-weight:900;text-decoration:none;color:var(--ink);
  font-size:15px;letter-spacing:.04em;display:flex;gap:10px;align-items:center;
}
.pg-nav a:hover{text-decoration:underline;}
.pg-nav .here{font-family:var(--mono);font-size:11px;letter-spacing:.14em;opacity:.7;}

/* 搜索高亮 */
mark{background:var(--ink);color:var(--paper);padding:0 2px;}
.pg.dimmed{opacity:.12;transition:opacity .15s;}
.searchinfo{
  position:sticky;top:42px;z-index:40;background:var(--ink);color:var(--paper);
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 16px;display:none;
}
.searchinfo.show{display:block;}

/* 站点页脚 */
.sitefoot{
  border-top:2px solid var(--ink);background:var(--ink);color:var(--paper);
  padding:34px 40px 56px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
}
.sitefoot a{color:var(--paper);}

@media (max-width:720px){
  .pg{padding:48px 20px 72px;}
  .topbar .tb-search input{min-width:0;width:90px;}
  .tb-title{display:none;}
  .pg-head{flex-direction:column;gap:10px;}
}
@media print{
  body::before,body::after{display:none;}
  .hubbar,.topbar,.progress,.toc,.toc-mask,.pg-nav,.copy-btn,.searchinfo{display:none !important;}
  .pg{border:0;page-break-after:always;}
  details.concept,details.qa,details.note-strip{break-inside:avoid;}
}