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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --c-black:#000;
  --c-white:#fff;
  --c-gray-100:#f5f5f5;
  --c-gray-200:#e8e8e8;
  --c-gray-400:#999;
  --c-gray-600:#555;
  --c-border:#000;
  --font-main:'Inter',system-ui,-apple-system,sans-serif;
  --radius-card:28px;
  --max-w:1200px;
  --nav-h:100px;
  --announce-h:36px;
  --transition:200ms ease;
}

html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:var(--font-main);
  background:var(--c-white);
  color:var(--c-black);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline}
ul,ol,menu{list-style:none}
button{cursor:pointer;font-family:inherit}

/* ── 公告条 ── */
.announce-bar{
  position:sticky;top:0;z-index:200;
  background:var(--c-black);
  color:var(--c-white);
  text-align:center;
  font-size:.8rem;
  font-weight:500;
  letter-spacing:.06em;
  padding:8px 1rem;
  height:var(--announce-h);
  display:flex;align-items:center;justify-content:center;
}

/* ── 顶部导航 ── */
.site-header{
  position:sticky;
  top:var(--announce-h);
  z-index:100;
  background:var(--c-white);
  border-bottom:2px solid var(--c-black);
}

.header-brand{
  border-bottom:1px solid var(--c-black);
  padding:.75rem 2rem;
  display:flex;align-items:center;
}

.brand-name{
  font-size:1.25rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--c-black);
}

.header-nav{
  padding:.5rem 2rem;
  display:flex;align-items:center;justify-content:flex-end;
}

/* details/summary hamburger */
.nav-details{position:relative}
.nav-details[open] .nav-overlay{display:flex}

.nav-toggle{
  display:flex;align-items:center;gap:.6rem;
  cursor:pointer;
  list-style:none;
  padding:.5rem .75rem;
  border:2px solid var(--c-black);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:.05em;
  min-height:40px;
  user-select:none;
  transition:background var(--transition),color var(--transition);
}
.nav-toggle::-webkit-details-marker{display:none}
.nav-toggle:hover{background:var(--c-black);color:var(--c-white)}
.nav-toggle:hover .hamburger-lines span{background:var(--c-white)}

.hamburger-lines{
  display:flex;flex-direction:column;gap:4px;width:20px;
}
.hamburger-lines span{
  display:block;height:2px;width:100%;
  background:var(--c-black);
  transition:background var(--transition);
}

.nav-overlay{
  display:none;
  position:fixed;inset:0;z-index:300;
  background:var(--c-black);
  color:var(--c-white);
  flex-direction:column;
  align-items:center;justify-content:center;
  gap:2rem;
  padding:2rem;
}

.nav-overlay menu{
  display:flex;flex-direction:column;align-items:center;gap:1.25rem;
  width:100%;max-width:600px;
}

.nav-overlay menu li a{
  display:block;
  font-size:clamp(1rem,2.5vw,1.4rem);
  font-weight:500;
  color:var(--c-white);
  letter-spacing:.03em;
  padding:.6rem 1rem;
  border-bottom:1px solid rgba(255,255,255,.2);
  width:100%;
  text-align:right;
  transition:opacity var(--transition);
}
.nav-overlay menu li a:hover{opacity:.6;text-decoration:none}

.nav-close{
  background:transparent;
  border:2px solid var(--c-white);
  color:var(--c-white);
  font-size:.9rem;
  font-weight:500;
  padding:.6rem 2rem;
  letter-spacing:.08em;
  min-height:40px;
  transition:background var(--transition),color var(--transition);
}
.nav-close:hover{background:var(--c-white);color:var(--c-black)}

/* ── 点阵底纹 ── */
.dot-bg-figure,
.dot-bg-figure-sm,
.hero-figure.hero-dot-bg{
  background-image:radial-gradient(var(--c-black) 1px,transparent 1px);
  background-size:20px 20px;
  background-color:var(--c-gray-100);
}

/* ── Hero (首页) ── */
.hero-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:calc(100vh - var(--nav-h) - var(--announce-h));
  border-bottom:2px solid var(--c-black);
}

