:root{
  --paper:#fafaf8;
  --mid:#4a4a4a;
  --ink:#1a1a1a;
  --line:2px solid #1a1a1a;
  --hair:1px dashed #9a9a95;
  --grain-a:rgba(26,26,26,.035);
  --grain-b:rgba(26,26,26,.02);
}

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

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

body{
  margin:0;
  background-color:var(--paper);
  color:var(--ink);
  font-family:"Noto Sans SC",-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.85;
  font-weight:400;
  overflow-x:hidden;
  background-image:
    repeating-linear-gradient(0deg,var(--grain-a) 0 1px,rgba(250,250,248,0) 1px 4px),
    repeating-linear-gradient(90deg,var(--grain-b) 0 1px,rgba(250,250,248,0) 1px 5px);
  background-attachment:fixed;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--ink)}

main a{text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:rgba(74,74,74,.5)}
main a:hover{text-decoration-color:var(--ink)}

.sheet{
  max-width:1120px;
  margin:0 auto;
  padding:0 16px 34px;
}

/* ---------- 顶栏 ---------- */

.bar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 0;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,var(--grain-a) 0 1px,rgba(250,250,248,0) 1px 4px);
  border-bottom:var(--line);
}

.mark{
  width:44px;
  height:44px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border:var(--line);
  border-radius:4px;
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:18px;
  transform:rotate(-1.6deg);
}
.mark-i{line-height:1}

.drawer{margin-left:auto}

.burger{
  list-style:none;
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 12px;
  border:var(--line);
  border-radius:4px;
  background-color:var(--paper);
  cursor:pointer;
  transform:rotate(.5deg);
  font-size:16px;
}
.burger::-webkit-details-marker{display:none}
.burger::marker{content:""}

.burger-i{display:flex;flex-direction:column;gap:4px;width:16px}
.burger-l{display:block;width:16px;height:2px;background:var(--ink);transition:transform .12s linear}

.drawer[open] .burger{
  position:fixed;
  top:10px;
  right:16px;
  z-index:80;
  transform:none;
}
.drawer[open] .burger-l:first-child{transform:translateY(3px) rotate(45deg)}
.drawer[open] .burger-l:last-child{transform:translateY(-3px) rotate(-45deg)}

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

.drawer[open] .drawer-list{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr));
  align-content:start;
  gap:12px;
  position:fixed;
  inset:0;
  z-index:70;
  padding:78px 18px 32px;
  overflow:auto;
  background-color:var(--paper);
  background-image:
    repeating-linear-gradient(0deg,var(--grain-a) 0 1px,rgba(250,250,248,0) 1px 4px),
    repeating-linear-gradient(90deg,var(--grain-b) 0 1px,rgba(250,250,248,0) 1px 5px);
}

.drawer-list li{display:block}

.drawer-list a{
  display:flex;
  align-items:center;
  min-height:64px;
  padding:12px 16px;
  border:var(--line);
  border-radius:4px;
  color:var(--ink);
  text-decoration:none;
  font-size:17px;
  background-color:var(--paper);
}
.drawer-list li:nth-child(odd) a{transform:rotate(-.7deg)}
.drawer-list li:nth-child(even) a{transform:rotate(.6deg)}
.drawer-list a:active{transform:rotate(0) translateY(1px)}

.bar-cta{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border:var(--line);
  border-radius:4px;
  background-color:var(--ink);
  color:var(--paper);
  text-decoration:none;
  font-size:16px;
  transform:rotate(.7deg);
}
.bar-cta:hover{background-color:var(--mid)}

/* ---------- 粘性锚点条 ---------- */

.rail{
  position:sticky;
  top:66px;
  z-index:40;
  background-color:var(--paper);
  border-bottom:var(--hair);
}
.rail-nav{display:block}

.rail-list{
  display:flex;
  gap:6px;
  list-style:none;
  margin:0;
  padding:6px 0;
  overflow-x:auto;
  scrollbar-width:none;
}
.rail-list::-webkit-scrollbar{display:none}

