/* ==========================================================================
   learnnote — 内页组件（与 site.css 配合使用）
   仅包含首页之外的组件：页头、列表、文章正文、侧栏、时间线、404
   ========================================================================== */

/* ---------- 移动端菜单里的搜索框 ---------- */
.mobile-search{position:relative;padding:var(--s4) var(--s6) var(--s2)}
.mobile-search svg{
  position:absolute;left:2.55rem;top:calc(50% + .4rem);transform:translateY(-50%);
  width:16px;height:16px;color:var(--ink-3);pointer-events:none;
}
.mobile-search input{
  width:100%;padding:.7rem .9rem .7rem 2.4rem;
  border:1px solid var(--line-strong);border-radius:var(--r-full);
  background:var(--card);color:var(--ink);font-family:inherit;font-size:.9rem;
  transition:all var(--dur) var(--ease);
}
.mobile-search input::placeholder{color:var(--ink-3)}
.mobile-search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,71,42,.1)}

/* ---------- 内页页头 ---------- */
.page-head{
  padding:clamp(2.2rem,5vw,3.6rem) 0 clamp(2rem,4vw,3rem);
  background:
    radial-gradient(760px 320px at 76% -10%, rgba(168,71,42,.08), transparent 66%),
    radial-gradient(560px 300px at 6% 110%, rgba(47,111,94,.06), transparent 62%);
  border-bottom:1px solid var(--line);
}
.crumbs{
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
  font-size:.78rem;color:var(--ink-3);margin-bottom:var(--s5);
}
.crumbs a{color:var(--ink-3);transition:color var(--dur) var(--ease)}
.crumbs a:hover{color:var(--accent-ink)}
.crumbs .sep{color:var(--line-strong)}
.crumbs .now{color:var(--ink-2)}
.page-head h1{
  font-size:clamp(1.75rem,3.4vw,2.5rem);line-height:1.38;
  letter-spacing:-.018em;font-weight:700;color:var(--ink);
}
.page-head .lead{
  margin-top:.9rem;font-size:.98rem;line-height:1.95;
  color:var(--ink-2);max-width:38em;
}
.page-meta{display:flex;flex-wrap:wrap;gap:var(--s4);margin-top:var(--s5);font-size:.8rem;color:var(--ink-3)}

/* ---------- 大搜索框 ---------- */
.searchbar{position:relative;margin-top:var(--s6);max-width:440px}
.searchbar svg{
  position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--ink-3);pointer-events:none;
}
.searchbar input{
  width:100%;padding:.85rem 1rem .85rem 2.75rem;
  border:1px solid var(--line-strong);border-radius:var(--r-full);
  background:var(--card);color:var(--ink);font-family:inherit;font-size:.95rem;
  transition:all var(--dur) var(--ease);
}
.searchbar input::placeholder{color:var(--ink-3)}
.searchbar input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(168,71,42,.09)}

