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

/* ============ 2. TOKENS ============ */
:root{
  --blue:#0B2C4A;
  --blue-deep:#061C30;
  --paper:#F4F7FA;
  --white:#FFFFFF;
  --slate:#5A6B7B;
  --ink:#101820;
  --yellow:#F2B21B;
  --teal:#0E8C7F;
  --red:#C0392B;
  --line:rgba(16,24,32,.14);
  --line-strong:rgba(16,24,32,.30);
  --line-dim:rgba(244,247,250,.16);
  --wrap:1360px;
  --rail:12px;
  --gap:24px;
  --fs-13:13px;--fs-15:15px;--fs-17:17px;--fs-21:21px;
  --fs-28:28px;--fs-40:40px;--fs-56:56px;--fs-72:72px;
  --font-sans:"Noto Sans SC","Source Han Sans SC","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  --t-fast:120ms ease-out;
  --t:160ms ease-out;
  --t-slow:200ms ease-out;
}

/* ============ 3. BASE ============ */
body{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(16,24,32,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(16,24,32,.06) 1px,transparent 1px);
  background-size:48px 48px,48px 48px;
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--fs-17);
  line-height:1.85;
  padding-left:var(--rail);
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";
  position:fixed;
  left:0;top:0;bottom:0;
  width:var(--rail);
  background:var(--blue-deep);
  border-right:1px solid rgba(242,178,27,.45);
  z-index:80;
  pointer-events:none;
}
h1{font-size:var(--fs-56);line-height:1.1;font-weight:900;letter-spacing:-.01em}
h2{font-size:var(--fs-40);line-height:1.18;font-weight:900}
h3{font-size:var(--fs-28);line-height:1.26;font-weight:800}
h4{font-size:var(--fs-21);line-height:1.4;font-weight:800}
p a{color:var(--blue);border-bottom:1px solid var(--line-strong)}
p a:hover{border-bottom-color:var(--yellow);background:rgba(242,178,27,.14)}
strong{font-weight:800}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.masthead :focus-visible,.site-footer :focus-visible{outline-color:var(--yellow)}
.num,td.num,.facts .num{font-family:var(--font-mono);font-size:1.2em;font-variant-numeric:tabular-nums}
.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}
.skip-link{
  position:absolute;left:var(--rail);top:-64px;z-index:120;
  background:var(--yellow);color:var(--blue-deep);
  padding:10px 18px;font-weight:800;font-size:var(--fs-15);
  transition:top var(--t-fast);
}
.skip-link:focus{top:0}

/* ============ 4. LAYOUT HELPERS ============ */
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}
.section{padding:56px 0}
.section--tight{padding:28px 0}
.section--dark{
  background:var(--blue-deep);color:var(--paper);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px);
  border-top:1px solid rgba(244,247,250,.12);
  border-bottom:1px solid rgba(244,247,250,.12);
}
.section__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:10px 22px;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:12px;margin-bottom:26px;
}
.section--dark .section__head{border-bottom-color:rgba(244,247,250,.28)}
.section__title{font-size:var(--fs-28);font-weight:900;letter-spacing:.01em}
.section__desc{font-size:var(--fs-15);color:var(--slate)}
.section--dark .section__desc{color:rgba(244,247,250,.66)}
.eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-13);
  letter-spacing:.18em;text-transform:uppercase;color:var(--slate);
}
.section--dark .eyebrow{color:var(--yellow)}
.prose{max-width:70ch}
.prose p+p{margin-top:1.4em}
.prose ul{margin:1.4em 0}
.prose li{padding-left:18px;position:relative}
.prose li+li{margin-top:.5em}
.prose li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:2px;background:var(--yellow)}

