/* ═══════════════════════════════════════════════
   小承 Blog · 独立排版
   焦糖橙 · 无衬线 · 错落 Grid · 手工感特效
   ═══════════════════════════════════════════════ */

/* ═══ DESIGN TOKENS ═══ */
:root {
  /* palette — warm & young */
  --bg:             #faf8f5;
  --bg-alt:         #f3f0ea;
  --surface:        #ffffff;
  --text:           #1a1a1a;
  --text-secondary: #555555;
  --text-tertiary:  #949494;
  --text-muted:     #c2c2c2;
  --border:         #e6e2da;
  --border-light:   #f0ede6;
  --accent:         #d4652a;
  --accent-hover:   #b84d1a;
  --accent-soft:    rgba(212,101,42,0.07);
  --code-bg:        #f5f2ec;
  --code-text:      #d4652a;
  --bq-bg:          #faf7f2;
  --bq-border:      #d4652a;
  --pre-bg:         #1e1e1e;
  --pre-text:       #e0e0e0;
  --green:          #5b8c5a;
  --red:            #d9443a;

  /* typography (16px base) */
  --fs-xs: 0.75rem;       --lh-xs: 1.4;
  --fs-sm: 0.8125rem;     --lh-sm: 1.5;
  --fs-base: 1rem;        --lh-base: 1.65;
  --fs-md: 1.125rem;      --lh-md: 1.55;
  --fs-lg: 1.25rem;       --lh-lg: 1.4;
  --fs-xl: 1.5rem;        --lh-xl: 1.3;
  --fs-2xl: 1.875rem;     --lh-2xl: 1.2;
  --fs-3xl: 2.25rem;      --lh-3xl: 1.15;
  --fs-4xl: 3rem;         --lh-4xl: 1.1;

  /* spacing */
  --s-1: 0.25rem; --s-2: 0.5rem;  --s-3: 0.75rem;
  --s-4: 1rem;    --s-5: 1.25rem;  --s-6: 1.5rem;
  --s-8: 2rem;    --s-10: 2.5rem;  --s-12: 3rem;
  --s-16: 4rem;   --s-20: 5rem;

  /* layout */
  --content-w: 44rem;
  --wide-w: 64rem;
  --nav-h: 3.5rem;

  /* fonts */
  --ff: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --ff-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", Menlo, Courier, monospace;

  /* radius */
  --radius-sm: 4px;
  --radius: 6px;

  /* shadows */
  --shadow: 0 1px 3px rgba(0,0,0,0.05);
  --shadow-offset: 2px 2px 0 rgba(0,0,0,0.06);
  --shadow-offset-hover: 3px 3px 0 rgba(0,0,0,0.09);

  /* transitions */
  --t-fast: 0.12s ease;
  --t-base: 0.18s ease;

  font-family: var(--ff);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

/* ═══ DARK MODE ═══ */
body.dark, html.dark {
  --bg: #171613;
  --bg-alt: #1f1d19;
  --surface: #24221e;
  --text: #e8e6e0;
  --text-secondary: #a09d95;
  --text-tertiary: #63615b;
  --text-muted: #484640;
  --border: #363430;
  --border-light: #2d2b27;
  --accent: #e0783a;
  --accent-hover: #f09050;
  --accent-soft: rgba(212,101,42,0.14);
  --code-bg: #2a2822;
  --code-text: #e08a55;
  --bq-bg: #22201b;
  --pre-bg: #0d0d0a;
  --pre-text: #d0d0cc;
  --shadow: 0 1px 3px rgba(0,0,0,0.25);
  --shadow-offset: 2px 2px 0 rgba(0,0,0,0.2);
  --shadow-offset-hover: 3px 3px 0 rgba(0,0,0,0.3);
}

/* ═══ RESET ═══ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-y:scroll}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--ff);font-size:var(--fs-base);line-height:var(--lh-base);
  -webkit-font-smoothing:antialiased;
  transition:background var(--t-base),color var(--t-base)
}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none;transition:color var(--t-fast)}
a:hover{color:var(--accent-hover)}
::selection{background:var(--accent-soft)}

/* ═══ TYPOGRAPHY ═══ */
h1,h2,h3,h4,h5,h6{font-family:var(--ff);font-weight:700;color:var(--text)}
h1{font-size:var(--fs-3xl);line-height:var(--lh-3xl);letter-spacing:-0.03em}
h2{font-size:var(--fs-2xl);line-height:var(--lh-2xl);letter-spacing:-0.02em}
h3{font-size:var(--fs-xl);line-height:var(--lh-xl)}
h4{font-size:var(--fs-lg);line-height:var(--lh-lg)}
h5{font-size:var(--fs-md);line-height:var(--lh-md)}
h6{font-size:var(--fs-base);line-height:var(--lh-base)}
p{margin-bottom:1rem}

/* ═══ READING PROGRESS ═══ */
.reading-progress{position:fixed;top:0;left:0;z-index:200;height:3px;background:var(--accent);width:0;transition:width .1s linear}

/* ═══════════════════════════════
   NAVIGATION
   ═══════════════════════════════ */
.top{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  height:var(--nav-h);padding:0 var(--s-8);
  background:rgba(250,248,245,.88);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-light);
  transition:background var(--t-base)
}
body{padding-top:var(--nav-h)}
body.dark .top{background:rgba(23,22,19,.88)}

.top__home{font-weight:800;font-size:var(--fs-lg);color:var(--text);text-decoration:none;letter-spacing:-.5px}
.top__home:hover{opacity:.7}
.top__right{display:flex;align-items:center;gap:var(--s-5)}

.top__nav{display:flex;align-items:center;gap:var(--s-8)}
.top__link{font-size:var(--fs-sm);font-weight:550;color:var(--text-secondary);text-decoration:none;padding:4px 0;position:relative;transition:color var(--t-fast);letter-spacing:.2px}
.top__link:hover{color:var(--text)}
/* active — dashed skewed underline */
.top__link.active{color:var(--text);font-weight:600}
.top__link.active::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:2px;
  background:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 3px,transparent 3px,transparent 6px);
  transform:skewX(-12deg)
}

.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;background:none;border:none;z-index:110}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:.25s ease}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:99}
.nav-overlay.show{display:block}

.theme-toggle{
  width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border-light);
  background:var(--surface);cursor:pointer;font-size:14px;
  display:flex;align-items:center;justify-content:center;
  transition:all var(--t-fast);flex-shrink:0
}
.theme-toggle:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ═══════════════════════════════
   PAGE HEADER (blog/archive/etc)
   ═══════════════════════════════ */
.page-header{text-align:center;padding:var(--s-16) var(--s-6) var(--s-10)}
.page-header h1{font-size:var(--fs-3xl);font-weight:700;margin-bottom:var(--s-2)}
.page-header p{font-size:var(--fs-base);color:var(--text-tertiary)}

/* ═══ SECTIONS ═══ */
section{padding:var(--s-16) 0;transition:background var(--t-base)}
section:nth-child(even){background:var(--bg-alt)}
.section-inner{max-width:var(--wide-w);margin:0 auto;padding:0 var(--s-6)}
.section-label{font-size:var(--fs-xs);color:var(--accent);letter-spacing:3px;text-transform:uppercase;margin-bottom:var(--s-2);font-weight:600}
.section-title{font-size:var(--fs-2xl);font-weight:700;margin-bottom:var(--s-12)}

/* ═══════════════════════════════
   HOMEPAGE HERO
   ═══════════════════════════════ */
