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

:root{
  --paper:#f5e6c8;
  --card:#f9efd9;
  --ink:#262117;
  --tan:#d4a574;
  --deep:#7a4a1d;
  --line:#c9b391;
  --soft:#efdfbe;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Space Grotesk',"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--deep);outline-offset:2px}
::selection{background:var(--tan);color:var(--ink)}

/* 胶片颗粒 */
.grain{
  position:fixed;
  inset:-40%;
  width:180%;
  height:180%;
  pointer-events:none;
  z-index:60;
  opacity:.26;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.6'/></svg>");
  animation:grainShift 1.1s steps(3) infinite;
}

@keyframes grainShift{
  0%{transform:translate3d(0,0,0)}
  33%{transform:translate3d(-2%,1%,0)}
  66%{transform:translate3d(1%,-2%,0)}
  100%{transform:translate3d(0,0,0)}
}

/* 顶部细条 */
.site-head{background:var(--paper)}

.strip{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  flex-wrap:wrap;
  background:var(--ink);
  color:var(--paper);
  font-size:.82rem;
  letter-spacing:.14em;
  padding:.4rem 1rem;
}

.strip-brand{font-weight:700}
.sep{opacity:.55}

/* 报头 */
.masthead{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.8rem;
  padding:.5rem 1.1rem;
  border-bottom:2px solid var(--ink);
}

.nav-side ol{
  display:flex;
  flex-wrap:wrap;
  gap:.15rem;
  list-style:none;
  margin:0;
  padding:0;
}

.nav-left ol{justify-content:flex-end}
.nav-right ol{justify-content:flex-start}

.nav-side a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:.35rem .65rem;
  font-size:.95rem;
  text-decoration:none;
  border:2px solid transparent;
  border-radius:999px;
  transition:background .18s ease, border-color .18s ease, transform .18s ease;
}

.nav-side a:hover{
  background:var(--tan);
  border-color:var(--ink);
  transform:translateY(-2px);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  justify-self:center;
  text-decoration:none;
  white-space:nowrap;
}

.brand-mark{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--ink);
  color:var(--paper);
  font-weight:700;
  font-size:1rem;
}

.brand-name{font-weight:700;font-size:1.2rem;letter-spacing:.04em}

/* 粘性胶囊锚点条 */
.anchors{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--tan);
  border-bottom:2px solid var(--ink);
  padding:.4rem 0;
}

.anchors ol{
  display:flex;
  gap:.4rem;
  list-style:none;
  margin:0;
  padding:.1rem 1.1rem .2rem;
  overflow-x:auto;
}

.anchors li{animation:pop .45s both}
.anchors li:nth-child(2){animation-delay:.04s}
.anchors li:nth-child(3){animation-delay:.08s}
.anchors li:nth-child(4){animation-delay:.12s}
.anchors li:nth-child(5){animation-delay:.16s}
.anchors li:nth-child(6){animation-delay:.2s}
.anchors li:nth-child(7){animation-delay:.24s}

.anchors a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.35rem .95rem;
  border:2px solid var(--ink);
  border-radius:999px;
  background:var(--paper);
  font-size:.95rem;
  text-decoration:none;
  white-space:nowrap;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}

.anchors a:hover,
.anchors a:focus-visible{
  background:var(--ink);
  color:var(--paper);
  transform:translateY(-2px);
}

/* 首屏 */
.hero{
  position:relative;
  min-height:70vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:2.4rem 1.1rem 3.2rem;
  overflow:hidden;
  border-bottom:3px solid var(--ink);
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(212,165,116,.62), transparent 62%),
    radial-gradient(90% 80% at 8% 108%, rgba(212,165,116,.45), transparent 58%),
    var(--paper);
}

.hero::after{
  content:"";
  position:absolute;
  left:-12%;
  right:-12%;
  top:36%;
  height:16px;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);
  filter:blur(7px);
  animation:track 7s ease-in-out infinite;
}

@keyframes track{
  0%,100%{transform:translateY(0) skewX(0deg);opacity:.55}
  50%{transform:translateY(14px) skewX(-3deg);opacity:.9}
}

.hero-in{
  position:relative;
  z-index:2;
  max-width:22em;
  margin:0 auto;
  animation:rise .6s both;
}

.hero-title{
  margin:0;
  font-size:clamp(2.45rem,11vw,6.2rem);
  line-height:.96;
  letter-spacing:-.03em;
  font-weight:700;
  word-break:break-word;
  filter:sepia(.12) contrast(1.04) saturate(.92);
  text-shadow:3px 3px 0 rgba(212,165,116,.8);
}

.chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  list-style:none;
  margin:1.4rem 0 0;
  padding:0;
}

.chips li{
  border:2px solid var(--ink);
  border-radius:999px;
  padding:.3rem .85rem;
  font-size:.85rem;
  background:rgba(245,230,200,.9);
  transform:rotate(-2deg);
}

.chips li:nth-child(2){transform:rotate(1.6deg)}
.chips li:nth-child(3){transform:rotate(-1deg)}

/* 主体两栏 */
.wrap{
  max-width:1140px;
  margin:0 auto;
  padding:2rem 1.2rem 3.2rem;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:1.9rem;
  align-items:start;
}

