/* ============================================================
   daniureader · 个人站
   现代杂志风：宽版栅格 / 大字号衬线标题 / 发丝线分隔 / 双主题
   ============================================================ */

:root{
  --serif:"Source Han Serif SC","Noto Serif CJK SC","Songti SC","STSong","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;

  --paper:#FCFBF8;
  --paper-2:#F3F1EB;
  --ink:#14130F;
  --ink-2:#4A473F;
  --ink-3:#726D62;
  --rule:#DEDAD0;
  --rule-soft:#EBE7DE;
  --accent:#B23A22;
  --accent-soft:rgba(178,58,34,.09);

  --maxw:1180px;
  --readw:680px;
  --gutter:clamp(18px,4vw,44px);
  --fs-display:clamp(40px,7.2vw,76px);
  --fs-h1:clamp(30px,4.6vw,48px);
  --fs-entry:clamp(19px,2.1vw,25px);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111110;
    --paper-2:#1A1917;
    --ink:#EDE9DF;
    --ink-2:#B3ADA0;
    --ink-3:#8B8578;
    --rule:#2E2B26;
    --rule-soft:#232019;
    --accent:#E58267;
    --accent-soft:rgba(229,130,103,.12);
  }
}

html[data-theme="dark"]{
  --paper:#111110;
  --paper-2:#1A1917;
  --ink:#EDE9DF;
  --ink-2:#B3ADA0;
  --ink-3:#8B8578;
  --rule:#2E2B26;
  --rule-soft:#232019;
  --accent:#E58267;
  --accent-soft:rgba(229,130,103,.12);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16.5px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body[data-menu="open"]{overflow:hidden}

::selection{background:var(--accent-soft);color:var(--ink)}

a{color:inherit}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

/* ---------- 刊头 ---------- */

.masthead{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--paper);
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
  backdrop-filter:blur(12px) saturate(1.2);
  border-bottom:1px solid var(--rule);
}

.masthead-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
  height:70px;
  display:flex;
  align-items:center;
  gap:22px;
}

.wordmark{
  font-family:var(--serif);
  font-size:22px;
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  color:var(--ink);
  white-space:nowrap;
  line-height:1;
  padding-bottom:2px;
}
.wordmark .dot{color:var(--accent)}

.masthead-meta{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--ink-3);
  text-transform:uppercase;
  white-space:nowrap;
  margin-right:auto;
}

.nav{
  display:flex;
  align-items:center;
  gap:26px;
}

.nav a{
  position:relative;
  font-size:14px;
  color:var(--ink-2);
  text-decoration:none;
  white-space:nowrap;
  padding:4px 0;
  transition:color .16s ease;
}
.nav a:hover{color:var(--ink)}
.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:2px;
  background:var(--accent);
}
.nav a .num{display:none}

.tools{display:flex;align-items:center;gap:10px;margin-left:8px}

.theme-toggle{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px;height:32px;
  padding:0;
  border:1px solid var(--rule);
  border-radius:50%;
  background:transparent;
  color:var(--ink-2);
  cursor:pointer;
  transition:color .16s ease,border-color .16s ease;
}
.theme-toggle:hover{color:var(--ink);border-color:var(--ink-3)}
.theme-toggle svg{width:15px;height:15px;display:block}
.theme-toggle .icon-sun{display:none}
html[data-theme="dark"] .theme-toggle .icon-sun{display:block}
html[data-theme="dark"] .theme-toggle .icon-moon{display:none}
@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .theme-toggle .icon-sun{display:block}
  html:not([data-theme="light"]) .theme-toggle .icon-moon{display:none}
}

.menu-toggle{
  display:none;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 12px;
  border:1px solid var(--rule);
  border-radius:999px;
  background:transparent;
  color:var(--ink-2);
  font-family:var(--sans);
  font-size:12.5px;
  letter-spacing:.06em;
  cursor:pointer;
}
.menu-toggle .bars{display:block;width:13px;height:9px;position:relative}
.menu-toggle .bars i{
  position:absolute;left:0;width:100%;height:1.5px;background:currentColor;transition:transform .2s ease,opacity .2s ease;
}
.menu-toggle .bars i:nth-child(1){top:0}
.menu-toggle .bars i:nth-child(2){top:7px}
body[data-menu="open"] .menu-toggle .bars i:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
body[data-menu="open"] .menu-toggle .bars i:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

/* ---------- 通用容器 ---------- */

.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 var(--gutter);
}