.home-hero{text-align:center;padding:var(--s-20) var(--s-6) var(--s-12)}
.home-hero__avatar{
  width:96px;height:96px;border-radius:var(--radius);
  overflow:hidden;margin:0 auto var(--s-6);
  border:2px solid var(--border-light);background:var(--bg-alt)
}
.home-hero__avatar img{width:100%;height:100%;object-fit:cover}
.home-hero__title{font-size:var(--fs-3xl);font-weight:800;letter-spacing:-.04em;margin-bottom:var(--s-1)}
.home-hero__sub{font-size:var(--fs-lg);color:var(--text-tertiary);font-weight:500;letter-spacing:3px;margin-bottom:var(--s-4)}
.home-hero__bio{font-size:var(--fs-base);color:var(--text-secondary);max-width:420px;margin:0 auto var(--s-6);line-height:1.7}
.home-hero__links{display:flex;gap:var(--s-2);justify-content:center;align-items:center;font-size:var(--fs-sm)}

/* hero stat cards */
.home-hero__stats{display:flex;gap:var(--s-4);justify-content:center;margin-bottom:var(--s-6);flex-wrap:wrap}
.stat-card{text-align:center;min-width:90px;padding:var(--s-2) var(--s-3);background:var(--bg-alt);border-radius:var(--radius-sm)}
.stat-card__num{display:block;font-size:var(--fs-xl);font-weight:800;color:var(--accent);line-height:1.1}
.stat-card__label{display:block;font-size:var(--fs-xs);color:var(--text-tertiary);margin-top:var(--s-1)}

/* ── hand-drawn link ── */

/* hand-drawn link */
.accent-link{
  color:var(--text-secondary);text-decoration:none;font-size:var(--fs-sm);font-weight:500;
  padding-bottom:2px;
  background-image:repeating-linear-gradient(90deg,var(--accent) 0,var(--accent) 2px,transparent 2px,transparent 5px);
  background-position:0 100%;background-size:0 2px;background-repeat:no-repeat;
  transition:background-size var(--t-fast)
}
.accent-link:hover{background-size:100% 2px;color:var(--text)}
.sep-dash{color:var(--text-muted);margin:0 var(--s-1);user-select:none}

/* ═══════════════════════════════
   HOMEPAGE GRID (asymmetric)
   ═══════════════════════════════ */
.home-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  grid-auto-flow:dense;
  gap:var(--s-5) var(--s-6);
  max-width:var(--wide-w);
  margin:0 auto;
  padding:var(--s-12) var(--s-6) var(--s-20)
}

/* ── rhythm via nth-child ── */
.article-card:nth-child(1){grid-column:span 4}
.article-card:nth-child(2){grid-column:span 2}
.music-card{grid-column:span 6}
.article-card:nth-child(3){grid-column:span 3}
.article-card:nth-child(4){grid-column:span 3}
.article-card:nth-child(5){grid-column:span 2}
.article-card:nth-child(6){grid-column:span 4}
.article-card:nth-child(n+7){grid-column:span 3}

/* ── article card ── */
.article-card{
  background:var(--surface);border:1px solid var(--border-light);
  border-radius:var(--radius);padding:var(--s-5);
  box-shadow:var(--shadow-offset);
  transition:box-shadow var(--t-fast);
  text-decoration:none;color:inherit;display:block;
  position:relative
}
.article-card:hover{box-shadow:var(--shadow-offset-hover)}

/* staggered children delay on hover */
.article-card>*{transition:transform var(--t-fast)}
.article-card:hover>:nth-child(1){transition-delay:0s}
.article-card:hover>:nth-child(2){transition-delay:.03s}
.article-card:hover>:nth-child(3){transition-delay:.06s}
.article-card:hover>:nth-child(4){transition-delay:.09s}

.article-card__cover{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:var(--radius-sm);margin-bottom:var(--s-3);background:var(--bg-alt)}
.article-card__cat{font-size:var(--fs-xs);color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:var(--s-2);display:inline-block}
.article-card__title{font-size:var(--fs-lg);font-weight:700;line-height:1.35;margin-bottom:var(--s-2);color:var(--text)}
.article-card__title a{color:inherit;text-decoration:none}
.article-card__title a:hover{color:var(--accent)}
.article-card__excerpt{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.6;margin-bottom:var(--s-3);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-card__meta{font-size:var(--fs-xs);color:var(--text-tertiary);display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap}
/* "view all" link */
.view-all{grid-column:span 6;text-align:center;padding-top:var(--s-8)}
.view-all a{font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary)}
.view-all a:hover{color:var(--accent)}

/* ═══════════════════════════════
   BLOG LIST (blog.html)
   ═══════════════════════════════ */
.blog-page-layout{
  max-width:var(--wide-w);margin:0 auto;
  padding:0 var(--s-6) var(--s-16);
  display:grid;grid-template-columns:1fr 17.5rem;gap:3.5rem;align-items:start
}
.blog-main{min-width:0}

.search-bar{margin-bottom:var(--s-6)}
.search-bar input{
  width:100%;height:44px;padding:0 var(--s-4);
  border:1.5px solid var(--border);border-radius:var(--radius-sm);
  font-size:var(--fs-sm);font-family:var(--ff);outline:none;
  background:var(--surface);color:var(--text);transition:border-color var(--t-fast)
}
.search-bar input::placeholder{color:var(--text-tertiary)}
.search-bar input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}

.categories{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:var(--s-8)}
.categories a{
  padding:5px 16px;border-radius:var(--radius-sm);
  font-size:var(--fs-xs);font-weight:500;text-decoration:none;
  color:var(--text-secondary);background:var(--bg-alt);border:1px solid transparent;
  transition:all var(--t-fast)
}
.categories a:hover{border-color:var(--border);color:var(--text)}
.categories a.active{background:var(--accent);color:#fff;border-color:var(--accent)}

.blog-list{display:flex;flex-direction:column;gap:var(--s-4)}
.blog-list-item{
  display:block;
  background:var(--surface);border-radius:var(--radius);
  padding:var(--s-5);border:1px solid var(--border-light);
  box-shadow:var(--shadow-offset);transition:box-shadow var(--t-fast);
  text-decoration:none;color:inherit
}
.blog-list-item:hover{box-shadow:var(--shadow-offset-hover)}
.blog-list-item .tag{
  display:inline-block;font-size:var(--fs-xs);color:var(--accent);
  font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  margin-bottom:var(--s-2);padding:3px 10px;
  background:var(--accent-soft);border-radius:var(--radius-sm)
}
.blog-list-item h2{font-size:var(--fs-lg);font-weight:700;line-height:1.35;margin:var(--s-2) 0;color:var(--text)}
.blog-list-item .excerpt{font-size:var(--fs-base);color:var(--text-secondary);line-height:1.65;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;display:-webkit-box}
.blog-list-item .meta{font-size:var(--fs-xs);color:var(--text-tertiary)}

.pagination{display:flex;align-items:center;justify-content:center;gap:var(--s-4);margin-top:var(--s-10)}
.pag-btn{display:inline-block;padding:8px 20px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);font-size:var(--fs-sm);transition:all var(--t-fast);text-decoration:none}
.pag-btn:hover{border-color:var(--accent);color:var(--accent)}
.pag-info{font-size:var(--fs-xs);color:var(--text-tertiary)}

/* sidebar */
.sidebar{position:sticky;top:calc(var(--nav-h) + var(--s-6))}
.sidebar__widget{background:var(--surface);border-radius:var(--radius);border:1px solid var(--border-light);padding:var(--s-4);margin-bottom:var(--s-5)}
.sidebar__title{font-size:var(--fs-sm);font-weight:700;margin-bottom:var(--s-3);color:var(--text)}
.sidebar__search{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-family:var(--ff);outline:none;background:var(--bg);color:var(--text);transition:border-color var(--t-fast)}
.sidebar__search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sidebar__cat-list{list-style:none}
.sidebar__cat-list li{margin-bottom:var(--s-2)}
.sidebar__cat-list a{display:flex;justify-content:space-between;color:var(--text-secondary);font-size:var(--fs-sm);padding:6px 0;border-bottom:1px solid var(--border-light);transition:color var(--t-fast)}
.sidebar__cat-list a:hover{color:var(--accent)}
.sidebar__cat-list span{color:var(--text-tertiary)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:var(--s-1)}
.tag-cloud .tag{padding:4px 10px;border-radius:var(--radius-sm);font-size:var(--fs-xs);color:var(--text-secondary);background:var(--bg-alt);border:1px solid var(--border-light);transition:all var(--t-fast)}
.tag-cloud .tag:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.sidebar__recent{list-style:none}
.sidebar__recent li{margin-bottom:var(--s-2)}
.sidebar__recent a{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.6;display:block;padding:6px 0;border-bottom:1px solid var(--border-light);transition:color var(--t-fast)}
.sidebar__recent a:hover{color:var(--accent)}

