@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Work+Sans:wght@300;400;500;600;700&display=swap');

:root{
  --paper:#fafaf8;
  --ink:#1a1a1a;
  --pencil:#4a4a4a;
  --line:rgba(26,26,26,.17);
  --tape:rgba(74,74,74,.11);
  --rail:212px;
  --font:'Work Sans','Outfit',system-ui,-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  --geo:'Outfit','Work Sans',system-ui,'PingFang SC','Microsoft YaHei',sans-serif;
}

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

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

body{
  margin:0;
  font-family:var(--font);
  font-size:17px;
  line-height:1.78;
  color:var(--ink);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  overflow-x:hidden;
}

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

a{color:inherit}

img{
  display:block;
  max-width:100%;
  height:auto;
  filter:grayscale(1) contrast(1.06);
}

h1,h2,h3{font-family:var(--geo);font-weight:600;letter-spacing:-.012em}

/* ---------- 左侧固定竖排导轨 ---------- */
.rail{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--rail);
  padding:24px 16px 20px;
  display:flex;
  flex-direction:column;
  gap:20px;
  border-right:2px dashed var(--line);
  background:rgba(250,250,248,.94);
  z-index:60;
}

.mark{
  width:46px;height:46px;
  display:grid;place-items:center;
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:16px 9px 18px 7px;
  transform:rotate(-4deg);
  text-decoration:none;
  flex:none;
}
.mark:hover{background:var(--tape)}

.rail-nav{min-width:0}
.rail-nav p{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:2px 5px;
}

.rail-nav a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:44px;
  padding:7px 8px;
  font-size:16px;
  line-height:1.4;
  color:var(--pencil);
  text-decoration:none;
  border-radius:13px 8px 15px 6px;
  transform:rotate(-.7deg);
}
.rail-nav a:nth-child(even){transform:rotate(.8deg)}
.rail-nav a svg{flex:none;opacity:.65}
.rail-nav a:hover,
.rail-nav a.cur{
  color:var(--ink);
  background:var(--tape);
  box-shadow:inset 0 -2px 0 var(--ink);
}

/* ---------- 主区域 ---------- */
main{margin-left:var(--rail)}

main section[id]{scroll-margin-top:100px}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  min-height:100vh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#eeece7;
  clip-path:polygon(0 0,100% 0,100% 92.5%,0 100%);
}

.hero-plate{
  position:absolute;
  inset:0;
  margin:0;
}
.hero-plate img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:.62;
  filter:grayscale(1) contrast(1.18);
}
.hero-plate::after{
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(250,250,248,.62),rgba(250,250,248,.12) 42%,rgba(250,250,248,.9));
}

.hero-copy{
  position:relative;
  z-index:2;
  max-width:20ch;
  padding:0 22px;
  text-align:center;
  transform:rotate(-.9deg);
}

.chip{
  position:absolute;
  top:-58px;left:50%;
  margin:0;
  transform:translateX(-58%) rotate(-4.5deg);
  padding:6px 13px;
  font-size:16px;
  line-height:1.5;
  letter-spacing:.02em;
  color:var(--pencil);
  background:var(--tape);
  border:1px dashed var(--line);
  border-radius:14px 6px 16px 8px;
  white-space:nowrap;
}

.hero h1{
  margin:0 0 28px;
  font-size:clamp(30px,6.6vw,56px);
  line-height:1.24;
  text-shadow:0 1px 0 rgba(250,250,248,.8);
}
.hero h1::after{
  content:'';
  display:block;
  width:64%;
  height:5px;
  margin:18px auto 0;
  border-radius:6px;
  background:var(--ink);
  transform:rotate(-1.2deg);
  opacity:.85;
}

.hero-more{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:6px 18px;
  font-size:16px;
  color:var(--ink);
  text-decoration:none;
  border-bottom:2px dashed var(--ink);
  transform:rotate(.8deg);
}
.hero-more:hover{background:var(--tape)}

/* ---------- 正文版式 ---------- */
.board{
  display:grid;
  grid-template-columns:minmax(0,1fr) 292px;
  gap:44px;
  align-items:start;
  max-width:1120px;
  margin:0 auto;
  padding:60px 40px 76px;
}

.board-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:36px;
}

.board-main > article{
  padding:30px 24px 34px;
  background:rgba(255,255,255,.58);
  border:1px solid var(--line);
  border-bottom:3px solid var(--ink);
  border-radius:28px;
  transform:rotate(-.22deg);
  scroll-margin-top:100px;
}
.board-main > article:nth-child(even){transform:rotate(.26deg)}

.board-main > article > :first-child{margin-top:0}
.board-main > article > :last-child{margin-bottom:0}

.board-main h2{
  font-size:clamp(22px,3.2vw,29px);
  line-height:1.32;
  margin:0 0 16px;
  padding-bottom:9px;
  border-bottom:2px dashed var(--line);
}
.board-main h3{
  font-size:clamp(18px,2.4vw,22px);
  line-height:1.4;
  margin:26px 0 10px;
}
.board-main h2 span,
.board-main h3 span{
  display:inline-block;
  border-bottom:2px solid var(--ink);
  padding-bottom:1px;
}

.board-main p{margin:0 0 16px}
.board-main ul,.board-main ol{margin:0 0 16px;padding-left:1.3em}
.board-main li{margin:0 0 8px}
.board-main li::marker{color:var(--pencil)}

.board-main figure{
  margin:22px 0;
  padding:10px 10px 8px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px 26px 14px 22px;
  transform:rotate(-.5deg);
}
.board-main figure img{border-radius:8px 18px 10px 16px;width:100%}
.board-main figcaption{
  margin-top:8px;
  font-size:16px;
  color:var(--pencil);
}

