:root{
  --cream:#F1E9D8;
  --paper:#FBF6EC;
  --pine:#1F4640;
  --sage:#B9C7C2;
  --taupe:#A9887A;
  --ink:#2B2420;
  --rust:#B5623A;
  --dustyblue:#7C93A0;
  --gold:#C99A3E;
}

*{box-sizing:border-box;margin:0;padding:0;}

body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Noto Sans TC', sans-serif;
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

a{color:inherit;text-decoration:none;}
ul{list-style:none;}

h1,h2,h3{
  font-family:'LXGW WenKai TC', serif;
  font-weight:700;
  color:var(--pine);
}

/* ---------- Header ---------- */
.site-header{
  background:var(--paper);
  border-bottom:2px solid var(--pine);
  border-bottom-style:dashed;
  position:sticky;
  top:0;
  z-index:50;
}
.header-inner{
  max-width:1120px;
  margin:0 auto;
  padding:16px 5vw;
  display:flex;
  align-items:center;
  gap:24px;
}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo-mark svg{width:36px;height:36px;}
.logo-text{
  font-family:'LXGW WenKai TC', serif;
  font-weight:700;
  font-size:19px;
  color:var(--pine);
}

.main-nav{flex:1;}
.main-nav ul{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  font-size:14.5px;
}
.main-nav a{
  padding:8px 14px;
  border-radius:999px;
  transition:background .2s, transform .2s;
  display:inline-block;
}
.main-nav a:hover{
  background:var(--sage);
  transform:rotate(-1deg);
}

.header-icons{display:flex;gap:8px;flex-shrink:0;}
.icon-btn{
  width:38px;height:38px;
  border-radius:50%;
  border:1.5px solid var(--pine);
  background:transparent;
  color:var(--pine);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  transition:background .2s, color .2s;
}
.icon-btn svg{width:18px;height:18px;}
.icon-btn:hover{background:var(--pine);color:var(--paper);}

.nav-toggle{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px;}
.nav-toggle span{width:22px;height:2px;background:var(--pine);}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  overflow:hidden;
  padding:64px 5vw 40px;
  text-align:center;
}
.hero-blob{
  position:absolute;
  bottom:0;left:0;
  width:100%;height:200px;
  z-index:0;
}
.hero-inner{position:relative;z-index:1;max-width:640px;margin:0 auto;}
.eyebrow{
  font-size:13px;
  letter-spacing:2px;
  color:var(--taupe);
  margin-bottom:10px;
}
.hero h1{
  font-size:40px;
  margin-bottom:14px;
}
.hero-dek{
  color:var(--ink);
  opacity:.75;
  font-size:15px;
}

/* ---------- Category pills ---------- */
.cat-pills{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  padding:0 5vw 48px;
}
.pill{
  background:var(--paper);
  border:1.5px solid var(--pine);
  color:var(--pine);
  padding:9px 20px;
  border-radius:999px;
  font-size:14px;
  font-weight:500;
  transition:transform .2s, background .2s, color .2s;
}
.pill:nth-child(odd){transform:rotate(-0.6deg);}
.pill:nth-child(even){transform:rotate(0.6deg);}
.pill:hover{background:var(--pine);color:var(--paper);transform:rotate(0deg) scale(1.04);}

/* ---------- Card grid ---------- */
.card-section, .list-page{
  max-width:1120px;
  margin:0 auto;
  padding:0 5vw 80px;
}
.list-page h1{font-size:28px;margin-bottom:28px;}

.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
  gap:28px;
}
.card{
  background:var(--paper);
  border-radius:20px;
  overflow:hidden;
  border:1.5px solid rgba(31,70,64,0.15);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{
  transform:translateY(-4px) rotate(-0.3deg);
  box-shadow:0 14px 28px rgba(31,70,64,0.12);
}
.card-cover{display:block;aspect-ratio:16/9;background:var(--sage);}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.cover-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:repeating-linear-gradient(45deg, var(--sage), var(--sage) 10px, var(--paper) 10px, var(--paper) 20px);
  color:var(--pine);
  font-size:13px;
  text-align:center;
  opacity:.8;
}
.card-body{padding:20px 22px 24px;}

.tag{
  display:inline-block;
  font-size:11.5px;
  padding:4px 12px;
  border-radius:999px;
  margin-bottom:10px;
  font-weight:500;
  background:rgba(31,70,64,0.10);
  color:var(--pine);
}
.tag[data-cat="心得分享"]{background:rgba(169,136,122,0.16);color:var(--taupe);}
.tag[data-cat="非典型觀察"]{background:rgba(31,70,64,0.14);color:var(--pine);}
.tag[data-cat="人生職涯"]{background:rgba(124,147,160,0.18);color:var(--dustyblue);}
.tag[data-cat="日本城"]{background:rgba(181,98,58,0.14);color:var(--rust);}
.tag[data-cat="到處走走"]{background:rgba(201,154,62,0.18);color:var(--gold);}

.card h3{font-size:18px;line-height:1.5;margin-bottom:8px;}
.card-body p{font-size:13.5px;color:var(--ink);opacity:.7;margin-bottom:12px;}
.meta{font-size:12px;color:var(--taupe);}

/* ---------- Single post ---------- */
.post-layout{
  display:grid;
  grid-template-columns:1fr 240px;
  gap:56px;
  max-width:960px;
  margin:0 auto;
  padding:56px 5vw 90px;
  align-items:start;
}
.post-header h1{font-size:30px;margin:10px 0 8px;}
.post-body{margin-top:32px;font-size:16px;}
.post-body h2, .post-body h3{margin:32px 0 12px;}
.post-body p{margin-bottom:18px;}

