@charset "utf-8";
/* ============================================================
   Hsu-confessional · 静态个人站样式表
   纯 CSS，无外部依赖，无 CDN。
   ============================================================ */

/* ---------- 设计变量 ---------- */
:root{
  --ink:#173041;          /* 主墨色 */
  --ink-2:#46606E;        /* 次级文字 */
  --ink-3:#7C93A0;        /* 弱文字 */
  --ink-4:#9AB0BB;        /* 更弱文字 */
  --cyan:#7BCFDF;         /* 雾蓝 */
  --cyan-deep:#3D88AC;    /* 深青 */
  --green:#A7DAB0;        /* 叶影绿 */
  --green-deep:#2F6B4F;
  --yellow:#FFD875;       /* 午后暖黄 */
  --yellow-deep:#8A6410;
  --coral:#F0A98A;
  --coral-deep:#A8542B;
  --paper:#FBFBF4;        /* 纸白 */
  --paper-2:#F4F4EA;
  --night:#0F1B22;        /* 负能量页深色底 */
  --night-2:#16262F;

  --glass:rgba(255,255,255,.62);
  --glass-2:rgba(255,255,255,.48);
  --line:rgba(255,255,255,.9);
  --hairline:rgba(23,48,65,.08);

  --serif:"Noto Serif SC","Source Han Serif SC","Songti SC",STSong,"SimSun",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC","Hiragino Sans GB","Helvetica Neue",Arial,sans-serif;
  --mono:"Sarasa Mono SC","JetBrains Mono",Consolas,"Courier New",monospace;

  --r-lg:28px;
  --r-md:20px;
  --r-sm:12px;
  --r-note:10px;
  --shadow:0 10px 26px -14px rgba(33,92,108,.10);
  --shadow-lg:0 16px 40px -18px rgba(23,48,65,.18);
}

/* ---------- 重置 ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.75;
  letter-spacing:.01em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* 柔和光斑：毛玻璃的“底” */
body::before{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 44% at 10% 6%, rgba(123,207,223,.30), transparent 62%),
    radial-gradient(46% 38% at 90% 2%, rgba(255,216,117,.24), transparent 64%),
    radial-gradient(52% 44% at 80% 96%, rgba(167,218,176,.26), transparent 62%),
    radial-gradient(40% 34% at 30% 70%, rgba(123,207,223,.14), transparent 60%);
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:700;line-height:1.35;}
p{margin:0;}
ul,ol{margin:0;padding-left:1.3em;}

/* ---------- 布局容器 ---------- */
.wrap{width:min(1080px, calc(100% - 64px));margin:0 auto;}
.section{padding:56px 0;}
.section--tight{padding:28px 0;}