.board-main blockquote{
  margin:22px 0;
  padding:14px 18px;
  background:var(--tape);
  border-left:4px solid var(--ink);
  border-radius:6px 18px 18px 6px;
  transform:rotate(.4deg);
}
.board-main blockquote p:last-child{margin-bottom:0}

.board-main a{color:var(--ink);text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.board-main a:hover{background:var(--tape)}

.board-main table{
  width:100%;
  border-collapse:collapse;
  margin:0 0 18px;
  font-size:16px;
}
.board-main th,.board-main td{
  border-bottom:1px solid var(--line);
  padding:9px 8px;
  text-align:left;
}
.board-main th{border-bottom:2px solid var(--ink)}

/* ---------- 右侧便签栏 ---------- */
.side{
  position:sticky;
  top:24px;
  display:flex;
  flex-direction:column;
  gap:22px;
  font-size:16px;
  line-height:1.6;
}

.side-box{
  padding:16px 15px 18px;
  background:rgba(255,255,255,.62);
  border:1px solid var(--line);
  border-radius:20px 26px 18px 24px;
  transform:rotate(.8deg);
  box-shadow:3px 4px 0 rgba(26,26,26,.05);
}
.side-box:nth-child(2){transform:rotate(-1deg)}

.side h3{
  margin:0 0 12px;
  font-size:16px;
  letter-spacing:.14em;
}
.side h3 span{
  display:inline-block;
  padding-bottom:2px;
  border-bottom:2px solid var(--ink);
}

.side-links{
  display:flex;
  flex-direction:column;
  margin:0;
}
.side-links a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:6px 2px;
  color:var(--pencil);
  text-decoration:none;
  border-bottom:1px dotted var(--line);
}
.side-links a:last-child{border-bottom:0}
.side-links a:hover{color:var(--ink);background:var(--tape)}

.side-seal{
  margin:0 0 10px;
  color:var(--pencil);
  transform:rotate(-6deg);
  opacity:.7;
}
.side-seal svg{width:34px;height:34px}

.side-top{margin:0}
.side-top a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  font-size:16px;
  color:var(--pencil);
  text-decoration:none;
  border-bottom:2px dashed var(--ink);
}
.side-top a:hover{color:var(--ink)}

/* ---------- 页脚 ---------- */
.foot{
  margin-left:var(--rail);
  padding:38px 40px 28px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 24px;
  align-items:start;
  border-top:2px dashed var(--line);
}
.foot > *{
  max-width:1120px;
  margin:0 auto;
  width:100%;
}

.foot-brand{
  font-family:var(--geo);
  font-size:20px;
  font-weight:600;
  transform:rotate(-.8deg);
  justify-self:start;
}

.foot-links{
  display:flex;
  flex-wrap:wrap;
  gap:2px 16px;
  justify-content:flex-end;
}
.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:16px;
  color:var(--pencil);
  text-decoration:none;
  border-bottom:1px dotted var(--line);
}
.foot-links a:hover{color:var(--ink)}

.foot-copy{
  grid-column:1/-1;
  display:block;
  margin-top:10px;
  text-align:center;
  font-size:16px;
  color:var(--pencil);
  letter-spacing:.04em;
}

/* ---------- 生效中的抖动出现 ---------- */
@keyframes pop{
  from{opacity:0;translate:0 18px}
  to{opacity:1;translate:0 0}
}

body.rv .board-main > article{opacity:0;translate:0 18px}
body.rv .side-box{opacity:0;translate:0 14px}
body.rv .hero-copy{animation:pop .5s steps(5,end) both .12s}

body.rv .board-main > article.in{
  animation:pop .42s steps(4,end) both;
  animation-delay:calc(var(--i,0) * 70ms);
}
body.rv .side-box.in{
  animation:pop .4s steps(3,end) both;
  animation-delay:calc(var(--i,0) * 90ms);
}

/* ---------- 窄屏 ---------- */
@media (max-width:899px){
  body{font-size:16px}

  .rail{
    position:sticky;
    top:0;left:auto;bottom:auto;
    width:auto;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:8px 14px;
    border-right:0;
    border-bottom:2px dashed var(--line);
    background:rgba(250,250,248,.97);
    z-index:80;
  }

  .mark{width:40px;height:40px;border-radius:13px 8px 15px 7px}
  .mark svg{width:22px;height:22px}

  .rail-nav{flex:1;min-width:0}
  .rail-nav p{
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:2px;
    scrollbar-width:none;
  }
  .rail-nav p::-webkit-scrollbar{display:none}
  .rail-nav a{
    flex:none;
    padding:6px 7px;
    font-size:16px;
    min-height:42px;
  }
  .rail-nav a svg{display:none}

  main,.foot{margin-left:0}

  main article[id],
  .board-main > article{scroll-margin-top:82px}

  .hero{min-height:82vh;clip-path:polygon(0 0,100% 0,100% 95%,0 100%)}
  .hero-copy{max-width:19ch}
  .chip{top:-52px;font-size:16px}
  .hero h1::after{width:80%}

  .board{
    grid-template-columns:1fr;
    gap:28px;
    padding:32px 15px 58px;
  }
  .board-main{gap:26px}
  .board-main > article{padding:24px 17px 28px;border-radius:22px}

  .side{position:static;order:2}
  .side-box{transform:none}

  .foot{
    grid-template-columns:1fr;
    padding:28px 15px 22px;
    gap:8px;
  }
  .foot-links{justify-content:flex-start}
  .foot-brand{justify-self:start}
}

@media (max-width:420px){
  .hero h1{font-size:clamp(26px,8vw,32px)}
  .side-links a{min-height:44px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  body.rv .board-main > article,
  body.rv .side-box,
  body.rv .hero-copy{
    animation:none!important;
    opacity:1!important;
    translate:none!important;
  }
  .board-main > article{transform:none}
}

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