.grid{display:grid;gap:var(--gap)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--split{grid-template-columns:minmax(0,1fr) 300px;align-items:start}
.aside-rail{position:sticky;top:104px;display:grid;gap:16px}

/* ============ 5. MASTHEAD ============ */
.masthead{
  position:sticky;top:0;z-index:60;
  background:var(--blue);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.02) 0 1px,transparent 1px 4px);
  color:var(--white);
  border-bottom:2px solid var(--yellow);
}
.masthead__frame{
  max-width:var(--wrap);margin:0 auto;
  padding:14px 24px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px 28px;
}
.masthead__brand{
  display:flex;flex-direction:column;gap:4px;
  border-left:3px solid var(--yellow);padding-left:13px;
}
.brand{display:flex;align-items:center;gap:11px}
.brand__mark{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;flex:0 0 36px;
  background:var(--yellow);color:var(--blue-deep);
  font-size:var(--fs-15);font-weight:900;letter-spacing:.02em;
  transition:background var(--t),color var(--t);
}
.brand:hover .brand__mark{background:var(--white)}
.brand__text{display:block;line-height:1.15}
.brand__line{display:block;font-size:var(--fs-21);font-weight:900;letter-spacing:.06em}
.brand__slogan{
  display:block;font-family:var(--font-mono);font-size:var(--fs-13);
  letter-spacing:.1em;color:rgba(244,247,250,.62);
}
.masthead__signature{
  font-family:var(--font-mono);font-size:var(--fs-13);
  color:rgba(244,247,250,.5);letter-spacing:.04em;
}
.nav{display:flex;justify-content:flex-end;min-width:0}
.nav__list{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end}
.nav__link{
  display:block;padding:8px 14px;
  font-size:var(--fs-15);font-weight:700;letter-spacing:.04em;
  color:rgba(244,247,250,.86);
  border:1px solid transparent;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.nav__link:hover{
  background:rgba(244,247,250,.1);
  border-color:rgba(242,178,27,.55);
  color:var(--white);
  transform:translateY(-2px);
}
.nav__link[aria-current="page"]{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--blue-deep);
}
.masthead__utility{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.utility-link{
  font-family:var(--font-mono);font-size:var(--fs-13);letter-spacing:.02em;
  padding:5px 11px;color:rgba(244,247,250,.9);
  border:1px solid rgba(244,247,250,.32);
  transition:background var(--t),color var(--t),border-color var(--t);
}
.utility-link:hover{background:var(--yellow);border-color:var(--yellow);color:var(--blue-deep)}
.utility-link--accent{border-color:var(--yellow);color:var(--yellow)}
.nav-toggle{
  display:none;align-items:center;gap:9px;
  padding:9px 13px;color:var(--white);
  border:1px solid rgba(244,247,250,.42);
  font-family:var(--font-mono);font-size:var(--fs-13);letter-spacing:.08em;
  transition:background var(--t),border-color var(--t),color var(--t);
}
.nav-toggle:hover{background:rgba(244,247,250,.12);border-color:var(--yellow);color:var(--yellow)}
.nav-toggle__bars{display:block;width:16px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.nav-toggle[aria-expanded="true"]{background:var(--yellow);border-color:var(--yellow);color:var(--blue-deep)}

/* scroll progress */
.scroll-progress{
  position:fixed;left:var(--rail);right:0;top:0;height:3px;
  z-index:110;pointer-events:none;background:transparent;
}
.scroll-progress__bar{
  display:block;height:100%;width:100%;
  background:var(--yellow);
  transform:scaleX(0);transform-origin:0 50%;
}

/* ============ 6. CONTENT COMPONENTS ============ */
.panel{background:var(--white);border:1px solid var(--line);border-radius:0}
.panel__tab{
  display:inline-block;background:var(--blue);color:var(--white);
  font-family:var(--font-mono);font-size:var(--fs-13);letter-spacing:.12em;
  padding:5px 11px;margin:0 0 -1px;
}
.panel__body{padding:22px 24px}
.panel--tint{background:var(--paper)}
.panel--dark{
  background:var(--blue-deep);color:var(--paper);
  border-color:rgba(244,247,250,.14);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px);
}
.panel--dark .panel__tab{background:var(--yellow);color:var(--blue-deep)}
.panel--dark .section__desc,.panel--dark .eyebrow{color:rgba(244,247,250,.66)}
.data-card{
  background:var(--white);
  border:1px solid var(--line);
  border-top:3px solid var(--blue);
  padding:20px 20px 22px;
  transition:transform var(--t),border-color var(--t),background var(--t);
}
.data-card:hover{transform:translateY(-2px);border-color:var(--yellow);background:var(--paper)}
.data-card__title{font-size:var(--fs-21);font-weight:800;line-height:1.35}
.data-card__meta{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--slate)}
.data-card__value{font-family:var(--font-mono);font-size:var(--fs-28);font-weight:700;color:var(--blue)}
.tag{
  display:inline-block;font-family:var(--font-mono);font-size:var(--fs-13);
  padding:3px 9px;border:1px solid var(--line-strong);
  color:var(--slate);background:var(--white);letter-spacing:.02em;
}
.tag--accent{border-color:var(--yellow);background:rgba(242,178,27,.14);color:#7a5606}
.tag--teal{border-color:var(--teal);background:rgba(14,140,127,.12);color:#0a6a60}
.tag--red{border-color:var(--red);background:rgba(192,57,43,.1);color:#932d21}
.facts{font-size:var(--fs-15);text-align:left}
.facts caption{
  text-align:left;font-family:var(--font-mono);font-size:var(--fs-13);
  color:var(--slate);padding:0 0 10px;
}
.facts th,.facts td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.facts thead th{
  font-size:var(--fs-13);font-weight:700;color:var(--slate);
  letter-spacing:.08em;border-bottom:1px solid var(--line-strong);
}
.facts tbody tr{transition:background var(--t)}
.facts tbody tr:hover{background:var(--paper)}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:11px 18px;border-radius:0;
  border:1px solid var(--blue);background:var(--white);color:var(--blue);
  font-size:var(--fs-15);font-weight:700;letter-spacing:.02em;
  transition:background var(--t),color var(--t),border-color var(--t),transform var(--t);
}
.btn:hover{background:var(--blue);color:var(--white);transform:translateY(-2px)}
.btn--accent{background:var(--yellow);border-color:var(--yellow);color:var(--blue-deep)}
.btn--accent:hover{background:var(--blue-deep);border-color:var(--blue-deep);color:var(--yellow)}
.btn--ghost{background:transparent;border-color:rgba(244,247,250,.45);color:var(--paper)}
.btn--ghost:hover{background:var(--paper);border-color:var(--paper);color:var(--blue-deep)}
.crumbs{
  display:flex;flex-wrap:wrap;gap:0;
  font-family:var(--font-mono);font-size:var(--fs-13);color:var(--slate);
  padding:14px 0;
}
.crumbs li{display:flex;align-items:center}
.crumbs li::after{content:"/";margin:0 9px;color:var(--line-strong)}
.crumbs li:last-child::after{content:"";margin:0}
.crumbs a:hover{color:var(--blue);border-bottom:1px solid var(--yellow)}

/* track / timeline */
.track{border-top:1px solid var(--line-strong)}
.track__list{display:flex;flex-wrap:wrap}
.track__node{
  position:relative;flex:1 0 176px;
  padding:24px 18px 20px;
  background:var(--white);
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  opacity:.62;
  transition:opacity var(--t-slow),background var(--t),border-color var(--t),transform var(--t);
}
.track__node::before{
  content:"";position:absolute;left:0;top:0;
  width:10px;height:10px;background:var(--line-strong);
  transition:background var(--t-slow);
}
.track__node:hover{transform:translateY(-2px);border-color:var(--yellow)}
.track__node[data-lit]{opacity:1;background:var(--white)}
.track__node[data-lit]::before{background:var(--yellow)}
.track__date{font-family:var(--font-mono);font-size:var(--fs-15);font-weight:700;color:var(--blue)}
.track__meta{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--slate)}

/* media */
.media-frame{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  background:var(--blue-deep);border:1px solid var(--line);
}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame--wide{aspect-ratio:21/9}
.media-frame--tall{aspect-ratio:3/4}
.media-frame--square{aspect-ratio:1/1}
.media-frame__overlay{
  position:absolute;left:0;right:0;bottom:0;
  padding:16px 18px;background:rgba(6,28,48,.74);
  color:var(--paper);font-size:var(--fs-15);
}
.media-frame__overlay .eyebrow{display:block;color:var(--yellow);margin-bottom:4px}

/* filter */
.filter-bar{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  padding:14px 16px;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--yellow);
}
.filter-input{
  flex:1 1 240px;min-width:0;
  padding:9px 12px;background:var(--paper);
  border:1px solid var(--line-strong);
  font-size:var(--fs-15);
}
.filter-input:focus-visible{outline:2px solid var(--teal);outline-offset:2px;background:var(--white)}
.filter-count{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--slate)}

