:root{
  --color-navy:#0B1E36;
  --color-gold:#C9A961;
  --color-beige:#F5F1E8;
  --color-mist:#E4E4E4;
  --color-ink:#1E242B;
  --color-moss:#5F6750;
  --color-success:#4A6B5A;
  --color-warning:#B66A4C;
  --color-link:#3D7B9A;
  --color-line:#8A8F98;

  --font-head:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-body:"Noto Serif SC","Source Han Serif SC","SimSun",serif;
  --font-mono:"IBM Plex Mono","JetBrains Mono",Consolas,monospace;

  --header-w:260px;
  --content-w:1160px;
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:40px;
  --sp-6:72px;
  --sp-7:112px;
}

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

html{
  scroll-behavior:smooth;
  font-size:16px;
}

body{
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.8;
  color:var(--color-ink);
  background:
    linear-gradient(rgba(138,143,152,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,143,152,0.045) 1px, transparent 1px),
    var(--color-beige);
  background-size:32px 32px;
  padding-left:var(--header-w);
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-weight:700;
  line-height:1.3;
  color:var(--color-ink);
}

p{
  color:var(--color-ink);
}

a{
  color:var(--color-link);
  transition:color 0.2s ease;
}

a:hover{
  color:var(--color-navy);
}

img{
  max-width:100%;
  height:auto;
  display:block;
}

ul,ol{
  list-style:none;
}

button,input,select,textarea{
  font:inherit;
  color:inherit;
}

button{
  background:none;
  border:none;
  cursor:pointer;
}

::selection{
  background:var(--color-gold);
  color:var(--color-navy);
}

:focus-visible{
  outline:2px solid var(--color-gold);
  outline-offset:2px;
}

#main-content{
  outline:none;
  scroll-margin-top:72px;
}

.skip-link{
  position:fixed;
  top:-64px;
  left:16px;
  z-index:3000;
  background:var(--color-gold);
  color:var(--color-navy);
  font-family:var(--font-head);
  font-weight:700;
  font-size:0.875rem;
  padding:10px 18px;
  transition:top 0.2s ease;
}

.skip-link:focus{
  top:16px;
}

.site-header{
  position:fixed;
  top:0;
  left:0;
  bottom:0;
  width:var(--header-w);
  z-index:1000;
  display:flex;
  flex-direction:column;
  background-color:var(--color-navy);
  background-image:
    linear-gradient(rgba(201,169,97,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,97,0.03) 1px, transparent 1px);
  background-size:24px 24px;
  border-right:1px solid rgba(201,169,97,0.2);
  overflow-y:auto;
  color:rgba(245,241,232,0.82);
}

.brand-block{
  padding:32px 24px 20px;
  border-bottom:1px solid rgba(201,169,97,0.22);
}