/* blog sidebar archive */
.sidebar__archive{list-style:none;padding:0}
.sidebar__archive li{margin-bottom:var(--s-2)}
.sidebar__archive a{display:flex;justify-content:space-between;color:var(--text-secondary);font-size:var(--fs-xs);padding:4px 0;border-bottom:1px solid var(--border-light);transition:color var(--t-fast)}
.sidebar__archive a:hover{color:var(--accent)}
.sidebar__archive span{color:var(--text-tertiary)}

/* ═══════════════════════════════
   POST DETAIL
   ═══════════════════════════════ */
.post-detail{max-width:var(--content-w);margin:0 auto;padding:var(--s-12) var(--s-6) var(--s-16)}
.back-link{display:inline-flex;align-items:center;gap:6px;margin-bottom:var(--s-8);color:var(--text-tertiary);font-size:var(--fs-sm);padding:6px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);transition:all var(--t-fast);text-decoration:none}
.back-link:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.tts-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;font-size:var(--fs-sm);font-family:var(--ff);transition:all var(--t-fast);margin-bottom:var(--s-6);margin-left:var(--s-3)}
.tts-btn:hover{border-color:var(--accent);color:var(--accent)}
.tts-btn.speaking{background:var(--accent);color:#fff;border-color:var(--accent)}
.music-player{padding:12px 18px;border-radius:var(--radius);margin-bottom:var(--s-6);background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow);display:flex;align-items:center}

.post-meta{font-size:var(--fs-sm);color:var(--text-tertiary);margin-bottom:var(--s-6);display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2)}
.post-meta .tag{color:var(--accent);font-weight:600}
.post-detail h1{font-size:var(--fs-3xl);font-weight:700;line-height:1.25;margin-bottom:var(--s-8)}
.post-cover{width:100%;border-radius:var(--radius);margin-bottom:var(--s-8);box-shadow:0 2px 8px rgba(0,0,0,.04)}

/* post content */
.post-content{font-size:var(--fs-md);line-height:1.8;color:var(--text)}
.post-content p{margin-bottom:1.25rem}
.post-content h2{font-size:var(--fs-xl);font-weight:700;margin:2.5rem 0 1rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-light)}
.post-content h3{font-size:var(--fs-lg);font-weight:700;margin:2rem 0 .75rem}
.post-content ul,.post-content ol{margin:.75rem 0 1.5rem 1.5rem}
.post-content li{margin-bottom:.5rem;line-height:1.8;padding-left:.25rem}
.post-content li::marker{color:var(--accent)}
.post-content a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-content a:hover{color:var(--accent-hover)}
.post-content strong{font-weight:600}
.post-content blockquote{border-left:3px solid var(--bq-border);padding:var(--s-4) var(--s-5);margin:var(--s-8) 0;background:var(--bq-bg);border-radius:0 var(--radius) var(--radius) 0;font-style:italic;color:var(--text-secondary)}
.post-content blockquote p:last-child{margin-bottom:0}
.post-content :not(pre)>code{background:var(--code-bg);color:var(--code-text);padding:2px 8px;border-radius:var(--radius-sm);font-family:var(--ff-mono);font-size:.9em}
.post-content pre{background:var(--pre-bg);color:var(--pre-text);padding:var(--s-5);border-radius:var(--radius);overflow-x:auto;margin:var(--s-8) 0;font-size:.875rem;line-height:1.7;position:relative}
.post-content pre code{background:none;padding:0;color:inherit;font-size:inherit;font-family:var(--ff-mono)}
.post-content img{border-radius:var(--radius);margin:var(--s-8) auto;display:block;cursor:zoom-in}
.post-content hr{border:none;border-top:1px dashed var(--border);margin:var(--s-10) 0}

.copy-btn{position:absolute;top:12px;right:12px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.1);border-radius:var(--radius-sm);padding:4px 14px;font-size:var(--fs-xs);font-family:var(--ff);cursor:pointer;transition:all var(--t-fast)}
.copy-btn:hover{background:rgba(255,255,255,.15);color:#fff}
.post-tag{display:inline-block;padding:3px 10px;border-radius:var(--radius-sm);font-size:var(--fs-xs);color:var(--text-secondary);background:var(--bg-alt);border:1px solid var(--border);cursor:pointer;transition:all var(--t-fast);font-family:var(--ff);margin:0 2px}
.post-tag:hover{background:var(--accent);color:#fff;border-color:var(--accent)}

.toc{background:var(--bg-alt);border-radius:var(--radius);padding:var(--s-4);margin-bottom:var(--s-8);border:1px solid var(--border)}
.toc-title{font-size:var(--fs-sm);font-weight:600;color:var(--text-secondary);margin-bottom:var(--s-3);letter-spacing:1px;text-transform:uppercase}
.toc-list{list-style:none}
.toc-list li{margin-bottom:8px}
.toc-list li.toc-h3{padding-left:20px}
.toc-list li a{color:var(--text-secondary);text-decoration:none;font-size:var(--fs-sm);transition:color var(--t-fast)}
.toc-list li a:hover{color:var(--accent)}

.post-footer{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-4);margin-top:var(--s-12);padding-top:var(--s-8);border-top:1px solid var(--border-light)}
.post-footer a{color:var(--text-secondary);font-size:var(--fs-sm)}
.post-footer a:hover{color:var(--accent)}
.share-btns{display:flex;gap:8px}
.share-btn{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;text-decoration:none;color:var(--text-secondary);transition:all var(--t-fast)}
.share-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}

.related-posts{margin-top:var(--s-16);padding-top:var(--s-8);border-top:1px solid var(--border-light)}
.related-posts h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--s-6)}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.related-card{background:var(--surface);border-radius:var(--radius);padding:var(--s-4);border:1px solid var(--border);transition:all var(--t-fast)}
.related-card:hover{box-shadow:var(--shadow-offset)}
.related-card .r-cat{font-size:var(--fs-xs);color:var(--accent);font-weight:600}
.related-card h4{font-size:var(--fs-sm);font-weight:500;margin:8px 0;line-height:1.5}
.related-card h4 a{color:var(--text)}
.related-card h4 a:hover{color:var(--accent)}
.related-card .r-date{font-size:var(--fs-xs);color:var(--text-tertiary)}