.hero-figure{
  width:100%;
  height:100%;
  min-height:60vh;
  overflow:hidden;
  border-right:2px solid var(--c-black);
}

.hero-img{width:100%;height:100%;object-fit:cover}

.hero-aside{
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;
  padding:3rem 2.5rem;
  text-align:right;
  background:var(--c-white);
}

.hero-h1{
  font-size:clamp(1.8rem,4vw,3.5rem);
  font-weight:600;
  line-height:1.15;
  letter-spacing:-.02em;
  margin-bottom:1rem;
}

.hero-sub{
  font-size:1rem;
  color:var(--c-gray-600);
  max-width:380px;
  margin-bottom:2rem;
  line-height:1.7;
}

.cta-btn{
  display:inline-block;
  background:var(--c-black);
  color:var(--c-white);
  font-size:.9rem;
  font-weight:500;
  letter-spacing:.06em;
  padding:.75rem 2rem;
  border:2px solid var(--c-black);
  min-height:40px;
  transition:background var(--transition),color var(--transition);
}
.cta-btn:hover{background:var(--c-white);color:var(--c-black);text-decoration:none}

/* 斜切底边装饰 */
.hero-section::after{
  content:'';
  display:block;
  grid-column:1/-1;
  height:60px;
  background:var(--c-white);
  clip-path:polygon(0 100%,100% 0,100% 100%);
  margin-top:-60px;
  pointer-events:none;
}

/* ── page-hero (非首页) ── */
.page-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:45vh;
  border-bottom:2px solid var(--c-black);
}

.dot-bg-figure{
  width:100%;height:100%;
  min-height:40vh;
  border-right:2px solid var(--c-black);
}

.dot-bg-figure-sm{
  width:100%;height:100%;
  min-height:30vh;
  border-right:2px solid var(--c-black);
}

/* ── 通用内容区块 ── */
.content-section{
  display:grid;
  grid-template-columns:280px 1fr;
  border-bottom:2px solid var(--c-black);
  max-width:var(--max-w);
  margin:0 auto;
  width:100%;
}

.section-aside{
  border-right:2px solid var(--c-black);
  padding:2rem 1.5rem;
  display:flex;flex-direction:column;gap:1rem;
}

.section-aside small{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-gray-400);
  border-bottom:1px solid var(--c-gray-200);
  padding-bottom:.5rem;
  margin-bottom:.25rem;
}

.section-aside nav ul{
  display:flex;flex-direction:column;gap:.5rem;
}

.section-aside nav ul li a{
  font-size:.85rem;
  color:var(--c-black);
  display:block;
  padding:.3rem 0;
  border-bottom:1px solid transparent;
  transition:border-color var(--transition);
}
.section-aside nav ul li a:hover{
  border-bottom-color:var(--c-black);
  text-decoration:none;
}

.section-body{
  padding:2.5rem 2rem;
  display:flex;flex-direction:column;gap:1rem;
}

.section-body small{
  display:block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--c-gray-400);
}

.section-body h2{
  font-size:clamp(1.3rem,2.5vw,2rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.2;
  margin-bottom:.5rem;
}

/* ── 面包屑 ── */
.breadcrumb ol{
  display:flex;flex-wrap:wrap;gap:.5rem;
  list-style:none;
  font-size:.8rem;
  color:var(--c-gray-600);
  margin-bottom:1rem;
}
.breadcrumb ol li:not(:last-child)::after{content:'›';margin-left:.5rem}
.breadcrumb ol li a{color:var(--c-black)}
.breadcrumb ol li a:hover{text-decoration:underline}

/* ── 首页 Topic 卡片 ── */
.topic-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:1.5rem;
  padding:1rem 0;
}

.card{
  border:2px solid var(--c-black);
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:transform var(--transition);
}
.card:hover{transform:translate(-3px,-3px)}

.card a{
  display:flex;flex-direction:column;gap:.5rem;
  padding:1.75rem 1.5rem;
  height:100%;
  color:var(--c-black);
}
.card a:hover{text-decoration:none}