/* ============ 7. FOOTER ============ */
.site-footer{
  margin-top:72px;
  background:var(--blue-deep);
  background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.022) 0 1px,transparent 1px 4px);
  color:rgba(244,247,250,.78);
  border-top:3px solid var(--yellow);
  font-size:var(--fs-15);
}
.site-footer__frame{max-width:var(--wrap);margin:0 auto;padding:56px 24px 28px}
.site-footer__grid{
  display:grid;gap:32px 28px;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,.62fr)) minmax(0,1.15fr);
  padding-bottom:36px;
  border-bottom:1px solid var(--line-dim);
}
.site-footer__name{font-size:var(--fs-21);font-weight:900;color:var(--white);letter-spacing:.06em}
.site-footer__statement{margin-top:12px;line-height:1.9;max-width:38ch}
.site-footer__note{margin-top:12px;font-family:var(--font-mono);font-size:var(--fs-13);color:rgba(244,247,250,.5)}
.site-footer__col-title{
  font-family:var(--font-mono);font-size:var(--fs-13);
  letter-spacing:.16em;color:var(--yellow);margin-bottom:14px;
}
.site-footer__list{display:grid;gap:9px}
.site-footer__link{
  display:inline-block;color:rgba(244,247,250,.8);
  border-bottom:1px solid transparent;
  transition:color var(--t),border-color var(--t);
}
.site-footer__link:hover{color:var(--yellow);border-bottom-color:var(--yellow)}
.site-footer__contact-item{display:flex;gap:10px;line-height:1.7}
.site-footer__key{
  flex:0 0 44px;font-family:var(--font-mono);font-size:var(--fs-13);
  color:rgba(244,247,250,.5);padding-top:2px;
}
.site-footer__value{color:rgba(244,247,250,.9);word-break:break-word}
.site-footer__tip{
  margin-top:12px;font-size:var(--fs-13);line-height:1.75;
  color:rgba(244,247,250,.55);max-width:34ch;
}
.site-footer__bottom{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;
  padding-top:22px;
}
.site-footer__legal{
  font-family:var(--font-mono);font-size:var(--fs-13);
  color:rgba(244,247,250,.6);
  border:1px solid var(--line-dim);padding:3px 10px;
}
.site-footer__meta{font-family:var(--font-mono);font-size:var(--fs-13);color:rgba(244,247,250,.5)}