.doc{min-width:0}

/* 正文 */
.prose{min-width:0;overflow-wrap:break-word}

.prose section{
  border:2px solid var(--ink);
  border-radius:0;
  background:var(--card);
  padding:1.6rem 1.35rem 1.9rem;
  margin:0 0 1.5rem;
  scroll-margin-top:92px;
  animation:rise .55s both;
}

.prose section:nth-child(2){animation-delay:.05s}
.prose section:nth-child(3){animation-delay:.1s}
.prose section:nth-child(4){animation-delay:.15s}
.prose section:nth-child(5){animation-delay:.2s}
.prose section:nth-child(6){animation-delay:.25s}
.prose section:nth-child(7){animation-delay:.3s}

.prose h2{
  font-size:clamp(1.35rem,4vw,1.9rem);
  line-height:1.2;
  letter-spacing:-.01em;
  margin:0 0 .55rem;
  font-weight:700;
}

.prose h3{
  font-size:1.14rem;
  margin:1.3rem 0 .4rem;
}

.prose p{margin:0 0 .95rem}

.prose ul,
.prose ol{margin:.7rem 0 1rem;padding-left:1.35rem}

.prose li{margin:.35rem 0}

.prose a{
  color:var(--deep);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

.prose a:hover{background:var(--tan);color:var(--ink)}

.prose strong{background:linear-gradient(transparent 60%, var(--tan) 60%)}

.prose hr{
  border:0;
  height:2px;
  background:var(--ink);
  margin:.9rem 0 1.1rem;
}

.prose blockquote{
  margin:1rem 0;
  padding:.75rem 1rem;
  border-left:4px solid var(--tan);
  background:var(--soft);
}

.prose blockquote p:last-child{margin:0}

.prose table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  margin:.8rem 0 1.1rem;
}

.prose th,
.prose td{
  border:1px solid var(--line);
  padding:.45rem .55rem;
  text-align:left;
  vertical-align:top;
}

.prose pre{
  overflow-x:auto;
  background:#eadcbb;
  border:2px solid var(--ink);
  padding:.8rem;
}

.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.92em;
  background:#eadcbb;
  padding:.1em .3em;
}

.prose pre code{background:none;padding:0}

.prose figure{margin:1rem 0}
.prose figcaption{font-size:.85rem;color:#6b5c45;margin-top:.4rem}

/* 侧栏 */
.side{
  border:2px solid var(--ink);
  background:var(--paper);
  padding:1rem .95rem 1.15rem;
  animation:rise .55s both;
}

.side h2{
  font-size:1.02rem;
  margin:0 0 .55rem;
  letter-spacing:.08em;
}

.side hr{
  border:0;
  height:2px;
  background:var(--ink);
  margin:0 0 .8rem;
}

.side-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.25rem;
}

.side-list a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:.3rem .6rem;
  font-size:.95rem;
  text-decoration:none;
  border:2px solid transparent;
  border-left:4px solid var(--tan);
  transition:background .18s ease, border-color .18s ease;
}

.side-list a:hover{
  background:var(--tan);
  border-color:var(--ink);
}

/* 页脚 */
.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.7rem 1.2rem;
  padding:1.3rem 1.1rem;
  border-top:3px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
}

.f-brand a{
  display:inline-block;
  font-size:clamp(1.7rem,6vw,2.9rem);
  line-height:1;
  font-weight:700;
  letter-spacing:-.02em;
  text-decoration:none;
  color:var(--paper);
}

.f-nav ol{
  display:flex;
  flex-wrap:wrap;
  gap:.15rem;
  list-style:none;
  margin:0;
  padding:0;
}

.f-nav a{
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:.3rem .6rem;
  font-size:.9rem;
  text-decoration:none;
  border-radius:999px;
  transition:background .18s ease, color .18s ease;
}

.f-nav a:hover{background:var(--tan);color:var(--ink)}

.f-copy{font-size:.85rem;color:#e7d8b6}

@keyframes rise{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

@keyframes pop{
  from{opacity:0;transform:translateY(-8px)}
  to{opacity:1;transform:translateY(0)}
}

/* 平板 */
@media (max-width:980px){
  .wrap{grid-template-columns:minmax(0,1fr) 260px;gap:1.3rem}
}

/* 手机 */
@media (max-width:860px){
  .nav-left,
  .nav-right{display:none}

  .masthead{
    grid-template-columns:1fr;
    justify-items:center;
    padding:.6rem 1rem;
  }

  .anchors ol{padding:.1rem .7rem .2rem}

  .hero{min-height:60vh;padding-top:1.7rem}
  .hero::after{top:26%}

  .wrap{
    grid-template-columns:minmax(0,1fr);
    padding:1.3rem .9rem 2.4rem;
    gap:1.4rem;
  }

  .prose section{padding:1.35rem 1.05rem 1.6rem}
  .prose section{scroll-margin-top:82px}

  .foot{justify-content:center;text-align:center}
  .foot .f-nav{width:100%;justify-content:center}
  .f-copy{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
  html{scroll-behavior:auto}
}

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