.post-tags{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-top:40px;padding-top:24px;
  border-top:1px dashed var(--sage);
}
.post-tags .tag{background:rgba(31,70,64,0.08);}

.post-toc{position:sticky;top:96px;font-size:13.5px;}
.post-toc summary{
  cursor:pointer;font-weight:700;color:var(--pine);
  margin-bottom:10px;font-family:'LXGW WenKai TC',serif;font-size:15px;
}
.post-toc ul{padding-left:14px;border-left:1px dashed var(--sage);}
.post-toc li{margin:2px 0;}
.post-toc a{
  display:block;padding:5px 0 5px 12px;color:var(--ink);opacity:.6;
  border-left:2px solid transparent;transition:opacity .15s, border-color .15s, color .15s;
}
.post-toc a.active{opacity:1;color:var(--pine);border-left-color:var(--pine);font-weight:500;}

.heatmap{margin-top:36px;}
.heatmap-title{font-size:13.5px;margin-bottom:12px;color:var(--pine);font-weight:500;}
.heatmap-grid{
  display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,12px);
  gap:3px;overflow-x:auto;padding-bottom:8px;
}
.heat-cell{width:12px;height:12px;border-radius:3px;background:var(--sage);flex-shrink:0;}
.heat-cell[data-level="0"]{background:var(--sage);opacity:.25;}
.heat-cell[data-level="1"]{background:var(--sage);opacity:.7;}
.heat-cell[data-level="2"]{background:var(--taupe);opacity:.65;}
.heat-cell[data-level="3"]{background:var(--pine);opacity:.65;}
.heat-cell[data-level="4"]{background:var(--pine);opacity:1;}
.heatmap-legend{display:flex;align-items:center;gap:5px;margin-top:8px;font-size:11px;color:var(--taupe);}

@media (max-width:760px){
  .post-layout{grid-template-columns:1fr;gap:28px;}
  .post-toc{
    position:static;order:-1;background:var(--paper);
    border-radius:14px;padding:12px 18px;border:1px solid var(--sage);
  }
}

/* ---------- Footer ---------- */
.site-footer{
  text-align:center;
  padding:40px 5vw 50px;
  color:var(--taupe);
}
.footer-flourish{width:100px;height:16px;margin-bottom:14px;}
.site-footer p{font-size:12.5px;}

/* ---------- Search overlay ---------- */
.search-overlay{
  position:fixed;inset:0;
  background:rgba(43,36,32,0.55);
  display:none;
  align-items:flex-start;
  justify-content:center;
  padding:10vh 5vw;
  z-index:100;
}
.search-overlay.is-open{display:flex;}
.search-panel{
  background:var(--paper);
  border-radius:24px;
  border:2px dashed var(--pine);
  width:100%;max-width:640px;
  padding:22px 24px;
  max-height:70vh;
  display:flex;flex-direction:column;
  box-shadow:0 20px 50px rgba(43,36,32,0.25);
}
.search-input-row{display:flex;align-items:center;gap:10px;border-bottom:1.5px solid var(--sage);padding-bottom:14px;}
.search-input-row svg{width:20px;height:20px;color:var(--pine);flex-shrink:0;}
#search-input{flex:1;border:none;background:transparent;font-size:16px;font-family:'Noto Sans TC',sans-serif;color:var(--ink);outline:none;}
.search-close{background:none;border:none;font-size:16px;color:var(--taupe);cursor:pointer;padding:4px;}
.search-hint{padding:26px 4px;color:var(--taupe);font-size:13.5px;text-align:center;}
.search-results{overflow-y:auto;margin-top:4px;}
.search-result{
  display:block;padding:14px 8px;border-bottom:1px dashed var(--sage);
  transition:background .15s;border-radius:10px;
}
.search-result:hover{background:rgba(31,70,64,0.06);}
.search-result h4{font-size:15.5px;margin:6px 0 4px;color:var(--pine);font-family:'LXGW WenKai TC',serif;}
.search-result p{font-size:12.5px;color:var(--ink);opacity:.7;}

/* ---------- Waline comments ---------- */
:root{
  --waline-theme-color:var(--pine);
  --waline-active-color:var(--taupe);
  --waline-color:var(--ink);
  --waline-bg-color:var(--paper);
  --waline-bg-color-light:var(--cream);
  --waline-bg-color-hover:rgba(31,70,64,0.06);
  --waline-border-color:var(--sage);
  --waline-border:1.5px dashed var(--sage);
  --waline-badge-color:var(--gold);
  --waline-font-size:15px;
}
#waline{font-family:'Noto Sans TC',sans-serif;}
.comments-section{
  margin-top:48px;padding-top:32px;
  border-top:2px dashed var(--sage);
}
.comments-title{
  font-family:'LXGW WenKai TC',serif;
  font-size:18px;color:var(--pine);margin-bottom:18px;
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .main-nav{
    position:absolute;
    top:100%;left:0;right:0;
    background:var(--paper);
    border-bottom:2px dashed var(--pine);
    display:none;
    padding:12px 5vw 20px;
  }
  .main-nav.is-open{display:block;}
  .main-nav ul{flex-direction:column;}
  .nav-toggle{display:flex;}
  .hero h1{font-size:30px;}
}