@import url('https://fonts.googleapis.com/css2?family=Newsreader:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root{
  --violet:#6514ff;
  --magenta:#bf00ff;
  --ink:#1c1726;
  --paper:#f4f0ff;
  --cream:#fffdf9;
  --soft:rgba(28,23,38,.7);
  --display:"Newsreader",Georgia,"Songti SC",serif;
  --body:"Roboto","PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
}

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

html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--body);
  font-size:17px;
  line-height:1.78;
  color:var(--ink);
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:-20%;
  z-index:-1;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,rgba(101,20,255,.13) 0 2px,transparent 2px 28px),
    repeating-linear-gradient(-45deg,rgba(191,0,255,.1) 0 2px,transparent 2px 38px);
}

@media (prefers-reduced-motion: no-preference){
  body::before{animation:drift 36s linear infinite}
}

@keyframes drift{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-72px,72px,0)}
}

img{max-width:100%}

/* ---------- 顶部细条 ---------- */
.masthead{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--cream);
  border-bottom:4px solid var(--ink);
}

.ticker{
  background:var(--ink);
  color:var(--cream);
  overflow:hidden;
  border-bottom:3px solid var(--magenta);
}

.ticker p{
  margin:0;
  display:flex;
  gap:48px;
  width:max-content;
  padding:7px 0 7px 26px;
  font-size:14px;
  letter-spacing:.34em;
  white-space:nowrap;
}

@media (prefers-reduced-motion: no-preference){
  .ticker p{animation:march 26s linear infinite}
}

@media (prefers-reduced-motion: reduce){
  .ticker p{width:auto;padding-right:26px}
}

@keyframes march{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ---------- 导航：品牌居中，菜单分列两侧 ---------- */
.masthead-nav{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:6px 10px;
  max-width:1280px;
  margin:0 auto;
  padding:10px clamp(12px,3vw,28px);
}

.masthead-nav p{
  margin:0;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 4px;
}

.nav-left{justify-content:flex-end}
.nav-right{justify-content:flex-start}

.masthead-nav p a,
.rail-links a,
.rail-top a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:6px 10px;
  border-radius:6px;
  color:var(--ink);
  text-decoration:none;
  font-size:16px;
  font-weight:500;
  transition:background .24s ease,color .24s ease;
}

.ico{
  width:9px;
  height:9px;
  flex:0 0 auto;
  background:var(--violet);
  border-radius:2px;
  transform:rotate(45deg);
  transition:background .24s ease;
}

.masthead-nav p a:nth-child(2n) .ico{background:var(--magenta)}

.masthead-nav p a:hover,
.masthead-nav p a:focus-visible{
  background:var(--ink);
  color:var(--cream);
}

.masthead-nav p a:hover .ico,
.masthead-nav p a:focus-visible .ico{background:var(--magenta)}

.brand{
  grid-column:2;
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:10px;
  max-width:100%;
  padding:8px 16px;
  min-height:48px;
  border:3px solid var(--ink);
  border-radius:10px;
  background:var(--violet);
  color:#fff;
  text-decoration:none;
  transition:background .24s ease,transform .24s ease;
}

.brand:hover,.brand:focus-visible{background:var(--magenta);transform:translateY(-1px)}

.brand-logo{width:30px;height:30px;object-fit:contain;border-radius:5px;background:var(--cream)}

.brand-word{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(19px,2.3vw,28px);
  line-height:1.1;
  letter-spacing:.02em;
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  display:grid;
  min-height:100vh;
  min-height:100svh;
  overflow:hidden;
  isolation:isolate;
  background:linear-gradient(118deg,var(--ink) 0%,var(--violet) 62%,var(--magenta) 100%);
}

.hero-media{position:absolute;inset:0;margin:0;z-index:0}

.hero-img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.12)}

.hero-veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(256deg,rgba(28,23,38,.94) 6%,rgba(101,20,255,.62) 54%,rgba(191,0,255,.24) 100%);
}

.hero-copy{
  position:relative;
  z-index:2;
  align-self:end;
  justify-self:end;
  max-width:min(760px,94%);
  padding:clamp(28px,7vw,84px);
  text-align:right;
  color:#fff;
}

.hero-copy h1{
  margin:0 0 18px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(38px,7.2vw,84px);
  line-height:1.02;
  letter-spacing:-.015em;
  text-wrap:balance;
}

.hero-desc{
  margin:0 0 0 auto;
  max-width:42ch;
  font-weight:300;
  font-size:clamp(16px,1.6vw,19px);
  color:rgba(255,255,255,.9);
}

/* ---------- 正文 + 右侧栏 ---------- */
.spread{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(30px,5vw,64px);
  max-width:1180px;
  margin:0 auto;
  padding:clamp(40px,6vw,88px) clamp(16px,4vw,40px) clamp(48px,7vw,96px);
}

.prose{max-width:820px;min-width:0}

.prose > div{
  position:relative;
  padding:clamp(34px,5vw,60px) 0;
  border-top:4px solid var(--ink);
  scroll-margin-top:150px;
}

.prose > div::before{
  content:"";
  position:absolute;
  top:-4px;
  left:0;
  width:clamp(56px,16%,132px);
  height:4px;
  background:var(--magenta);
}

.prose > div:first-child{padding-top:0;border-top:0}
.prose > div:first-child::before{display:none}

.prose h2{
  margin:0 0 16px;
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(28px,4.4vw,44px);
  line-height:1.15;
  letter-spacing:-.01em;
}

