/* =========================================================
   無憂 · 萬裡路 —— 主样式表
   ========================================================= */
:root{
  --ink:#1f2328;
  --ink-soft:#3d444d;
  --gray:#6b7280;
  --gray-light:#9ca3af;
  --line:#e6e3dd;
  --bg:#fbfaf7;
  --paper:#ffffff;
  --brand:#7a5c2e;
  --brand-soft:#a37a3e;
  --accent:#2f6f5a;
  --shadow:0 1px 2px rgba(0,0,0,.03),0 8px 24px rgba(0,0,0,.05);
  --radius:6px;
  --serif:"Source Han Serif SC","Noto Serif CJK SC","Songti SC","STSong",Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--serif);
  font-size:17px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand);text-decoration:none;transition:color .2s,opacity .2s}
a:hover{color:var(--brand-soft)}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.4;letter-spacing:.01em}
h1{font-size:1.9em;margin:0 0 .6em}
h2{font-size:1.45em;margin:2em 0 .8em;padding-bottom:.4em;border-bottom:1px solid var(--line)}
h3{font-size:1.15em;margin:1.6em 0 .6em}
p{margin:0 0 1.1em}
code{font-family:var(--mono);font-size:.88em;background:#f2efe9;padding:.15em .4em;border-radius:4px;color:#8a5a1e}
pre{font-family:var(--mono);background:#272522;color:#e6dbd0;padding:1.1em 1.2em;border-radius:var(--radius);overflow-x:auto;font-size:.86em;line-height:1.65;box-shadow:var(--shadow)}
pre code{background:none;padding:0;color:inherit}
blockquote{margin:1.2em 0;padding:.2em 0 .2em 1.1em;border-left:3px solid var(--brand-soft);color:var(--ink-soft);font-style:normal}
blockquote p{margin-bottom:.6em}
hr{border:none;border-top:1px solid var(--line);margin:2.5em 0}
table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.94em;font-family:var(--sans)}
th,td{border:1px solid var(--line);padding:.55em .8em;text-align:left}
th{background:#f4f1ea;font-weight:600}
ul,ol{padding-left:1.6em}
li{margin:.35em 0}

.container{max-width:820px;margin:0 auto;padding:0 20px}
.header-inner,.footer-inner{max-width:820px}

/* ---------- Header ---------- */
.site-header{background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;backdrop-filter:blur(6px);background:rgba(255,255,255,.92)}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px;padding:0 20px}
.brand{font-family:var(--serif);font-size:1.35em;font-weight:600;color:var(--ink);letter-spacing:.05em}
.brand:hover{color:var(--brand)}
.brand-sep{color:var(--gray-light);margin:0 .15em;font-weight:300}
.primary-nav{display:flex;gap:1.6em;font-family:var(--sans);font-size:.92em}
.primary-nav a{color:var(--ink-soft);position:relative;padding:.25em 0}
.primary-nav a:hover{color:var(--brand)}
.primary-nav a.active{color:var(--brand);font-weight:600}
.primary-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--brand);border-radius:2px}

/* ---------- Layout ---------- */
.main-content{padding:2.6em 0 3em;min-height:60vh}
.page-title{font-size:2em;margin:0 0 .25em;letter-spacing:.02em}
.page-subtitle{color:var(--gray);font-size:1em;margin:0 0 2em;font-family:var(--sans)}
.hero{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:2.4em 2.2em;box-shadow:var(--shadow);margin-bottom:2.6em}
.hero h1{margin-top:0;font-size:2.1em}
.hero .lead{font-size:1.12em;color:var(--ink-soft);margin:0 0 1.2em}
.hero-meta{display:flex;flex-wrap:wrap;gap:.6em 1.6em;font-family:var(--sans);font-size:.88em;color:var(--gray);margin-top:1.4em;padding-top:1.1em;border-top:1px dashed var(--line)}
.hero-meta span strong{color:var(--ink-soft);font-weight:600}