.rule{border:0;border-top:1px solid var(--rule);margin:0}

/* ---------- 首页 hero ---------- */

.hero{padding:clamp(44px,6.4vw,92px) 0 clamp(34px,4.6vw,58px)}

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  gap:clamp(26px,5vw,76px);
  align-items:end;
}

.hero h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--fs-display);
  line-height:1.16;
  letter-spacing:-.012em;
  margin:0;
}
.hero h1 .thin{
  font-weight:400;
  color:var(--ink-2);
}
.hero h1 .accent{color:var(--accent)}

.hero-lede{
  margin:28px 0 0;
  max-width:31em;
  font-size:16.5px;
  line-height:1.95;
  color:var(--ink-2);
}

.hero-sign{
  margin:26px 0 0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--ink-3);
  text-transform:uppercase;
}

/* NOW 卡 */

.now{
  border-top:2px solid var(--ink);
  padding-top:14px;
}
.now h2{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.18em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin:0 0 14px;
}
.now dl{margin:0;display:grid;gap:11px}
.now .item{display:grid;grid-template-columns:52px 1fr;gap:10px;align-items:baseline}
.now dt{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--ink-3);
}
.now dd{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink-2)}
.now dd a{text-decoration:none;border-bottom:1px solid var(--rule);transition:border-color .16s,color .16s}
.now dd a:hover{color:var(--accent);border-color:var(--accent)}

/* ---------- 四栏栅格 ---------- */

.columns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}

.col{
  background:var(--paper);
  padding:clamp(26px,2.6vw,38px) clamp(20px,2.4vw,34px) clamp(24px,2.4vw,32px);
  display:flex;
  flex-direction:column;
  min-height:100%;
}

.col-head{
  display:block;
  margin-bottom:6px;
}

.col-num{
  display:block;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--accent);
  margin-bottom:7px;
}

.col-name{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(24px,2.6vw,30px);
  line-height:1.35;
  margin:0;
  letter-spacing:-.005em;
}
.col-name a{text-decoration:none;transition:color .16s ease}
.col-name a:hover{color:var(--accent)}

.col-desc{
  margin:2px 0 20px;
  font-size:14px;
  line-height:1.8;
  color:var(--ink-3);
  max-width:26em;
}

.col-list{list-style:none;margin:0;padding:0;display:grid;gap:0;flex:1}
.col-list li{border-top:1px solid var(--rule-soft)}
.col-list li:first-child{border-top:0}
.col-list a{
  display:grid;
  grid-template-columns:58px 1fr;
  gap:12px;
  padding:13px 0;
  text-decoration:none;
  align-items:baseline;
}
.col-list time{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.04em;
  color:var(--ink-3);
  white-space:nowrap;
}
.col-list .t{
  font-size:15.5px;
  line-height:1.6;
  color:var(--ink);
  transition:color .16s ease;
}
.col-list a:hover .t{color:var(--accent)}

.col-foot{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.col-more{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--ink-2);
  text-decoration:none;
  text-transform:uppercase;
  transition:color .16s ease;
}
.col-more:hover{color:var(--accent)}
.col-count{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
}

/* ---------- 最近更新 ---------- */

.updates{padding:clamp(44px,5.4vw,76px) 0 clamp(36px,4vw,56px)}

.sec-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  border-bottom:2px solid var(--ink);
  padding-bottom:12px;
  margin-bottom:0;
}
.sec-head h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:20px;
  letter-spacing:.02em;
  margin:0;
}
.sec-head .side{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--ink-3);
  text-transform:uppercase;
}

.rows{display:block}
.row{
  display:grid;
  grid-template-columns:76px 1fr auto;
  gap:clamp(14px,2.2vw,30px);
  align-items:baseline;
  padding:clamp(18px,1.8vw,24px) 0;
  border-bottom:1px solid var(--rule-soft);
  text-decoration:none;
}
.row time{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.06em;
  color:var(--ink-3);
  white-space:nowrap;
}
.row .t{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--fs-entry);
  line-height:1.45;
  letter-spacing:-.004em;
  transition:color .16s ease;
}
.row:hover .t{color:var(--accent)}
.row .k{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.12em;
  color:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:2px 10px;
  white-space:nowrap;
}
.row:hover .k{border-color:var(--accent);color:var(--accent)}

/* ---------- 栏目页头 ---------- */

.page-head{padding:clamp(48px,6vw,84px) 0 clamp(28px,3.4vw,44px)}