.rail-list a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 12px;
  border:1px dashed #a8a8a2;
  border-radius:4px;
  color:var(--mid);
  text-decoration:none;
  white-space:nowrap;
  font-size:16px;
}
.rail-list a:hover{color:var(--ink);border-color:var(--ink)}

/* ---------- 主栅格 ---------- */

main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 246px;
  column-gap:30px;
  padding-bottom:30px;
  counter-reset:sec;
}

main > section{grid-column:1}
main p{margin:0 0 1.05em}
main p:last-child{margin-bottom:0}
main ul,main ol{margin:0 0 1.05em;padding-left:1.3em}
main li{margin-bottom:.4em}

/* ---------- 首屏 ---------- */

.hero{
  grid-column:1 / -1;
  position:relative;
  padding:26px 0 18px;
}

.hero-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  gap:4px;
}

.hero-h1{
  margin:0;
  font-size:clamp(1.9rem,6vw,3.1rem);
  line-height:1.24;
  font-weight:700;
  letter-spacing:-.02em;
}

.hero-h2{
  margin:0;
  font-size:16px;
  font-weight:500;
  letter-spacing:.18em;
  color:var(--mid);
}

.subtitle{
  margin:0;
  font-size:16px;
  color:var(--mid);
  letter-spacing:.06em;
}

.hero-fig{
  position:relative;
  margin:18px 0 0;
  border:var(--line);
  border-radius:4px;
  aspect-ratio:16/9;
  overflow:hidden;
  background-color:#ececea;
  transform:rotate(-.4deg);
}

.hero-fig::before{
  content:"";
  position:absolute;
  top:-8px;
  left:20px;
  width:72px;
  height:17px;
  background-color:rgba(74,74,74,.2);
  transform:rotate(-4deg);
  z-index:2;
}

.hero-fig .shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(.35) contrast(1.06);
  transition:opacity .18s linear;
}
.hero-fig .shot:first-child{position:relative}

.fig-blank{
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(45deg,#ebebe8 0 8px,#f4f4f1 8px 16px);
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:10px;
  background-color:var(--ink);
  clip-path:polygon(0 100%,100% 0,100% 100%);
}

/* ---------- 侧栏 ---------- */

.side{
  grid-column:2;
  grid-row:2 / span 12;
  align-self:start;
  position:sticky;
  top:118px;
  border:2px dashed #9a9a95;
  border-radius:4px;
  padding:14px;
  background-color:rgba(250,250,248,.92);
  transform:rotate(.5deg);
}

.side-h{
  margin:0 0 8px;
  font-size:16px;
  font-weight:500;
  letter-spacing:.2em;
  color:var(--mid);
}

.side-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.side-list li{margin:0}

.side-list a{
  display:flex;
  align-items:center;
  min-height:40px;
  padding:6px 8px;
  border-bottom:1px solid #dcdcd7;
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  line-height:1.5;
}
.side-list li:last-child a{border-bottom:0}
.side-list a:hover{background-color:#f0f0ec}

/* ---------- 正文区块 ---------- */

main > section[id]{
  display:block;
  counter-increment:sec;
  border-top:var(--line);
  padding:22px 0 30px;
  scroll-margin-top:118px;
}

main > section[id]::before{
  content:counter(sec,decimal-leading-zero);
  display:block;
  margin-bottom:6px;
  font-size:13px;
  letter-spacing:.3em;
  color:var(--mid);
}

main > section[id] > h2{
  margin:0 0 .55em;
  font-size:clamp(1.3rem,3.4vw,1.65rem);
  line-height:1.45;
  font-weight:700;
  letter-spacing:-.01em;
  text-decoration:underline wavy rgba(74,74,74,.38);
  text-decoration-thickness:1px;
  text-underline-offset:7px;
}

main > section[id] > h2 + p{
  color:var(--mid);
}

main h3{
  margin:1.4em 0 .5em;
  font-size:1.15rem;
  font-weight:600;
  line-height:1.5;
}

main figure{
  margin:1.2em 0;
  border:var(--line);
  border-radius:4px;
  overflow:hidden;
  background-color:#ececea;
}

main blockquote{
  margin:1.2em 0;
  padding:10px 16px;
  border-left:3px solid var(--ink);
  color:var(--mid);
}

main code{
  font-family:"SFMono-Regular",Consolas,monospace;
  font-size:.92em;
  border:1px dashed #b6b6b0;
  border-radius:3px;
  padding:0 4px;
}

main table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:16px}
main th,main td{border:1px solid #cfcfc9;padding:8px 10px;text-align:left}
main th{background-color:#f0f0ec}

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

.foot{
  border-top:3px double var(--ink);
  padding:24px 0 18px;
}

.foot-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:20px 18px;
  border-radius:4px;
  background-color:var(--ink);
  color:var(--paper);
  transform:rotate(-.3deg);
}

.cta-k{
  margin:0;
  font-size:clamp(1.25rem,4.2vw,1.8rem);
  font-weight:700;
  line-height:1.4;
  letter-spacing:.02em;
}

.cta-btn{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 22px;
  border:2px solid var(--paper);
  border-radius:4px;
  color:var(--paper);
  text-decoration:none;
  font-size:16px;
}
.cta-btn:hover{background-color:var(--paper);color:var(--ink)}

.foot-main{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:14px 24px;
  padding:26px 0 20px;
}

.foot-mark{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  border:var(--line);
  border-radius:4px;
  font-weight:700;
  transform:rotate(-2deg);
}

.foot-brand{margin:10px 0 0;font-weight:500}

.foot-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0 16px;
}
.foot-list li{margin:0}

.foot-list a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  font-size:16px;
  color:var(--mid);
  text-decoration:none;
  border-bottom:1px dashed transparent;
}
.foot-list a:hover{color:var(--ink);border-bottom-color:var(--ink)}

