/* ============ 01 Reset ============ */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{ margin:0; }
ul,ol{ padding:0; list-style:none; }
img,svg{ max-width:100%; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; }
table{ border-collapse:collapse; }

/* ============ 02 Tokens ============ */
:root{
  --ink:#0E1A16;
  --panel:#14352A;
  --line:#2C4A3E;
  --orange:#FF6A2A;
  --red:#E23A3A;
  --blue:#3FA9F5;
  --cream:#F2EBDD;
  --brown:#221A14;
  --mist:#8FA79A;
  --chalk:#F7F5EF;

  --rail-w:104px;
  --shell:1240px;
  --edge:clamp(18px,4vw,64px);
  --hard-shadow:7px 7px 0 var(--brown);
  --ease:cubic-bezier(.2,.7,.3,1);

  --font-sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans CJK SC","Microsoft YaHei",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}

/* ============ 03 Base & 中文排版 ============ */
html{ background:var(--ink); }
body{
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.7;
  color:var(--chalk);
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(44,74,62,.30) 1px,transparent 1px),
    linear-gradient(90deg,rgba(44,74,62,.30) 1px,transparent 1px);
  background-size:48px 48px;
  padding-inline-start:var(--rail-w);
  min-height:100vh;
  letter-spacing:.01em;
}
body.is-nav-open{ overflow:hidden; }
#main-content{ display:block; }
::selection{ background:var(--orange); color:var(--brown); }
:focus-visible{ outline:2px solid var(--orange); outline-offset:3px; }
a{ text-decoration-thickness:1px; text-underline-offset:3px; }

/* ============ 04 布局容器 ============ */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--edge);
}
.band{ padding-block:clamp(48px,7vw,104px); }
.band--panel{ background:var(--panel); border-block:1px solid var(--line); }
.band--ink{ background:#0A1310; border-block:1px solid var(--line); }
.grid-12{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:clamp(16px,1.6vw,28px);
}
.span-3{ grid-column:span 3; }
.span-4{ grid-column:span 4; }
.span-5{ grid-column:span 5; }
.span-6{ grid-column:span 6; }
.span-7{ grid-column:span 7; }
.span-8{ grid-column:span 8; }
.span-9{ grid-column:span 9; }
.span-12{ grid-column:1 / -1; }
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ============ 05 排版基元 ============ */
.eyebrow{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--mist);
}
.display{
  font-size:clamp(46px,7.6vw,128px);
  font-weight:200;
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--chalk);
}
.display--section{
  font-size:clamp(30px,4.2vw,62px);
  font-weight:200;
  line-height:1.08;
  letter-spacing:-.015em;
}
.section-title{
  font-size:clamp(25px,3vw,40px);
  font-weight:900;
  line-height:1.18;
  letter-spacing:-.01em;
}
.lede{
  font-size:clamp(17px,1.35vw,20px);
  line-height:1.75;
  color:var(--cream);
  max-width:40ch;
}
.prose{
  max-width:42ch;
  font-size:17.5px;
  line-height:1.75;
  color:rgba(247,245,239,.86);
}
.prose > * + *{ margin-top:1em; }
.prose h3{ font-size:20px; font-weight:900; color:var(--chalk); }
.mono{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ============ 06 分割线 ============ */
.rule{ border:0; height:2px; background:var(--brown); }
.rule--bold{ height:6px; background:var(--orange); }
.rule--line{ height:1px; background:var(--line); }

/* ============ 07 按钮与标签 ============ */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 20px;
  font-size:14px; font-weight:800; letter-spacing:.06em;
  text-decoration:none; cursor:pointer;
  background:var(--cream); color:var(--brown);
  border:2px solid var(--brown);
  box-shadow:4px 4px 0 var(--brown);
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background-color .16s var(--ease);
}
.btn:hover{ transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--brown); }
.btn:active{ transform:translate(1px,1px); box-shadow:2px 2px 0 var(--brown); }
.btn--primary{ background:var(--orange); }
.btn--ghost{
  background:transparent; color:var(--chalk);
  border-color:var(--line); box-shadow:none;
}
.btn--ghost:hover{ border-color:var(--orange); color:var(--orange); transform:none; box-shadow:none; }
.btn--block{ display:flex; width:100%; justify-content:center; }
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  color:var(--mist);
  background:rgba(20,53,42,.5);
  border:1px solid var(--line);
}
.chip--orange{ color:var(--orange); border-color:rgba(255,106,42,.6); }
.chip--blue{ color:var(--blue); border-color:rgba(63,169,245,.5); }
.chip--red{ color:var(--red); border-color:rgba(226,58,58,.55); }