.page-kicker{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.2em;
  color:var(--accent);
  text-transform:uppercase;
  margin:0 0 18px;
}

.page-head h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--fs-h1);
  line-height:1.22;
  letter-spacing:-.01em;
  margin:0;
}

.page-lede{
  margin:22px 0 0;
  max-width:36em;
  font-size:16px;
  line-height:1.95;
  color:var(--ink-2);
}

.page-meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-top:28px;
  padding-top:16px;
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--ink-3);
  text-transform:uppercase;
}

/* ---------- 列表 ---------- */

.entry-list{padding-bottom:clamp(40px,5vw,72px)}

.entry{
  display:block;
  padding:clamp(24px,2.6vw,34px) 0;
  border-top:1px solid var(--rule);
  text-decoration:none;
}
.entry:first-of-type{border-top:2px solid var(--ink)}

.entry-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
  text-transform:uppercase;
}

.entry h2,.entry h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--fs-entry);
  line-height:1.45;
  letter-spacing:-.004em;
  margin:12px 0 8px;
  transition:color .16s ease;
}
.entry:hover h2,.entry:hover h3{color:var(--accent)}

.entry p{
  margin:0;
  max-width:44em;
  font-size:14.8px;
  line-height:1.85;
  color:var(--ink-2);
}

.tag{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--ink-2);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:2px 9px;
  white-space:nowrap;
}

.empty{
  padding:34px 0 0;
  font-size:14.5px;
  color:var(--ink-3);
  border-top:1px solid var(--rule-soft);
}

/* ---------- 书单 ---------- */

.booklist{list-style:none;margin:0;padding:0}

.book{
  display:grid;
  grid-template-columns:1fr 88px;
  gap:clamp(16px,3vw,40px);
  padding:clamp(24px,2.6vw,32px) 0;
  border-top:1px solid var(--rule);
}
.book:first-child{border-top:2px solid var(--ink)}

.book-title{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--fs-entry);
  line-height:1.45;
  margin:0;
}
.book-title a{text-decoration:none;transition:color .16s ease}
.book-title a:hover{color:var(--accent)}

.book-author{
  margin:9px 0 0;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.08em;
  color:var(--ink-3);
}

.book-note{
  margin:12px 0 0;
  max-width:42em;
  font-size:14.5px;
  line-height:1.8;
  color:var(--ink-2);
}

.status{
  align-self:start;
  justify-self:end;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.1em;
  color:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:999px;
  padding:2px 10px;
  white-space:nowrap;
}
.status.reading{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}

.crosslink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin:0 0 clamp(36px,4vw,56px);
  padding:18px 20px;
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  text-decoration:none;
  transition:background .16s ease;
}
.crosslink:hover{background:var(--paper-2)}
.crosslink .k{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.14em;
  color:var(--accent);
  text-transform:uppercase;
  display:block;
  margin-bottom:4px;
}
.crosslink .t{
  font-family:var(--serif);
  font-weight:700;
  font-size:19px;
}
.crosslink .arrow{font-family:var(--mono);color:var(--ink-3)}

/* ---------- 正文 ---------- */

.article{
  max-width:var(--readw);
  margin:0 auto;
  padding:clamp(38px,5vw,72px) var(--gutter) clamp(64px,7vw,104px);
}

.back{
  display:inline-block;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.12em;
  color:var(--ink-3);
  text-decoration:none;
  text-transform:uppercase;
  margin-bottom:clamp(28px,3.4vw,44px);
  transition:color .16s ease;
}
.back:hover{color:var(--accent)}

.article-head{
  padding-bottom:clamp(24px,3vw,34px);
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(32px,4vw,48px);
}

.article-head h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(28px,3.6vw,40px);
  line-height:1.32;
  letter-spacing:-.01em;
  margin:0 0 20px;
}

.article-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.article-meta .sep{color:var(--rule)}

.article-body{
  font-size:17px;
  line-height:2;
  color:var(--ink);
}

.article-body p{margin:0 0 1.5em}

.article-body > p:first-of-type::first-letter{
  float:left;
  font-family:var(--serif);
  font-weight:700;
  font-size:3.5em;
  line-height:.86;
  margin:.06em .12em 0 0;
  color:var(--accent);
}

.article-body h2{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(20px,2.4vw,25px);
  line-height:1.5;
  margin:2.2em 0 .85em;
  padding-top:.1em;
}

.article-body h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:19px;
  line-height:1.6;
  margin:1.8em 0 .7em;
}

