@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Orbitron:wght@700;900&display=swap');

:root{
  --blue:#3bb1ff;
  --red:#ff5252;
  --ink:#000;
  --paper:#eef2f6;
  --hard:7px 7px 0 #000;
  --hard-sm:4px 4px 0 #000;
}

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

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background-color:var(--paper);
  background-image:radial-gradient(rgba(0,0,0,.18) 1.1px,transparent 1.1px);
  background-size:15px 15px;
  color:var(--ink);
  font-family:'JetBrains Mono','PingFang SC','Hiragino Sans GB','Microsoft YaHei',ui-monospace,monospace;
  font-size:17px;
  line-height:1.75;
  overflow-x:hidden;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{
  font-family:'Orbitron','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
  line-height:1.2;
  margin:0 0 .5em;
  letter-spacing:.01em;
}
p{margin:0 0 1.1em}

small{
  display:block;
  width:fit-content;
  margin-bottom:8px;
  padding:2px 10px;
  background:var(--ink);
  color:#fff;
  font-size:16px;
  letter-spacing:.14em;
  font-family:inherit;
}

/* ============ 头部：细条 + 品牌行 + 菜单行 ============ */
.hud{
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
  border-bottom:4px solid var(--ink);
  box-shadow:0 6px 0 rgba(0,0,0,.14);
}

.ticker{
  margin:0;
  padding:6px 18px;
  background:var(--ink);
  color:#fff;
  font-size:16px;
  letter-spacing:.22em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.brand-row{
  padding:12px 18px;
  border-bottom:3px solid var(--ink);
}

.brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:50px;
  padding:6px 16px;
  background:var(--blue);
  border:3px solid var(--ink);
  box-shadow:var(--hard-sm);
  text-decoration:none;
  font-family:'Orbitron','PingFang SC','Microsoft YaHei',sans-serif;
  font-weight:900;
  font-size:21px;
  letter-spacing:.05em;
}

.markbox{display:inline-flex}
.markbox img{width:32px;height:32px;border:2px solid var(--ink);background:#fff;object-fit:cover}

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

.nav-row{padding:10px 18px}

.nav>summary{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  background:var(--red);
  color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:var(--hard-sm);
  font-weight:700;
  font-size:16px;
  letter-spacing:.12em;
  cursor:pointer;
  list-style:none;
}
.nav>summary::-webkit-details-marker{display:none}
.nav>summary::after{content:"+";font-weight:700}
.nav[open]>summary::after{content:"−"}
.nav>summary:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}

.nav>menu{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  list-style:none;
  margin:12px 0 4px;
  padding:0;
}

.nav>menu a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:0 14px;
  background:#fff;
  border:3px solid var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  text-decoration:none;
  font-size:16px;
  font-weight:500;
}
.nav>menu a:hover{background:var(--blue);transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}

/* ============ 主网格 ============ */
main{padding:0}

div{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  column-gap:34px;
  align-items:start;
  max-width:1200px;
  margin:0 auto;
  padding:0 18px 64px;
}

/* ============ 首屏 ============ */
.hero{
  grid-column:1/-1;
  margin:0 -18px;
  min-height:100svh;
  padding:44px 18px 56px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  align-items:center;
  gap:26px;
  border-bottom:4px solid var(--ink);
  background-color:#fff;
  background-image:radial-gradient(rgba(59,177,255,.55) 1.4px,transparent 1.4px);
  background-size:20px 20px;
}

.hero h1{
  font-size:clamp(30px,5.4vw,56px);
  letter-spacing:.005em;
  text-shadow:5px 5px 0 var(--blue);
  margin-bottom:.35em;
}

.lede{
  max-width:38ch;
  margin:0 0 24px;
  padding-left:14px;
  border-left:7px solid var(--red);
  font-size:17px;
}

.acts{display:flex;flex-wrap:wrap;gap:12px}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 22px;
  border:3px solid var(--ink);
  box-shadow:var(--hard-sm);
  text-decoration:none;
  font-weight:700;
  font-size:17px;
}
.btn-blue{background:var(--blue)}
.btn-red{background:var(--red);color:#fff}
.btn:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--ink)}

.hero-art{position:relative;min-height:470px}

.snap{
  position:absolute;
  margin:0;
  aspect-ratio:3/4;
  overflow:hidden;
  border:4px solid var(--ink);
  border-radius:18px;
  border-bottom:10px solid var(--ink);
  background:#fff;
  box-shadow:10px 10px 0 var(--ink);
}
.snap img{width:100%;height:100%;object-fit:cover}

