:root{
  --pitch:#1F7A3D;
  --pitch-deep:#144D24;
  --track:#E63946;
  --flare:#F4E04D;
  --night:#1D3557;
  --ice:#F1FAEE;
  --ink:#2B2D42;
  --signal:#F77F00;
  --font-head:"Noto Sans SC","Microsoft YaHei UI","PingFang SC",sans-serif;
  --font-body:"Noto Sans SC","PingFang SC","Microsoft YaHei",sans-serif;
  --font-data:"Roboto Mono","SFMono-Regular","Consolas","Liberation Mono","Courier New",monospace;
  --header-w:clamp(240px,22vw,320px);
  --mobile-header-h:68px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:8px 8px 0 var(--ink);
}

*,*::before,*::after{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--mobile-header-h) + .5rem);
}

body{
  margin:0;
  min-height:100vh;
  overflow-x:hidden;
  font-family:var(--font-body);
  font-size:clamp(1rem,1.15vw,1.125rem);
  line-height:1.7;
  color:var(--ink);
  background-color:var(--ice);
  background-image:
    linear-gradient(135deg,rgba(31,122,61,.045) 25%,transparent 25%,transparent 75%,rgba(31,122,61,.045) 75%),
    linear-gradient(135deg,rgba(230,57,70,.03) 25%,transparent 25%,transparent 75%,rgba(230,57,70,.03) 75%);
  background-size:42px 42px;
}

h1,h2,h3,h4,p,ul,ol,dl,dd,blockquote,figure{margin:0}
ul,ol{padding-left:1.25em}
img{max-width:100%;display:block}
button{font:inherit;color:inherit}
a{color:inherit}

:focus-visible{
  outline:3px solid var(--flare);
  outline-offset:2px;
  box-shadow:0 0 0 6px var(--ink);
}

::selection{background:var(--track);color:#fff}

#main-content{scroll-margin-top:calc(var(--mobile-header-h) + 8px)}

.site-skip{
  position:fixed;
  top:.5rem;
  left:.5rem;
  z-index:400;
  transform:translateY(-200%);
  background:var(--flare);
  color:var(--ink);
  border:3px solid var(--ink);
  padding:.75rem 1.25rem;
  font-weight:900;
  text-decoration:none;
  box-shadow:4px 4px 0 var(--ink);
}

.site-skip:focus{transform:translateY(0)}

.site-header{
  position:fixed;
  left:0;
  top:0;
  z-index:100;
  width:var(--header-w);
  height:100vh;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  background:
    linear-gradient(135deg,rgba(244,224,77,.08) 0 12px,transparent 12px 24px),
    linear-gradient(135deg,rgba(20,77,36,.42) 0 50%,transparent 50%),
    var(--pitch);
  border-right:6px solid var(--ink);
  box-shadow:8px 0 0 rgba(20,77,36,.35);
  color:var(--ice);
}

.site-header::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:110;
  background:rgba(20,77,36,.55);
  opacity:0;
  pointer-events:none;
  transition:opacity .3s var(--ease);
}

.site-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:1.25rem 1rem;
  border-bottom:3px solid var(--ink);
}

.site-brand{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  min-width:0;
  text-decoration:none;
  color:inherit;
}

.site-brand__symbol{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:2px solid var(--ink);
  background:var(--flare);
  color:var(--ink);
  font-family:var(--font-data);
  font-weight:700;
  letter-spacing:-.05em;
  box-shadow:3px 3px 0 var(--ink);
}

.site-brand__copy{display:block;min-width:0}

.site-brand__name{
  display:block;
  font-family:var(--font-head);
  font-weight:900;
  font-size:1.15rem;
  line-height:1.15;
  letter-spacing:.01em;
}

.site-brand__tagline{
  display:block;
  margin-top:.25rem;
  font-family:var(--font-data);
  font-size:.68rem;
  letter-spacing:.08em;
  color:rgba(241,250,238,.75);
  text-transform:uppercase;
}

.site-nav-toggle{
  display:none;
  align-items:center;
  gap:.5rem;
  min-height:44px;
  padding:.5rem .75rem;
  border:2px solid var(--ink);
  background:var(--night);
  color:var(--ice);
  font-family:var(--font-data);
  font-size:.78rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  line-height:1;
  cursor:pointer;
}

.site-nav-toggle__box{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  width:16px;
}

.site-nav-toggle__line{
  display:block;
  height:2px;
  background:var(--flare);
  transition:transform .2s var(--ease);
}

.site-header[data-open] .site-nav-toggle__line:first-child{
  transform:translateY(3px) rotate(45deg);
}

