/* ===================== 杂志风格 · 设计变量 ===================== */
:root{
  --bg:#faf8f5; --bg-c:#fffdfa; --card:rgba(255,255,255,.78);
  --ink:#1c1a19; --ink-soft:#5f5954; --ink-faint:#9a918a;
  --line:rgba(28,26,25,.10); --line-soft:rgba(28,26,25,.06);
  --accent:#b4472f; --accent-2:#d98b4a; --accent-soft:rgba(180,71,47,.10);
  --shadow:0 18px 44px rgba(60,40,25,.09); --shadow-sm:0 6px 18px rgba(60,40,25,.06);
  --r:16px; --r-lg:24px; --ease:cubic-bezier(.2,.8,.25,1);
  --tag-bg:rgba(28,26,25,.05);
}
html[data-theme="dark"]{
  --bg:#131314; --bg-c:#1a1a1c; --card:rgba(38,38,41,.72);
  --ink:#f2eee9; --ink-soft:#bdb5ad; --ink-faint:#7d7670;
  --line:rgba(255,255,255,.11); --line-soft:rgba(255,255,255,.06);
  --accent:#e8805f; --accent-2:#e9a96a; --accent-soft:rgba(232,128,95,.14);
  --shadow:0 18px 44px rgba(0,0,0,.42); --shadow-sm:0 6px 18px rgba(0,0,0,.3);
  --tag-bg:rgba(255,255,255,.07);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.bg-glow{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(700px 420px at 12% -8%,var(--accent-soft),transparent 70%),
    radial-gradient(620px 380px at 92% 8%,rgba(217,139,74,.10),transparent 70%);
}
.wrap{width:min(1160px,92vw);margin:0 auto;position:relative;z-index:1}

/* ===================== 顶栏 ===================== */
.site-head{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);
}
.head-inner{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:17px;letter-spacing:.5px}
.brand-mark{
  width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--accent),var(--accent-2));font-size:13px;
  transform:rotate(-8deg);box-shadow:var(--shadow-sm);
}
.nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.nav a{
  padding:7px 15px;border-radius:999px;font-size:14px;color:var(--ink-soft);
  transition:background .2s,color .2s;
}
.nav a:hover{background:var(--tag-bg);color:var(--ink)}
.nav a.on{background:var(--ink);color:var(--bg)}
.nav-admin{border:1px solid var(--line)}
.icon-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--line);
  background:var(--card);cursor:pointer;font-size:16px;color:var(--ink);flex:none;
  transition:transform .2s var(--ease);
}
.icon-btn:hover{transform:rotate(20deg)}