/* ---------- Article list ---------- */
.section-head{display:flex;align-items:baseline;justify-content:space-between;margin:2.4em 0 1em}
.section-head h2{border:none;margin:0;font-size:1.25em}
.section-head .more{font-family:var(--sans);font-size:.85em;color:var(--gray)}
.article-list{list-style:none;padding:0;margin:0}
.article-item{display:flex;gap:1.1em;padding:1.1em 0;border-bottom:1px solid var(--line)}
.article-item:last-child{border-bottom:none}
.article-date{flex:0 0 5.4em;font-family:var(--mono);font-size:.82em;color:var(--gray);padding-top:.35em;letter-spacing:.02em}
.article-body{flex:1;min-width:0}
.article-body h3{margin:0 0 .3em;font-size:1.12em}
.article-body h3 a{color:var(--ink)}
.article-body h3 a:hover{color:var(--brand)}
.article-body .summary{margin:0;font-size:.95em;color:var(--ink-soft);font-family:var(--serif)}
.article-body .tags{margin-top:.5em;font-family:var(--sans);font-size:.78em;color:var(--gray-light)}
.article-body .tags a{color:var(--gray)}
.article-body .tags a:hover{color:var(--brand)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:1.2em}
.grid-2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4em 1.5em;box-shadow:var(--shadow);transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-3px);box-shadow:0 2px 6px rgba(0,0,0,.04),0 14px 32px rgba(0,0,0,.08)}
.card h3{margin:0 0 .5em;font-size:1.15em}
.card h3 a{color:var(--ink)}
.card .desc{margin:0 0 .9em;font-size:.94em;color:var(--ink-soft)}
.card .meta{font-family:var(--sans);font-size:.8em;color:var(--gray);border-top:1px dashed var(--line);padding-top:.7em;display:flex;gap:1em;flex-wrap:wrap}
.card .meta a{color:var(--brand-soft)}