.article-body blockquote{
  margin:2em 0;
  padding:4px 0 4px 22px;
  border-left:2px solid var(--accent);
  color:var(--ink-2);
  font-size:16.5px;
  line-height:1.9;
}
.article-body blockquote p:last-child{margin-bottom:0}

.article-body ul,.article-body ol{
  margin:0 0 1.5em;
  padding-left:1.3em;
}
.article-body li{margin:.4em 0}

.article-body strong{font-weight:600}

.article-body hr{
  border:0;
  border-top:1px solid var(--rule);
  margin:2.6em 0;
}

.article-body img{max-width:100%;height:auto;display:block;margin:2em 0}
.article-body figure{margin:2em 0}
.article-body figcaption{
  margin-top:.7em;
  font-size:12.5px;
  line-height:1.7;
  color:var(--ink-3);
}

.article-foot{
  margin-top:clamp(48px,6vw,72px);
  padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid var(--rule);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
  text-transform:uppercase;
}

.pager{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin:clamp(40px,5vw,64px) 0 0;
}
.pager a,.pager span{
  background:var(--paper);
  padding:20px 20px 22px;
  text-decoration:none;
  display:block;
}
.pager .k{
  display:block;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.14em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin-bottom:7px;
}
.pager .t{font-family:var(--serif);font-weight:700;font-size:16px;line-height:1.5}
.pager a:hover .t{color:var(--accent)}
.pager .next{text-align:right}
.pager .disabled{opacity:.4}

/* ---------- 关于 ---------- */

.about{max-width:760px;margin:0 auto;padding:clamp(48px,6vw,84px) var(--gutter) clamp(64px,7vw,104px)}

.about h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--fs-h1);
  line-height:1.24;
  margin:0 0 clamp(28px,3.4vw,40px);
  letter-spacing:-.01em;
}

.about p{
  font-size:16.5px;
  line-height:2;
  color:var(--ink-2);
  margin:0 0 1.4em;
  max-width:36em;
}
.about p strong{color:var(--ink);font-weight:600}

.about h2{
  font-family:var(--mono);
  font-size:10.5px;
  font-weight:400;
  letter-spacing:.18em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin:2.8em 0 1.2em;
  padding-top:1.2em;
  border-top:1px solid var(--rule);
}

.about dl{margin:0;display:grid;gap:2px}
.about .item{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--rule-soft);
}
.about dt{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
  padding-top:.45em;
}
.about dd{margin:0;font-size:15.5px;line-height:1.8;color:var(--ink-2)}
.about dd a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--accent)}
.about dd a:hover{color:var(--accent)}

/* ---------- 交流与讨论 ---------- */

.talk-lede{
  padding-bottom:clamp(32px,4vw,48px);
}

.deck{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;
  background:var(--rule);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  margin-bottom:clamp(40px,5vw,64px);
}
.deck .cell{background:var(--paper);padding:clamp(22px,2.4vw,32px)}
.deck .n{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--accent);
  display:block;
  margin-bottom:12px;
}
.deck h3{
  font-family:var(--serif);
  font-weight:700;
  font-size:18px;
  line-height:1.5;
  margin:0 0 10px;
}
.deck p{margin:0;font-size:14px;line-height:1.8;color:var(--ink-2)}

.mailbox{
  border:1px solid var(--rule);
  border-left:3px solid var(--accent);
  padding:clamp(22px,2.6vw,32px);
  margin:0 0 clamp(40px,5vw,60px);
  background:var(--paper-2);
}
.mailbox .k{
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin:0 0 12px;
}
.mailbox a{
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(20px,2.6vw,28px);
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px solid var(--accent);
  word-break:break-all;
}
.mailbox a:hover{color:var(--accent)}
.mailbox p{margin:14px 0 0;font-size:14px;line-height:1.8;color:var(--ink-2)}

.rules{list-style:none;margin:0 0 clamp(44px,5vw,64px);padding:0;counter-reset:r}
.rules li{
  counter-increment:r;
  position:relative;
  padding:16px 0 16px 46px;
  border-bottom:1px solid var(--rule-soft);
  font-size:15px;
  line-height:1.85;
  color:var(--ink-2);
}
.rules li::before{
  content:counter(r,decimal-leading-zero);
  position:absolute;
  left:0;top:17px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--accent);
}
.rules li strong{color:var(--ink);font-weight:600}