/* comments */
.comments-section{margin-top:var(--s-16);padding-top:var(--s-8);border-top:1px solid var(--border-light)}
.comments-section h3{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--s-6)}
.comment-form{display:flex;flex-direction:column;gap:var(--s-3);margin-bottom:var(--s-8)}
.comment-form input,.comment-form textarea{padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-family:var(--ff);outline:none;background:var(--surface);color:var(--text);transition:border-color var(--t-fast);resize:vertical}
.comment-form input:focus,.comment-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.comment-form textarea{min-height:80px}
.comment-form .cf-bottom{display:flex;align-items:center;gap:var(--s-3)}
.comment-form .cf-bottom .btn{padding:9px 24px;border-radius:var(--radius-sm);border:none;background:var(--accent);color:#fff;font-size:var(--fs-sm);font-weight:600;font-family:var(--ff);cursor:pointer;transition:all var(--t-fast)}
.comment-form .cf-bottom .btn:hover{background:var(--accent-hover)}
.comment-form .cf-bottom .btn:disabled{opacity:.5;cursor:not-allowed}
.cf-msg{font-size:var(--fs-xs)}
.cf-msg.success{color:var(--green)}
.cf-msg.error{color:var(--red)}
.comment-item{padding:var(--s-4) 0;border-bottom:1px solid var(--border-light)}
.comment-item:last-child{border-bottom:none}
.comment-item .c-author{font-size:var(--fs-sm);font-weight:600;color:var(--text)}
.comment-item .c-time{font-size:var(--fs-xs);color:var(--text-tertiary);margin-left:12px}
.comment-item .c-content{font-size:var(--fs-base);color:var(--text-secondary);margin-top:8px;line-height:1.7}

/* ═══════════════════════════════
   PROJECTS / GALLERY / LINKS / ABOUT / GUESTBOOK / BOOKS / BADGES
   (保持所有已有模块，统一卡片风格)
   ═══════════════════════════════ */

.project-row{display:flex;gap:var(--s-6);margin-bottom:var(--s-4);padding:var(--s-5);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-offset);transition:box-shadow var(--t-fast)}
.project-row:hover{box-shadow:var(--shadow-offset-hover)}
.project-row.reverse{flex-direction:row-reverse}
.proj-img{width:180px;height:120px;background:var(--bg-alt);border-radius:var(--radius-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:36px;border:1px solid var(--border)}
.proj-info{flex:1;display:flex;flex-direction:column;justify-content:center}
.proj-info h3{font-size:var(--fs-md);font-weight:700;margin-bottom:var(--s-2)}
.proj-info h3 a{color:var(--text-tertiary);margin-left:8px}
.proj-info h3 a:hover{color:var(--accent)}
.proj-info p{color:var(--text-secondary);font-size:var(--fs-sm);line-height:1.7;margin-bottom:var(--s-2)}
.proj-info .tech{display:flex;gap:8px;flex-wrap:wrap}
.proj-info .tech span{background:var(--bg-alt);color:var(--text-secondary);padding:3px 14px;border-radius:var(--radius-sm);font-size:var(--fs-xs);border:1px solid var(--border)}

/* ═══ Gallery · Modern Masonry ═══ */
.timeline-cats{max-width:var(--wide-w);margin:0 auto;padding:0 var(--s-6) var(--s-8);display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.timeline-cats a{padding:8px 22px;border-radius:24px;font-size:var(--fs-sm);text-decoration:none;color:var(--text-secondary);background:var(--bg-alt);transition:all var(--t-base);border:1px solid transparent;font-weight:500}
.timeline-cats a:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.timeline-cats a.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.timeline{max-width:var(--wide-w);margin:0 auto;padding:0 var(--s-6) var(--s-16)}
.timeline-group{margin-bottom:var(--s-12)}
.timeline-date{display:flex;align-items:baseline;gap:var(--s-3);margin-bottom:var(--s-5);font-size:var(--fs-lg);font-weight:800;color:var(--text);letter-spacing:-0.01em}
.timeline-date::after{content:'';flex:1;height:1px;background:var(--border);align-self:center;margin-left:var(--s-2)}
.timeline-date .tl-count{font-size:var(--fs-xs);color:var(--text-tertiary);font-weight:400}

/* staggered 3-column grid — fixed row heights, no reflow */
.timeline-items{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:220px;gap:var(--s-3)}
.timeline-item{position:relative;overflow:hidden;border-radius:12px;background:var(--bg-alt);cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,0.04);transition:box-shadow 0.25s ease;display:flex;flex-direction:column}
.timeline-item:hover{box-shadow:0 12px 32px rgba(0,0,0,0.12)}
.timeline-item .img-wrap{position:relative;overflow:hidden;background:var(--bg-alt);flex:1;min-height:0}
.timeline-item img{width:100%;height:100%;display:block;object-fit:cover;transition:transform 0.35s ease;background:var(--bg-alt);will-change:transform}
.timeline-item:hover img{transform:scale(1.05)}
.timeline-item .img-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,0.45) 100%);opacity:0;transition:opacity 0.3s ease;pointer-events:none}
.timeline-item:hover .img-overlay{opacity:1}
.timeline-item .img-cat{position:absolute;top:10px;left:10px;font-size:10px;color:#fff;background:var(--accent);padding:3px 10px;border-radius:12px;font-weight:600;letter-spacing:0.5px;z-index:1;text-shadow:none}
.timeline-item .img-title-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--s-4);color:#fff;font-size:var(--fs-sm);font-weight:600;line-height:1.3;opacity:0;transform:translateY(6px);transition:all 0.3s ease;z-index:1;text-shadow:0 1px 4px rgba(0,0,0,0.6)}
.timeline-item:hover .img-title-overlay{opacity:1;transform:translateY(0)}

