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

:root{
  --ink:#26171f;
  --deep:#100810;
  --rose:#ff0080;
  --mag:#ff00ff;
  --txt:#f4e8f0;
  --dim:#c8b2c1;
  --line:rgba(255,255,255,.14);
  --glass:rgba(255,255,255,.055);
  --radius:18px;
  --serif:"Cinzel","Songti SC","Noto Serif SC",serif;
  --sans:"Josefin Sans","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  color:var(--txt);
  background:var(--deep);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}
::selection{background:rgba(255,0,128,.45);color:#fff}
:focus-visible{outline:2px solid #ff6ab5;outline-offset:3px}

/* 极光层 */
.aurora{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(58% 52% at 80% 10%,rgba(255,0,128,.42),transparent 62%),
    radial-gradient(52% 48% at 10% 26%,rgba(255,0,255,.3),transparent 66%),
    radial-gradient(72% 60% at 42% 94%,rgba(120,20,110,.48),transparent 70%),
    linear-gradient(180deg,#150a12,#0b0509 75%);
  filter:saturate(1.08);
}
.aurora span{
  position:absolute;border-radius:50%;filter:blur(72px);
  mix-blend-mode:screen;opacity:.5;
  animation:drift 28s ease-in-out infinite alternate;
}
.aurora span:nth-child(1){width:46vmax;height:46vmax;left:-9vmax;top:-11vmax;background:conic-gradient(from 40deg,#ff0080,#ff00ff,#6a1b6d,#ff0080)}
.aurora span:nth-child(2){width:38vmax;height:38vmax;right:-7vmax;top:26vmax;background:conic-gradient(from 200deg,#ff00ff,#ff4fa3,#26171f,#ff00ff);animation-delay:-9s}
.aurora span:nth-child(3){width:52vmax;height:52vmax;left:20vmax;bottom:-22vmax;background:conic-gradient(from 300deg,#7a0f4e,#ff0080,#ff00ff,#7a0f4e);animation-delay:-16s}
@keyframes drift{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(4vmax,-3vmax,0) rotate(34deg)}
}

/* 顶栏 */
.bar{
  position:fixed;top:0;left:0;right:0;z-index:70;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;
  background:linear-gradient(180deg,rgba(14,7,12,.86),rgba(14,7,12,0));
}
.brand{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  text-decoration:none;color:#fff;
}
.brand img{width:30px;height:30px;display:block;border-radius:6px}
.glyph{
  width:15px;height:15px;border-radius:3px;transform:rotate(45deg);
  background:linear-gradient(135deg,var(--rose),var(--mag));
  box-shadow:0 0 18px rgba(255,0,128,.9);
}
.burger{
  display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 16px;
  border-radius:14px;border:1px solid var(--line);background:var(--glass);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:#fce9f4;font:inherit;font-size:16px;letter-spacing:.08em;cursor:pointer;
}
.burger-box{position:relative;display:block;width:20px;height:2px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor;transition:background .25s,box-shadow .25s}
body.menu-open .burger-box{background:transparent;box-shadow:none}
body.menu-open .burger-box::before,
body.menu-open .burger-box::after{content:"";position:absolute;left:0;top:0;width:20px;height:2px;background:currentColor}
body.menu-open .burger-box::before{transform:rotate(45deg)}
body.menu-open .burger-box::after{transform:rotate(-45deg)}

/* 遮罩菜单 */
.veil{
  position:fixed;inset:0;z-index:65;display:grid;place-items:center;
  padding:86px 20px 34px;
  background:rgba(11,5,9,.86);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  backdrop-filter:blur(26px) saturate(1.2);
  opacity:0;visibility:hidden;transition:opacity .32s ease,visibility .32s;
}
body.menu-open .veil{opacity:1;visibility:visible}
body.menu-open{overflow:hidden}
.veil-nav{display:grid;gap:6px;width:min(430px,100%);text-align:center}
.veil-nav a{
  display:flex;align-items:center;justify-content:center;min-height:52px;padding:10px 14px;
  border-radius:14px;border:1px solid transparent;border-bottom-color:rgba(255,255,255,.08);
  color:#f7e7f1;text-decoration:none;font-size:19px;letter-spacing:.08em;
  opacity:0;transform:translateY(10px);
  transition:opacity .34s ease,transform .34s ease,border-color .2s,background .2s;
  transition-delay:calc(var(--i,0) * 42ms);
}
body.menu-open .veil-nav a{opacity:1;transform:none}
.veil-nav a:hover,.veil-nav a:focus-visible{border-color:rgba(255,0,128,.55);background:rgba(255,0,128,.16)}

/* hero */
.hero{
  position:relative;min-height:70vh;display:flex;align-items:flex-end;justify-content:flex-end;
  text-align:right;padding:104px 22px 60px;overflow:hidden;
}
.hero-fig{
  position:absolute;inset:0;margin:0;z-index:0;
  background:
    radial-gradient(72% 70% at 28% 18%,rgba(255,0,255,.34),transparent 62%),
    radial-gradient(64% 62% at 82% 72%,rgba(255,0,128,.42),transparent 66%),
    #1a0d17;
}
.hero-img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(1.06) contrast(1.04)}
.hero-mask{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(13,6,11,.74) 0%,rgba(13,6,11,.16) 40%,rgba(13,6,11,.92) 100%),
    linear-gradient(100deg,rgba(255,0,128,.26),transparent 58%);
}
.hero-copy{position:relative;z-index:2;max-width:640px}
.hero h1{
  margin:0 0 16px;font-family:var(--serif);font-weight:600;line-height:1.14;
  font-size:clamp(2rem,6vw,3.5rem);letter-spacing:.02em;
  background:linear-gradient(118deg,#ffffff,#ffd6ea 46%,#ff5fb0 76%,#ff00ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 8px 40px rgba(255,0,128,.35);
}
.hero-desc{max-width:42ch;margin:0 0 26px auto;color:#ecdae5;font-size:17px}
.hero-cta{
  display:inline-flex;align-items:center;min-height:50px;padding:0 26px;border-radius:999px;
  background:linear-gradient(100deg,var(--rose),var(--mag));
  color:#1a0c15;font-weight:600;letter-spacing:.06em;text-decoration:none;
  box-shadow:0 16px 40px -18px rgba(255,0,128,.9);
}
.hero-cta:hover{filter:brightness(1.08)}
.blade{
  position:absolute;left:-6%;right:-6%;bottom:-24px;height:52px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,0,128,0),#ff0080 32%,#ff00ff 68%,rgba(255,0,255,0));
  transform:skewY(-2.6deg);opacity:.82;
}

/* 版心 */
.board{
  position:relative;z-index:1;
  display:grid;grid-template-columns:266px minmax(0,1fr);gap:34px;
  align-items:start;max-width:1180px;margin:0 auto;padding:58px 22px 76px;
}

/* 侧栏 */
.rail{
  position:sticky;top:84px;padding:20px 16px;border-radius:var(--radius);
  background:var(--glass);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.eyebrow{display:block;font-size:16px;letter-spacing:.24em;color:#ff7ec2;margin:0 0 4px;font-weight:500}
.rail h2{margin:0 0 14px;font-family:var(--serif);font-size:21px;color:#fff}
.rail-list{list-style:none;margin:0;padding:0;counter-reset:r}
.rail-list li + li{margin-top:2px}
.rail-list a{
  display:flex;align-items:center;gap:10px;min-height:44px;padding:2px 8px;border-radius:10px;
  color:#dcc8d5;text-decoration:none;font-size:16px;line-height:1.35;
}
.rail-list a::before{
  counter-increment:r;content:counter(r,decimal-leading-zero);
  font-family:var(--serif);font-size:16px;color:#ff5fb0;flex:none;
}
.rail-list a:hover,.rail-list a:focus-visible{background:rgba(255,0,128,.16);color:#fff}

/* 正文 */
.stream{min-width:0;display:grid;gap:22px}
.stream > article{
  scroll-margin-top:96px;padding:26px 24px;border-radius:var(--radius);
  background:linear-gradient(158deg,rgba(255,255,255,.075),rgba(255,255,255,.02));
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:0 26px 56px -38px rgba(255,0,128,.6),inset 0 1px 0 rgba(255,255,255,.07);
}
.stream small{
  display:block;font-size:16px;letter-spacing:.22em;color:#ff69b4;
  margin:0 0 4px;font-weight:500;
}
.stream h2{
  margin:0 0 14px;font-family:var(--serif);font-weight:600;line-height:1.28;
  font-size:clamp(1.4rem,3.4vw,1.92rem);color:#fff;
}
.stream h3{margin:22px 0 10px;font-family:var(--serif);font-size:19px;color:#ffd7ea}
.stream p{margin:0 0 14px;color:#e8d7e1}
.stream ul,.stream ol{padding-left:1.25em;margin:0 0 14px}
.stream li{margin:0 0 8px}
.stream a{color:#ff8fc9}
.stream strong{color:#fff}
.stream img{max-width:100%;height:auto;border-radius:14px;display:block}
.stream blockquote{
  margin:0 0 14px;padding:12px 18px;border-left:3px solid var(--rose);
  background:rgba(255,0,128,.09);border-radius:0 14px 14px 0;
}
.stream > article > :last-child{margin-bottom:0}

/* 页脚 */
.foot{
  position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));gap:26px;
  padding:56px max(22px,calc((100% - 1180px) / 2)) 26px;
  background:linear-gradient(180deg,rgba(22,11,18,.55),rgba(9,4,8,.96));
  border-top:1px solid var(--line);
}
.foot article{min-width:0}
.foot-cta{
  grid-column:span 2;padding:28px 24px;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.2);
  background:conic-gradient(from 210deg at 32% 40%,rgba(255,0,128,.4),rgba(255,0,255,.26),rgba(38,23,31,.6),rgba(255,0,128,.4));
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.cta-brand{
  margin:0 0 18px;font-family:var(--serif);font-weight:600;color:#fff;
  font-size:clamp(1.5rem,3vw,2.05rem);line-height:1.2;
}
.cta-btn{
  display:inline-flex;align-items:center;min-height:48px;padding:0 24px;border-radius:999px;
  background:#fff;color:#26171f;text-decoration:none;font-weight:600;letter-spacing:.05em;
}
.cta-btn:hover{background:#ffe3f1}
.foot-nav dl{margin:0}
.foot-nav dt{font-size:16px;letter-spacing:.22em;color:#ff7abf;margin-bottom:10px}
.foot-nav dd{margin:0}
.foot-nav a{
  display:flex;align-items:center;min-height:44px;padding:2px 0;font-size:16px;
  color:#e1cfdb;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.08);
}
.foot-nav a:hover,.foot-nav a:focus-visible{color:#fff;border-bottom-color:rgba(255,0,128,.7)}
.fb-name{margin:0 0 10px;font-family:var(--serif);font-size:19px;color:#fff}
.fb-desc{margin:0;font-size:16px;color:#bda9b7;line-height:1.7}
.footbar{
  grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px;margin-top:14px;padding-top:18px;border-top:1px solid var(--line);
  font-size:16px;color:#bda9b7;
}
.footbar .copy{margin:0}
.footbar a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px;color:#f0dde9;text-decoration:none}
.footbar a:hover{color:#fff}

/* 动效 */
.js .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.js .reveal.in{opacity:1;transform:none}

@media (max-width:900px){
  .board{grid-template-columns:1fr;gap:22px;padding:36px 18px 60px}
  .rail{position:static}
  .foot{grid-template-columns:1fr 1fr}
  .foot-cta{grid-column:1 / -1}
  .hero{min-height:64vh}
}
@media (max-width:600px){
  .foot{grid-template-columns:1fr;padding:44px 18px 22px}
  .hero{padding:92px 18px 52px}
  .hero-copy{max-width:none}
  .hero-desc{margin-left:auto}
  .stream > article{padding:20px 16px}
  .bar{padding:8px 12px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aurora span{animation:none}
  .veil,.veil-nav a,.js .reveal{transition:none}
  .js .reveal{opacity:1;transform:none}
}

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