/* ===== 重置 ===== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:150px}
body,h1,h2,h3,h4,h5,p,ul,ol,li,figure,blockquote,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,video{display:block;max-width:100%}
input,[hidden]{}
[hidden]{display:none !important}

/* ===== 变量 ===== */
:root{
  --ink:#0E1013;
  --ink-2:#16181D;
  --ink-3:#1E2229;
  --ochre:#C2542B;
  --ochre-lt:#E8834F;
  --rock:#464B50;
  --rock-lt:#8E9499;
  --lime:#C6F24E;
  --indigo:#2A2440;
  --pine:#123A32;
  --paper:#F2EDE6;
  --c-text:#F2EDE6;
  --c-dim:#8E9499;
  --hair:rgba(142,148,153,.28);
  --font-sans:"Noto Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  --w:min(100% - 40px,1280px);
  --pad-section:clamp(56px,8vw,112px);
  --ease:cubic-bezier(.24,.72,.28,1);
}

/* ===== 基础排版 ===== */
body{
  background:var(--ink);
  color:var(--c-text);
  font-family:var(--font-sans);
  font-size:1rem;
  font-weight:400;
  line-height:1.62;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:900;line-height:1.02;letter-spacing:-.02em;color:var(--paper)}
h1{font-size:clamp(2.4rem,6vw,5.4rem)}
h2{font-size:clamp(1.7rem,3.6vw,3rem)}
h3{font-size:clamp(1.1rem,1.6vw,1.5rem);font-weight:700;line-height:1.2;letter-spacing:-.01em}
p{max-width:none}
strong,b{font-weight:700;color:var(--paper)}

/* ===== 布局工具 ===== */
.container{width:var(--w);margin-inline:auto}
.prose{max-width:68ch}
.prose p+p{margin-top:1.05em}
.grid{display:grid;gap:clamp(16px,2.4vw,32px)}
.grid--12{grid-template-columns:repeat(12,1fr)}
.section{padding-block:var(--pad-section)}
.section--indigo{background:var(--indigo)}
.section--pine{background:var(--pine)}
.section--paper{background:var(--paper);color:var(--ink)}
.section--paper h1,.section--paper h2,.section--paper h3,.section--paper h4,.section--paper strong{color:var(--ink)}

/* ===== 焦点 ===== */
:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
#main-content:focus{outline:none}

/* ===== 跳转链接 ===== */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--lime);color:var(--ink);
  font-size:.85rem;font-weight:700;letter-spacing:.02em;
  padding:11px 20px;
}
.skip-link:focus{left:12px;top:12px}

/* ===== 页头 ===== */
.site-header{
  position:sticky;top:0;z-index:80;
  background:var(--ink);
  border-bottom:2px solid var(--rock);
}
.progress-rail{
  position:absolute;left:0;right:0;bottom:0;height:3px;
  background:rgba(70,75,80,.5);pointer-events:none;
}
.progress-rail__bar{
  display:block;height:100%;width:100%;
  background:linear-gradient(90deg,var(--ochre),var(--ochre-lt) 55%,var(--lime));
  transform:scaleX(0);transform-origin:0 50%;
}
.header-inner{
  width:var(--w);margin-inline:auto;
  padding:18px 0 12px;
  transition:padding .25s var(--ease);
}
.masthead{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  text-align:center;
}
.masthead__brand{
  position:relative;
  font-size:clamp(1.9rem,4.6vw,3.1rem);
  font-weight:900;letter-spacing:-.045em;line-height:1;
  color:var(--paper);
  transition:font-size .25s var(--ease);
}
.masthead__brand::after{
  content:"";display:inline-block;
  width:.16em;height:.16em;margin-left:.1em;
  background:var(--lime);
  vertical-align:baseline;
}
.masthead__tag{
  font-family:var(--font-mono);
  font-size:.68rem;font-weight:500;letter-spacing:.26em;
  color:var(--rock-lt);
  text-transform:uppercase;
}
.site-header[data-shrunk] .header-inner{padding:9px 0 7px}
.site-header[data-shrunk] .masthead__tag{display:none}
.site-header[data-shrunk] .masthead__brand{font-size:1.4rem}

.nav-bar{
  margin-top:14px;
  padding-top:11px;
  border-top:1px solid var(--hair);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:14px;
}
.nav-toggle{grid-column:1;grid-row:1;display:none}
.site-nav{grid-column:2;grid-row:1}
.nav-actions{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:10px}

.nav-list{display:flex;align-items:center;gap:clamp(8px,1.7vw,26px)}
.nav-list a{
  position:relative;display:inline-block;
  padding:5px 2px;
  font-size:.9rem;font-weight:700;letter-spacing:.01em;
  color:var(--rock-lt);
  transition:color .18s var(--ease);
}
.nav-list a::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--ochre);
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .2s var(--ease);
}
.nav-list a:hover{color:var(--paper)}
.nav-list a:hover::after{transform:scaleX(1)}
.nav-list a[aria-current="page"]{color:var(--lime)}
.nav-list a[aria-current="page"]::after{background:var(--lime);transform:scaleX(1)}