/* ============ 08 研究板 ============ */
.board{
  background:var(--cream); color:var(--brown);
  border:2px solid var(--brown);
  box-shadow:var(--hard-shadow);
  padding:clamp(20px,2.4vw,32px);
}
.board__head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:12px;
  padding-bottom:12px; margin-bottom:16px;
  border-bottom:2px solid var(--brown);
}
.board__title{ font-size:clamp(19px,2vw,25px); font-weight:900; line-height:1.25; }
.board__idx{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:#6B5B4D; }
.board__body{ font-size:16.5px; line-height:1.78; }
.board__body > * + *{ margin-top:14px; }
.board__foot{
  margin-top:18px; padding-top:14px;
  border-top:1px dashed rgba(34,26,20,.35);
  font-size:13px; letter-spacing:.04em; color:#6B5B4D;
}
.board--dark{
  background:var(--panel); color:var(--chalk);
  border-color:var(--line);
  box-shadow:9px 9px 0 rgba(0,0,0,.45);
}
.board--dark .board__head{ border-bottom-color:var(--line); }
.board--dark .board__idx,
.board--dark .board__foot{ color:var(--mist); }
.board--dark .board__foot{ border-top-color:var(--line); }

/* ============ 09 面包屑 ============ */
.breadcrumb{ padding-top:18px; }
.breadcrumb__list{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  font-size:12px; letter-spacing:.08em; color:var(--mist);
}
.breadcrumb__item{ display:inline-flex; align-items:center; gap:8px; }
.breadcrumb__link{ color:var(--mist); text-decoration:none; }
.breadcrumb__link:hover{ color:var(--orange); }
.breadcrumb__sep{ color:var(--line); }

/* ============ 10 图片容器 ============ */
.media{ display:block; margin:0; }
.media__frame{
  position:relative; overflow:hidden;
  background:var(--panel);
  border:2px solid var(--line);
  aspect-ratio:16 / 9;
}
.media__frame::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(63,169,245,.16) 1px,transparent 1px),
    linear-gradient(90deg,rgba(63,169,245,.16) 1px,transparent 1px);
  background-size:32px 32px;
}
.media__img{ display:block; width:100%; height:100%; object-fit:cover; }
.media__caption{
  margin-top:10px;
  font-size:12px; letter-spacing:.06em; color:var(--mist);
}
.media--square .media__frame{ aspect-ratio:1 / 1; }
.media--tall .media__frame{ aspect-ratio:3 / 4; }
.media--wide .media__frame{ aspect-ratio:21 / 9; }

/* ============ 11 显现 ============ */
.js [data-reveal]{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .4s var(--ease),transform .4s var(--ease);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }

/* ============ 12 Skip link ============ */
.skip-link{
  position:fixed; top:10px; left:10px; z-index:200;
  transform:translateY(-180%);
  padding:11px 17px;
  font-size:13px; font-weight:800; letter-spacing:.08em;
  color:var(--brown); background:var(--orange);
  border:2px solid var(--brown);
  text-decoration:none;
  transition:transform .18s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* ============ 13 Header / 轨道导航 ============ */
.site-header{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--rail-w);
  z-index:90;
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:20px 12px 16px;
  background:linear-gradient(180deg,#0B1512 0%,var(--ink) 55%,#0B1512 100%);
  border-right:1px solid var(--line);
}
.brand{
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  text-decoration:none; color:var(--chalk);
}
.brand__mark{
  display:grid; place-items:center;
  width:40px; height:40px;
  background:var(--orange); color:var(--brown);
  font-size:20px; font-weight:900; letter-spacing:0;
  border:2px solid var(--brown);
  box-shadow:4px 4px 0 rgba(242,235,221,.22);
}
.brand__text{ display:flex; flex-direction:column; gap:3px; }
.brand__name{ font-size:13px; font-weight:900; letter-spacing:.08em; }
.brand__slogan{ font-size:10px; letter-spacing:.14em; color:var(--mist); }

.rail-progress{
  position:absolute; top:0; right:-1px; bottom:0; width:3px;
  background:rgba(44,74,62,.55);
}
.rail-progress__bar{
  display:block; width:100%;
  height:calc(var(--progress,0) * 100%);
  background:linear-gradient(180deg,var(--orange),var(--red));
  transition:height .12s linear;
}

.rail-nav{
  flex:1 1 auto;
  min-height:0;
  display:flex; flex-direction:column; gap:10px;
  padding-top:10px;
  border-top:1px dashed var(--line);
}
.rail-nav__caption{
  font-family:var(--font-mono);
  font-size:10px; letter-spacing:.16em;
  color:var(--mist);
  padding-left:4px;
}
.rail-nav__list{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; gap:2px;
  overflow-y:auto;
  scrollbar-width:thin;
}
.rail-nav__link{
  display:flex; flex-direction:column; gap:2px;
  padding:8px 8px 9px;
  color:var(--mist);
  text-decoration:none;
  border-left:2px solid transparent;
  transition:color .18s var(--ease),background-color .18s var(--ease),border-color .18s var(--ease);
}
.rail-nav__link:hover{ color:var(--chalk); background:rgba(44,74,62,.45); }
.rail-nav__link[aria-current="page"]{
  color:var(--orange);
  border-left-color:var(--orange);
  background:rgba(255,106,42,.10);
}
.rail-nav__idx{ font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; opacity:.75; }
.rail-nav__label{ font-size:13px; font-weight:700; letter-spacing:.03em; white-space:nowrap; }

.rail-foot{
  display:flex; flex-direction:column; gap:10px;
  padding-top:12px;
  border-top:1px dashed var(--line);
}
.rail-cta{
  display:block; text-align:center;
  padding:10px 6px;
  font-size:12px; font-weight:900; letter-spacing:.1em;
  color:var(--brown); background:var(--orange);
  border:2px solid var(--brown);
  box-shadow:3px 3px 0 rgba(242,235,221,.2);
  text-decoration:none;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background-color .16s var(--ease);
}
.rail-cta:hover{ transform:translate(-1px,-1px); box-shadow:5px 5px 0 rgba(242,235,221,.3); background:#FF7C42; }
.rail-meta{ display:flex; flex-direction:column; gap:2px; padding-left:4px; font-size:10px; letter-spacing:.1em; color:var(--mist); }
.rail-meta__k{ font-family:var(--font-mono); }
.rail-meta__v{ font-family:var(--font-mono); color:var(--blue); }

.nav-toggle{
  display:none;
  align-items:center; gap:8px;
  padding:8px 10px;
  font-size:12px; letter-spacing:.12em;
  color:var(--chalk);
  background:transparent;
  border:1px solid var(--line);
  cursor:pointer;
}
.nav-toggle__bars{ display:grid; gap:4px; width:18px; }
.nav-toggle__bars span{ display:block; height:2px; background:currentColor; transition:transform .18s var(--ease),opacity .18s var(--ease); }
.site-header[data-open] .nav-toggle__bars span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.site-header[data-open] .nav-toggle__bars span:nth-child(2){ opacity:0; }
.site-header[data-open] .nav-toggle__bars span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

.nav-scrim{
  display:none;
  position:fixed; top:64px; right:0; bottom:0; left:0;
  z-index:94;
  background:rgba(8,16,13,.68);
  opacity:0; pointer-events:none;
  transition:opacity .22s var(--ease);
}
.site-header[data-open] .nav-scrim{ opacity:1; pointer-events:auto; }

/* ============ 14 Footer ============ */
.site-footer{
  margin-top:clamp(64px,9vw,140px);
  background:#0A1310;
  border-top:4px solid var(--orange);
  color:var(--chalk);
}
.footer__grid{
  max-width:var(--shell);
  margin-inline:auto;
  padding:clamp(40px,6vw,72px) var(--edge) clamp(32px,4vw,52px);
  display:grid;
  grid-template-columns:minmax(220px,1.15fr) 2fr minmax(270px,1.05fr);
  gap:clamp(28px,4vw,56px);
  align-items:start;
}
.footer__brand-name{ font-size:22px; font-weight:900; letter-spacing:.04em; }
.footer__brand-slogan{
  margin-top:8px;
  font-family:var(--font-mono);
  font-size:12px; letter-spacing:.22em;
  color:var(--orange);
}
.footer__brand-note{
  margin-top:14px;
  max-width:30ch;
  font-size:13.5px; line-height:1.75;
  color:var(--mist);
}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.4vw,36px);
}
.footer__col-title{
  padding-bottom:10px; margin-bottom:14px;
  font-family:var(--font-mono);
  font-size:11px; font-weight:400; letter-spacing:.18em;
  color:var(--mist);
  border-bottom:1px dashed var(--line);
}
.footer__list{ display:grid; gap:10px; }
.footer__link{
  font-size:14.5px; letter-spacing:.03em;
  color:var(--chalk); text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease);
}
.footer__link:hover{ color:var(--orange); border-bottom-color:var(--orange); }