.qa{padding-bottom:clamp(48px,6vw,80px)}
.qa-item{
  padding:clamp(26px,3vw,36px) 0;
  border-top:1px solid var(--rule);
}
.qa-item:first-of-type{border-top:2px solid var(--ink)}

.qa-q{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:14px;
  align-items:baseline;
}
.qa-q .mark,.qa-a .mark{
  font-family:var(--serif);
  font-weight:700;
  font-size:15px;
  color:var(--accent);
  line-height:1.7;
}
.qa-q p{
  margin:0;
  font-family:var(--serif);
  font-weight:700;
  font-size:clamp(18px,2.1vw,22px);
  line-height:1.6;
  color:var(--ink);
}

.qa-a{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:14px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--rule-soft);
}
.qa-a .body{font-size:15.5px;line-height:1.95;color:var(--ink-2)}
.qa-a .body p{margin:0 0 1em}
.qa-a .body p:last-child{margin-bottom:0}

.qa-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-top:18px;
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.qa-meta .chip{
  border:1px solid var(--accent);
  color:var(--accent);
  border-radius:999px;
  padding:1px 8px;
  font-size:9.5px;
}

/* ---------- 页脚 ---------- */

.site-footer{
  border-top:1px solid var(--rule);
  padding:clamp(40px,4.6vw,64px) 0 clamp(48px,5vw,72px);
  margin-top:clamp(20px,3vw,40px);
}

.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,56px);
}

.footer-brand{
  font-family:var(--serif);
  font-weight:700;
  font-size:24px;
  letter-spacing:.02em;
  margin:0 0 12px;
}
.footer-brand .dot{color:var(--accent)}

.footer-note{
  margin:0;
  font-size:14px;
  line-height:1.9;
  color:var(--ink-3);
  max-width:26em;
}

.footer-col h2{
  font-family:var(--mono);
  font-size:10px;
  font-weight:400;
  letter-spacing:.18em;
  color:var(--ink-3);
  text-transform:uppercase;
  margin:0 0 14px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.footer-col a{
  font-size:14px;
  color:var(--ink-2);
  text-decoration:none;
  transition:color .16s ease;
}
.footer-col a:hover{color:var(--accent)}

.footer-bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:clamp(32px,3.6vw,48px);
  padding-top:20px;
  border-top:1px solid var(--rule-soft);
  font-family:var(--mono);
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--ink-3);
  text-transform:uppercase;
}
.footer-bottom:only-child{margin-top:0;padding-top:0;border-top:0}

/* ---------- 404 ---------- */

.notfound{
  min-height:56vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(60px,9vw,120px) 0;
}
.notfound .code{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.2em;
  color:var(--accent);
  margin:0 0 18px;
}
.notfound h1{
  font-family:var(--serif);
  font-weight:700;
  font-size:var(--fs-h1);
  line-height:1.24;
  margin:0 0 18px;
}
.notfound p{font-size:16px;color:var(--ink-2);margin:0 0 28px}
.notfound a{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink);
  text-decoration:none;
  border-bottom:1px solid var(--accent);
  padding-bottom:2px;
}
.notfound a:hover{color:var(--accent)}

/* ---------- 响应式 ---------- */