.timeline-info{display:flex;align-items:center;justify-content:space-between;padding:10px var(--s-3) 10px var(--s-4);gap:var(--s-2)}
.timeline-info .tl-meta{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-xs);color:var(--text-tertiary)}
.timeline-info .tl-date-icon{font-size:13px}
.tl-actions{display:flex;gap:var(--s-3);align-items:center;flex-shrink:0}
.tl-like{padding:4px 10px;border-radius:16px;border:1px solid var(--border);background:var(--surface);color:var(--text-tertiary);font-size:var(--fs-xs);font-family:var(--ff);cursor:pointer;transition:all var(--t-fast);display:flex;align-items:center;gap:4px;white-space:nowrap}
.tl-like:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.tl-like.liked{border-color:#e04040;color:#e04040;background:#fef2f2}
body.dark .tl-like.liked{background:#2d1818}
.tl-comment-count{cursor:pointer;font-size:var(--fs-xs);color:var(--text-tertiary);transition:color var(--t-fast);padding:4px 8px;border-radius:16px;white-space:nowrap}
.tl-comment-count:hover{color:var(--accent);background:var(--bg-alt)}
.tl-comments{margin:0 var(--s-3) var(--s-3);padding:var(--s-3);border-radius:10px;background:var(--bg-alt)}
.tl-comment-list{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--s-2);max-height:160px;overflow-y:auto}
.tl-cmt-item{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.5}
.tl-comment-form{display:flex;gap:6px;flex-wrap:wrap}
.tl-comment-form input{padding:6px 10px;border:1px solid var(--border);border-radius:8px;font-size:var(--fs-xs);font-family:var(--ff);outline:none;background:var(--surface);color:var(--text);min-width:0;flex:1}
.tl-comment-form input:focus{border-color:var(--accent)}
.tl-comment-form .btn-sm-study{flex-shrink:0}

.links-container{max-width:var(--wide-w);margin:0 auto;padding:0 var(--s-6) var(--s-16)}
/* friends marquee */
.links-friends{margin-bottom:var(--s-10);overflow:hidden}
.links-friends__title{font-size:var(--fs-lg);font-weight:700;color:var(--text);margin-bottom:var(--s-4);padding-bottom:var(--s-3);border-bottom:1px solid var(--border-light)}
.links-friends__track{display:flex;gap:var(--s-4);flex-wrap:wrap}
.links-friends__track .link-card{flex:1;min-width:280px;grid-column:auto!important}
/* normal links grid */
.links-group{margin-bottom:var(--s-12)}
.links-group-title{font-size:var(--fs-lg);font-weight:700;color:var(--text);margin-bottom:var(--s-6);padding-bottom:var(--s-4);border-bottom:1px solid var(--border-light)}
.links-grid{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:var(--s-4) var(--s-5)}
.link-card:nth-child(1){grid-column:span 4}
.link-card:nth-child(2){grid-column:span 2}
.link-card:nth-child(3){grid-column:span 3}
.link-card:nth-child(4){grid-column:span 3}
.link-card:nth-child(5){grid-column:span 2}
.link-card:nth-child(6){grid-column:span 4}
.link-card:nth-child(n+7){grid-column:span 3}
.link-card{display:flex;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-5);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);text-decoration:none;box-shadow:var(--shadow-offset);transition:box-shadow var(--t-fast)}
.link-card:hover{box-shadow:var(--shadow-offset-hover)}
.link-avatar{width:52px;height:52px;border-radius:var(--radius);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;overflow:hidden;flex-shrink:0}
.link-avatar img{width:100%;height:100%;object-fit:cover}
.link-info{flex:1;min-width:0}
.link-info h3{font-size:var(--fs-base);font-weight:700;color:var(--text);margin-bottom:2px}
.link-info p{font-size:var(--fs-xs);color:var(--text-secondary);line-height:1.5;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.link-card .link-url{font-size:10px;color:var(--text-tertiary);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}

/* ═══ Guestbook ═══ */
.gb-new{max-width:var(--content-w);margin:0 auto;padding:0 var(--s-6) var(--s-8)}
.gb-form-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-5);box-shadow:var(--shadow-offset)}
.gb-form-card__title{font-size:var(--fs-sm);font-weight:700;color:var(--text-tertiary);text-transform:uppercase;letter-spacing:2px;margin-bottom:var(--s-4)}
.gb-form{display:flex;flex-direction:column;gap:var(--s-2)}
.gb-form__row{display:flex;gap:var(--s-2);align-items:center}
.gb-form__name{flex:1;padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-family:var(--ff);outline:none;background:var(--bg);color:var(--text);transition:border-color var(--t-fast)}
.gb-form__name:focus{border-color:var(--accent)}
.gb-form__body{padding:10px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-family:var(--ff);outline:none;background:var(--bg);color:var(--text);resize:vertical;transition:border-color var(--t-fast)}
.gb-form__body:focus{border-color:var(--accent)}
.gb-form__submit{padding:8px 20px;border-radius:var(--radius-sm);border:none;background:var(--accent);color:#fff;font-size:var(--fs-sm);font-weight:600;font-family:var(--ff);cursor:pointer;transition:background var(--t-fast);white-space:nowrap}
.gb-form__submit:hover{background:var(--accent-hover)}
.gb-msg{font-size:var(--fs-xs);min-height:16px}
.gb-msg.success{color:var(--green)}.gb-msg.error{color:var(--red)}

/* entries as cards */
.gb-entries{max-width:var(--content-w);margin:0 auto;padding:var(--s-8) var(--s-6) 0;display:flex;flex-direction:column;gap:var(--s-4)}
.gb-item{background:var(--surface);border:1px solid var(--border-light);border-radius:var(--radius);padding:var(--s-4) var(--s-5);box-shadow:var(--shadow-offset)}
.gb-item:nth-child(even){margin-left:var(--s-8)}
.gb-item:nth-child(odd){margin-right:var(--s-8)}
.gb-item .gb-header{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-2)}
.gb-item .gb-author{font-size:var(--fs-sm);font-weight:700;color:var(--accent)}
.gb-item .gb-author::before{content:'@ ';color:var(--text-tertiary);font-weight:400}
.gb-item .gb-time{font-size:var(--fs-xs);color:var(--text-tertiary)}
.gb-item .gb-content{font-size:var(--fs-base);color:var(--text);line-height:1.8}

/* capsule */
.gb-capsule{max-width:var(--content-w);margin:0 auto;padding:var(--s-12) var(--s-6) var(--s-16)}
.gb-capsule__title{font-size:var(--fs-lg);font-weight:700;margin-bottom:var(--s-2)}
.gb-capsule__desc{font-size:var(--fs-sm);color:var(--text-secondary);margin-bottom:var(--s-4)}

.about-section{max-width:var(--content-w);margin:0 auto;padding:0 var(--s-6) var(--s-16)}
.about-section h2{font-size:var(--fs-xl);font-weight:800;text-transform:uppercase;letter-spacing:2px;color:var(--text);margin:var(--s-12) 0 var(--s-5);padding-bottom:var(--s-2);border-bottom:2px solid var(--accent);display:inline-block}
.about-section p{font-size:var(--fs-base);color:var(--text);line-height:1.9;margin-bottom:var(--s-5)}
.about-section p:first-of-type::first-letter{font-size:3.5em;float:left;line-height:.8;padding-right:var(--s-2);padding-top:var(--s-1);color:var(--accent);font-weight:800;margin-right:1px}
.about-section .timeline-item{display:flex;gap:var(--s-6);margin-bottom:var(--s-4);padding:var(--s-4);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-offset);transition:box-shadow var(--t-fast)}
.about-section .timeline-item:hover{box-shadow:var(--shadow-offset-hover)}
.about-section .timeline-year{font-size:var(--fs-sm);color:var(--accent);min-width:64px;padding-top:2px;font-weight:600}
.about-section .timeline-body{font-size:var(--fs-sm);color:var(--text-secondary);line-height:1.8}

.contact-list{display:flex;gap:var(--s-6);flex-wrap:wrap}
.contact-list a{color:var(--text-secondary);text-decoration:none;font-size:var(--fs-sm);position:relative;padding-bottom:2px}
.contact-list a::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(0);transition:transform var(--t-fast)}
.contact-list a:hover{color:var(--accent)}
.contact-list a:hover::after{transform:scaleX(1)}
.contact-form-wrap{margin-top:var(--s-8);max-width:500px}
.contact-form{display:flex;flex-direction:column;gap:14px}
.cf-row{display:flex;gap:14px}
.cf-row input{flex:1;height:46px;padding:0 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-family:var(--ff);outline:none;background:var(--surface);color:var(--text);transition:border-color var(--t-fast)}
.contact-form textarea{padding:14px 16px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-family:var(--ff);resize:vertical;outline:none;background:var(--surface);color:var(--text);transition:border-color var(--t-fast)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cf-bottom{display:flex;align-items:center;gap:16px}
.cf-bottom .btn{height:46px;padding:0 28px;border-radius:var(--radius-sm);background:var(--accent);color:#fff;border:none;font-size:var(--fs-sm);font-weight:600;font-family:var(--ff);cursor:pointer;transition:all var(--t-fast)}
.cf-bottom .btn:hover{background:var(--accent-hover)}
.cf-bottom .btn:disabled{opacity:.5;cursor:not-allowed}

.book-wall{margin-top:var(--s-12)}
.book-wall-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
.book-card{padding:var(--s-5) var(--s-4);border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);text-align:center;box-shadow:var(--shadow-offset);transition:box-shadow var(--t-fast)}
.book-card:hover{box-shadow:var(--shadow-offset-hover)}
.book-emoji{font-size:32px;margin-bottom:12px}
.book-title{font-size:var(--fs-sm);font-weight:600;color:var(--text);line-height:1.5}
.book-author{font-size:var(--fs-xs);color:var(--text-tertiary);margin-top:8px}
.book-status{font-size:11px;margin-top:6px;letter-spacing:.5px}
.book-status.read{color:var(--green)}
.book-status.want{color:var(--text-tertiary)}
.book-status.reading{color:var(--accent)}

.badges-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--s-4)}
.badge-item{text-align:center;padding:var(--s-4) var(--s-3);border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-offset);transition:box-shadow var(--t-fast)}
.badge-item:hover{box-shadow:var(--shadow-offset-hover)}
.badge-item.earned{border-color:var(--accent)}
.badge-item.locked{opacity:.3}
.badge-emoji{font-size:28px;margin-bottom:10px}
.badge-name{font-size:var(--fs-xs);font-weight:600;color:var(--text)}
.badge-desc{font-size:11px;color:var(--text-tertiary);margin-top:6px}

