:root{
  --bg:#FCFAFC; --surface:#FFFFFF; --ink:#221E29; --muted:#6F687A;
  --line:#EBE5EE; --acc:#7C6BAF; --acc2:#C9679E; --acc-soft:#F1EBF7;
  --sans:"Quicksand","PingFang TC","Noto Sans TC",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --maxw:76rem; --artw:46rem;
}
[data-theme="dark"]{
  --bg:#171420; --surface:#211D2B; --ink:#EDE9F3; --muted:#9D95AA;
  --line:#332D40; --acc:#A794D9; --acc2:#DE8FB9; --acc-soft:#2A2438;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.75;
  -webkit-font-smoothing:antialiased;transition:background .25s,color .25s}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem}

/* top utility bar */
.topbar{border-bottom:1px solid var(--line);font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:2.6rem}
.topbar .sub-cta{color:var(--acc);font-weight:700;letter-spacing:.02em}
.theme-btn{background:none;border:1px solid var(--line);border-radius:999px;color:var(--muted);
  padding:.15rem .7rem;cursor:pointer;font-size:.78rem}

/* header */
.masthead{padding:2rem 0 1.3rem;text-align:center}
.logo-img{height:3.8rem;width:auto;display:block;margin:0 auto}
[data-theme="dark"] .logo-img{filter:brightness(2.1) saturate(.72)}
.masthead .tag{color:var(--muted);font-size:.85rem;margin-top:.55rem;letter-spacing:.06em}

