:root{
  --ivory:#f7f3ea;
  --light:#e8e3d8;
  --ink:#1f1f1a;
  --cyan:#d9e9e8;
  --brown:#b89b76;
  --line:#d6cebf;
  --panel:rgba(247,243,234,.86);
}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--ink);
  font-family:"Noto Serif SC",serif;
  background:linear-gradient(180deg,#fbf8f2, var(--ivory));
}
.rice-paper{position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.55;
  background-image:radial-gradient(#0000000f 1px,transparent 1.4px),radial-gradient(#00000008 1px,transparent 1.4px);
  background-size:3px 3px,5px 5px;background-position:0 0,10px 8px;
}
.rice-paper::before{content:"";position:absolute;inset:0;opacity:.18;
  background:radial-gradient(1200px 380px at 70% 0%, #c4d8d6, transparent 60%),
             radial-gradient(1000px 360px at 10% 0%, #ccb59655, transparent 60%);
}
.topbar{
  max-width:1240px;margin:0 auto;padding:1.2rem 1.3rem;
  display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);
}
.brand h1{font-size:1.45rem;margin:0;font-weight:600;letter-spacing:.06em}
.brand p{margin:.18rem 0 0;color:#585648;font-size:.9rem}
.nav-links{display:flex;align-items:center;gap:1rem}
.nav-links a{color:#39382f;text-decoration:none;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:#444;transition:.2s}
.nav-links a:hover::after{width:100%}
.ink-btn{border:1px solid var(--line);background:transparent;color:#2f2d27;border-radius:999px;padding:.38rem .8rem;cursor:pointer}

.page{max-width:1240px;margin:1.1rem auto 0;padding:0 1.1rem;display:grid;grid-template-columns:220px 1fr 260px;gap:1.1rem}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:2px;box-shadow:0 8px 26px #0000000a}
.left-col,.right-col{padding:1rem;height:fit-content;position:sticky;top:1rem}
.left-col h3,.right-col h3{font-weight:600;margin:.1rem 0 .7rem;font-size:1rem}
.left-col input{width:100%;padding:.55rem .6rem;border:1px solid var(--line);background:#fffefc;border-radius:2px;color:var(--ink)}
.tags,.post-tags{display:flex;flex-wrap:wrap;gap:.45rem;margin:.7rem 0}
.tag{border:1px solid var(--line);padding:.18rem .5rem;border-radius:999px;font-size:.83rem;background:#f9f6ef;cursor:pointer}
.tag.active{background:var(--cyan)}

.hero{padding:1.35rem;min-height:260px;position:relative;overflow:hidden;margin-bottom:1rem}
.hero::before{content:"";position:absolute;inset:0;opacity:.17;
  background:radial-gradient(380px 140px at 80% 20%, #7ea4a066, transparent 75%),
             radial-gradient(300px 120px at 20% 80%, #a07f5c44, transparent 75%);
}
.hero::after{content:"";position:absolute;left:-80px;top:-70px;width:280px;height:220px;opacity:.16;border-radius:50%;
  background:radial-gradient(circle,#b9ccc933 0,transparent 65%)}
.cloud{position:absolute;height:42px;background:linear-gradient(90deg,#dbe9e8aa,transparent);filter:blur(1px);opacity:.45;border-radius:999px;animation:flow 18s linear infinite}
.cloud-a{width:220px;top:34px;left:-40px}
.cloud-b{width:180px;top:88px;right:-30px;animation-duration:22s}
@keyframes flow{to{transform:translateX(40px)}}
.hero-mark{font-family:"Zhi Mang Xing",cursive;font-size:2rem;margin:0;color:#5f6f6d;position:relative;z-index:2}
.hero h2{margin:.3rem 0 .5rem;font-size:2rem;font-weight:600;position:relative;z-index:2}
.hero p{max-width:620px;line-height:1.9;color:#4a4a40;position:relative;z-index:2}
.ink-illustration{margin-top:.9rem;border:1px solid #d4cbbb;background:#f7f3eb;padding:.35rem;position:relative;z-index:2}
.ink-illustration img{width:100%;display:block;filter:saturate(.88) contrast(1.02)}

.ad-slot{padding:.75rem 1rem;margin:.8rem 0}.ad-slot p{margin:0 0 .25rem;color:#6c675a;font-size:.82rem}.ad-slot a{color:#2f3130;text-decoration:none}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.85rem}
.card{padding:.95rem;transition:.18s}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 22px #00000010}
.card h3{margin:.45rem 0;font-size:1.22rem;font-weight:600;line-height:1.45}
.meta{display:flex;justify-content:space-between;font-size:.79rem;color:#625f53}
.excerpt{font-size:.94rem;line-height:1.8;color:#414037;min-height:66px}
.readmore{margin-top:.35rem;border:1px solid var(--brown);background:#f5f0e7;color:#4b4131;padding:.42rem .74rem;border-radius:2px;cursor:pointer}

.toc{margin:0;padding-left:1rem}.toc li{margin:.45rem 0}.toc a{color:#37372f;text-decoration:none;border-bottom:1px dashed #b8ad99}
.footer{max-width:1240px;margin:1.3rem auto;padding:1rem 1.2rem;border-top:1px solid var(--line);text-align:center;color:#5f5b4f}

body.night{--ivory:#13120f;--ink:#ebe6da;--line:#494336;--panel:rgba(30,28,23,.88);background:linear-gradient(180deg,#151410,#0f0f0d)}
body.night .rice-paper{opacity:.18}
body.night .nav-links a,body.night .ink-btn,body.night .readmore,body.night .ad-slot a{color:#e7dfcf}
body.night .left-col input{background:#191714;color:#eee8dc}
body.night .tag{background:#1b1813}

@media (max-width:1000px){.page{grid-template-columns:1fr}.left-col,.right-col{position:static}.hero h2{font-size:1.5rem}}