/* ═══ FOOTER ═══ */
footer{text-align:center;padding:var(--s-10) var(--s-6);font-size:var(--fs-xs);color:var(--text-tertiary);border-top:1px solid var(--border-light);background:var(--bg-alt)}
.visit-counter{font-size:var(--fs-xs);color:var(--text-tertiary);margin-top:8px}

/* ═══ LIGHTBOX ═══ */
.lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:300;align-items:center;justify-content:center;cursor:zoom-out;backdrop-filter:blur(4px)}
.lightbox.show{display:flex}
.lightbox img{max-width:92vw;max-height:92vh;border-radius:var(--radius)}

/* ═══ BACK TO TOP ═══ */
.back-to-top{display:flex;align-items:center;justify-content:center;position:fixed;bottom:32px;right:32px;z-index:50;width:40px;height:40px;border-radius:var(--radius-sm);background:var(--surface);color:var(--text-secondary);border:1px solid var(--border-light);font-size:15px;cursor:pointer;box-shadow:var(--shadow);transition:all var(--t-fast);opacity:0;visibility:hidden;pointer-events:none}
.back-to-top.visible{opacity:1;visibility:visible;pointer-events:auto}
.back-to-top:hover{border-color:var(--accent);color:var(--accent)}
.back-to-top.bounce{animation:btopBounce .4s ease}

/* ═══ FUN FEATURES ═══ */
.btn-sm-study{padding:5px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface);color:var(--text-secondary);cursor:pointer;font-size:var(--fs-xs);font-family:var(--ff);transition:all var(--t-fast)}
.btn-sm-study:hover{border-color:var(--accent);color:var(--accent)}
.danmaku-layer{display:none;position:fixed;top:70px;left:0;right:0;bottom:0;pointer-events:none;z-index:90;overflow:hidden}
.danmaku-item{position:absolute;white-space:nowrap;font-size:18px;font-weight:700;text-shadow:1px 1px 3px rgba(0,0,0,.4);animation:danmakuSlide linear forwards;pointer-events:none}
@keyframes danmakuSlide{from{transform:translateX(100vw)}to{transform:translateX(-100%)}}
.murmur-bubble{position:fixed;bottom:100px;right:28px;z-index:49;max-width:220px;padding:14px 18px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-secondary);box-shadow:var(--shadow);transition:opacity .4s;line-height:1.6}
.cyber-pet-corner{position:fixed;bottom:24px;left:24px;z-index:49;text-align:center;cursor:pointer}
.pet-emoji{font-size:32px;transition:transform .2s}
.pet-info{font-size:11px;color:var(--text-tertiary);margin-top:4px}
.cpa-countdown{text-align:center;padding:var(--s-4)}
.countdown-num{font-size:42px;font-weight:700;color:var(--accent);line-height:1}
.countdown-label{font-size:var(--fs-lg);color:var(--text-secondary);margin-left:4px}
.countdown-sub{font-size:var(--fs-xs);color:var(--text-tertiary);margin-top:6px}

/* ═══ ARCHIVE ═══ */
.archive{max-width:var(--content-w);margin:0 auto;padding:0 var(--s-6) var(--s-16)}
.archive-year{font-size:var(--fs-xl);font-weight:700;color:var(--text);margin-top:var(--s-10);margin-bottom:var(--s-5);padding-bottom:var(--s-3);border-bottom:1px dashed var(--border)}
.archive-year:first-child{margin-top:0}
.archive-item{display:flex;align-items:baseline;justify-content:space-between;padding:var(--s-3) 0;border-bottom:1px solid var(--border-light);transition:padding var(--t-fast)}
.archive-item:hover{padding-left:var(--s-3)}
.archive-item__date{font-size:var(--fs-sm);color:var(--text-tertiary);flex-shrink:0;margin-right:var(--s-5)}
.archive-item__title{font-size:var(--fs-base);flex:1;min-width:0}
.archive-item__title a{color:var(--text)}
.archive-item__title a:hover{color:var(--accent)}
.archive-item__count{font-size:var(--fs-xs);color:var(--text-tertiary);flex-shrink:0;margin-left:var(--s-3)}

/* ═══ STATES ═══ */
.loading{text-align:center;padding:var(--s-16);color:var(--text-tertiary);font-size:var(--fs-sm)}
.error{text-align:center;padding:var(--s-16);color:var(--red);font-size:var(--fs-sm)}

/* ═══════════════════════════════
   18 NEW FEATURES CSS
   ═══════════════════════════════ */

@keyframes btopBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── 3. Card tilt hover ── */
.article-card:nth-child(odd):hover{transform:rotate(.8deg)}
.article-card:nth-child(even):hover{transform:rotate(-.8deg)}

/* ── 4. Typewriter cursor ── */
.typewriter{display:inline}
.typewriter-cursor{display:inline-block;width:2px;height:1.1em;background:var(--accent);margin-left:2px;vertical-align:text-bottom;animation:cursorBlink .8s infinite}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ── 5. Parallax (desktop only) ── */
.home-hero__parallax{will-change:transform}
@media(hover:hover){.home-hero__parallax-slow{transition:transform .1s linear}}

/* ── 6. Reading progress (post page, enhanced) ── */
.reading-progress.done{background:var(--accent);animation:progressFlash .4s ease}
@keyframes progressFlash{0%{opacity:.6}50%{opacity:1}100%{opacity:.6}}

/* ── 7. Heatmap ── */
.heatmap{display:flex;align-items:flex-end;gap:var(--s-2);justify-content:center;padding:var(--s-2) 0;min-height:90px}
.heatmap-bar{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1;max-width:36px}
.heatmap-bar__fill{width:100%;border-radius:3px 3px 0 0;background:var(--accent);min-height:4px;position:relative;transition:height .4s ease}
.heatmap-bar__num{position:absolute;top:-18px;left:50%;transform:translateX(-50%);font-size:.6rem;color:var(--text-tertiary);font-weight:600}
.heatmap-bar__label{font-size:.6rem;color:var(--text-tertiary)}

/* ── 8. Word count ── */
.word-count{font-size:var(--fs-xs);color:var(--text-tertiary)}

/* ── 9. Ring chart ── */
.ring-chart{position:relative;width:100px;height:100px;margin:0 auto}
.ring-chart svg{transform:rotate(-90deg)}
.ring-chart__center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:var(--fs-lg);font-weight:700;color:var(--text)}
.ring-legend{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin-top:var(--s-3);justify-content:center}
.ring-legend__item{display:flex;align-items:center;gap:5px;font-size:var(--fs-xs);color:var(--text-secondary)}
.ring-legend__dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ── 10. Status bar ── */
.status-bar{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);color:var(--text-tertiary);margin-bottom:var(--s-4)}
.status-bar__dot{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:statusPulse 2s infinite}
@keyframes statusPulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── 11. Footer quote ── */
.footer-quote{font-size:var(--fs-xs);color:var(--text-tertiary);margin-bottom:var(--s-3);font-style:italic;animation:fadeIn .6s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.footer-quote::before{content:'" '}.footer-quote::after{content:' "'}

/* ── 12. Particles ── */
.particles-layer{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.particle{position:absolute;border-radius:50%;background:var(--accent);opacity:.06;animation:particleFloat linear infinite}
@keyframes particleFloat{0%{transform:translateY(100vh) scale(0)}10%{opacity:.08}90%{opacity:.04}100%{transform:translateY(-10vh) scale(1.5);opacity:0}}

/* ── 13. Like button ── */
.like-btn{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:var(--radius-sm);border:1px solid var(--border-light);background:transparent;color:var(--text-tertiary);cursor:pointer;font-size:var(--fs-xs);font-family:var(--ff);transition:all var(--t-fast)}
.like-btn:hover{border-color:var(--red);color:var(--red)}
.like-btn.liked{background:rgba(212,68,58,.08);border-color:var(--red);color:var(--red)}
.like-btn.bump{animation:likeBump .35s ease}
@keyframes likeBump{0%{transform:scale(1)}30%{transform:scale(1.25)}60%{transform:scale(.9)}100%{transform:scale(1)}}
.like-float{position:absolute;font-size:var(--fs-xs);color:var(--red);pointer-events:none;animation:likeFloatUp .8s ease forwards}
@keyframes likeFloatUp{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-20px)}}

