@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Merriweather:wght@300;400;700&display=swap');

:root{
  --neon:#87ff71;
  --mustard:#ffce5c;
  --ink:#192617;
  --ink-2:#22331f;
  --ink-3:#2c4227;
  --paper:#f2ffe9;
  --dim:#a9c99c;
  --line:rgba(135,255,113,.28);
  --head:'Abril Fatface','Songti SC','Noto Serif SC',serif;
  --body:'Merriweather','Noto Serif SC',Georgia,serif;
}

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

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

body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.8;
  color:var(--paper);
  background-color:var(--ink);
  background-image:radial-gradient(rgba(135,255,113,.13) 1px,transparent 1px);
  background-size:24px 24px;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--mustard)}
a:focus-visible,button:focus-visible{outline:3px solid var(--mustard);outline-offset:2px}

/* 顶部细条口号 */
.ticker{
  background:var(--mustard);
  color:var(--ink);
  font-size:16px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.05em;
  padding:10px 20px;
  border-bottom:2px solid var(--ink);
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 10px));
}
.ticker span::before{content:"◆";margin-right:10px}

/* 头部：图标在角落 + 分组菜单 */
.masthead{
  position:sticky;
  top:0;
  z-index:40;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  padding:10px 18px;
  background:rgba(25,38,23,.95);
  border-bottom:3px dashed var(--line);
}

.brand{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  background:var(--neon);
  clip-path:polygon(0 0,72% 0,100% 28%,100% 100%,0 100%);
}
.brand img{width:34px;height:34px;object-fit:contain}
.brand-shape{width:20px;height:20px;background:var(--ink);transform:rotate(45deg);display:block}

.menu{margin-left:auto}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.menu li{position:relative}
.menu a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 14px;
  font-size:16px;
  line-height:1.35;
  color:var(--paper);
  text-decoration:none;
  border:2px solid transparent;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
.menu a:hover,.menu a:focus-visible{background:var(--neon);color:var(--ink);border-color:var(--ink);transform:translateY(-2px)}
.menu .grp::after{content:"＋";margin-left:8px;font-size:14px;color:var(--mustard)}
.menu .grp:hover::after,.menu .grp:focus-visible::after{color:var(--ink)}

.menu .sub{
  display:none;
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:200px;
  flex-direction:column;
  gap:4px;
  padding:8px;
  background:var(--ink-2);
  border:2px dashed var(--line);
  box-shadow:8px 8px 0 rgba(0,0,0,.45);
}
.has-sub:hover .sub,.has-sub:focus-within .sub{display:flex}
.menu .sub li{position:static}
.menu .sub a{width:100%}

/* 主体：article 在左，aside 在右 */
main.layout{
  display:flex;
  align-items:flex-start;
  gap:44px;
  max-width:1180px;
  margin:0 auto;
  padding:32px 22px 70px;
}

article.doc{flex:1 1 auto;min-width:0;max-width:780px}

/* Hero */
.hero{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:26px;
  align-items:center;
  min-height:45vh;
  padding:18px 0 30px;
  margin:0 0 52px;
}
.hero::before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:72px;
  height:72px;
  background:var(--neon);
  opacity:.22;
  clip-path:polygon(50% 0,100% 100%,0 100%);
  transform:rotate(12deg);
}
.hero-copy{min-width:0}

h1{
  font-family:var(--head);
  font-weight:400;
  font-size:clamp(36px,6.2vw,68px);
  line-height:1.05;
  letter-spacing:.005em;
  margin:.2em 0 .3em;
  color:var(--paper);
}

.kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  font-size:16px;
  letter-spacing:.12em;
  color:var(--neon);
}
.blip{width:12px;height:12px;background:var(--mustard);transform:rotate(45deg);flex:0 0 auto}

.lead{font-size:17px;color:var(--dim);margin:0 0 22px;max-width:34em}

.jump{margin:0}
.jump a{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  padding:11px 22px;
  background:var(--mustard);
  color:var(--ink);
  font-weight:700;
  letter-spacing:.04em;
  text-decoration:none;
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:transform .18s ease;
}
.jump a:hover{transform:translate(-2px,-2px)}

.hero-collage{display:flex;flex-direction:column;gap:14px;align-items:flex-end}
.tilt{
  margin:0;
  width:min(100%,300px);
  border:3px solid var(--paper);
  background:var(--ink-2);
  box-shadow:10px 10px 0 rgba(0,0,0,.35);
  transform:rotate(-3deg);
}
.tilt-b{transform:rotate(3deg) translateX(-16px)}
.tilt img{width:100%;aspect-ratio:4/3;object-fit:cover}

/* 正文区块 */
article div{
  position:relative;
  margin:0 0 52px;
  scroll-margin-top:112px;
}
article div + div{border-top:3px dashed var(--line);padding-top:34px}
article div + div::before{
  content:"";
  position:absolute;
  left:0;
  top:-9px;
  width:16px;
  height:16px;
  background:var(--mustard);
  transform:rotate(45deg);
}
article div:target{background:rgba(135,255,113,.06)}