/* ---------- 顶部导航 ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:78px;padding:0 40px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid rgba(255,255,255,.55);
}
.nav__inner{width:min(1440px,100%);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;}
.logo{display:flex;align-items:baseline;gap:7px;white-space:nowrap;}
.logo b{font-family:var(--serif);font-size:25px;font-weight:700;color:var(--ink);letter-spacing:.01em;}
.logo span{font-family:var(--serif);font-size:14px;color:var(--ink-3);}
.nav__links{display:flex;align-items:center;gap:2px;flex-wrap:wrap;}
.nav__links a{
  display:inline-block;padding:8px 16px;border-radius:999px;
  font-size:14px;color:var(--ink-2);transition:background .2s,color .2s;
}
.nav__links a:hover{background:rgba(123,207,223,.16);color:var(--ink);}
.nav__links a.is-active{background:rgba(123,207,223,.30);color:var(--ink);font-weight:500;}
.nav__right{display:flex;align-items:center;gap:14px;white-space:nowrap;}
.nav__right a{font-size:13px;color:var(--ink-2);}
.nav__right a:hover{color:var(--ink);}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:120px 0 96px;text-align:center;overflow:hidden;
}
.hero__eyebrow{font-size:12px;letter-spacing:.32em;color:var(--cyan-deep);text-transform:uppercase;font-weight:600;}
.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.25;letter-spacing:.04em;margin:18px 0 16px;}
.hero p{font-size:16px;line-height:2.1;color:var(--ink-2);max-width:660px;margin:0 auto;}
.hero__tags{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
.hero__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px;}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 26px;border-radius:999px;font-size:14px;font-weight:500;
  background:var(--ink);color:var(--paper);
  box-shadow:0 10px 24px -12px rgba(23,48,65,.35);
  transition:transform .18s,box-shadow .18s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(23,48,65,.4);}
.btn--ghost{background:rgba(255,255,255,.6);color:var(--ink);border:1px solid var(--line);box-shadow:none;}
.btn--ghost:hover{background:rgba(255,255,255,.85);}

/* ---------- 统计条 ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:56px;}
.stat{padding:18px 22px;border-radius:var(--r-md);}
.stat__label{font-size:11px;letter-spacing:.14em;color:var(--ink-3);text-transform:uppercase;}
.stat__value{font-family:var(--serif);font-size:24px;font-weight:700;margin:6px 0 4px;}
.stat__sub{font-size:12px;color:var(--ink-2);}
.stat--dark{background:var(--ink);}
.stat--dark .stat__label{color:var(--cyan);}
.stat--dark .stat__value{color:var(--paper);}
.stat--dark .stat__sub{color:#A9C3CE;}

/* ---------- 玻璃面板 ---------- */
.panel{
  background:var(--glass);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
}
.card{
  background:rgba(255,255,255,.72);
  border:1px solid var(--line);
  border-radius:24px;
  padding:22px 24px 24px;
  box-shadow:var(--shadow);
}
.card--solid{background:#fff;}
.card--dark{background:var(--ink);border-color:transparent;box-shadow:0 14px 30px -12px rgba(23,48,65,.28);}
.card--dark h3,.card--dark .card__title{color:var(--paper);}
.card--dark p{color:#A9C3CE;}

/* ---------- 区块标题 ---------- */
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:26px;flex-wrap:wrap;}
.sec-head__eyebrow{font-size:12px;letter-spacing:.28em;color:var(--cyan-deep);text-transform:uppercase;font-weight:600;}
.sec-head h2{font-size:34px;line-height:1.3;margin-top:10px;}
.sec-head__note{font-size:13px;line-height:1.9;color:var(--ink-2);max-width:400px;}

/* ---------- 栏目网格 ---------- */
.grid{display:grid;gap:16px;}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--2{grid-template-columns:repeat(2,1fr);}
.entry{display:flex;flex-direction:column;gap:9px;}
.entry__idx{font-size:11px;letter-spacing:.18em;color:var(--cyan-deep);font-weight:600;text-transform:uppercase;}
.entry__title{font-family:var(--serif);font-size:20px;font-weight:600;}
.entry__desc{font-size:13px;line-height:1.85;color:var(--ink-2);}
.entry__more{margin-top:auto;padding-top:8px;font-size:12px;color:var(--cyan-deep);}

/* ---------- 列表（文章 / 条目） ---------- */
.list{border-radius:26px;overflow:hidden;}
.list__row{display:flex;gap:26px;align-items:center;padding:24px 32px;}
.list__row + .list__row{border-top:1px solid var(--hairline);}
.list__date{font-family:var(--serif);font-size:14px;line-height:1.5;width:60px;flex:none;color:var(--cyan-deep);font-weight:600;}
.list__body{flex:1;min-width:0;}
.list__title{font-family:var(--serif);font-size:18px;font-weight:600;margin-bottom:5px;}
.list__excerpt{font-size:13px;line-height:1.8;color:var(--ink-2);}
.list__row:hover{background:rgba(255,255,255,.4);}

/* ---------- 标签 ---------- */
.tag{
  display:inline-block;padding:5px 12px;border-radius:999px;
  font-size:11px;font-weight:500;line-height:1.6;
}
.tag--green{background:rgba(167,218,176,.34);color:var(--green-deep);}
.tag--cyan{background:rgba(123,207,223,.30);color:var(--cyan-deep);}
.tag--yellow{background:rgba(255,216,117,.34);color:var(--yellow-deep);}
.tag--coral{background:rgba(240,169,138,.30);color:var(--coral-deep);}
.tag--grey{background:rgba(23,48,65,.06);color:var(--ink-2);}

.pill{
  display:inline-block;padding:6px 14px;border-radius:999px;
  font-size:12px;background:rgba(255,255,255,.68);color:var(--ink-2);
}

/* ---------- 便签 ---------- */
.sticky-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.sticky{
  position:relative;
  padding:16px 18px 18px;
  border-radius:var(--r-note);
  box-shadow:0 8px 18px -8px rgba(33,92,108,.16);
  display:flex;flex-direction:column;gap:7px;
  min-height:172px;
}
.sticky__cat{font-size:10.5px;letter-spacing:.18em;font-weight:600;text-transform:uppercase;}
.sticky__title{font-family:var(--serif);font-size:16.5px;line-height:1.45;font-weight:600;color:var(--ink);}
.sticky__author{font-size:11px;color:var(--ink-3);}
.sticky__text{font-size:12px;line-height:1.75;color:var(--ink-2);}
.sticky__meta{margin-top:auto;padding-top:4px;font-size:11px;color:var(--ink-3);}
/* 便签纸色 */
.stk-cyan{background:#DDF0F4;}
.stk-green{background:#E1F0E1;}
.stk-yellow{background:#FBF0D8;}
.stk-coral{background:#FBE4DA;}
.stk-ochre{background:#F5E8D3;}
/* 随手贴的歪斜 */
.sticky:nth-child(3n+1){transform:rotate(-1.3deg);}
.sticky:nth-child(3n+2){transform:rotate(1deg);}
.sticky:nth-child(3n+3){transform:rotate(-.6deg);}

/* ---------- 文章正文 ---------- */
.post{padding:26px 30px;}
.post + .post{margin-top:16px;}
.post__kicker{font-size:11px;letter-spacing:.2em;color:var(--cyan-deep);font-weight:600;text-transform:uppercase;}
.post__title{font-size:24px;line-height:1.45;margin:8px 0 10px;}
.post__meta{font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);margin-bottom:16px;}
.post__body{font-size:14.5px;line-height:2.05;color:var(--ink-2);}
.post__body p + p{margin-top:14px;}
.post__body h4{font-family:var(--serif);font-size:16px;color:var(--ink);margin:22px 0 8px;}
.post__body ul{margin:12px 0;}
.post__body li{margin:5px 0;}
.post__body code{
  font-family:var(--mono);font-size:.88em;
  background:rgba(23,48,65,.06);padding:2px 6px;border-radius:5px;color:var(--ink);
}
pre{
  margin:14px 0;padding:16px 18px;overflow-x:auto;
  background:rgba(23,48,65,.05);border-radius:var(--r-sm);
  font-family:var(--mono);font-size:12.5px;line-height:1.85;color:var(--ink);
}
pre code{background:none;padding:0;}

/* ---------- 表格 ---------- */
.table{width:100%;border-collapse:collapse;font-size:13.5px;}
.table th{
  text-align:left;font-size:10.5px;letter-spacing:.18em;color:var(--ink-3);
  font-weight:500;text-transform:uppercase;padding:14px 26px;
  background:rgba(23,48,65,.03);
}
.table td{padding:16px 26px;border-top:1px solid var(--hairline);}
.table td:first-child{color:var(--ink);}
.table .num{text-align:right;font-family:var(--serif);font-weight:600;}
.table tr.total td{background:rgba(23,48,65,.04);border-top:1px solid rgba(23,48,65,.1);}
.table tr.total td:first-child{font-weight:500;}

/* ---------- 进度条 ---------- */
.progress{height:6px;border-radius:999px;background:rgba(23,48,65,.07);overflow:hidden;}
.progress > i{display:block;height:100%;border-radius:999px;background:var(--cyan);}
.progress > i.is-green{background:var(--green);}
.progress > i.is-yellow{background:var(--yellow);}
.progress-label{display:flex;justify-content:space-between;align-items:center;font-size:14px;margin-bottom:8px;}
.progress-label b{font-family:var(--serif);font-size:15px;font-weight:600;}
.progress-label span{font-family:var(--serif);font-size:14px;font-weight:700;color:var(--cyan-deep);}

/* ---------- 待办 / 清单 ---------- */
.todo{display:flex;flex-direction:column;gap:2px;padding:20px 26px;}
.todo__item{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:14px;}
.todo__item + .todo__item{border-top:1px solid var(--hairline);}
.todo__item .box{
  width:16px;height:16px;border-radius:5px;flex:none;
  border:1.5px solid rgba(23,48,65,.22);
}
.todo__item.is-done .box{background:var(--green);border-color:var(--green);}
.todo__item.is-done span{color:var(--ink-3);text-decoration:line-through;}
.todo__item small{margin-left:auto;color:var(--ink-3);font-size:11.5px;}

/* ---------- 引言带 ---------- */
.quote{
  padding:84px 0;text-align:center;
  background:linear-gradient(90deg,var(--paper) 0%,#EAF3F5 50%,var(--paper) 100%);
}
.quote p{font-family:var(--serif);font-size:clamp(20px,3vw,30px);font-weight:300;line-height:1.8;max-width:820px;margin:0 auto;}
.quote small{display:block;margin-top:18px;font-size:11px;letter-spacing:.2em;color:var(--ink-3);}

/* ---------- 深色页（负能量） ---------- */
body.dark{background:var(--night);color:#E7EEF2;}
body.dark::before{
  background:
    radial-gradient(56% 44% at 14% 4%, rgba(123,207,223,.16), transparent 62%),
    radial-gradient(46% 40% at 86% 90%, rgba(123,207,223,.10), transparent 64%);
}
body.dark .nav{background:rgba(15,27,34,.62);border-bottom-color:rgba(255,255,255,.08);}
body.dark .logo b{color:#F4F7F8;}
body.dark .logo span{color:var(--ink-3);}
body.dark .nav__links a{color:#A9C3CE;}
body.dark .nav__links a:hover{background:rgba(123,207,223,.12);color:#F4F7F8;}
body.dark .nav__links a.is-active{background:rgba(123,207,223,.16);color:#F4F7F8;}
body.dark .nav__right a{color:#A9C3CE;}
body.dark h1,body.dark h2,body.dark h3{color:#F4F7F8;}
body.dark .tag--grey{background:rgba(255,255,255,.06);color:#8FA9B6;}
body.dark .footer{background:#0B141A;}
body.dark .footer{border-top-color:rgba(255,255,255,.06);}

.hero--dark{padding:110px 0 60px;text-align:center;}
.hero--dark .hero__eyebrow{color:var(--cyan);}
.hero--dark p{color:#A9C3CE;}

.note-dark{
  border-radius:var(--r-md);padding:22px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  display:flex;flex-direction:column;gap:10px;
}
.note-dark.is-faded{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.07);}
.note-dark.is-faded .note-dark__body{color:#B9CBD4;}
.note-dark.is-faded .note-dark__tag{color:#8FA9B6;}
.note-dark__tag{font-size:11px;letter-spacing:.14em;font-weight:600;color:var(--cyan);}
.note-dark__body{font-size:14px;line-height:1.95;color:#E7EEF2;}
.note-dark__meta{font-size:11px;color:#6B8494;margin-top:auto;}
/* 深色便签的随手贴角度 */
body.dark .note-dark:nth-child(2n+1){transform:rotate(-1deg);}
body.dark .note-dark:nth-child(2n){transform:rotate(.8deg);}

.composer{
  padding:20px 24px;border-radius:24px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
}
.composer__ph{font-size:14px;color:#8FA9B6;margin-bottom:16px;}
.composer__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.composer__hint{font-size:12px;color:#8FA9B6;}
.composer__btn{
  padding:10px 20px;border-radius:999px;background:var(--cyan);color:#10202A;
  font-size:13px;font-weight:500;border:0;cursor:pointer;font-family:var(--sans);
}

/* ---------- 页脚 ---------- */
.footer{
  margin-top:16px;padding:56px 0 40px;
  background:var(--ink);color:#C7D6DE;
}
.footer__top{display:flex;justify-content:space-between;gap:60px;flex-wrap:wrap;}
.footer__brand{max-width:330px;}
.footer__brand h3{font-family:var(--serif);font-size:22px;font-weight:600;color:var(--paper);margin-bottom:12px;}
.footer__brand p{font-size:13px;line-height:2;color:#8FA9B6;}
.footer__cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer__col{display:flex;flex-direction:column;gap:11px;}
.footer__col b{font-size:11px;letter-spacing:.18em;color:var(--cyan);font-weight:500;text-transform:uppercase;}
.footer__col a{font-size:13px;}
.footer__col a:hover{color:var(--paper);}
.footer__divider{height:1px;background:rgba(255,255,255,.12);margin:34px 0 20px;}
.footer__bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);}

/* ---------- 面包屑 ---------- */
.crumb{font-size:11px;letter-spacing:.2em;color:var(--ink-4);text-transform:uppercase;}
.page-head{padding:56px 0 28px;}
.page-head h1{font-size:clamp(34px,5vw,54px);line-height:1.25;margin:14px 0 12px;}
.page-head__desc{font-size:14px;line-height:2.05;color:var(--ink-2);max-width:680px;}

/* ---------- 筛选条（静态展示） ---------- */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:24px 0;}
.filters{display:flex;gap:6px;flex-wrap:wrap;}
.filters span{
  padding:7px 15px;border-radius:999px;font-size:13px;
  background:rgba(255,255,255,.66);color:var(--ink-2);
}
.filters span.is-on{background:var(--ink);color:var(--paper);font-weight:500;}
.toolbar__note{font-size:11px;letter-spacing:.12em;color:var(--ink-3);}

/* ---------- 状态清单（关于本站） ---------- */
.status-list{list-style:none;margin:14px 0 0;padding:0;font-size:13px;line-height:2;color:var(--ink-2);}
.status-list li{position:relative;padding-left:18px;}
.status-list li::before{content:"·";position:absolute;left:5px;color:var(--ink-3);}

/* ---------- 目录树 ---------- */
.tree{padding:24px 30px;background:var(--ink);border-radius:24px;box-shadow:var(--shadow-lg);font-size:12.5px;}
.tree__row{display:flex;gap:24px;align-items:center;padding:5px 2px;}
.tree__path{width:280px;flex:none;font-family:var(--mono);color:var(--cyan);}
.tree__path--root{font-weight:600;color:var(--paper);}
.tree__label{color:#C7D6DE;}
.tree__row--dim .tree__label{color:#8FA9B6;}
.tree__note{font-size:11px;line-height:1.9;color:var(--ink-3);padding:12px 2px 2px;}

/* ---------- 响应式 ---------- */
@media (max-width:1080px){
  .nav{padding:0 24px;}
  .nav__links a{padding:7px 12px;font-size:13.5px;}
  .stats{grid-template-columns:1fr;}
  .sticky-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:760px){
  body{font-size:14.5px;}
  .nav{height:auto;padding:12px 20px;}
  .nav__inner{flex-direction:column;align-items:flex-start;gap:10px;}
  .nav__links{flex-wrap:wrap;}
  .wrap{width:calc(100% - 40px);}
  .hero{padding:72px 0 56px;}
  .grid--3,.grid--2,.sticky-grid{grid-template-columns:1fr;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .sec-head h2{font-size:26px;}
  .list__row{flex-direction:column;align-items:flex-start;gap:10px;padding:20px 22px;}
  .list__date{width:auto;}
  .post{padding:22px;}
  .footer__cols{gap:36px;}
  .table th,.table td{padding:12px 14px;}
  .tree__path{width:190px;font-size:11.5px;}
}

/* ---------- 打印 ---------- */
@media print{
  .nav,.footer{display:none;}
  body::before{display:none;}
  body{background:#fff;}
}