/* ---------- Post ---------- */
.post-header{margin-bottom:2em;padding-bottom:1.4em;border-bottom:1px solid var(--line)}
.post-title{margin:0 0 .4em}
.post-meta{font-family:var(--sans);font-size:.86em;color:var(--gray);display:flex;gap:1.2em;flex-wrap:wrap;align-items:center}
.post-meta time{font-variant-numeric:tabular-nums}
.post-meta .tag{color:var(--gray)}
.post-meta .tag a{color:var(--gray)}
.post-content{font-size:1.02em}
.post-content h2{margin-top:2.2em}
.post-content p{margin-bottom:1.15em}
.post-content img{border-radius:var(--radius);box-shadow:var(--shadow);margin:1.6em auto}
.post-content figure{margin:1.8em 0}
.post-content figcaption{text-align:center;font-size:.84em;color:var(--gray);font-family:var(--sans);margin-top:.5em}
.post-content ul,ol{margin-bottom:1.2em}
.post-footer{margin-top:2.6em;padding-top:1.4em;border-top:1px solid var(--line);font-family:var(--sans);font-size:.9em;color:var(--gray);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1em}
.toc{background:#f4f1ea;border:1px solid var(--line);border-radius:var(--radius);padding:1em 1.2em;margin:0 0 2em;font-family:var(--sans);font-size:.9em}
.toc-title{font-weight:600;color:var(--ink-soft);margin-bottom:.4em}
.toc ul{list-style:none;padding-left:0;margin:0}
.toc li{padding:.15em 0}
.toc a{color:var(--gray)}
.toc a:hover{color:var(--brand)}
.toc .lvl3{padding-left:1.2em;font-size:.9em}

/* ---------- Travel ---------- */
.trip{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--paper);box-shadow:var(--shadow);margin-bottom:1.6em}
.trip-cover{height:190px;background:linear-gradient(135deg,#c9b48c,#8a9a86);position:relative}
.trip-cover .cap{position:absolute;left:1.2em;bottom:.9em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4);font-size:1.15em;font-weight:600}
.trip-body{padding:1.2em 1.5em 1.4em}
.trip-body h3{margin:0 0 .35em;font-size:1.2em}
.trip-body .trip-meta{font-family:var(--sans);font-size:.82em;color:var(--gray);margin-bottom:.8em}
.trip-body .trip-meta span{margin-right:1em}
.trip-body p{margin:0;font-size:.95em;color:var(--ink-soft)}

/* ---------- Pagination ---------- */
.pagination{display:flex;justify-content:center;gap:1em;margin:2.6em 0 1em;font-family:var(--sans);font-size:.9em}
.pagination a,.pagination span{padding:.4em .9em;border:1px solid var(--line);border-radius:var(--radius);color:var(--gray);background:var(--paper)}
.pagination a:hover{border-color:var(--brand);color:var(--brand)}
.pagination .current{border-color:var(--brand);background:var(--brand);color:#fff}

/* ---------- Sidebar / aside ---------- */
.two-col{display:grid;grid-template-columns:1fr 240px;gap:2.4em;align-items:start}
@media(max-width:760px){.two-col{grid-template-columns:1fr}}
.aside{font-family:var(--sans);font-size:.88em}
.aside .widget{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.1em 1.2em;margin-bottom:1.2em}
.aside .widget h4{margin:0 0 .7em;font-size:1em;font-family:var(--serif);border-bottom:1px solid var(--line);padding-bottom:.5em}
.aside .widget ul{list-style:none;padding:0;margin:0}
.aside .widget li{padding:.3em 0;border-bottom:1px dashed var(--line)}
.aside .widget li:last-child{border-bottom:none}
.aside .widget li a{color:var(--ink-soft)}
.aside .widget li time{display:block;font-size:.78em;color:var(--gray-light);font-family:var(--mono)}
.tag-cloud{line-height:2.1}
.tag-cloud a{display:inline-block;margin-right:.3em;color:var(--gray)}
.tag-cloud .s1{font-size:.85em}
.tag-cloud .s2{font-size:.98em;color:var(--ink-soft)}
.tag-cloud .s3{font-size:1.12em;color:var(--brand-soft)}
.about-box{display:flex;gap:1.2em;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:1.4em 1.6em;margin:1.6em 0 2.4em}
.avatar{width:74px;height:74px;border-radius:50%;background:linear-gradient(135deg,#7a5c2e,#2f6f5a);flex:0 0 74px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:2em;font-family:var(--serif)}
.about-box h3{margin:0 0 .35em;font-size:1.25em}
.about-box p{margin:0;font-size:.94em;color:var(--ink-soft);font-family:var(--sans)}

/* ---------- Footer ---------- */
.site-footer{background:var(--paper);border-top:1px solid var(--line);padding:2em 0 2.4em;margin-top:3em;font-family:var(--sans);font-size:.85em;color:var(--gray)}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1em}
.footer-meta p{margin:0}
.copyright .owner{color:var(--ink-soft);font-weight:600}
.beian{margin-top:.35em}
.beian a{color:var(--gray)}
.beian a:hover{color:var(--brand)}
.footer-links{display:flex;gap:1.3em}
.footer-links a{color:var(--gray)}
.footer-links a:hover{color:var(--brand)}

/* ---------- Search ---------- */
.search-box{display:flex;gap:.6em;margin:0 0 1.6em}
.search-box input{flex:1;font-family:var(--sans);font-size:.95em;padding:.6em .8em;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink)}
.search-box input:focus{outline:none;border-color:var(--brand)}
.search-box button{font-family:var(--sans);font-size:.9em;padding:.6em 1.2em;border:1px solid var(--brand);background:var(--brand);color:#fff;border-radius:var(--radius);cursor:pointer}
.search-box button:hover{background:var(--brand-soft);border-color:var(--brand-soft)}
.no-results{color:var(--gray);font-style:normal}

/* ---------- 404 ---------- */
.notfound{text-align:center;padding:5em 0}
.notfound h1{font-size:4em;margin:0;color:var(--brand)}
.notfound p{color:var(--gray);margin:1em 0 2em}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  body{font-size:16px}
  .header-inner{height:56px}
  .brand{font-size:1.15em}
  .primary-nav{gap:1em;font-size:.85em}
  .main-content{padding:1.8em 0 2em}
  .hero{padding:1.6em 1.3em}
  .hero h1{font-size:1.6em}
  .article-item{flex-direction:column;gap:.4em}
  .article-date{flex:0 0 auto;padding-top:0}
}
@media print{
  .site-header,.site-footer,.primary-nav,.toc,.pagination,.aside{display:none!important}
  body{background:#fff;font-size:12pt}
  .main-content{padding:0}
  a{color:#000;text-decoration:none}
}