.site-header[data-open] .site-nav-toggle__line:last-child{
  transform:translateY(-3px) rotate(-45deg);
}

.site-nav-toggle__label{font-size:.72rem;letter-spacing:.1em}

.site-header__drawer{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
  gap:1.25rem;
  padding:1rem .9rem 1.1rem;
  overflow:hidden;
}

.site-nav{
  flex:1;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:var(--ink) transparent;
}

.site-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.15rem;
}

.site-nav__item{margin:0}

.site-nav__link{
  position:relative;
  display:flex;
  align-items:baseline;
  gap:.75rem;
  padding:.7rem .6rem;
  color:rgba(241,250,238,.92);
  text-decoration:none;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1rem;
  line-height:1.3;
  border-left:4px solid transparent;
  transition:background .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}

.site-nav__link:hover{
  background:rgba(244,224,77,.14);
  border-left-color:var(--flare);
  color:#fff;
  transform:translateX(4px);
}

.site-nav__link[aria-current="page"]{
  background:linear-gradient(90deg,rgba(230,57,70,.35),transparent 85%);
  border-left-color:var(--track);
  color:#fff;
}

.site-nav__link[aria-current="page"]::after{
  content:"●";
  position:absolute;
  right:.4rem;
  top:50%;
  transform:translateY(-50%);
  color:var(--flare);
  font-size:.55rem;
}

.site-nav__index{
  min-width:2em;
  display:inline-block;
  font-family:var(--font-data);
  font-size:.68rem;
  color:var(--flare);
  letter-spacing:.06em;
}

.site-header__action{
  display:grid;
  gap:.85rem;
  margin-top:auto;
  padding-top:1.1rem;
  border-top:2px solid rgba(244,224,77,.24);
}

.site-header__code{
  font-family:var(--font-data);
  font-size:.68rem;
  letter-spacing:.11em;
  color:var(--flare);
  text-transform:uppercase;
  text-align:right;
}

.site-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  min-height:44px;
  padding:.75rem 1.1rem;
  font-family:var(--font-body);
  font-weight:800;
  font-size:1rem;
  line-height:1;
  text-align:center;
  text-decoration:none;
  color:var(--ink);
  background:var(--flare);
  border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  cursor:pointer;
  transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}

.site-button:hover{
  transform:translate(-2px,-2px);
  box-shadow:8px 8px 0 var(--ink);
}

.site-button:active{
  transform:translate(2px,2px);
  box-shadow:1px 1px 0 var(--ink);
}

.site-button--primary{
  background:var(--track);
  color:#fff;
  border-color:var(--ink);
  box-shadow:5px 5px 0 rgba(43,45,66,.85);
}

.site-button--ghost{
  background:rgba(241,250,238,.06);
  color:var(--ice);
  border-color:currentColor;
  box-shadow:4px 4px 0 rgba(20,77,36,.6);
}

.site-button--compact{
  min-height:36px;
  padding:.45rem .8rem;
  font-size:.85rem;
  box-shadow:3px 3px 0 var(--ink);
}

.site-button--compact:hover{box-shadow:5px 5px 0 var(--ink)}

.site-main{
  display:block;
  min-height:70vh;
}

.container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:clamp(1rem,4vw,3rem);
}

.breadcrumbs{
  max-width:1200px;
  margin:0 auto;
  padding:1.25rem clamp(1rem,4vw,3rem) 0;
}

.breadcrumbs__list{
  display:flex;
  flex-wrap:wrap;
  gap:.35rem;
  list-style:none;
  margin:0;
  padding:0;
  font-family:var(--font-data);
  font-size:.85rem;
}

.breadcrumbs__item{
  display:flex;
  align-items:center;
}

.breadcrumbs__item + .breadcrumbs__item::before{
  content:"/";
  margin:0 .4rem 0 .1rem;
  color:var(--track);
  font-weight:700;
}

.breadcrumbs__link{
  color:var(--track);
  text-decoration:none;
}

.breadcrumbs__link:hover{
  color:var(--ink);
  text-decoration:underline;
  text-underline-offset:.2em;
}

.breadcrumbs__current{
  color:var(--ink);
  opacity:.55;
}

.site-kicker{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--font-data);
  font-size:.85rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--track);
  margin-bottom:.25rem;
}

.site-kicker::before{
  content:"";
  width:2.25rem;
  height:.3rem;
  background:var(--track);
}

.page-title{
  font-family:var(--font-head);
  font-weight:900;
  line-height:1.05;
  font-size:clamp(2.4rem,6vw,4.2rem);
  letter-spacing:-.01em;
  margin:.3em 0;
}