.prose h2 span,
.prose h3 span{
  background-image:linear-gradient(0deg,rgba(191,0,255,.3) 0 .34em,transparent .34em);
  padding-bottom:.02em;
}

.prose h3{
  margin:30px 0 12px;
  font-family:var(--display);
  font-weight:600;
  font-size:clamp(21px,2.4vw,27px);
  line-height:1.25;
}

.prose p{margin:0 0 18px;max-width:68ch}

.prose a{color:var(--violet);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}

.prose a:hover{color:var(--magenta)}

.prose strong{font-weight:700}

.prose ul,.prose ol{margin:0 0 20px;padding-left:1.3em;max-width:66ch}

.prose li{margin:0 0 8px}

.prose li::marker{color:var(--magenta);font-weight:700}

.prose blockquote{
  margin:0 0 22px;
  padding:18px 22px;
  border-left:10px solid var(--violet);
  background:var(--cream);
  border-radius:0 10px 10px 0;
  font-family:var(--display);
  font-size:clamp(18px,2vw,21px);
  line-height:1.6;
}

.prose blockquote p:last-child{margin-bottom:0}

.prose figure{margin:0 0 22px;max-width:100%}

.prose figure img,
.prose img{
  height:auto;
  border:3px solid var(--ink);
  border-radius:10px;
  display:block;
}

.prose figcaption{font-size:16px;color:var(--soft);padding-top:8px}

.prose table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:16px}

.prose th,.prose td{border:2px solid var(--ink);padding:10px 12px;text-align:left}

.prose th{background:rgba(101,20,255,.12)}

.prose hr{border:0;border-top:3px dashed rgba(28,23,38,.4);margin:32px 0}

.prose code{font-size:16px;background:rgba(28,23,38,.08);padding:1px 5px;border-radius:4px}

/* ---------- 侧栏 ---------- */
.rail{
  display:grid;
  align-content:start;
  gap:20px;
  position:sticky;
  top:140px;
  height:max-content;
  min-width:0;
}

.rail-card{
  border:3px solid var(--ink);
  border-radius:10px;
  background:var(--cream);
  padding:16px 18px;
}

.rail-card h2{
  margin:0 0 10px;
  font-family:var(--display);
  font-weight:700;
  font-size:21px;
  line-height:1.2;
  letter-spacing:.04em;
}

.rail-card h2 span{
  background-image:linear-gradient(0deg,rgba(191,0,255,.34) 0 .32em,transparent .32em);
}

.rail-card p{margin:0}

.rail-links{display:grid}

.rail-links a{
  border-radius:0;
  border-bottom:2px dashed rgba(28,23,38,.28);
  font-weight:400;
}

.rail-links a:last-child{border-bottom:0}

.rail-links a:hover,
.rail-links a.is-active{
  background:rgba(101,20,255,.12);
  color:var(--violet);
}

.rail-links a.is-active .ico,
.rail-links a.is-active::before{background:var(--magenta)}

.rail-top a{font-weight:500}

/* ---------- 页脚 ---------- */
.foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 18px;
  padding:18px clamp(16px,4vw,40px);
  background:var(--ink);
  color:var(--cream);
  border-top:6px solid var(--magenta);
}

.foot p{
  margin:0;
  font-family:var(--display);
  font-size:17px;
  letter-spacing:.02em;
}

.foot small{font-size:14px;letter-spacing:.3em;opacity:.72}

/* ---------- 动效 ---------- */
@media (prefers-reduced-motion: no-preference){
  .prose > div{animation:rise .58s cubic-bezier(.2,.7,.3,1) both}
  .prose > div:nth-child(1){animation-delay:.04s}
  .prose > div:nth-child(2){animation-delay:.08s}
  .prose > div:nth-child(3){animation-delay:.12s}
  .prose > div:nth-child(4){animation-delay:.16s}
  .prose > div:nth-child(5){animation-delay:.2s}
  .prose > div:nth-child(6){animation-delay:.24s}
  .prose > div:nth-child(7){animation-delay:.28s}
  .rail{animation:rise .5s .1s cubic-bezier(.2,.7,.3,1) both}
}

@keyframes rise{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

@media (prefers-reduced-motion: reduce){
  *{transition-duration:.001ms!important}
}

/* ---------- 断点 ---------- */
@media (max-width:960px){
  .spread{grid-template-columns:minmax(0,1fr) 260px;gap:34px}
}

@media (max-width:880px){
  .masthead{position:static}
  .masthead-nav{grid-template-columns:1fr 1fr;gap:4px 8px}
  .nav-left,.nav-right{justify-content:center}
  .masthead-nav p a{font-size:15px;padding:6px 8px}
  .spread{grid-template-columns:minmax(0,1fr);gap:36px}
  .rail{position:static;order:-1;grid-template-columns:1fr;gap:14px}
  .hero-copy{
    align-self:center;
    justify-self:stretch;
    max-width:100%;
    text-align:left;
  }
  .hero-desc{margin:0}
  .prose > div{scroll-margin-top:24px}
}

@media (max-width:520px){
  body{font-size:16px}
  .hero-copy{padding:26px 20px 40px}
  .spread{padding-left:16px;padding-right:16px}
  .brand{padding:6px 12px}
}

@media (max-width:400px){
  .masthead-nav p a{gap:6px;letter-spacing:0}
  .ico{width:8px;height:8px}
}

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