.brand-link{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.brand-mark{
  font-family:var(--font-head);
  font-size:2.125rem;
  font-weight:700;
  letter-spacing:0.08em;
  color:#fff;
  line-height:1;
}

.brand-mark::before{
  content:"";
  display:inline-block;
  width:10px;
  height:10px;
  background:var(--color-gold);
  margin-right:10px;
  vertical-align:middle;
}

.brand-suffix{
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.14em;
  color:var(--color-gold);
}

.header-topbar{
  margin:16px 24px;
  padding:12px 16px;
  background:rgba(11,30,54,0.5);
  border-left:2px solid var(--color-gold);
  font-family:var(--font-mono);
  font-size:0.75rem;
  line-height:1.7;
  color:rgba(245,241,232,0.6);
}

.nav-toggle{
  display:none;
}

.header-slide{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

.site-nav{
  flex:1;
  min-height:0;
  overflow-y:auto;
}

.site-nav-list{
  display:flex;
  flex-direction:column;
  padding:8px 0;
}

.nav-link{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:13px 24px;
  border-left:2px solid transparent;
  color:rgba(245,241,232,0.72);
  font-family:var(--font-head);
  font-weight:500;
  font-size:0.9375rem;
  line-height:1.5;
  transition:background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.nav-index{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:rgba(201,169,97,0.55);
  letter-spacing:0.04em;
  min-width:20px;
  transition:transform 0.2s ease;
}

.nav-label{
  flex:1;
}

.nav-link:hover{
  background:rgba(255,255,255,0.04);
  color:#fff;
  border-left-color:var(--color-gold);
}

.nav-link:hover .nav-index{
  transform:translateX(-4px);
}

.nav-link[aria-current="page"]{
  background:rgba(201,169,97,0.1);
  border-left-color:var(--color-gold);
  color:#fff;
  font-weight:700;
}

.nav-link[aria-current="page"] .nav-index{
  color:var(--color-gold);
}

.nav-link[aria-current="page"]::after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  width:3px;
  height:20px;
  background:var(--color-gold);
}

.header-toolbar{
  padding:20px 24px 8px;
  border-top:1px solid rgba(201,169,97,0.16);
}

.toolbar-links{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:14px;
}

.toolbar-link{
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:rgba(245,241,232,0.48);
  letter-spacing:0.04em;
  position:relative;
  padding-bottom:3px;
}

.toolbar-link::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:var(--color-gold);
  transition:width 0.3s ease;
}

.toolbar-link:hover{
  color:var(--color-gold);
}

.toolbar-link:hover::after{
  width:100%;
}

.header-coordinate{
  margin-top:auto;
  padding:14px 24px 18px;
  border-top:1px solid rgba(201,169,97,0.14);
}

.coord-axis,.coord-num{
  display:block;
  font-family:var(--font-mono);
  font-size:0.6875rem;
  color:rgba(245,241,232,0.32);
  letter-spacing:0.1em;
  line-height:1.8;
}

.site-main{
  min-height:calc(100vh - 360px);
}

.container{
  max-width:var(--content-w);
  margin:0 auto;
  padding:0 var(--sp-5);
}

.container-narrow{
  max-width:820px;
  margin:0 auto;
  padding:0 var(--sp-5);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:10px 22px;
  border:1px solid var(--color-line);
  background:var(--color-beige);
  color:var(--color-ink);
  font-family:var(--font-head);
  font-weight:500;
  font-size:0.9375rem;
  line-height:1.4;
  text-align:center;
  transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.btn:hover{
  border-color:var(--color-navy);
  color:var(--color-navy);
}

.btn-primary{
  background:var(--color-gold);
  border-color:var(--color-gold);
  color:var(--color-navy);
  font-weight:700;
}

.btn-primary:hover{
  background:#D8BC7A;
  border-color:#D8BC7A;
  color:var(--color-navy);
}

.btn-ghost{
  background:transparent;
  border-color:rgba(201,169,97,0.45);
  color:rgba(245,241,232,0.85);
}

.btn-ghost:hover{
  border-color:var(--color-gold);
  color:#fff;
}

.btn-block{
  width:100%;
}

.layout-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:var(--sp-4) var(--sp-5);
}

.col-span-3{
  grid-column:span 3;
}

.col-span-5{
  grid-column:span 5;
}

.col-span-8{
  grid-column:span 8;
}

.section{
  padding:var(--sp-6) 0;
}

.section-tight{
  padding:var(--sp-4) 0;
}

.section-heading{
  font-family:var(--font-head);
  font-size:clamp(1.5rem,2.5vw,2.25rem);
  font-weight:700;
  color:var(--color-ink);
  padding-bottom:12px;
  margin-bottom:var(--sp-4);
  position:relative;
}

.section-heading::before{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:52px;
  height:3px;
  background:var(--color-gold);
}

.section-subhead{
  font-family:var(--font-head);
  font-weight:500;
  font-size:clamp(1.0625rem,1.5vw,1.375rem);
  color:var(--color-moss);
  margin-bottom:var(--sp-5);
  line-height:1.5;
}

.breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:var(--sp-4) 0;
  font-family:var(--font-mono);
  font-size:0.8125rem;
  color:var(--color-moss);
}

.breadcrumb a{
  color:var(--color-link);
}

.breadcrumb a:hover{
  color:var(--color-navy);
}

.breadcrumb .sep{
  color:var(--color-line);
}

.index-list{
  position:relative;
  padding-left:32px;
  border-top:1px solid var(--color-line);
}

.index-list::before{
  content:"";
  position:absolute;
  left:12px;
  top:0;
  bottom:0;
  width:1px;
  background:var(--color-line);
}

.index-item{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:16px;
  padding:14px 0;
  border-bottom:1px solid var(--color-mist);
}

.index-item::before{
  content:"";
  position:absolute;
  left:-24px;
  top:50%;
  width:8px;
  height:8px;
  background:var(--color-beige);
  border:1px solid var(--color-line);
  border-radius:50%;
  transform:translateY(-50%);
}

.index-num{
  font-family:var(--font-mono);
  font-size:0.8125rem;
  color:var(--color-line);
  min-width:32px;
}

.index-title{
  font-family:var(--font-head);
  font-weight:500;
  font-size:1rem;
  color:var(--color-ink);
}