.foot-base{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 14px;
  padding-top:14px;
  border-top:1px dashed #b8b8b3;
}

.copy{margin:0;font-size:16px;color:var(--mid)}

.foot-mini menu{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:0 14px;
}
.foot-mini li{margin:0}

.foot-mini a,.totop{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 2px;
  font-size:16px;
  color:var(--mid);
  text-decoration:none;
}

.totop{
  border:0;
  background:none;
  font-family:inherit;
  cursor:pointer;
  padding:0 8px;
  border:1px dashed #bebbB6;
  border-radius:4px;
}
.foot-mini a:hover,.totop:hover{color:var(--ink)}

/* ---------- 滚动显现 ---------- */

.js main > section[id]{
  opacity:0;
  transform:translateY(12px);
  transition:opacity .2s linear,transform .2s ease-out;
}
.js main > section[id].in{opacity:1;transform:none}

/* ---------- 中等屏 ---------- */

@media (max-width:900px){
  main{grid-template-columns:minmax(0,1fr)}
  .hero{grid-column:1}
  .side{
    grid-column:1;
    grid-row:auto;
    position:static;
    margin:18px 0 4px;
    transform:none;
  }
  .hero-fig{aspect-ratio:4/3}
  .foot-main{grid-template-columns:1fr}
  main > section[id]{scroll-margin-top:112px}
}

/* ---------- 小屏 ---------- */

@media (max-width:520px){
  body{font-size:16px}
  .sheet{padding:0 13px 28px}
  .hero{padding-top:20px}
  .hero-h1{font-size:clamp(1.7rem,8.4vw,2.3rem)}
  .bar-cta{padding:0 12px}
  .drawer[open] .drawer-list{padding:74px 13px 26px;grid-template-columns:1fr}
  .foot-cta{padding:18px 14px;transform:none}
  .foot-main{padding:20px 0 16px}
}

/* ---------- 动效开关 ---------- */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
  .mark,.burger,.bar-cta,.hero-fig,.side,.foot-cta,
  .drawer-list li:nth-child(odd) a,.drawer-list li:nth-child(even) a,
  .foot-mark{transform:none}
  .js main > section[id]{opacity:1;transform:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}