/* ============ 8. RESPONSIVE ============ */
@media (max-width:1180px){
  .site-footer__grid{grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,.7fr))}
  .site-footer__contact{grid-column:1 / -1;padding-top:22px;border-top:1px solid var(--line-dim)}
  .site-footer__tip{max-width:60ch}
}
@media (max-width:1024px){
  h1{font-size:var(--fs-40)}
  h2{font-size:var(--fs-28)}
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid--split{grid-template-columns:minmax(0,1fr)}
  .aside-rail{position:static}
  .masthead__signature{display:none}
}
@media (max-width:900px){
  body{padding-left:0;background-size:36px 36px,36px 36px}
  body::before{display:none}
  .scroll-progress{left:0}
  .masthead__frame{
    grid-template-columns:minmax(0,1fr) auto;
    padding:12px 16px;gap:12px 16px;
  }
  .masthead__brand{border-left-width:2px;padding-left:10px}
  .nav-toggle{display:inline-flex}
  .nav{display:none;flex-direction:column;justify-content:flex-start}
  .nav[data-open]{display:flex}
  .nav__list{
    flex-direction:column;flex-wrap:nowrap;justify-content:flex-start;
    gap:2px;width:100%;padding-top:12px;
    border-top:1px solid rgba(244,247,250,.22);
  }
  .nav__item{width:100%}
  .nav__link{
    padding:12px 12px;border:1px solid rgba(244,247,250,.14);
    font-size:var(--fs-17);
  }
  .nav__link:hover{transform:none}
  .masthead__utility{
    grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;
    align-items:center;gap:8px;padding-top:10px;
    border-top:1px solid rgba(244,247,250,.14);
  }
  .wrap{padding:0 16px}
  .site-footer__frame{padding:40px 16px 24px}
  .section{padding:40px 0}
}
@media (max-width:720px){
  .grid--3{grid-template-columns:minmax(0,1fr)}
  .site-footer__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px 20px}
  .site-footer__brand,.site-footer__contact{grid-column:1 / -1}
  .track__list{flex-wrap:nowrap;overflow-x:auto}
  .track__node{flex:0 0 76%;border-right:1px solid var(--line)}
  .facts thead{display:none}
  .facts tr{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line);padding:10px 0}
  .facts th,.facts td{border-bottom:0;padding:4px 0}
  .facts td::before{
    content:attr(data-label);
    display:block;font-family:var(--font-mono);font-size:var(--fs-13);
    color:var(--slate);letter-spacing:.06em;
  }
}
@media (max-width:520px){
  h1{font-size:var(--fs-28)}
  h2{font-size:var(--fs-28)}
  .btn{width:100%;justify-content:center}
  .site-footer__bottom{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .data-card:hover,.nav__link:hover,.btn:hover,.track__node:hover{transform:none}
  .track__node{opacity:1}
}