.card{
  position:relative;
  background:var(--color-beige);
  border:1px solid var(--color-line);
  padding:var(--sp-5);
  transition:border-color 0.2s ease, background 0.2s ease;
}

.card:hover{
  border-color:var(--color-navy);
  background:#FAF7F0;
}

.card::before{
  content:attr(data-index);
  position:absolute;
  top:12px;
  left:12px;
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:var(--color-line);
  letter-spacing:0.08em;
}

.card::after{
  content:attr(data-tag);
  position:absolute;
  bottom:12px;
  right:12px;
  font-family:var(--font-mono);
  font-size:0.6875rem;
  color:var(--color-gold);
  background:var(--color-navy);
  padding:2px 8px;
  letter-spacing:0.06em;
  line-height:1.6;
}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--sp-4);
}

.figure{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:16/10;
  overflow:hidden;
  background-color:var(--color-mist);
  background-image:
    linear-gradient(rgba(138,143,152,0.18) 1px, transparent 1px),
    linear-gradient(90deg, rgba(138,143,152,0.18) 1px, transparent 1px);
  background-size:16px 16px;
  border:1px solid var(--color-line);
  color:var(--color-line);
  font-family:var(--font-mono);
  font-size:0.8125rem;
}

.figure::after{
  content:attr(data-caption);
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:10px 14px;
  background:rgba(11,30,54,0.88);
  color:rgba(245,241,232,0.85);
  font-family:var(--font-mono);
  font-size:0.75rem;
  letter-spacing:0.04em;
  line-height:1.6;
}

.metric{
  background:var(--color-navy);
  border-top:3px solid var(--color-gold);
  padding:var(--sp-5);
  color:#fff;
}

.metric-value{
  font-family:var(--font-head);
  font-size:clamp(2.25rem,4vw,3.5rem);
  font-weight:700;
  color:var(--color-gold);
  line-height:1.2;
}

.metric-label{
  margin-top:6px;
  font-family:var(--font-mono);
  font-size:0.8125rem;
  color:rgba(245,241,232,0.55);
}

.status-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-success);
  vertical-align:middle;
  margin-right:8px;
}

.status-label{
  font-family:var(--font-head);
  font-size:0.8125rem;
  font-weight:500;
  color:var(--color-moss);
  vertical-align:middle;
}

.timeline{
  position:relative;
  display:flex;
  gap:0;
  overflow-x:auto;
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--color-line);
}

.timeline::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:1px;
  background:var(--color-line);
}

.timeline-item{
  position:relative;
  flex:0 0 140px;
  padding-top:var(--sp-4);
}

.timeline-item::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:1px;
  height:12px;
  background:var(--color-line);
}

.timeline-year{
  font-family:var(--font-head);
  font-size:1.875rem;
  font-weight:700;
  color:var(--color-navy);
  line-height:1.2;
}

.text-muted{
  color:var(--color-moss);
}

.text-gold{
  color:var(--color-gold);
}

.site-footer{
  background-color:var(--color-navy);
  background-image:
    linear-gradient(rgba(201,169,97,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,97,0.02) 1px, transparent 1px);
  background-size:32px 32px;
  color:rgba(245,241,232,0.7);
  border-top:3px solid var(--color-gold);
  padding:var(--sp-6) var(--sp-5) var(--sp-5);
}

.footer-grid{
  max-width:var(--content-w);
  margin:0 auto;
  display:grid;
  grid-template-columns:3fr 3fr 2fr;
  gap:var(--sp-5);
}

.footer-mark{
  font-family:var(--font-head);
  font-size:1.75rem;
  font-weight:700;
  color:#fff;
  letter-spacing:0.1em;
}

.footer-mark::before{
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  background:var(--color-gold);
  margin-right:10px;
  vertical-align:middle;
}

.footer-statement{
  margin-top:14px;
  font-size:0.875rem;
  line-height:1.8;
  color:rgba(245,241,232,0.6);
}

.footer-heading{
  font-family:var(--font-head);
  font-size:0.875rem;
  font-weight:700;
  letter-spacing:0.12em;
  color:var(--color-gold);
  margin-bottom:14px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(201,169,97,0.2);
}

.footer-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size:0.875rem;
}

.footer-list li{
  color:rgba(245,241,232,0.72);
  line-height:1.6;
}

.footer-list a{
  color:rgba(245,241,232,0.72);
  transition:color 0.2s ease, padding-left 0.2s ease;
}

.footer-list a:hover{
  color:var(--color-gold);
  padding-left:4px;
}

.footer-note{
  margin-top:10px;
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:rgba(245,241,232,0.42);
}