.page-lede{
  max-width:65ch;
  font-size:clamp(1rem,1.25vw,1.2rem);
  line-height:1.8;
  color:#3A3F52;
}

.section-title{
  font-family:var(--font-head);
  font-weight:900;
  line-height:1.12;
  font-size:clamp(2rem,4vw,3.4rem);
  margin:0;
}

.section-title--small{
  font-family:var(--font-head);
  font-weight:900;
  line-height:1.2;
  font-size:clamp(1.25rem,2.4vw,1.9rem);
  margin:0;
}

.section-note{
  display:block;
  margin-bottom:.5rem;
  font-family:var(--font-data);
  font-size:.85rem;
  color:var(--track);
  letter-spacing:.08em;
  text-transform:uppercase;
}

.section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.5rem;
  padding-bottom:.75rem;
  border-bottom:3px solid var(--ink);
}

.section-head__index{
  font-family:var(--font-data);
  font-size:.9rem;
  color:var(--track);
  letter-spacing:.08em;
  white-space:nowrap;
}

.divider{
  height:6px;
  border:0;
  margin:2.5rem 0;
  background:linear-gradient(90deg,var(--track) 0 25%,var(--flare) 25% 50%,var(--pitch) 50% 75%,var(--night) 75% 100%);
}

.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1rem,2vw,1.5rem);
}