.nav-toggle{
  align-items:center;gap:9px;
  padding:8px 12px;
  border:1px solid var(--rock);
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;color:var(--rock-lt);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.nav-toggle:hover{border-color:var(--ochre);color:var(--paper)}
.nav-toggle[aria-expanded="true"]{border-color:var(--lime);color:var(--lime)}
.nav-toggle__lines{display:flex;flex-direction:column;gap:4px;width:16px}
.nav-toggle__lines span{display:block;height:2px;background:currentColor}

.search-toggle{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;
  border:1px solid var(--rock);
  font-family:var(--font-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;color:var(--rock-lt);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.search-toggle:hover{border-color:var(--ochre);color:var(--paper)}
.search-toggle[aria-expanded="true"]{border-color:var(--lime);color:var(--lime)}
.search-toggle__icon{
  position:relative;display:block;width:11px;height:11px;
  border:1.5px solid currentColor;border-radius:50%;
}
.search-toggle__icon::after{
  content:"";position:absolute;right:-5px;bottom:-2px;
  width:6px;height:1.5px;background:currentColor;transform:rotate(45deg);
}

.search-panel{
  display:none;
  margin-top:12px;
  padding-top:14px;
  border-top:1px solid var(--rock);
}
.search-panel[data-open]{display:block;animation:fadeIn .16s var(--ease)}
.search-panel__field{
  display:flex;align-items:center;gap:12px;
  padding:10px 14px;
  background:var(--ink-2);
  border:2px solid var(--rock);
  transition:border-color .18s var(--ease);
}
.search-panel__field:focus-within{border-color:var(--lime)}
.search-panel__label{
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;
  color:var(--rock-lt);white-space:nowrap;
}
.search-panel__input{
  flex:1;min-width:0;
  background:transparent;border:0;outline:none;
  color:var(--paper);font-family:var(--font-sans);font-size:.95rem;
}
.search-panel__input::placeholder{color:var(--rock-lt)}
.search-panel__list{
  display:grid;gap:8px;margin-top:10px;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.search-panel__list a{
  display:block;padding:9px 12px;
  border:1px solid var(--rock);
  font-size:.84rem;font-weight:700;color:var(--rock-lt);
  transition:border-color .18s var(--ease),color .18s var(--ease);
}
.search-panel__list a:hover{border-color:var(--ochre);color:var(--paper)}
.search-panel__empty{
  display:none;margin-top:10px;
  font-family:var(--font-mono);font-size:.76rem;letter-spacing:.1em;
  color:var(--ochre-lt);
}
.search-panel[data-empty] .search-panel__empty{display:block}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ===== 按钮 ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:12px 22px;
  border:2px solid transparent;
  font-size:.9rem;font-weight:700;letter-spacing:.01em;line-height:1;
  transition:background .18s var(--ease),color .18s var(--ease),
             border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.btn--sm{padding:9px 14px;font-size:.8rem}
.btn--primary{background:var(--ochre);border-color:var(--ochre);color:#fff}
.btn--primary:hover{background:var(--ochre-lt);border-color:var(--ochre-lt);box-shadow:5px 5px 0 rgba(198,242,78,.32)}
.btn--lime{background:var(--lime);border-color:var(--lime);color:var(--ink)}
.btn--lime:hover{background:#d6f97a;border-color:#d6f97a;box-shadow:5px 5px 0 rgba(194,84,43,.5)}
.btn--ghost{background:transparent;border-color:var(--rock);color:var(--paper)}
.btn--ghost:hover{border-color:var(--ochre);color:var(--ochre-lt);box-shadow:-5px 5px 0 rgba(194,84,43,.28)}

/* ===== 章节标识 ===== */
.sec-num{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:.78rem;font-weight:700;
  letter-spacing:.22em;color:var(--ochre);text-transform:uppercase;
}
.sec-num::after{content:"";display:inline-block;width:44px;height:2px;background:currentColor}
.sec-big{
  font-family:var(--font-mono);font-weight:700;
  font-size:clamp(3rem,8vw,7rem);line-height:.85;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px var(--rock);
}
@supports not (-webkit-text-stroke:2px #000){
  .sec-big{color:var(--rock)}
}

/* ===== 标签 ===== */
.tag{
  display:inline-block;
  padding:4px 9px;
  border:1px solid var(--rock);
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--rock-lt);
}
.tag--ochre{border-color:var(--ochre);background:rgba(194,84,43,.14);color:var(--ochre-lt)}
.tag--lime{border-color:var(--lime);background:rgba(198,242,78,.1);color:var(--lime)}

/* ===== 卡片 ===== */
.card{
  background:var(--ink-2);
  border:2px solid var(--rock);
  padding:clamp(16px,2vw,24px);
  box-shadow:4px 4px 0 rgba(0,0,0,.45);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.card:hover{border-color:var(--ochre);box-shadow:-6px 6px 0 rgba(194,84,43,.34)}
.section--paper .card{background:#fff;border-color:var(--ink);box-shadow:4px 4px 0 rgba(14,16,19,.9)}

/* ===== 图片容器 ===== */
.img-frame{
  position:relative;display:block;overflow:hidden;
  background:var(--ink-2);
  border:2px solid var(--rock);
}
.img-frame>img,.img-frame>svg{
  width:100%;height:100%;object-fit:cover;display:block;
}
.img-frame::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);
  background-size:3px 3px;
  mix-blend-mode:screen;
}
.img-frame--16x9{aspect-ratio:16/9}
.img-frame--4x3{aspect-ratio:4/3}
.img-frame--3x2{aspect-ratio:3/2}
.img-frame--1x1{aspect-ratio:1/1}
.img-frame--3x4{aspect-ratio:3/4}
.img-frame__meta{
  position:absolute;left:0;bottom:0;z-index:2;
  padding:8px 12px;
  background:var(--ink);
  border-top:2px solid var(--ochre);
  border-right:2px solid var(--ochre);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;
  color:var(--lime);
}

/* ===== 面包屑 ===== */
.breadcrumb{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  padding:20px 0;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--rock-lt);
}
.breadcrumb a{transition:color .18s var(--ease)}
.breadcrumb a:hover{color:var(--lime)}
.breadcrumb__sep{color:var(--ochre)}

/* ===== 显现动画 ===== */
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .32s var(--ease),transform .32s var(--ease)}
[data-reveal][data-visible]{opacity:1;transform:none}

/* ===== 页脚 ===== */
.site-footer{
  margin-top:clamp(48px,7vw,96px);
  background:var(--ink);
  border-top:2px solid var(--rock);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.7fr 1fr 1fr 1.3fr;
  gap:clamp(24px,4vw,56px);
  padding-block:clamp(44px,6vw,76px);
}
.footer-brand{
  font-size:clamp(1.6rem,3vw,2.3rem);
  font-weight:900;letter-spacing:-.04em;line-height:1;color:var(--paper);
}
.footer-slogan{
  margin-top:12px;
  font-family:var(--font-mono);font-size:.74rem;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ochre-lt);
}
.footer-desc{
  margin-top:16px;max-width:34ch;
  font-size:.9rem;line-height:1.72;color:var(--rock-lt);
}
.footer-head{
  padding-bottom:10px;margin-bottom:14px;
  border-bottom:1px solid var(--rock);
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rock-lt);
}
.footer-list li+li{margin-top:11px}
.footer-list a{
  font-size:.92rem;font-weight:500;color:var(--paper);opacity:.84;
  transition:opacity .18s var(--ease),color .18s var(--ease);
}
.footer-list a:hover{opacity:1;color:var(--lime)}
.footer-contact li+li{margin-top:14px}
.footer-contact li{display:grid;gap:3px}
.footer-contact__k{
  font-family:var(--font-mono);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--rock-lt);
}
.footer-contact__v{font-size:.92rem;font-weight:500;color:var(--paper);word-break:break-all}
.footer-base{border-top:1px solid var(--rock);background:var(--ink-2)}
.footer-base__inner{
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;
  padding-block:18px;
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;
  color:var(--rock-lt);
}