/* grouped dropdown nav (desktop) */
.gnav{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gnav .in{max-width:var(--maxw);margin:0 auto;padding:0 1.25rem;display:flex;justify-content:center;gap:.6rem}
.gitem{position:relative;padding:.72rem 1.2rem;font-weight:800;font-size:.95rem;cursor:pointer;letter-spacing:.14em}
.gitem>span{color:var(--ink)}
.gitem:hover>span,.gitem:focus-within>span{color:var(--acc)}
.gpanel{position:absolute;left:50%;transform:translateX(-50%);top:100%;background:var(--surface);
  border:1px solid var(--line);border-radius:.9rem;box-shadow:0 16px 38px rgba(40,25,70,.14);
  padding:.7rem;min-width:15.5rem;display:none;z-index:60}
.gitem:hover .gpanel,.gitem:focus-within .gpanel{display:block}
.gpanel a{display:flex;justify-content:space-between;gap:1rem;padding:.5rem .85rem;border-radius:.55rem;
  font-size:.85rem;font-weight:600;color:var(--ink);letter-spacing:0}
.gpanel a b{color:var(--muted);font-weight:600}
.gpanel a:hover{background:var(--acc-soft);color:var(--acc)}
@media(max-width:999px){.gnav{display:none}}
@media(min-width:1000px){.catnav{display:none}}
.catnav{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.catnav .in{display:flex;gap:.4rem;overflow-x:auto;padding:.55rem 1.25rem;max-width:var(--maxw);
  margin:0 auto;scrollbar-width:none}
.catnav .in::-webkit-scrollbar{display:none}
.catnav a{flex:0 0 auto;font-size:.82rem;color:var(--muted);padding:.25rem .75rem;border-radius:999px;
  border:1px solid transparent;white-space:nowrap}
.catnav a:hover,.catnav a.on{color:var(--acc);border-color:var(--line);background:var(--surface)}

/* pills */
.pill{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.04em;
  padding:.24rem .7rem;border-radius:.45rem}
.pill-lav{background:#EFE9F8;color:#6A57A5}.pill-rose{background:#FAE8F1;color:#B14E86}
.pill-sage{background:#E9F2E8;color:#5A7D57}.pill-sky{background:#E7F0F7;color:#4A7396}
.pill-sand{background:#F7F0E4;color:#8C6F3F}.pill-plum{background:#F3E8F3;color:#8A4E8A}
[data-theme="dark"] .pill{filter:brightness(.85) saturate(1.1)}

/* hero */
.hero{margin:2rem 0 0}
.hero-card{position:relative}
.hero-card .img{aspect-ratio:21/10;overflow:hidden;border-radius:1rem}
.hero-card .img img{width:100%;height:100%;object-fit:cover}
.hero-card .panel{background:var(--surface);border:1px solid var(--line);border-radius:.9rem;
  padding:1.6rem 1.8rem;max-width:44rem;margin:-4rem auto 0;position:relative;box-shadow:0 18px 40px rgba(40,25,70,.08)}
.hero-card h2{font-size:1.55rem;line-height:1.45;font-weight:800;margin:.6rem 0 .4rem}
.hero-card .meta,.card .meta{color:var(--muted);font-size:.8rem}

/* grid */
.section-h{display:flex;align-items:baseline;justify-content:space-between;margin:3rem 0 1.2rem}
.section-h h3{font-size:1.15rem;font-weight:800;letter-spacing:.02em}
.section-h a{color:var(--acc);font-size:.82rem;font-weight:700}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6rem}
@media(max-width:900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.grid{grid-template-columns:1fr}}
.card .thumb{aspect-ratio:16/10;overflow:hidden;border-radius:.8rem;background:var(--acc-soft)}
.card .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.card:hover .thumb img{transform:scale(1.04)}
.card h4{font-size:1.02rem;line-height:1.55;font-weight:700;margin:.7rem 0 .35rem}
.card:hover h4{color:var(--acc)}
.card .pill{margin-top:.8rem}

/* article — typography matched to hkdaijoubu.com original (15px/30px body, Quicksand 500 heads) */
.post-head{max-width:var(--artw);margin:3rem auto 0;text-align:center;padding:0 1.25rem}
.post-head h1{font-size:40px;line-height:53px;font-weight:500;margin:.9rem 0 .8rem}
@media(max-width:600px){.post-head h1{font-size:28px;line-height:40px}}
.post-head .meta{color:var(--muted);font-size:.85rem}
.post-head .meta b{color:var(--ink);font-weight:700}
.post-feat{max-width:56rem;margin:2.2rem auto 0;padding:0 1.25rem}
.post-feat img{border-radius:1rem;width:100%}
.article{max-width:var(--artw);margin:2.5rem auto 0;padding:0 1.25rem;
  font-family:var(--sans);font-size:15px;line-height:30px;font-weight:400;letter-spacing:0}
.article p{margin:0 0 1.6em}
.article h2,.article h3{font-weight:500;line-height:1.45;margin:2.2em 0 .8em}
.article h2{font-size:24px}.article h3{font-size:20px}
.article img{border-radius:.7rem;margin:1.8em auto}
.article blockquote{border-left:3px solid var(--acc);padding:.2em 0 .2em 1.2em;color:var(--muted);
  margin:1.8em 0;font-size:21px;line-height:30px}
.article a{color:var(--acc);border-bottom:1px solid var(--acc-soft)}
.article figure{margin:1.8em 0}.article figcaption{font-size:.8rem;color:var(--muted);text-align:center;margin-top:.6em}
.article ul,.article ol{padding-left:1.4em;margin-bottom:1.6em}
.article iframe{max-width:100%}

/* author bio box (original .author-bio style, Daijoubu gradient) */
.author-bio{max-width:var(--artw);margin:3rem auto 0;padding:1.6rem 1.8rem;border-radius:1rem;
  display:flex;gap:1.3rem;align-items:center;
  background:linear-gradient(135deg,#E7F0F8 0%,#F3EAF7 55%,#FBE7F1 100%)}
[data-theme="dark"] .author-bio{background:linear-gradient(135deg,#232A3A 0%,#2C2438 55%,#3A2433 100%)}
.author-bio .bavatar{flex:0 0 auto;width:5.4rem;height:5.4rem;border-radius:50%;overflow:hidden;background:var(--surface)}
.author-bio .bavatar img{width:100%;height:100%;object-fit:cover}
.author-bio .bavatar .init{display:flex;width:100%;height:100%;align-items:center;justify-content:center;
  font-weight:700;font-size:1.6rem;color:var(--acc)}
.author-bio h3{font-size:1.15rem;font-weight:700;margin-bottom:.3rem}
.author-bio h3 a:hover{color:var(--acc)}
.author-bio .bio{color:var(--muted);font-size:.88rem;line-height:1.8;white-space:pre-line}

/* related / same-tag sections */
.postrel{max-width:56rem;margin:3rem auto 0;padding:0 1.25rem}
.postrel h4{font-family:var(--sans);font-size:1.15rem;font-weight:700;margin-bottom:1.2rem}
.postrel .grid{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.postrel .grid{grid-template-columns:repeat(2,1fr)}}

/* author page header */
.auth-head{max-width:var(--artw);margin:3rem auto 0;text-align:center;padding:0 1.25rem}
.auth-head .bavatar{width:7rem;height:7rem;border-radius:50%;overflow:hidden;margin:0 auto 1rem;background:var(--acc-soft)}
.auth-head .bavatar img{width:100%;height:100%;object-fit:cover}
.auth-head .bavatar .init{display:flex;width:100%;height:100%;align-items:center;justify-content:center;font-weight:700;font-size:2.2rem;color:var(--acc)}
.auth-head h1{font-size:1.7rem;font-weight:700}
.auth-head .cnt{color:var(--muted);font-size:.85rem;margin-top:.3rem}
.auth-head .bio{color:var(--muted);font-size:.9rem;line-height:1.9;margin-top:.8rem;white-space:pre-line}
.authlist .av{overflow:hidden}
.authlist .av img{width:100%;height:100%;object-fit:cover}

/* tag cloud */
.tagcloud{display:flex;flex-wrap:wrap;gap:.5rem .85rem;align-items:baseline}
.tagcloud a{color:var(--muted);line-height:1.5}
.tagcloud a:hover{color:var(--acc)}

/* pagination */
.pager{display:flex;justify-content:space-between;align-items:center;margin:2.6rem 0 0;
  padding-top:1.4rem;border-top:1px solid var(--line);font-size:.9rem}
.pager a{color:var(--acc);font-weight:700}
.pager a:hover{color:var(--acc2)}
.pager .pinfo{color:var(--muted);font-size:.8rem}

/* home two-column + sidebar widgets */
.home-cols{max-width:var(--maxw);margin:3rem auto 0;padding:0 1.25rem;
  display:grid;grid-template-columns:minmax(0,1fr) 21rem;gap:3.2rem;align-items:start}
@media(max-width:1000px){.home-cols{grid-template-columns:1fr}}
.home-cols .grid{grid-template-columns:repeat(2,1fr)}
@media(max-width:600px){.home-cols .grid{grid-template-columns:1fr}}
.home-cols .section-h{margin-top:0}
aside .widget{border:1px solid var(--line);background:var(--surface);border-radius:1rem;
  padding:1.4rem 1.5rem;margin-bottom:1.6rem}
aside .widget>h5{font-size:.95rem;font-weight:800;letter-spacing:.04em;margin-bottom:1rem;
  display:flex;align-items:center;gap:.55rem}
aside .widget>h5::before{content:"";width:.55rem;height:.55rem;border-radius:50%;background:var(--acc)}
/* tabbed circular top-posts widget (original-site style) */
.ptabs{display:flex;gap:1.3rem;margin-bottom:.9rem}
.ptabs button{background:none;border:none;font-family:var(--sans);font-size:1.02rem;font-weight:800;
  color:var(--muted);cursor:pointer;padding:0 0 .35rem;border-bottom:2px solid transparent;letter-spacing:.02em}
.ptabs button.on{color:var(--ink);border-color:var(--acc)}
.hide{display:none}
.circlist{list-style:none}
.circlist li{display:flex;align-items:center;gap:1rem;padding:.72rem 0}
.circlist .no{flex:0 0 1.35rem;font-weight:700;font-size:.98rem;color:var(--ink);
  border-bottom:2px solid var(--ink);padding-bottom:.32rem;line-height:1}
.circlist .cthumb{flex:0 0 auto}
.circlist .cthumb img{width:4.5rem;height:4.5rem;border-radius:50%;object-fit:cover}
.circlist .cthumb .ph{display:block;width:4.5rem;height:4.5rem;border-radius:50%;background:var(--acc-soft)}
.circlist .ct a{font-size:.89rem;font-weight:700;line-height:1.55;display:block}
.circlist .ct a:hover{color:var(--acc)}
.circlist .ct .v{display:block;color:var(--muted);font-size:.74rem;margin-top:.28rem}
.chiplist{display:flex;flex-wrap:wrap;gap:.5rem}
.chiplist a{font-size:.78rem;border:1px solid var(--line);border-radius:999px;padding:.3rem .8rem;color:var(--muted)}
.chiplist a b{color:var(--acc);font-weight:700;margin-left:.3rem}
.chiplist a:hover{color:var(--acc);border-color:var(--acc)}
.authlist{list-style:none}
.authlist li{display:flex;align-items:center;gap:.8rem;padding:.42rem 0}
.authlist .av{width:2.1rem;height:2.1rem;border-radius:50%;background:var(--acc-soft);color:var(--acc);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem;flex:0 0 auto}
.authlist a{font-size:.85rem;font-weight:700}
.authlist a:hover{color:var(--acc)}
.authlist .n{color:var(--muted);font-size:.72rem;margin-left:auto}

/* subscribe */
.subscribe{max-width:var(--artw);margin:3.5rem auto;padding:2rem 1.8rem;background:var(--acc-soft);
  border-radius:1rem;text-align:center}
.subscribe h5{font-size:1.05rem;font-weight:800;margin-bottom:.35rem}
.subscribe p{color:var(--muted);font-size:.85rem;margin-bottom:1.1rem}
.subscribe form{display:flex;gap:.6rem;max-width:26rem;margin:0 auto}
.subscribe input{flex:1;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  border-radius:.6rem;padding:.6rem .9rem;font-size:.9rem;font-family:var(--sans)}
.subscribe button{background:var(--acc);color:#fff;border:none;border-radius:.6rem;
  padding:.6rem 1.2rem;font-weight:700;font-size:.9rem;cursor:pointer}
.subscribe button:hover{background:var(--acc2)}
.sub-note{font-size:.75rem;color:var(--muted);margin-top:.8rem}

/* prev/next + footer */
.pn{max-width:var(--artw);margin:3rem auto 0;padding:0 1.25rem;display:flex;gap:1rem;justify-content:space-between;font-size:.88rem}
.pn a{color:var(--acc);font-weight:700;max-width:48%}
.pn span{display:block;color:var(--muted);font-weight:400;font-size:.75rem;margin-bottom:.2rem}
footer{border-top:1px solid var(--line);margin-top:4rem;padding:2.2rem 0 3rem;color:var(--muted);font-size:.8rem;text-align:center}
footer .fx{color:var(--acc);font-weight:700}
.cat-head{margin:3rem 0 0;text-align:center}
.cat-head h1{font-size:1.7rem;font-weight:800}
.cat-head p{color:var(--muted);font-size:.85rem;margin-top:.4rem}
.list{max-width:var(--maxw);margin:2.5rem auto 0;padding:0 1.25rem}