.footer__contact{
  background:var(--cream); color:var(--brown);
  border:2px solid var(--brown);
  box-shadow:8px 8px 0 rgba(255,106,42,.85);
  padding:20px 18px;
}
.footer__contact-title{
  font-size:12px; font-weight:900; letter-spacing:.18em;
  padding-bottom:12px; margin-bottom:14px;
  border-bottom:2px solid var(--brown);
}
.footer__contact-list{ display:grid; gap:12px; }
.footer__contact-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 8px; }
.footer__contact-label{
  flex:0 0 40px;
  font-size:11px; letter-spacing:.12em;
  color:#7A6A58;
}
.footer__contact-value{
  flex:1 1 150px;
  font-family:var(--font-mono);
  font-size:12.5px; line-height:1.6;
  font-variant-numeric:tabular-nums;
  word-break:break-word;
}
.footer__contact-row--text .footer__contact-value{ font-size:13px; }
.copy-btn{
  flex:0 0 auto;
  padding:3px 9px;
  font-size:11px; letter-spacing:.1em;
  color:var(--brown); background:transparent;
  border:1.5px solid var(--brown);
  cursor:pointer;
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.copy-btn:hover{ background:var(--brown); color:var(--cream); }
.copy-btn.is-done{ background:var(--orange); color:var(--brown); }
.footer__contact-note{
  margin-top:14px; padding-top:12px;
  font-size:12px; letter-spacing:.04em; color:#7A6A58;
  border-top:1px dashed rgba(34,26,20,.35);
}

.footer__bottom{
  max-width:var(--shell);
  margin-inline:auto;
  padding:18px var(--edge) 30px;
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 24px;
  font-size:12px; letter-spacing:.07em; color:var(--mist);
}
.footer__legal{ font-family:var(--font-mono); }
.footer__copyright{ font-family:var(--font-mono); }
.footer__top{
  padding:8px 14px;
  font-size:12px; letter-spacing:.12em;
  color:var(--chalk); background:transparent;
  border:1px solid var(--line);
  cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.footer__top:hover{ border-color:var(--orange); color:var(--orange); }

/* ============ 15 响应式 ============ */
@media (max-width:1023px){
  body{ padding-inline-start:0; padding-top:64px; }

  .site-header{
    top:0; left:0; right:0; bottom:auto;
    width:auto; height:64px;
    flex-direction:row; align-items:center;
    gap:12px;
    padding:0 14px;
    border-right:none;
    border-bottom:1px solid var(--line);
  }
  .brand{ flex-direction:row; align-items:center; gap:10px; }
  .brand__mark{ width:36px; height:36px; font-size:17px; box-shadow:3px 3px 0 rgba(242,235,221,.22); }
  .brand__slogan{ letter-spacing:.1em; }
  .rail-progress{
    top:auto; bottom:-1px; left:0; right:0; height:3px; width:auto;
  }
  .rail-progress__bar{
    width:calc(var(--progress,0) * 100%);
    height:100%;
    transition:width .12s linear;
  }
  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .nav-scrim{ display:block; }

  .rail-nav{
    position:fixed;
    top:64px; right:0; bottom:0;
    width:min(320px,86vw);
    padding:18px 16px 22px;
    background:var(--panel);
    border-left:2px solid var(--brown);
    box-shadow:-14px 0 34px rgba(0,0,0,.55);
    transform:translateX(103%);
    transition:transform .22s var(--ease);
    overflow-y:auto;
    z-index:95;
  }
  .site-header[data-open] .rail-nav{ transform:translateX(0); }
  .rail-nav__list{ overflow:visible; gap:4px; }
  .rail-nav__link{
    flex-direction:row; align-items:baseline; gap:10px;
    padding:13px 10px;
    border-left-width:3px;
  }
  .rail-nav__label{ font-size:16px; font-weight:800; }
  .rail-nav__idx{ font-size:11px; }
  .rail-cta{ padding:14px 8px; font-size:14px; }
  .rail-meta{ font-size:11px; }

  .footer__grid{ grid-template-columns:1fr 1fr; }
  .footer__brand{ grid-column:1 / -1; }
  .footer__contact{ grid-column:1 / -1; }
}

@media (max-width:900px){
  .span-3,.span-4,.span-5,.span-6,.span-7,.span-8,.span-9{ grid-column:1 / -1; }
}

@media (max-width:680px){
  body{ font-size:16.5px; }
  .footer__grid{ grid-template-columns:1fr; gap:32px; }
  .footer__cols{ grid-template-columns:1fr; gap:24px; }
  .footer__bottom{ flex-direction:column; align-items:flex-start; }
}

/* ============ 16 动效降级 ============ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .js [data-reveal]{ opacity:1; transform:none; }
}