/* ---------- 主体 + 侧栏 ---------- */
.with-side{
  display:grid;grid-template-columns:minmax(0,1fr) 262px;
  gap:clamp(2rem,4.5vw,4rem);align-items:start;
}
.side{position:sticky;top:92px;display:grid;gap:var(--s5)}
.side-card{
  padding:var(--s5);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.side-card h4{
  font-size:.72rem;letter-spacing:.16em;color:var(--ink-3);
  font-weight:600;margin-bottom:var(--s4);text-transform:uppercase;
}
.side-list{list-style:none;display:grid;gap:.1rem}
.side-list li{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:.42rem .1rem;font-size:.86rem;color:var(--ink-2);
}
.side-list li a{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  flex:1;color:inherit;transition:color var(--dur) var(--ease);
}
.side-list li:hover{color:var(--accent-ink)}
.side-list li b{
  font-family:var(--font-serif);font-weight:400;
  font-size:.78rem;color:var(--ink-3);
}
.side-list li a.on{color:var(--accent-ink);font-weight:600}
.side-list li a.on b{color:var(--accent)}

.tagcloud{display:flex;flex-wrap:wrap;gap:.4rem}
.tagcloud a{
  font-size:.76rem;padding:.28rem .62rem;border-radius:var(--r-full);
  background:var(--paper-2);border:1px solid var(--line);color:var(--ink-2);
  transition:all var(--dur) var(--ease);
}
.tagcloud a:hover{background:var(--accent-soft);border-color:rgba(168,71,42,.35);color:var(--accent-ink)}

.mini-sub{padding:var(--s5);border-radius:var(--r-lg);background:var(--ink);color:#efe7da}
.mini-sub .kicker{font-size:.66rem;letter-spacing:.18em;color:#b9ab96;margin-bottom:.5rem}
.mini-sub h4{color:#fbf6ec;font-size:1rem;line-height:1.5;margin-bottom:.5rem;font-weight:650;letter-spacing:0;text-transform:none}
.mini-sub p{font-size:.8rem;line-height:1.8;color:#b9ab96;margin-bottom:var(--s4)}
.mini-sub a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.82rem;font-weight:600;color:#fbf6ec;
  border-bottom:1px solid rgba(251,246,236,.35);padding-bottom:2px;
}
.mini-sub a:hover{border-color:#fbf6ec}

/* ---------- 归档列表 ---------- */
.year-mark{
  display:flex;align-items:center;gap:var(--s4);
  margin:var(--s8) 0 var(--s1);
  font-family:var(--font-serif);font-size:1.02rem;
  color:var(--ink);letter-spacing:.06em;
}
.year-mark:first-child{margin-top:0}
.year-mark::after{content:"";flex:1;height:1px;background:var(--line)}

.rows{display:grid}
.row{
  display:grid;grid-template-columns:76px minmax(0,1fr) auto;
  gap:var(--s4);align-items:baseline;
  padding:var(--s5) var(--s2) var(--s5) 0;
  border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease),padding var(--dur) var(--ease);
}
.row:hover{background:linear-gradient(90deg,rgba(168,71,42,.05),transparent 72%)}
.row-date{
  font-family:var(--font-serif);font-size:.8rem;
  color:var(--ink-3);letter-spacing:.03em;padding-top:.22rem;
}
.row h3{
  font-size:1rem;font-weight:650;line-height:1.6;
  color:var(--ink);margin-bottom:.28rem;letter-spacing:-.005em;
}
.row:hover h3{color:var(--accent-ink)}
.row p{font-size:.84rem;line-height:1.8;color:var(--ink-3)}
.row-tail{
  display:flex;align-items:center;gap:var(--s3);
  white-space:nowrap;font-size:.76rem;color:var(--ink-3);
}
.row-tail .arrow{transition:transform var(--dur) var(--ease)}
.row:hover .row-tail .arrow{transform:translateX(3px);color:var(--accent)}

/* ---------- 分页 ---------- */
.pager{
  display:flex;justify-content:center;align-items:center;
  gap:.4rem;margin-top:var(--s10);flex-wrap:wrap;
}
.pager a,.pager span{
  min-width:38px;height:38px;padding:0 .75rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--card);color:var(--ink-2);
  font-size:.84rem;transition:all var(--dur) var(--ease);
}
.pager a:hover{border-color:var(--ink-3);color:var(--ink);transform:translateY(-1px)}
.pager .on{background:var(--ink);border-color:var(--ink);color:var(--paper);font-weight:600}
.pager .off{opacity:.4;pointer-events:none}

/* ---------- 文章页 ---------- */
.post-head{padding-bottom:var(--s6);border-bottom:1px solid var(--line);margin-bottom:var(--s8)}
.post-head h1{
  font-size:clamp(1.68rem,3.4vw,2.36rem);line-height:1.42;
  letter-spacing:-.018em;font-weight:700;margin:var(--s4) 0 var(--s5);color:var(--ink);
}
.post-head .lead{font-size:1.02rem;line-height:1.95;color:var(--ink-2)}

.prose{font-size:1.03rem;line-height:2.05;color:var(--ink-2)}
.prose > * + *{margin-top:1.25em}
.prose h2{
  font-size:1.34rem;line-height:1.55;font-weight:700;color:var(--ink);
  margin-top:2.2em;letter-spacing:-.012em;scroll-margin-top:96px;
}
.prose h3{
  font-size:1.08rem;line-height:1.6;font-weight:650;color:var(--ink);
  margin-top:1.8em;scroll-margin-top:96px;
}
.prose strong{color:var(--ink);font-weight:650}
.prose em{font-style:italic}
.prose a{color:var(--accent-ink);box-shadow:inset 0 -1px 0 rgba(168,71,42,.35)}
.prose a:hover{box-shadow:inset 0 -1px 0 var(--accent)}
.prose ul,.prose ol{padding-left:1.35em}
.prose li::marker{color:var(--accent)}
.prose li + li{margin-top:.5em}
.prose blockquote{
  margin:2em 0;padding:1.05em 0 1.05em 1.35em;
  border-left:3px solid var(--accent);
  background:linear-gradient(90deg,var(--accent-soft),transparent 88%);
  font-family:var(--font-serif);font-size:1.1rem;line-height:1.9;color:var(--ink);
}
.prose blockquote p{margin:0}
.prose blockquote cite{
  display:block;margin-top:.55em;font-family:var(--font-sans);
  font-size:.78rem;font-style:normal;color:var(--ink-3);letter-spacing:.04em;
}
.prose code{
  font-family:var(--font-mono);font-size:.87em;
  background:var(--paper-3);color:var(--accent-ink);
  padding:.15em .42em;border-radius:4px;
}
.prose pre{
  background:#241f1a;color:#e9ded0;padding:var(--s5);
  border-radius:var(--r-md);overflow:auto;font-size:.83rem;
  line-height:1.8;border:1px solid #12100d;
}
.prose pre code{background:none;color:inherit;padding:0;font-size:1em}
.prose hr{border:0;height:1px;background:var(--line);margin:2.4em 0}
.prose table{
  width:100%;border-collapse:collapse;font-size:.89rem;
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
}
.prose th,.prose td{
  padding:.62rem .75rem;border-bottom:1px solid var(--line);
  text-align:left;vertical-align:top;line-height:1.75;
}
.prose th{background:var(--paper-2);color:var(--ink);font-weight:650;font-size:.83rem;letter-spacing:.02em}
.prose tr:last-child td{border-bottom:none}

.callout{
  margin:1.8em 0;padding:var(--s5);
  border-radius:var(--r-lg);background:var(--paper-2);
  border:1px solid var(--line);font-size:.9rem;line-height:1.9;
}
.callout b{display:block;color:var(--ink);margin-bottom:.35rem;font-size:.84rem;letter-spacing:.04em}

/* 目录 */
.toc-card{
  position:sticky;top:92px;padding:var(--s5);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
}
.toc-card h4{
  font-size:.7rem;letter-spacing:.16em;color:var(--ink-3);
  font-weight:600;margin-bottom:var(--s3);
}
.toc{list-style:none;display:grid;gap:.05rem;font-size:.84rem}
.toc a{
  display:block;padding:.38rem .2rem .38rem .85rem;
  border-left:2px solid transparent;color:var(--ink-3);
  line-height:1.55;transition:all var(--dur) var(--ease);
}
.toc a:hover{color:var(--ink)}
.toc a.active{color:var(--accent-ink);border-left-color:var(--accent);font-weight:600}

/* 作者块 / 上下篇 */
.author-box{
  display:flex;gap:var(--s4);align-items:flex-start;margin-top:var(--s12);
  padding:var(--s5);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
}
.author-box .avatar{width:44px;height:44px;font-size:1rem;flex-shrink:0}
.author-box h5{font-size:.95rem;font-weight:650;color:var(--ink);margin-bottom:.3rem}
.author-box p{font-size:.84rem;line-height:1.85;color:var(--ink-3)}

.pager-posts{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);margin-top:var(--s4)}
.pager-post{
  padding:var(--s5);background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-lg);
  transition:all var(--dur) var(--ease);
}
.pager-post:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--line-strong)}
.pager-post span{display:block;font-size:.71rem;letter-spacing:.16em;color:var(--ink-3);margin-bottom:.4rem}
.pager-post strong{display:block;font-size:.93rem;line-height:1.6;font-weight:650;color:var(--ink)}
.pager-post:hover strong{color:var(--accent-ink)}
.pager-post.next{text-align:right}