/* ===== 响应式 ===== */
@media (max-width:1024px){
  .footer-grid{grid-template-columns:1fr 1fr}
  .grid--12{grid-template-columns:repeat(6,1fr)}
}
@media (max-width:960px){
  .nav-bar{grid-template-columns:auto 1fr;gap:10px}
  .nav-toggle{display:inline-flex;grid-column:1;grid-row:1}
  .nav-actions{grid-column:2;grid-row:1;justify-self:end}
  .site-nav{
    grid-column:1 / -1;grid-row:2;
    display:block;
    max-height:0;overflow:hidden;
    border-top:1px solid transparent;
    transition:max-height .3s var(--ease),border-color .3s var(--ease);
  }
  .site-nav[data-open]{max-height:70vh;overflow-y:auto;border-top-color:var(--rock)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0;padding-top:4px}
  .nav-list a{display:block;padding:13px 4px;border-bottom:1px dashed var(--hair);color:var(--paper)}
  .nav-list a::after{display:none}
  .nav-list a[aria-current="page"]{color:var(--lime)}
  .search-panel__label{display:none}
}
@media (max-width:640px){
  :root{--w:min(100% - 28px,1280px);--pad-section:clamp(44px,10vw,72px)}
  .footer-grid{grid-template-columns:1fr}
  .grid--12{grid-template-columns:repeat(4,1fr)}
  .footer-base__inner{flex-direction:column;gap:6px}
  .search-toggle span:not(.search-toggle__icon){display:none}
}

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