article h2{
  font-family:var(--head);
  font-weight:400;
  font-size:clamp(26px,3.6vw,42px);
  line-height:1.15;
  margin:.2em 0 .55em;
  color:var(--neon);
}
article h3{
  font-family:var(--head);
  font-weight:400;
  font-size:clamp(21px,2.6vw,28px);
  line-height:1.3;
  margin:1.4em 0 .5em;
  color:var(--mustard);
}
article h2 small,article h3 small,.side-box small{
  display:block;
  font-family:var(--body);
  font-size:16px;
  font-weight:400;
  letter-spacing:.14em;
  color:var(--mustard);
  margin-bottom:6px;
}

article p{margin:0 0 1.15em;max-width:38em}
article strong{color:var(--neon)}
article a{
  color:var(--mustard);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
article a:hover{color:var(--neon)}

article ul,article ol{padding-left:1.3em;margin:0 0 1.2em}
article li{margin:.35em 0}
article li::marker{color:var(--mustard)}

article img{border:3px solid var(--paper);margin:0 0 1.2em}
article figure{margin:0 0 1.3em}
article figcaption{font-size:16px;color:var(--dim);padding-top:6px}

article blockquote{
  margin:0 0 1.3em;
  padding:16px 20px;
  background:var(--ink-2);
  border-left:6px solid var(--mustard);
}
article blockquote p:last-child{margin:0}

article table{
  width:100%;
  display:block;
  overflow-x:auto;
  border-collapse:collapse;
  font-size:16px;
  margin:0 0 1.3em;
}
article th,article td{border:1px dashed var(--line);padding:10px 12px;text-align:left;vertical-align:top}
article th{background:var(--ink-2);color:var(--neon)}

article hr{border:0;border-top:3px dashed var(--line);margin:1.6em 0}

/* 侧栏 */
aside.side{
  flex:0 0 296px;
  position:sticky;
  top:96px;
  display:flex;
  flex-direction:column;
  gap:18px;
}
.side-box{background:var(--ink-2);padding:18px;border-left:6px solid var(--neon)}
.side-box.side-links{border-left-color:var(--mustard)}
.side-box h2{
  font-family:var(--head);
  font-weight:400;
  font-size:24px;
  line-height:1.25;
  margin:0 0 12px;
  color:var(--paper);
}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:6px 12px;font-size:16px}
.facts dt{color:var(--dim)}
.facts dd{margin:0;color:var(--neon);font-weight:700}

.side-links ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.side-links a{
  display:flex;
  align-items:center;
  min-height:44px;
  padding:10px 4px;
  font-size:16px;
  color:var(--paper);
  text-decoration:none;
  border-bottom:1px dotted var(--line);
  transition:padding-left .16s ease,background-color .16s ease,color .16s ease;
}
.side-links li:last-child a{border-bottom:0}
.side-links a:hover,.side-links a:focus-visible{background:var(--neon);color:var(--ink);padding-left:10px}

/* 页脚：只有 p + small */
.foot{
  padding:46px 22px 30px;
  background-color:var(--ink-2);
  background-image:repeating-linear-gradient(45deg,rgba(135,255,113,.07) 0 10px,transparent 10px 20px);
  border-top:4px solid var(--neon);
  text-align:center;
}
.foot p.giant{
  font-family:var(--head);
  font-size:clamp(38px,11vw,112px);
  line-height:.95;
  letter-spacing:.01em;
  margin:0 0 14px;
  color:var(--neon);
  word-break:break-word;
}
.foot small{display:block;font-size:16px;color:var(--dim)}

/* 平板与手机 */
@media (max-width:980px){
  main.layout{flex-direction:column;gap:34px;padding:24px 16px 56px}
  article.doc{max-width:none;width:100%}
  aside.side{position:static;width:100%;flex:1 1 auto;order:2}
  .side-links ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
}

@media (max-width:860px){
  .masthead{padding:8px 12px;gap:10px}
  .menu{width:100%;margin-left:0}
  .menu ul{gap:6px}
  .has-sub{display:contents}
  .menu .sub{
    position:static;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    gap:6px;
    min-width:0;
    padding:0;
    background:transparent;
    border:0;
    box-shadow:none;
  }
  .menu .sub a{width:auto}
  .hero{grid-template-columns:1fr;min-height:0;padding-top:6px}
  .hero::before{width:52px;height:52px;top:-4px}
  .hero-collage{flex-direction:row;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start}
  .tilt{width:min(46%,240px)}
  .tilt-b{transform:rotate(3deg) translateY(12px)}
}

@media (max-width:520px){
  body{font-size:17px}
  .menu a{padding:10px 11px;font-size:16px}
  .side-links ul{grid-template-columns:1fr}
  article div{margin-bottom:44px}
}

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

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