/* ---------- 时间线 ---------- */
.timeline{list-style:none;position:relative;padding-left:1.6rem;display:grid;gap:var(--s6)}
.timeline::before{
  content:"";position:absolute;left:5px;top:.5rem;bottom:.5rem;
  width:1px;background:var(--line);
}
.timeline li{position:relative}
.timeline li::before{
  content:"";position:absolute;left:-1.6rem;top:.5rem;
  width:11px;height:11px;border-radius:50%;
  background:var(--paper);border:2px solid var(--line-strong);
}
.timeline li.now::before{background:var(--accent);border-color:var(--accent)}
.timeline time{
  font-family:var(--font-serif);font-size:.8rem;
  color:var(--accent-ink);letter-spacing:.06em;
}
.timeline h4{font-size:.97rem;font-weight:650;color:var(--ink);margin:.28rem 0 .3rem}
.timeline p{font-size:.86rem;line-height:1.9;color:var(--ink-3)}

/* ---------- 404 ---------- */
.nf{min-height:calc(100vh - 300px);display:grid;place-items:center;text-align:center;padding:var(--s16) var(--s6)}
.nf .code{
  font-family:var(--font-serif);font-size:clamp(4rem,13vw,7rem);
  line-height:1;color:var(--paper-3);letter-spacing:-.04em;
}
.nf h1{font-size:clamp(1.25rem,3vw,1.6rem);margin:var(--s4) 0 var(--s3);color:var(--ink)}
.nf p{font-size:.92rem;line-height:1.9;color:var(--ink-3);max-width:26em;margin:0 auto var(--s6)}
.nf .acts{display:flex;gap:var(--s3);justify-content:center;flex-wrap:wrap}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .with-side{grid-template-columns:1fr}
  .side{position:static;grid-template-columns:1fr 1fr;gap:var(--s4)}
  .toc-card{display:none}
}
@media (max-width:640px){
  .side{grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:.35rem;padding:var(--s4) 0}
  .row-date{padding-top:0;order:-1}
  .row-tail{justify-content:flex-start}
  .pager-posts{grid-template-columns:1fr}
  .pager-post.next{text-align:left}
  .prose{font-size:1rem;line-height:2}
  .prose table{font-size:.8rem}
  .prose th,.prose td{padding:.5rem .55rem}
}