.card-title{
  font-size:1rem;
  font-weight:600;
  line-height:1.3;
}

.card-meta{
  font-size:.75rem;
  color:var(--c-gray-400);
  letter-spacing:.05em;
}

.card-desc{
  font-size:.875rem;
  color:var(--c-gray-600);
  line-height:1.6;
}

/* ── 首页最新文章列表 ── */
.recent-list{
  display:flex;flex-direction:column;gap:0;
}

.recent-list li a{
  display:flex;align-items:center;justify-content:space-between;
  padding:.875rem 0;
  border-bottom:1px solid var(--c-gray-200);
  gap:1rem;
  transition:background var(--transition);
}
.recent-list li a:hover{text-decoration:none;background:var(--c-gray-100)}

.recent-list li a span{
  font-size:.9rem;
  font-weight:500;
}

.recent-list li a small{
  font-size:.75rem;
  color:var(--c-gray-400);
  white-space:nowrap;
}

/* ── Topic 子页列表 ── */
.child-list{
  display:flex;flex-direction:column;gap:0;
  counter-reset:none;
}

.child-item a{
  display:grid;
  grid-template-columns:3rem 1fr auto;
  align-items:center;
  gap:1rem;
  padding:1.25rem 0;
  border-bottom:1px solid var(--c-gray-200);
  transition:background var(--transition);
}
.child-item a:hover{text-decoration:none;background:var(--c-gray-100)}

.child-index{
  font-size:1.1rem;
  font-weight:600;
  color:var(--c-gray-400);
  letter-spacing:.05em;
  text-align:right;
}

.child-info{
  display:flex;flex-direction:column;gap:.25rem;
}

.child-title{
  font-size:.95rem;
  font-weight:500;
  color:var(--c-black);
}

.child-desc{
  font-size:.8rem;
  color:var(--c-gray-600);
}

.child-date{
  font-size:.75rem;
  color:var(--c-gray-400);
  white-space:nowrap;
}

/* ── Article ── */
.article-header-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:35vh;
  border-bottom:2px solid var(--c-black);
}

.article-hero-figure{
  width:100%;height:100%;
  min-height:30vh;
  overflow:hidden;
  border-right:2px solid var(--c-black);
}

.article-hero-img{width:100%;height:100%;object-fit:cover}

.article-meta-aside{
  padding:2rem 2rem;
  display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-end;
  text-align:right;
}

.meta-date{
  font-size:.8rem;
  color:var(--c-gray-600);
  letter-spacing:.04em;
}

.article-content{
  max-width:var(--max-w);
  margin:0 auto;
  width:100%;
}

.article-sidebar{
  position:sticky;
  top:calc(var(--nav-h) + var(--announce-h));
  align-self:start;
}

.article-body{
  padding:2.5rem 2rem;
}

.article-h1{
  font-size:clamp(1.4rem,3vw,2.5rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.2;
  margin-bottom:1.5rem;
  text-align:right;
}

/* ── page-content (正文 HTML 插入) ── */
.page-content{
  font-size:1rem;
  line-height:1.8;
  color:var(--c-black);
}

.page-content h2{
  font-size:1.3rem;
  font-weight:600;
  margin:2rem 0 .75rem;
  padding-bottom:.5rem;
  border-bottom:2px solid var(--c-black);
}

.page-content h3{
  font-size:1.1rem;
  font-weight:600;
  margin:1.5rem 0 .5rem;
}

.page-content p{margin-bottom:1rem}

.page-content ul,
.page-content ol{
  padding-left:1.5rem;
  margin-bottom:1rem;
}

.page-content ul li{list-style:disc}
.page-content ol li{list-style:decimal}

.page-content li{margin-bottom:.4rem}

.page-content a{
  color:var(--c-black);
  text-decoration:underline;
  text-underline-offset:3px;
}

.page-content blockquote{
  border-left:4px solid var(--c-black);
  padding:.75rem 1rem;
  margin:1.5rem 0;
  background:var(--c-gray-100);
  font-style:italic;
}

.page-content code{
  font-family:monospace;
  background:var(--c-gray-100);
  padding:.15em .4em;
  border:1px solid var(--c-gray-200);
}

.page-content table{
  width:100%;
  border-collapse:collapse;
  margin-bottom:1.5rem;
}

.page-content th,
.page-content td{
  border:1px solid var(--c-black);
  padding:.5rem .75rem;
  text-align:left;
  font-size:.9rem;
}

.page-content th{background:var(--c-black);color:var(--c-white)}

/* ── About 统计 ── */
.about-stats-section{
  display:grid;
  grid-template-columns:1fr 280px;
  border-bottom:2px solid var(--c-black);
  max-width:var(--max-w);
  margin:0 auto;
  width:100%;
}

.stats-figure{
  padding:2.5rem 2rem;
  border-right:2px solid var(--c-black);
}

.stats-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}