.footer-meta{
  max-width:var(--content-w);
  margin:var(--sp-5) auto 0;
  padding-top:var(--sp-4);
  border-top:1px solid rgba(201,169,97,0.16);
  display:flex;
  flex-direction:column;
  gap:10px;
  font-family:var(--font-mono);
  font-size:0.75rem;
  color:rgba(245,241,232,0.45);
}

.footer-trust{
  line-height:1.8;
}

.footer-copy{
  letter-spacing:0.04em;
}

.back-top{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:900;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--color-navy);
  border:1px solid var(--color-gold);
  color:var(--color-gold);
  font-size:1.25rem;
  font-family:var(--font-head);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s ease, visibility 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.back-top.is-visible{
  opacity:1;
  visibility:visible;
}

.back-top:hover{
  background:var(--color-gold);
  color:var(--color-navy);
}

.scroll-progress{
  position:fixed;
  top:0;
  left:var(--header-w);
  height:3px;
  width:0;
  background:var(--color-gold);
  z-index:2000;
  pointer-events:none;
}

.js [data-reveal]{
  opacity:0;
  transform:translateY(8px);
  transition:opacity 0.4s ease, transform 0.4s ease;
  transition-delay:var(--reveal-delay,0s);
}

.js [data-reveal].is-revealed{
  opacity:1;
  transform:none;
}

[data-reveal="1"]{
  --reveal-delay:0.12s;
}

[data-reveal="2"]{
  --reveal-delay:0.24s;
}

[data-reveal="3"]{
  --reveal-delay:0.36s;
}

[data-reveal="4"]{
  --reveal-delay:0.48s;
}

@media(max-width:1023px){
  body{
    padding-left:0;
  }

  .site-header{
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    height:64px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    overflow:visible;
    border-right:none;
    border-bottom:1px solid rgba(201,169,97,0.3);
  }

  .brand-block{
    padding:0;
    border-bottom:none;
  }

  .brand-mark{
    font-size:1.375rem;
  }

  .brand-mark::before{
    width:8px;
    height:8px;
    margin-right:8px;
  }

  .brand-suffix{
    display:none;
  }

  .header-topbar{
    display:none;
  }

  .nav-toggle{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 12px;
    border:1px solid rgba(201,169,97,0.45);
    background:transparent;
  }

  .nav-toggle-line{
    display:block;
    width:18px;
    height:2px;
    background:var(--color-gold);
    transition:transform 0.2s ease;
  }

  .nav-toggle-text{
    font-family:var(--font-head);
    font-size:0.75rem;
    color:var(--color-gold);
    letter-spacing:0.1em;
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(1){
    transform:translateY(3.5px) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] .nav-toggle-line:nth-child(2){
    transform:translateY(-3.5px) rotate(-45deg);
  }

  .header-slide{
    position:fixed;
    top:64px;
    left:0;
    bottom:0;
    width:min(320px,86vw);
    z-index:1600;
    display:flex;
    flex-direction:column;
    padding:24px 0 16px;
    background-color:var(--color-navy);
    background-image:
      linear-gradient(rgba(201,169,97,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(201,169,97,0.03) 1px, transparent 1px);
    background-size:24px 24px;
    border-right:1px solid rgba(201,169,97,0.25);
    transform:translateX(-102%);
    transition:transform 0.3s ease;
    overflow-y:auto;
    box-shadow:8px 0 24px rgba(0,0,0,0.25);
  }

  .header-slide[data-open]{
    transform:translateX(0);
  }

  .site-nav{
    flex:1;
    min-height:0;
    overflow-y:auto;
  }

  .header-toolbar{
    padding:20px 24px 8px;
    border-top:1px solid rgba(201,169,97,0.16);
  }

  .header-coordinate{
    padding:14px 24px;
  }

  .scroll-progress{
    left:0;
  }

  .footer-grid{
    grid-template-columns:1fr 1fr;
  }

  .footer-brand{
    grid-column:span 2;
  }

  .card-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:639px){
  .container{
    padding:0 20px;
  }

  .container-narrow{
    padding:0 20px;
  }

  .layout-grid{
    grid-template-columns:1fr;
  }

  .col-span-3,.col-span-5,.col-span-8{
    grid-column:span 1;
  }

  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-brand{
    grid-column:auto;
  }

  .card-grid{
    grid-template-columns:1fr;
  }

  .section{
    padding:48px 0;
  }
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    transition-delay:0s !important;
  }

  .js [data-reveal]{
    opacity:1;
    transform:none;
  }
}