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

:root{
  --ink:#000000;
  --paper:#ffffff;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:"IBM Plex Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --line:1px solid var(--ink);
  --r:28px;
  --gutter:clamp(16px,4.4vw,56px);
  --blk:clamp(26px,3.6vw,48px);
}

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

html{
  background:var(--paper);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.68 var(--sans);
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

img,svg{display:block;max-width:100%}
a{color:inherit}
a:focus-visible{outline:2px solid var(--paper);outline-offset:3px}

main article[id]{scroll-margin-top:clamp(130px,16vw,170px)}

/* ---------- 顶部导航 ---------- */
.masthead{
  position:sticky;
  top:0;
  z-index:40;
  background:var(--ink);
  color:var(--paper);
}

.nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  padding:12px var(--gutter);
  border-bottom:1px solid var(--paper);
}

.nav-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-list--l{justify-content:flex-end}
.nav-list--r{justify-content:flex-start}

.nav-list a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 15px;
  border:1px solid var(--paper);
  border-radius:999px;
  font:500 14px/1 var(--mono);
  letter-spacing:.02em;
  text-decoration:none;
  white-space:nowrap;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.nav-list a:hover{background:var(--paper);color:var(--ink);transform:translateY(-1px)}

.brand{
  grid-column:2;
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 16px;
  border:1px solid var(--paper);
  border-radius:999px;
  font:700 clamp(15px,2vw,19px)/1 var(--mono);
  letter-spacing:.18em;
  text-decoration:none;
}
.brand:hover{background:var(--paper);color:var(--ink)}

/* ---------- 版面骨架 ---------- */
main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,300px);
  grid-template-areas:
    "hero hero"
    "body side";
  align-items:start;
}

/* ---------- 首屏 ---------- */
.hero{
  grid-area:hero;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:clamp(26px,6vw,72px) var(--gutter) 0;
  border-bottom:var(--line);
}

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

.hero-badge{
  border:var(--line);
  border-radius:999px;
  padding:9px 16px;
  font:500 14px/1 var(--mono);
  letter-spacing:.2em;
}

.hero h1{
  margin:0;
  max-width:22ch;
  font:700 clamp(2.1rem,7.4vw,5.2rem)/1.03 var(--mono);
  letter-spacing:-.025em;
}

.hero-lede{
  margin:0;
  max-width:48ch;
  font-size:clamp(1rem,1.5vw,1.12rem);
  line-height:1.6;
}

.hero-fig{
  position:relative;
  margin:0;
  flex:1 1 auto;
  min-height:190px;
  overflow:hidden;
  border-top:var(--line);
}
.hero-fig--bare{
  background:
    repeating-linear-gradient(135deg,var(--ink) 0 1px,transparent 1px 11px);
  min-height:150px;
}
.hero-fig img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(1) contrast(1.08);
  transition:transform .9s cubic-bezier(.2,.7,.3,1);
}
.hero:hover .hero-fig img{transform:scale(1.03)}

.hero-fig figcaption{
  position:absolute;
  left:var(--gutter);
  bottom:16px;
  padding:7px 14px;
  background:var(--paper);
  border:var(--line);
  border-radius:999px;
  font:500 14px/1 var(--mono);
  letter-spacing:.14em;
}

/* ---------- 正文 ---------- */
.prose{
  grid-area:body;
  max-width:80ch;
  padding:var(--blk) var(--gutter);
}

.prose article{
  padding-block:var(--blk);
  border-bottom:var(--line);
}
.prose article:first-child{padding-top:0}
.prose article:last-child{border-bottom:0;padding-bottom:0}

.prose h2{
  margin:0 0 .7rem;
  font:700 clamp(1.45rem,3.1vw,2.1rem)/1.16 var(--mono);
  letter-spacing:-.02em;
}
.prose h3{
  margin:1.5em 0 .5em;
  font:600 clamp(1.08rem,2vw,1.3rem)/1.32 var(--mono);
}