.stat-item{
  padding:1.5rem 1rem;
  border-right:1px solid var(--c-gray-200);
  text-align:center;
}
.stat-item:last-child{border-right:none}

.stat-item dt{
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.08em;
  color:var(--c-gray-400);
  margin-bottom:.5rem;
}

.stat-item dd{
  font-size:1.5rem;
  font-weight:600;
}

/* ── 页脚 ── */
.site-footer{
  border-top:2px solid var(--c-black);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 2rem;
  background:var(--c-black);
  color:var(--c-white);
}

.footer-logo a{
  font-size:1rem;
  font-weight:600;
  color:var(--c-white);
  letter-spacing:.03em;
  white-space:nowrap;
}

.footer-nav ul{
  display:flex;flex-wrap:wrap;gap:.25rem 1rem;
}

.footer-nav ul li a{
  font-size:.8rem;
  color:rgba(255,255,255,.7);
  min-height:40px;
  display:inline-flex;align-items:center;
  padding:.25rem 0;
  transition:color var(--transition);
}
.footer-nav ul li a:hover{color:var(--c-white);text-decoration:none}

.footer-copy{
  font-size:.75rem;
  color:rgba(255,255,255,.5);
  text-align:right;
}

/* ── aside-nav (sidebar quick links) ── */
.aside-nav ul{
  display:flex;flex-direction:column;gap:.4rem;
}

/* ── 移动端响应式 ── */
@media(max-width:768px){
  :root{--nav-h:80px}

  .header-brand{padding:.6rem 1rem}
  .header-nav{padding:.4rem 1rem}

  .hero-section,
  .page-hero,
  .article-header-section{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .hero-figure,
  .dot-bg-figure,
  .dot-bg-figure-sm,
  .article-hero-figure{
    min-height:200px;
    border-right:none;
    border-bottom:2px solid var(--c-black);
  }

  .hero-aside,
  .article-meta-aside{
    padding:2rem 1.25rem;
    align-items:flex-start;
    text-align:left;
  }

  .hero-section::after{display:none}

  .content-section,
  .about-stats-section{
    grid-template-columns:1fr;
  }

  .section-aside,
  .stats-figure{
    border-right:none;
    border-bottom:2px solid var(--c-black);
  }

  .about-stats-section{
    grid-template-columns:1fr;
  }

  .stats-grid{grid-template-columns:1fr 1fr}
  .stat-item:last-child{border-top:1px solid var(--c-gray-200)}

  .article-sidebar{position:static}

  .child-item a{
    grid-template-columns:2.5rem 1fr;
  }
  .child-date{display:none}

  .topic-grid{grid-template-columns:1fr}

  .site-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:.75rem;
    padding:1rem;
  }

  .footer-copy{text-align:left}

  .footer-nav ul{gap:.25rem .75rem}
}

@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .stat-item{border-right:none;border-bottom:1px solid var(--c-gray-200)}
  .section-body{padding:1.5rem 1rem}
}

/* ── 减少动画 ── */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    transition:none !important;
    animation:none !important;
  }
}