/* ── 14. Toast ── */
.toast{position:fixed;bottom:60px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--bg);padding:10px 24px;border-radius:var(--radius-sm);font-size:var(--fs-sm);z-index:500;opacity:0;transition:all .25s ease;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
body.dark .toast{background:var(--surface);color:var(--text);border:1px solid var(--border)}

/* ── 15. Newsletter ── */
.newsletter{display:flex;gap:var(--s-2)}
.newsletter__input{flex:1;padding:8px 12px;border:1px solid var(--border);border-radius:var(--radius-sm);font-size:var(--fs-sm);font-family:var(--ff);outline:none;background:var(--bg);color:var(--text);transition:border-color var(--t-fast);min-width:0}
.newsletter__input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.newsletter__btn{padding:8px 16px;border-radius:var(--radius-sm);border:none;background:var(--accent);color:#fff;font-size:var(--fs-sm);font-weight:600;font-family:var(--ff);cursor:pointer;transition:background var(--t-fast);white-space:nowrap}
.newsletter__btn:hover{background:var(--accent-hover)}

/* ── 16. Random read button ── */
.random-read{width:34px;height:34px;border-radius:var(--radius-sm);border:1px solid var(--border-light);background:var(--surface);color:var(--text-secondary);cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center;transition:all var(--t-fast);flex-shrink:0}
.random-read:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.random-read:active{transform:rotate(180deg);transition:transform .4s ease}

/* ── 17. Learning progress bars ── */
.learning-item{display:flex;align-items:center;gap:var(--s-3);margin-bottom:var(--s-3)}
.learning-item__icon{font-size:18px;flex-shrink:0;width:24px;text-align:center}
.learning-item__info{flex:1;min-width:0}
.learning-item__name{font-size:var(--fs-xs);font-weight:600;color:var(--text);margin-bottom:3px}
.learning-item__bar{height:4px;border-radius:2px;background:var(--border-light);overflow:hidden}
.learning-item__fill{height:100%;border-radius:2px;background:var(--accent);transition:width 1s ease;width:0}

/* ── 18. Archive expand/collapse ── */
.archive-month{margin-bottom:var(--s-3)}
.archive-month__header{display:flex;align-items:center;justify-content:space-between;padding:var(--s-3) 0;cursor:pointer;border-bottom:1px solid var(--border-light);font-size:var(--fs-md);font-weight:700;color:var(--text);transition:color var(--t-fast);user-select:none}
.archive-month__header:hover{color:var(--accent)}
.archive-month__toggle{font-size:var(--fs-sm);color:var(--text-tertiary);transition:transform var(--t-fast)}
.archive-month.open .archive-month__toggle{transform:rotate(90deg)}
.archive-month__items{display:none;padding:var(--s-2) 0 var(--s-3) var(--s-4)}
.archive-month.open .archive-month__items{display:block}

/* ═══════════════════════════════
   RESPONSIVE
   ═══════════════════════════════ */
@media (max-width:1024px){
  .badges-grid{grid-template-columns:repeat(4,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .links-grid{grid-template-columns:repeat(2,1fr)}
  .book-wall-grid{grid-template-columns:repeat(2,1fr)}
}

/* ── Home extras ── */
.home-extras{max-width:var(--wide-w);margin:0 auto;padding:var(--s-8) var(--s-6);display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:var(--s-5) var(--s-6)}
.home-extras .sidebar__widget{grid-column:span 2;box-shadow:var(--shadow-offset)}
.home-extras .sidebar__widget:hover{box-shadow:var(--shadow-offset-hover)}

/* ── Mentors page ── */
.mentors{max-width:var(--wide-w);margin:0 auto;padding:0 var(--s-6) var(--s-16);display:grid;grid-template-columns:repeat(6,1fr);grid-auto-flow:dense;gap:var(--s-5) var(--s-6);align-items:start}
.mentor-card{animation:fadeIn .5s ease both}
.mentor-card:nth-child(6n+1){grid-column:span 4;padding:var(--s-6);border:none;background:transparent}
.mentor-card:nth-child(6n+1) .mentor-card__quote{font-size:var(--fs-xl);font-weight:700;line-height:1.5;color:var(--text);font-style:normal}
.mentor-card:nth-child(6n+1) .mentor-card__author{font-size:var(--fs-base)}
.mentor-card:nth-child(6n+2){grid-column:span 2;padding:var(--s-5);background:var(--bg-alt);border-radius:var(--radius);transform:rotate(-.8deg)}
.mentor-card:nth-child(6n+3){grid-column:span 3;padding:var(--s-5);border:1.5px dashed var(--border);border-radius:var(--radius)}
.mentor-card:nth-child(6n+4){grid-column:span 3;padding:var(--s-5) var(--s-5) var(--s-4);border:none;border-bottom:2px solid var(--accent)}
.mentor-card:nth-child(6n+5){grid-column:span 2;padding:var(--s-4);border:none;border-top:3px solid var(--accent);background:var(--bg-alt);border-radius:var(--radius-sm)}
.mentor-card:nth-child(6n+5) .mentor-card__quote{font-size:var(--fs-sm)}
.mentor-card:nth-child(6n+5) .mentor-card__meta{border-top:none;margin-top:var(--s-2);padding-top:0}
.mentor-card:nth-child(6n+5) .mentor-card__context{display:none}
.mentor-card:nth-child(6n+6){grid-column:span 4;padding:var(--s-8) var(--s-6);border:none;text-align:center;background:transparent}
.mentor-card:nth-child(6n+6) .mentor-card__quote{font-size:var(--fs-lg);font-weight:600;line-height:1.7;color:var(--accent)}
.mentor-card:nth-child(6n+6) .mentor-card__meta{justify-content:center;border-top:none;margin-top:var(--s-3);padding-top:0}
.mentor-card:nth-child(6n+6) .mentor-card__author{color:var(--text-tertiary);font-weight:500}
.mentor-card__quote{font-size:var(--fs-md);line-height:1.85;color:var(--text);font-style:italic;border-left:none;padding:0;margin:0;background:none}
.mentor-card__meta{display:flex;align-items:center;gap:var(--s-4);margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px dashed var(--border)}
.mentor-card__author{font-size:var(--fs-sm);font-weight:700;color:var(--accent)}
.mentor-card__date{font-size:var(--fs-xs);color:var(--text-tertiary)}
.mentor-card__context{font-size:var(--fs-xs);color:var(--text-tertiary);margin-top:var(--s-2);font-style:italic}
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:768px){
  :root{
    --fs-3xl:1.75rem;--fs-2xl:1.5rem;--fs-xl:1.25rem;
    --fs-base:.9375rem;--nav-h:3.25rem
  }
  /* nav */
  .hamburger{display:flex}
  .top__nav{position:fixed;top:0;right:-280px;width:280px;height:100vh;flex-direction:column;padding:5rem var(--s-5) var(--s-5);background:var(--surface);border-left:1px solid var(--border);z-index:105;gap:var(--s-5);transition:right .25s ease}
  .top__nav.open{right:0}
  .top__nav .top__link{font-size:var(--fs-base);padding:8px 0}
  .nav-overlay.show{display:block}
  .top{padding:0 var(--s-5)}

  /* ═══ consistent page margins ═══ */
  .page-header{padding:var(--s-10) var(--s-6) var(--s-8)}
  section{padding:var(--s-10) 0}
  .section-inner{padding:0 var(--s-6)}
  footer{padding:var(--s-8) var(--s-6)}

  /* hero */
  .home-hero{padding:var(--s-8) var(--s-6) var(--s-6)}
  .home-hero__avatar{width:72px;height:72px}
  .home-hero__title{font-size:var(--fs-2xl)}
  .home-hero__bio{font-size:var(--fs-sm);padding:0 var(--s-2)}
  .home-hero__links{gap:var(--s-3)}

  /* home grid */
  .home-grid{grid-template-columns:1fr 1fr!important;gap:var(--s-3);padding:var(--s-10) var(--s-6) var(--s-10)}
  .article-card{grid-column:span 1!important;padding:var(--s-3)}
  .article-card:hover{transform:none!important}
  .article-card__cover{aspect-ratio:16/9}
  .article-card__title{font-size:var(--fs-sm);-webkit-line-clamp:2;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
  .article-card__excerpt{display:none}
  .article-card__cat{font-size:.65rem;padding:2px 6px}
  .article-card__meta{gap:var(--s-2)!important;flex-wrap:wrap}
  .article-card__meta .word-count{display:none}
  .like-btn,.copy-link-btn{padding:4px 8px!important;font-size:.65rem!important}
  .view-all{grid-column:span 2!important}

  /* blog */
  .blog-page-layout{grid-template-columns:1fr;gap:var(--s-8);padding:0 var(--s-6) var(--s-10)}
  .blog-list{padding:0;gap:var(--s-3)}
  .blog-list-item{padding:var(--s-4)}
  .blog-list-item h2{font-size:var(--fs-base)}
  .search-bar{padding:0;margin-bottom:var(--s-4)}
  .categories{padding:0;gap:6px;margin-bottom:var(--s-6)}
  .categories a{padding:4px 12px;font-size:.65rem}
  .sidebar{position:static}
  .sidebar__widget{padding:var(--s-3);margin-bottom:var(--s-4)}

  /* post */
  .post-detail{padding:var(--s-6) var(--s-6) var(--s-10)}
  .post-detail h1{font-size:var(--fs-2xl)}
  .post-meta{font-size:var(--fs-xs);gap:var(--s-1)}
  .post-content{font-size:var(--fs-base)}
  .post-content pre{margin-left:calc(-1*var(--s-6));margin-right:calc(-1*var(--s-6));border-radius:0}
  .post-footer{flex-direction:column;align-items:flex-start;gap:var(--s-3)}
  .share-btn{width:32px;height:32px;font-size:13px}
  .comment-form input,.comment-form textarea{padding:10px 12px}
  .comment-form .cf-bottom .btn{padding:8px 20px}
  .post-tag{padding:2px 8px;font-size:.65rem}

  /* gallery */
  .timeline{padding:0 var(--s-4) var(--s-10)}
  .timeline-cats{padding:0 var(--s-4) var(--s-6)}
  .timeline-items{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px;gap:var(--s-3)}
  .timeline-item .img-title-overlay{font-size:var(--fs-xs);padding:var(--s-3)}
  .timeline-item .img-cat{top:6px;left:6px;padding:2px 8px;font-size:9px}

  /* links */
  .links-container{padding:0 var(--s-6) var(--s-10)}
  .links-grid{grid-template-columns:1fr 1fr!important}
  .link-card,.link-card:nth-child(n){grid-column:span 1!important;padding:var(--s-3);gap:var(--s-3)}
  .link-card .link-url{display:none}
  .links-group{margin-bottom:var(--s-8)}
  .links-group-title{font-size:var(--fs-base);margin-bottom:var(--s-4)}
  .links-friends__track{gap:var(--s-3)}
  .links-friends__track .link-card{min-width:180px}

  /* about */
  .about-section{padding:0 var(--s-6) var(--s-10)}

  /* guestbook */
  .gb-new{padding:0 var(--s-6) var(--s-6)}
  .gb-entries{padding:var(--s-6) var(--s-6) 0}
  .gb-item:nth-child(even){margin-left:0}
  .gb-item:nth-child(odd){margin-right:0}
  .gb-capsule{padding:var(--s-8) var(--s-6) var(--s-10)}
  .gb-form__submit{padding:10px 16px}

  /* archive */
  .archive{padding:0 var(--s-6) var(--s-10)}

  /* mentors */
  .mentors{padding:0 var(--s-6) var(--s-10);grid-template-columns:1fr!important}
  .mentor-card,.mentor-card:nth-child(n){grid-column:span 1!important;padding:var(--s-4)!important;transform:none!important;text-align:left!important}
  .mentor-card:nth-child(6n+1) .mentor-card__quote{font-size:var(--fs-lg)!important}
  .mentor-card:nth-child(6n+6) .mentor-card__meta{justify-content:flex-start!important}

  /* extras */
  .home-extras{grid-template-columns:1fr 1fr!important;gap:var(--s-4);padding:var(--s-6) var(--s-6)!important}
  .home-extras .sidebar__widget{grid-column:span 1!important}
  .ring-chart{width:80px;height:80px;margin:0 auto}
  .heatmap{max-width:100%;min-height:70px}
  .newsletter{flex-direction:column}
  .particles-layer{display:none}

  /* misc */
  .cf-row{flex-direction:column}
  .related-grid{grid-template-columns:1fr}
  .badges-grid{grid-template-columns:repeat(3,1fr)}
  .book-wall-grid{grid-template-columns:1fr 1fr}
  .project-row,.project-row.reverse{flex-direction:column}
  .proj-img{width:100%;height:100px}
  .back-to-top{right:16px;bottom:20px}
  .murmur-bubble{bottom:70px;right:12px;max-width:160px;font-size:.65rem;padding:10px 14px}
  .toast{left:var(--s-4);right:var(--s-4);transform:translateY(20px);text-align:center;font-size:var(--fs-xs)}
  .toast.show{transform:translateY(0)}
  .pagination{gap:var(--s-2)}
  .pag-btn{padding:6px 14px;font-size:var(--fs-xs)}
}

@media (max-width:480px){
  :root{--fs-3xl:1.5rem;--fs-2xl:1.35rem;--fs-xl:1.15rem}
  .home-hero{padding:var(--s-6) var(--s-4)}
  .home-grid{padding:var(--s-8) var(--s-4) var(--s-8);gap:var(--s-2)}
  .article-card{padding:var(--s-2)!important}
  .article-card__title{font-size:.75rem}
  .article-card__cat{font-size:.6rem}
  .like-btn,.copy-link-btn{padding:3px 6px!important;font-size:.6rem!important}
  .badges-grid{grid-template-columns:repeat(3,1fr)}
  .book-wall-grid{grid-template-columns:1fr}
  .links-grid{grid-template-columns:1fr!important}
  .links-friends__track .link-card{min-width:160px}
  .timeline-items{grid-template-columns:1fr!important;grid-auto-rows:auto!important}
  .timeline-item{grid-row:span 1!important;margin-bottom:var(--s-3)}
  .toc{padding:var(--s-3)}
  .post-detail{padding:var(--s-5) var(--s-4) var(--s-8)}
  .blog-page-layout{padding:0 var(--s-4) var(--s-8)}
  .home-cats__grid{grid-template-columns:1fr 1fr}
  .home-extras{grid-template-columns:1fr 1fr!important;padding:var(--s-5) var(--s-4)!important}
  .home-extras .sidebar__widget{grid-column:span 1!important}
  .mentors{grid-template-columns:1fr!important}
}

/* ═══ PRINT ═══ */
@media print{
  .top,footer,.sidebar,.comments-section,.post-footer,.pagination,.hamburger,.nav-overlay,.theme-toggle,.back-to-top,.lightbox{display:none!important}
  body{background:#fff;color:#000;font-size:12pt}
  .post-detail,.post-content{max-width:100%}
  a{color:#000;text-decoration:underline}
}