.s1{width:64%;top:0;right:0;transform:rotate(3deg);z-index:2}
.s2{width:56%;bottom:0;left:0;transform:rotate(-4deg);z-index:1}

/* ============ 正文 ============ */
.body{grid-column:1;min-width:0}

.body article{
  padding:38px 0;
  border-bottom:3px solid var(--ink);
}
.body article:last-child{border-bottom:0}
.body article[id]{scroll-margin-top:190px}

.body h2{
  font-size:clamp(24px,3.2vw,34px);
  margin:0 0 18px;
  text-shadow:3px 3px 0 var(--red);
}
.body h3{font-size:22px;margin:1.5em 0 .6em}

.body ul,.body ol{padding-left:1.5em;margin:0 0 1.2em}
.body li{margin:.35em 0}

.body a{color:#0a5f92;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
.body a:hover{background:var(--blue);color:var(--ink)}

.body img{
  margin:1.2em 0;
  border:4px solid var(--ink);
  border-radius:18px;
  box-shadow:var(--hard);
}

.body figure{margin:1.3em 0}
.body figcaption{font-size:16px;color:#333;margin-top:.4em}

.body blockquote{
  margin:1.3em 0;
  padding:14px 18px;
  background:#fff;
  border:3px solid var(--ink);
  border-left:10px solid var(--blue);
  border-radius:18px;
}

.body table{
  width:100%;
  border-collapse:collapse;
  margin:1.3em 0;
  background:#fff;
  border:3px solid var(--ink);
  border-radius:18px;
  overflow:hidden;
}
.body th,.body td{border:2px solid var(--ink);padding:10px 12px;text-align:left}
.body th{background:var(--blue)}

.body strong{background:rgba(255,82,82,.28);padding:0 3px}

/* ============ 侧栏 ============ */
.rail{
  grid-column:2;
  position:sticky;
  top:200px;
  padding:18px;
  background:#fff;
  border:3px solid var(--ink);
  border-bottom:9px solid var(--red);
  border-radius:18px;
  box-shadow:8px 8px 0 var(--ink);
}
.rail h2{font-size:22px;margin:0 0 14px}

.rail-menu{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:8px}
.rail-menu a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:0 12px;
  background:#f7fafc;
  border:2px solid var(--ink);
  border-radius:18px;
  text-decoration:none;
  font-size:16px;
}
.rail-menu a:hover{background:var(--blue)}

.top-link{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  background:var(--ink);
  color:#fff;
  border-radius:18px;
  text-decoration:none;
  font-size:16px;
}
.top-link:hover{background:var(--blue);color:var(--ink)}

/* ============ 页脚 ============ */
footer{
  padding:36px 18px 0;
  background:var(--ink);
  color:#fff;
  border-top:4px solid var(--ink);
}
footer .cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  max-width:1164px;
  margin:0 auto;
}
footer dl{
  margin:0;
  padding:16px;
  background:#141414;
  border:3px solid #fff;
  border-bottom:9px solid var(--red);
  border-radius:18px;
}
footer dt{
  color:var(--blue);
  font-weight:700;
  letter-spacing:.16em;
  margin-bottom:8px;
}
footer dd{margin:0;font-size:16px}
footer a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  text-decoration:none;
}
footer a:hover{color:var(--blue)}

footer .copy{
  max-width:1164px;
  margin:26px auto 0;
  padding:16px 0;
  border-top:3px solid #fff;
  text-align:center;
  font-size:16px;
  letter-spacing:.06em;
}

/* ============ 响应式 ============ */
@media (max-width:900px){
  div{grid-template-columns:minmax(0,1fr);padding:0 16px 48px}
  .hero{grid-template-columns:minmax(0,1fr);margin:0 -16px;padding:32px 16px 40px;min-height:auto}
  .hero-art{min-height:360px;margin-top:10px}
  .s1{width:62%}
  .s2{width:54%}
  .body{grid-column:1}
  .rail{grid-column:1;position:static;margin-top:34px}
  footer .cols{grid-template-columns:1fr}
  footer{padding:28px 16px 0}
}

@media (max-width:520px){
  body{font-size:17px}
  .brand{font-size:18px}
  .ticker{letter-spacing:.12em}
  .hero-art{min-height:300px}
  .snap{box-shadow:7px 7px 0 var(--ink)}
  .hero h1{text-shadow:4px 4px 0 var(--blue)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

button[aria-expanded]{min-width:44px;min-height:44px}