@media (max-width:1024px){
  .masthead-meta{display:none}
  .nav{gap:20px;margin-left:auto}
  .hero-grid{grid-template-columns:minmax(0,1fr) 250px;gap:40px}
  .deck{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-grid > div:first-child{grid-column:1 / -1}
}

@media (max-width:760px){
  body{font-size:16px}

  /* 关键：backdrop-filter 会让 fixed 子元素以刊头为包含块，抽屉会失效，移动端关掉 */
  .masthead{
    background:var(--paper);
    -webkit-backdrop-filter:none;
    backdrop-filter:none;
  }

  .masthead-inner{height:58px;gap:12px;padding:0 var(--gutter)}
  .wordmark{font-size:20px}
  .menu-toggle{display:flex}

  /* 全屏抽屉 */
  .nav{
    position:fixed;
    inset:0;
    z-index:60;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;
    gap:0;
    padding:88px var(--gutter) 40px;
    background:var(--paper);
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
    transition:transform .26s cubic-bezier(.2,.7,.3,1),opacity .2s ease;
    overflow-y:auto;
  }
  body[data-menu="open"] .nav{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }
  .nav a{
    width:100%;
    display:flex;
    align-items:baseline;
    gap:16px;
    padding:20px 0;
    border-bottom:1px solid var(--rule);
    font-family:var(--serif);
    font-weight:700;
    font-size:26px;
    color:var(--ink);
  }
  .nav a .num{
    display:inline-block;
    font-family:var(--mono);
    font-weight:400;
    font-size:10.5px;
    letter-spacing:.14em;
    color:var(--ink-3);
    min-width:20px;
  }
  .nav a[aria-current="page"]::after{display:none}
  .nav a[aria-current="page"]{color:var(--accent)}
  .nav a[aria-current="page"] .num{color:var(--accent)}

  /* 抽屉打开时，把工具条压在遮罩之上 */
  .tools{position:relative;z-index:70;margin-left:auto}
  body[data-menu="open"] .theme-toggle{visibility:hidden}

  .hero{padding:36px 0 26px}
  .hero-grid{grid-template-columns:1fr;gap:34px}
  .hero h1{font-size:clamp(34px,9.6vw,46px);line-height:1.24}
  .hero-lede{font-size:15.5px;margin-top:20px}
  .hero-sign{margin-top:20px}

  .now{border-top-width:1.5px}
  .now dl{gap:10px}
  .now .item{grid-template-columns:48px 1fr}
  .columns{grid-template-columns:1fr}
  .col{padding:26px var(--gutter) 22px}
  .col-num{padding-top:1em}
  .col-name{font-size:26px}
  .col-desc{margin-bottom:14px}
  .col-list a{grid-template-columns:54px 1fr;padding:12px 0}
  .col-list .t{font-size:15px}

  .updates{padding:38px 0 30px}
  .row{
    grid-template-columns:1fr auto;
    gap:6px 12px;
    padding:18px 0;
  }
  .row time{grid-column:1 / -1;margin-bottom:2px}
  .row .t{font-size:19px;line-height:1.5}
  .row .k{justify-self:end}

  .page-head{padding:38px 0 24px}
  .page-kicker{margin-bottom:14px}
  .page-lede{font-size:15.5px;margin-top:18px}
  .page-meta{margin-top:22px;padding-top:14px;gap:8px 16px}

  .entry{padding:22px 0}
  .entry h2,.entry h3{font-size:20px}
  .entry p{font-size:14.5px}

  .book{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .status{justify-self:start;order:-1}
  .book-title{font-size:20px}

  .article{padding:32px var(--gutter) 72px}
  .back{margin-bottom:26px}
  .article-head{padding-bottom:22px;margin-bottom:28px}
  .article-head h1{font-size:26px;line-height:1.4}
  .article-meta{font-size:10px;gap:8px 12px}
  .article-body{font-size:16.5px;line-height:1.92}
  .article-body > p:first-of-type::first-letter{font-size:3.1em}
  .article-body blockquote{font-size:15.5px;padding-left:16px}

  .pager{grid-template-columns:1fr}
  .pager .next{text-align:left}

  .about{padding:38px var(--gutter) 72px}
  .about p{font-size:15.5px}
  .about .item{grid-template-columns:78px 1fr;gap:12px;padding:12px 0}

  .talk-lede{padding-bottom:28px}
  .deck{margin-bottom:34px}
  .deck .cell{padding:22px var(--gutter)}
  .mailbox{padding:20px;margin-bottom:34px}
  .mailbox a{font-size:19px}
  .rules li{font-size:14.5px;padding:14px 0 14px 38px}
  .qa-item{padding:24px 0}
  .qa-q{grid-template-columns:26px 1fr;gap:10px}
  .qa-q p{font-size:18px}
  .qa-a{grid-template-columns:26px 1fr;gap:10px}
  .qa-a .body{font-size:15px}

  .site-footer{padding:38px 0 48px}
  .footer-grid{grid-template-columns:1fr;gap:26px}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:8px;margin-top:28px}
}

/* 移动端把小字号等宽标签整体提一档，保证可读 */
@media (max-width:760px){
  .now h2,.now dt,
  .col-num,.col-more,.col-count,
  .row time,.row .k,
  .page-kicker,.page-meta,
  .entry-meta,.article-meta,.qa-meta,
  .footer-col h2,.footer-bottom,
  .back,.article-foot{font-size:11.5px}

  .tag{font-size:10.5px;padding:2px 8px}
  .status{font-size:10.5px}
  .qa-meta .chip{font-size:10px}
}

@media (max-width:420px){
  .hero h1{font-size:32px}
  .col{min-height:auto}
  .row .t{font-size:18px}
  .nav a{font-size:23px;padding:17px 0}
}

/* ---------- 动效降级 ---------- */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}