/* ===================== Hero ===================== */
.hero{padding:74px 0 42px}
.hero-kicker{
  font-size:12px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--accent);font-weight:700;margin:0 0 18px;
}
.hero-title{
  font-size:clamp(46px,8vw,92px);line-height:1.04;margin:0;
  font-weight:800;letter-spacing:-.03em;
}
.hero-title span{
  background:linear-gradient(100deg,var(--accent),var(--accent-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-sub{font-size:17px;color:var(--ink-soft);margin:22px 0 0;max-width:560px}
.hero-meta{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:13px;color:var(--ink-faint)}
.hero-meta i{width:4px;height:4px;border-radius:50%;background:var(--accent)}

/* ===================== 工具栏 ===================== */
.toolbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 0 26px}
.tool-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tool-label{font-size:12px;color:var(--ink-faint);letter-spacing:.1em}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
  padding:6px 14px;border-radius:999px;font-size:13px;cursor:pointer;
  transition:all .2s var(--ease);font-family:inherit;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.search{
  margin-left:auto;width:230px;max-width:100%;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  padding:9px 16px;border-radius:999px;font-size:13px;outline:none;font-family:inherit;
}
.search:focus{border-color:var(--accent)}

/* ===================== 杂志网格 ===================== */
.mag-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding-bottom:56px;
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);backdrop-filter:blur(10px);
  display:flex;flex-direction:column;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
  animation:cardIn .5s var(--ease) both;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-big{grid-column:span 2;grid-row:span 2}
.card-cover{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:linear-gradient(135deg,var(--accent-soft),rgba(217,139,74,.18));
}
.card-big .card-cover{aspect-ratio:16/9}
.card-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease)}
.card:hover .card-cover img{transform:scale(1.05)}
.cover-ph{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:46px;color:var(--accent);opacity:.32;font-weight:800;
}
.card-cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.22));
}
.card-tag{
  position:absolute;left:14px;top:14px;z-index:2;
  background:rgba(255,255,255,.9);color:#1c1a19;
  font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:5px 11px;border-radius:999px;
}
.card-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.card-date{font-size:12px;color:var(--ink-faint);letter-spacing:.04em}
.card-title{
  font-size:20px;font-weight:750;line-height:1.35;margin:10px 0 8px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.card-big .card-title{font-size:28px;-webkit-line-clamp:2}
.card-sum{
  font-size:13.5px;color:var(--ink-soft);margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.card-more{margin-top:auto;padding-top:16px;font-size:13px;color:var(--accent);font-weight:600}
@keyframes cardIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

.loading,.empty{text-align:center;padding:80px 0;color:var(--ink-faint)}
.empty-ico{font-size:40px;color:var(--accent);opacity:.5}
.empty h3{color:var(--ink);margin:12px 0 6px}
.empty a{color:var(--accent);text-decoration:underline}
.spin{display:inline-block;width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;vertical-align:middle;margin-right:8px}
@keyframes spin{to{transform:rotate(360deg)}}
.pager{display:flex;align-items:center;justify-content:center;gap:20px;padding:0 0 70px;color:var(--ink-faint);font-size:13px}
/* 作者样式的 display:flex 会盖掉浏览器默认的 [hidden]，必须显式关掉 */
[hidden]{display:none!important}
.btn{
  font-family:inherit;font-size:13px;padding:8px 18px;border-radius:999px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink);transition:all .2s;
}
.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.primary{background:linear-gradient(120deg,var(--accent),var(--accent-2));color:#fff;border:none}
.btn.ghost{background:transparent}

/* ===================== 文章页 ===================== */
.article{width:min(780px,92vw);margin:0 auto;position:relative;z-index:1;padding:56px 0 80px}
.back-link{font-size:13px;color:var(--ink-faint);display:inline-block;margin-bottom:28px}
.back-link:hover{color:var(--accent)}
.art-cover{
  width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:var(--shadow);margin-bottom:34px;display:block;
}
.art-cover-ph{
  width:100%;aspect-ratio:16/8;border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--accent-soft),rgba(217,139,74,.2));
  display:grid;place-items:center;font-size:70px;color:var(--accent);opacity:.5;margin-bottom:34px;
}
.art-meta{display:flex;gap:12px;align-items:center;font-size:13px;color:var(--ink-faint);flex-wrap:wrap}
.art-title{font-size:clamp(34px,5.5vw,52px);line-height:1.18;margin:16px 0 12px;font-weight:800;letter-spacing:-.02em}
.art-sum{font-size:17px;color:var(--ink-soft);margin:0 0 30px}
.md-body{font-size:16.5px;line-height:1.9;color:var(--ink)}
.md-body h2{font-size:26px;margin:38px 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.md-body h3{font-size:20px;margin:28px 0 10px}
.md-body p{margin:0 0 18px}
.md-body ul,.md-body ol{padding-left:24px;margin:0 0 18px}
.md-body li{margin:6px 0}
.md-body blockquote{
  margin:22px 0;padding:12px 20px;border-left:3px solid var(--accent);
  background:var(--accent-soft);border-radius:0 10px 10px 0;color:var(--ink-soft);
}
.md-body code{background:var(--tag-bg);padding:2px 7px;border-radius:6px;font-size:.9em}
.md-body pre{background:#1c1a19;color:#f2eee9;padding:18px;border-radius:12px;overflow-x:auto;font-size:13.5px;line-height:1.7}
.md-body pre code{background:none;padding:0;color:inherit}
.md-body img{max-width:100%;border-radius:12px;display:block;margin:20px auto}
.md-body a{color:var(--accent);text-decoration:underline}
.md-body hr{border:none;border-top:1px solid var(--line);margin:34px 0}

.comments{margin-top:64px;border-top:1px solid var(--line);padding-top:34px}
.comments h2{font-size:22px;margin:0 0 6px}
.comments .hint{font-size:13px;color:var(--ink-faint);margin:0 0 22px}
.cmt{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:14px 18px;margin-bottom:12px}
.cmt-head{display:flex;gap:10px;align-items:center;font-size:13px;margin-bottom:6px}
.cmt-name{font-weight:700;color:var(--accent)}
.cmt-time{color:var(--ink-faint)}
.cmt-body{font-size:14.5px;white-space:pre-wrap;word-break:break-word}
.cmt-form{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.cmt-form input,.cmt-form textarea{
  font-family:inherit;font-size:14px;border:1px solid var(--line);background:var(--card);
  color:var(--ink);padding:11px 16px;border-radius:12px;outline:none;
}
.cmt-form input:focus,.cmt-form textarea:focus{border-color:var(--accent)}
.cmt-form textarea{min-height:90px;resize:vertical}
.cmt-form .row{display:flex;gap:12px}
.cmt-form .row input{flex:1}

/* ===================== 归档 / 关于 ===================== */
.page{width:min(820px,92vw);margin:0 auto;position:relative;z-index:1;padding:56px 0 90px}
.page h1{font-size:clamp(34px,5vw,50px);margin:0 0 8px;font-weight:800;letter-spacing:-.02em}
.page .lead{color:var(--ink-soft);margin:0 0 36px}
.yr{margin:34px 0 0}
.yr h2{font-size:22px;color:var(--accent);border-bottom:1px solid var(--line);padding-bottom:10px;margin:0 0 16px}
.yr-item{display:flex;gap:16px;align-items:baseline;padding:9px 0;border-bottom:1px dashed var(--line-soft);font-size:15px}
.yr-item time{color:var(--ink-faint);font-size:13px;flex:none;width:74px}
.yr-item a:hover{color:var(--accent)}
.prose{font-size:16px;line-height:1.9;color:var(--ink-soft)}
.prose p{margin:0 0 18px}

/* ===================== 后台 ===================== */
.admin{width:min(1080px,94vw);margin:0 auto;position:relative;z-index:1;padding:48px 0 90px}
.gate{max-width:380px;margin:60px auto;text-align:center}
.gate h1{font-size:26px;margin:0 0 8px}
.gate p{color:var(--ink-soft);font-size:14px;margin:0 0 22px}
.gate input{
  width:100%;font-family:inherit;font-size:15px;padding:12px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);outline:none;margin-bottom:12px;
}
.admin-panel{display:none}
.admin-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.admin-bar h1{font-size:26px;margin:0 auto 0 0}
.tabs{display:flex;gap:6px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.tab{
  font-family:inherit;font-size:14px;padding:10px 18px;border:none;background:none;
  color:var(--ink-soft);cursor:pointer;border-bottom:2px solid transparent;
}
.tab.on{color:var(--accent);border-bottom-color:var(--accent);font-weight:700}
.editor{display:grid;grid-template-columns:1fr 300px;gap:20px}
@media(max-width:860px){.editor{grid-template-columns:1fr}}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;color:var(--ink-faint);margin-bottom:6px;letter-spacing:.05em}
.field input,.field textarea,.field select{
  width:100%;font-family:inherit;font-size:14px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);padding:10px 14px;border-radius:10px;outline:none;
}
.field textarea{min-height:340px;resize:vertical;line-height:1.7}
.field:focus-within label{color:var(--accent)}
.side{display:flex;flex-direction:column;gap:14px}
.side-card{border:1px solid var(--line);background:var(--card);border-radius:14px;padding:16px}
.side-card h3{font-size:13px;margin:0 0 12px;color:var(--ink-faint);letter-spacing:.08em}
.cover-prev{
  width:100%;aspect-ratio:16/10;border-radius:10px;margin-bottom:10px;
  background:linear-gradient(135deg,var(--accent-soft),rgba(217,139,74,.18));
  display:grid;place-items:center;color:var(--accent);font-size:30px;overflow:hidden;
}
.cover-prev img{width:100%;height:100%;object-fit:cover}
.post-row{
  display:flex;gap:12px;align-items:center;padding:13px 0;border-bottom:1px dashed var(--line-soft);font-size:14px;
}
.post-row .st{font-size:11px;padding:3px 9px;border-radius:999px;background:var(--tag-bg);color:var(--ink-faint)}
.post-row .st.pub{background:var(--accent-soft);color:var(--accent)}
.post-row .t{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mini{
  font-family:inherit;font-size:12px;padding:5px 11px;border-radius:8px;cursor:pointer;
  border:1px solid var(--line);background:var(--card);color:var(--ink-soft);
}
.mini:hover{border-color:var(--accent);color:var(--accent)}
.toast{
  position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);padding:11px 22px;border-radius:999px;
  font-size:13.5px;opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:99;
}
.toast.show{opacity:1;transform:translateX(-50%)}

.site-foot{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;
  padding:30px 0 46px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--ink-faint);
}
.foot-dot{color:var(--accent)}

@media(max-width:900px){
  .mag-grid{grid-template-columns:repeat(2,1fr)}
  .card-big{grid-column:span 2;grid-row:auto}
}
@media(max-width:620px){
  .mag-grid{grid-template-columns:1fr;gap:16px}
  .card-big{grid-column:auto}
  .hero{padding:48px 0 28px}
  .nav{gap:0}
  .nav a{padding:6px 9px;font-size:12.5px}
  .search{width:100%;margin-left:0}
  .toolbar{gap:12px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}