.prose small{
  display:block;
  margin-top:var(--blk);
  font:500 14px/1.35 var(--mono);
  letter-spacing:.22em;
}
.prose article > small:first-child{margin-top:0}
.prose small + h2,.prose small + h3{margin-top:.45rem}

.prose p{margin:0 0 1.05em;max-width:68ch}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600}
.prose ul,.prose ol{margin:0 0 1.1em;padding-left:1.35em}
.prose li{margin-bottom:.4em}
.prose a{text-underline-offset:3px}

.prose article > p:first-of-type::first-letter{
  float:left;
  padding:.08em .14em 0 0;
  font:700 3.4em/.84 var(--mono);
}

.prose figure{
  margin:1.5em 0;
  border:var(--line);
  border-radius:var(--r);
  overflow:hidden;
}
.prose figure img{width:100%}
.prose figcaption{
  padding:11px 16px;
  border-top:var(--line);
  font:400 14px/1.55 var(--mono);
}

.prose blockquote{
  margin:1.6em 0;
  padding:18px 22px;
  border:var(--line);
  border-radius:var(--r);
  font:500 clamp(1.08rem,2.2vw,1.45rem)/1.42 var(--mono);
}
.prose blockquote p{margin:0;max-width:none}

.prose article > img{
  margin:1.4em 0;
  border:var(--line);
  border-radius:var(--r);
}

/* ---------- 侧栏 ---------- */
.side{
  grid-area:side;
  align-self:start;
  position:sticky;
  top:clamp(120px,14vw,150px);
  padding:var(--blk) 18px;
  border-left:var(--line);
}
.side small{
  display:block;
  font:500 14px/1 var(--mono);
  letter-spacing:.24em;
}
.side-title{
  margin:.5rem 0 1rem;
  font:700 1.15rem/1.25 var(--mono);
}
.side-list{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.side-list a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:6px 14px;
  border:var(--line);
  border-radius:999px;
  font:500 14px/1.35 var(--mono);
  text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.side-list a:hover{background:var(--ink);color:var(--paper)}

/* ---------- 页脚 ---------- */
.foot{
  border-top:var(--line);
  padding:clamp(26px,4.6vw,52px) var(--gutter) 18px;
}
.foot-top{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:18px;
  border-bottom:var(--line);
}
.foot-addr{
  font:400 14px/1.55 var(--mono);
  font-style:normal;
  letter-spacing:.08em;
}
.foot-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.foot-links a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 13px;
  border:var(--line);
  border-radius:999px;
  font:500 14px/1 var(--mono);
  text-decoration:none;
  transition:background .2s ease,color .2s ease;
}
.foot-links a:hover{background:var(--ink);color:var(--paper)}

.foot-mark{
  display:block;
  margin:clamp(18px,4vw,38px) 0 clamp(14px,3vw,26px);
  font:700 clamp(2.3rem,12.5vw,8.5rem)/.92 var(--mono);
  letter-spacing:-.045em;
  text-decoration:none;
}
.foot-copy{
  margin:0;
  padding-bottom:6px;
  font:400 14px/1.5 var(--mono);
  letter-spacing:.08em;
}

/* ---------- 动效 ---------- */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1);
}
.reveal.in{opacity:1;transform:none}

/* ---------- 断点 ---------- */
@media (max-width:900px){
  main{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "hero"
      "body"
      "side";
  }
  .prose{max-width:none}
  .side{
    position:static;
    border-left:0;
    border-top:var(--line);
    padding-top:clamp(20px,4vw,32px);
  }
  .side-list{grid-template-columns:repeat(auto-fill,minmax(148px,1fr))}
}

@media (max-width:820px){
  .nav{
    grid-template-columns:1fr;
    justify-items:center;
    padding:10px var(--gutter);
  }
  .brand{grid-column:auto;order:-1}
  .nav-list{justify-content:center}
  main article[id]{scroll-margin-top:215px}
  .hero{padding-top:clamp(20px,7vw,40px)}
  .hero-copy{align-items:flex-start;text-align:left}
  .hero h1{max-width:none}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .reveal{opacity:1 !important;transform:none !important}
}

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