.grid--split{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid--thirds{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--data{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (min-width:1200px){
  .grid--data{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:1000px){
  .grid--split,
  .grid--2,
  .grid--thirds,
  .grid--data{grid-template-columns:minmax(0,1fr)}
}

.card{
  display:block;
  position:relative;
  padding:clamp(1rem,2vw,1.5rem);
  background:var(--ice);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
  color:inherit;
  text-decoration:none;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}

.card:hover{
  transform:translate(-2px,-2px);
  box-shadow:10px 10px 0 var(--ink);
}

.card--pitch{background:var(--pitch);color:var(--ice)}
.card--track{background:var(--track);color:#fff}
.card--night{background:var(--night);color:var(--ice)}
.card--signal{background:var(--signal);color:var(--ink)}
.card--flare{background:var(--flare);color:var(--ink)}
.card--flat{background:var(--ice)}

.card__title{
  margin:0 0 .75rem;
  font-family:var(--font-head);
  font-weight:900;
  line-height:1.2;
  font-size:clamp(1.25rem,2vw,1.75rem);
}

.card__value{
  display:block;
  margin:.25rem 0 .5rem;
  font-family:var(--font-data);
  font-weight:700;
  line-height:1;
  font-size:clamp(2rem,4vw,3.6rem);
}

.card__meta{
  font-size:.9rem;
  opacity:.78;
}

.card__tag{
  display:inline-flex;
  margin-bottom:.75rem;
  padding:.3rem .6rem;
  background:var(--flare);
  border:1px solid var(--ink);
  font-family:var(--font-data);
  font-size:.78rem;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.panel{
  padding:clamp(1.25rem,3vw,2.5rem);
  background:var(--ice);
  border:2px solid var(--ink);
  box-shadow:6px 6px 0 var(--ink);
}

.panel--night{background:var(--night);color:var(--ice)}
.panel--pitch{background:var(--pitch);color:var(--ice)}
.panel--flat{background:transparent;box-shadow:none}

.taglist{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  list-style:none;
  margin:0;
  padding:0;
}

.tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.3rem .7rem;
  border:1px solid var(--ink);
  background:transparent;
  color:var(--ink);
  font-family:var(--font-data);
  font-size:.8rem;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.03em;
  text-decoration:none;
  transition:background .2s,color .2s;
}

a.tag:hover{background:var(--ink);color:var(--ice)}

.tag--track{background:var(--track);color:#fff;border-color:var(--ink)}
.tag--flare{background:var(--flare);color:var(--ink);border-color:var(--ink)}
.tag--night{background:var(--night);color:var(--ice);border-color:var(--ink)}
.tag--signal{background:var(--signal);color:var(--ink);border-color:var(--ink)}
.tag--ghost{border-color:currentColor;background:transparent;color:inherit}

.image-shell{
  position:relative;
  display:block;
  overflow:hidden;
  border:2px solid var(--ink);
  background:var(--pitch-deep);
}

.image-shell--16x9{aspect-ratio:16/9}
.image-shell--4x3{aspect-ratio:4/3}
.image-shell--square{aspect-ratio:1/1}
.image-shell--portrait{aspect-ratio:4/5}

.image-shell > img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.image-shell--placeholder::before{
  content:"";
  position:absolute;
  inset:0;
  background:repeating-linear-gradient(135deg,rgba(244,224,77,.2) 0 10px,rgba(241,250,238,.06) 10px 20px);
  animation:shellShift 14s linear infinite;
}

@keyframes shellShift{
  to{background-position:28px 28px}
}

.image-shell__label{
  position:absolute;
  left:.6rem;
  bottom:.6rem;
  z-index:1;
  padding:.25rem .55rem;
  background:var(--ink);
  color:var(--ice);
  font-family:var(--font-data);
  font-size:.7rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.image-shell--placeholder .image-shell__label{
  background:var(--flare);
  color:var(--ink);
}

html.js [data-reveal]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .65s var(--ease),transform .65s var(--ease);
}

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

.site-footer{
  background:var(--night);
  color:rgba(241,250,238,.82);
  border-top:6px solid var(--track);
  padding:clamp(2rem,5vw,4rem) clamp(1.25rem,4vw,3rem) 1.5rem;
}

.site-footer__grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:clamp(1.5rem,4vw,3rem);
  max-width:1280px;
  margin:0 auto;
}

.site-footer__panel{grid-column:span 5}
.site-footer__links{grid-column:span 3}
.site-footer__contact{grid-column:span 4}

.site-footer__brand{
  font-family:var(--font-head);
  font-weight:900;
  line-height:1.2;
  font-size:clamp(1.45rem,3vw,2rem);
  color:var(--ice);
}

.site-footer__brand span{
  display:block;
  margin-top:.5rem;
  font-family:var(--font-data);
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--flare);
}

.site-footer__tagline{
  margin-top:.5rem;
  font-family:var(--font-data);
  font-size:.8rem;
  letter-spacing:.08em;
  color:var(--signal);
  text-transform:uppercase;
}

.site-footer__trust{
  margin-top:1.5rem;
  padding:.9rem 1rem;
  background:rgba(244,224,77,.07);
  border-left:4px solid var(--track);
  font-size:.9rem;
  line-height:1.7;
  color:rgba(241,250,238,.75);
}

.site-footer__heading{
  margin-bottom:1rem;
  font-family:var(--font-head);
  font-weight:800;
  font-size:1rem;
  color:var(--flare);
  letter-spacing:.05em;
  text-transform:uppercase;
}

.site-footer__links ul{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:.55rem;
}

.site-footer__links a{
  color:var(--ice);
  text-decoration:none;
  font-size:.95rem;
  border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}

.site-footer__links a:hover{
  color:var(--flare);
  border-bottom-color:var(--flare);
}

.site-footer__address{
  font-style:normal;
  font-family:var(--font-data);
  font-size:.9rem;
  line-height:1.9;
  color:rgba(241,250,238,.88);
}

.site-footer__note{
  margin-top:1.2rem;
  font-size:.82rem;
  line-height:1.6;
  color:rgba(241,250,238,.55);
}

.site-footer__bottom{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.5rem 2rem;
  max-width:1280px;
  margin:2.5rem auto 0;
  padding-top:1.25rem;
  border-top:1px solid rgba(244,224,77,.22);
  font-family:var(--font-data);
  font-size:.82rem;
  color:rgba(241,250,238,.7);
}

.site-footer__copyright,
.site-footer__icp{margin:0}

@media (min-width:1024px){
  .site-main,
  .site-footer{margin-left:var(--header-w)}
}

@media (max-width:1000px){
  .site-footer__panel,
  .site-footer__links,
  .site-footer__contact{grid-column:span 12}
}

@media (max-width:1023px){
  .site-header{
    position:sticky;
    top:0;
    left:0;
    width:100%;
    height:auto;
    min-height:var(--mobile-header-h);
    border-right:0;
    border-bottom:4px solid var(--ink);
    box-shadow:none;
  }

  .site-header__bar{
    min-height:calc(var(--mobile-header-h) - 4px);
    padding:.65rem 1rem;
    border-bottom:0;
  }

  .site-nav-toggle{
    display:inline-flex;
  }

  .site-header__drawer{
    position:fixed;
    top:var(--mobile-header-h);
    left:0;
    bottom:0;
    width:min(340px,88vw);
    z-index:120;
    padding:1.5rem 1.25rem 1.75rem;
    overflow-y:auto;
    background:var(--pitch);
    border-right:6px solid var(--ink);
    box-shadow:10px 0 0 rgba(43,45,66,.25);
    transform:translateX(-105%);
    transition:transform .35s var(--ease);
  }

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

  .site-header::after{
    top:var(--mobile-header-h);
    bottom:0;
    left:0;
    right:0;
    height:auto;
  }

  .site-header[data-open]::after{
    opacity:1;
    pointer-events:auto;
  }
}

@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}