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

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

body{
  margin:0;
  background:#1b1010;
  color:#f7edee;
  font-family:Inter,system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:17px;
  line-height:1.75;
  min-height:100vh;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}

.sky{position:fixed;inset:-12%;z-index:-1;pointer-events:none;overflow:hidden;filter:saturate(1.25)}
.sky span{position:absolute;display:block;border-radius:50%;filter:blur(72px);opacity:.55;mix-blend-mode:screen}
.sky .a1{width:62vw;height:62vw;top:-16vw;left:-10vw;background:radial-gradient(circle,#ff0000,transparent 66%);animation:drift1 11s ease-in-out infinite alternate}
.sky .a2{width:54vw;height:54vw;top:6vh;right:-12vw;background:radial-gradient(circle,#ff1493,transparent 64%);animation:drift2 9s ease-in-out infinite alternate}
.sky .a3{width:70vw;height:70vw;bottom:-26vw;left:14vw;background:radial-gradient(circle,#b8005a,transparent 68%);animation:drift3 12s ease-in-out infinite alternate}
.sky .a4{width:38vw;height:38vw;top:44vh;left:38vw;background:radial-gradient(circle,#ff4d2e,transparent 62%);opacity:.35;animation:drift1 10s ease-in-out infinite alternate-reverse}

@keyframes drift1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(7vw,5vh,0) scale(1.18)}}
@keyframes drift2{from{transform:translate3d(0,0,0) scale(1.1)}to{transform:translate3d(-6vw,8vh,0) scale(.95)}}
@keyframes drift3{from{transform:translate3d(0,0,0) scale(.95)}to{transform:translate3d(5vw,-6vh,0) scale(1.15)}}

.topbar,.hero,.wrap,.join,.foot{position:relative;z-index:1}

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;gap:10px;
  padding:10px clamp(12px,3vw,22px);
  background:rgba(30,18,18,.78);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(255,20,147,.18);
}

.logo{
  display:flex;align-items:center;gap:10px;
  min-height:44px;padding-right:6px;
  text-decoration:none;color:#fff;font-weight:800;
  letter-spacing:.01em;min-width:0;
}
.logo-img{width:34px;height:34px;border-radius:12px;object-fit:cover}
.logo-mark{
  width:34px;height:34px;flex:0 0 34px;border-radius:12px;
  display:grid;place-items:center;
  background:linear-gradient(135deg,#ff0000,#ff1493);
  box-shadow:0 8px 20px rgba(255,20,147,.45);
  font-size:16px;font-weight:800;color:#fff;
}
.logo-name{font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:34vw}

.tools{margin-left:auto;display:flex;align-items:center;gap:8px}

.search{
  display:flex;align-items:center;gap:4px;
  min-height:46px;padding:3px 3px 3px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
}
.search input{
  width:112px;min-width:0;min-height:36px;
  border:0;background:none;outline:none;
  color:#fff;font:inherit;font-size:15px;
}
.search input::placeholder{color:#cfa8b5}
.search button{
  min-height:40px;padding:0 14px;border:0;border-radius:999px;
  background:linear-gradient(135deg,#ff0000,#ff1493);
  color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer;
}

.menu{position:relative}
.menu summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;
  min-height:46px;padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);
  color:#fff;font-size:15px;font-weight:600;
}
.menu summary::-webkit-details-marker{display:none}
.menu[open] summary{border-color:rgba(255,20,147,.6);background:rgba(255,20,147,.18)}
.menu-panel{
  position:absolute;right:0;top:calc(100% + 10px);
  width:min(286px,88vw);padding:10px;
  border-radius:22px;
  background:rgba(42,24,24,.97);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 26px 60px rgba(0,0,0,.6);
  display:none;
}
.menu[open] .menu-panel{display:block}
.menu-panel a{
  display:flex;align-items:center;min-height:44px;
  padding:10px 12px;border-radius:13px;
  color:#f7e6ea;text-decoration:none;font-size:16px;
}
.menu-panel a:hover{background:rgba(255,20,147,.2);color:#fff}
.group-label{
  margin:10px 12px 4px;font-size:14px;font-weight:700;
  letter-spacing:.16em;color:#f0a2c4;
}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;overflow:hidden;
  min-height:70vh;
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:26px clamp(18px,5vw,72px) clamp(30px,7vh,64px);
  border-bottom-left-radius:36px;border-bottom-right-radius:36px;
}
.hero-art{position:absolute;inset:0;z-index:0}
.hero-art img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05)}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    radial-gradient(58% 62% at 84% 18%,rgba(255,20,147,.5),transparent 72%),
    linear-gradient(202deg,rgba(38,23,23,.2) 0%,rgba(27,16,16,.86) 64%,#1b1010 100%);
}
.hero-copy{position:relative;z-index:2;text-align:right;max-width:22ch}
.badge{
  display:inline-block;margin:0 0 12px;padding:6px 16px;
  border-radius:999px;font-size:14px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:rgba(255,20,147,.28);
  border:1px solid rgba(255,138,181,.55);
  backdrop-filter:blur(6px);
}
.hero h1{
  margin:0;font-size:clamp(2.1rem,5.6vw,4rem);
  line-height:1.12;font-weight:800;letter-spacing:-.02em;
  color:#fff;
  background:linear-gradient(102deg,#fff 18%,#ff9dc0 58%,#ff0000 96%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;
  text-shadow:0 12px 40px rgba(0,0,0,.35);
}

/* ---------- 主体栅格 ---------- */
.wrap{
  max-width:1180px;margin:clamp(24px,4vw,44px) auto 0;
  padding:0 clamp(14px,3.5vw,32px);
  display:grid;grid-template-columns:17rem minmax(0,1fr);
  gap:28px;align-items:start;
}

.rail{position:sticky;top:84px}
.rail-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.rail-nav a{
  display:flex;align-items:center;min-height:44px;
  padding:10px 14px;border-radius:15px;
  text-decoration:none;font-size:16px;color:#f2e0e3;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
  transition:transform .25s ease,background .25s ease,border-color .25s ease;
}
.rail-nav a:hover{
  transform:translateX(4px);color:#fff;
  background:linear-gradient(120deg,rgba(255,0,0,.3),rgba(255,20,147,.3));
  border-color:rgba(255,20,147,.55);
}

.content{min-width:0}

.prose{
  border-radius:28px;
  padding:clamp(20px,3vw,44px);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px rgba(0,0,0,.45);
  backdrop-filter:blur(4px);
}
.prose h2.lead{font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0 0 8px}
.subtitle{margin:0 0 22px;color:#ecb9c9;font-size:16px;line-height:1.6}

.prose h2,.prose h3{
  position:relative;padding-left:16px;color:#fff;
  line-height:1.35;font-weight:800;
}
.prose h2{font-size:1.42rem;margin:26px 0 12px}
.prose h3{font-size:1.15rem;margin:22px 0 10px}
.prose h2::before,.prose h3::before{
  content:"";position:absolute;left:0;top:.26em;bottom:.26em;width:4px;
  border-radius:4px;background:linear-gradient(#ff0000,#ff1493);
}

.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 8px}
.prose a{color:#ff9cc4;text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:#fff}
.prose strong{color:#fff}
.prose img{border-radius:20px;margin:14px 0}

.prose div + div{
  margin-top:34px;padding-top:32px;
  border-top:1px solid rgba(255,20,147,.22);
}
.prose div{scroll-margin-top:92px}

html.js .prose div{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
html.js .prose div.in{opacity:1;transform:none}

/* ---------- 订阅 ---------- */
.join{max-width:1180px;margin:34px auto 0;padding:0 clamp(14px,3.5vw,32px)}
.join-form{
  display:flex;gap:10px;padding:14px;border-radius:26px;
  background:linear-gradient(120deg,rgba(255,0,0,.24),rgba(255,20,147,.2));
  border:1px solid rgba(255,20,147,.36);
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}
.join-form input{
  flex:1;min-width:0;min-height:46px;padding:0 15px;
  border-radius:15px;border:1px solid rgba(255,255,255,.2);
  background:rgba(20,10,10,.55);color:#fff;font:inherit;font-size:16px;
}
.join-form input::placeholder{color:#d7b3bd}
.join-form button{
  min-height:46px;padding:0 24px;border:0;border-radius:15px;
  background:#fff;color:#261717;font:inherit;font-size:16px;font-weight:800;cursor:pointer;
}
.join-form button:hover{background:#ffd9e6}

/* ---------- 页脚 ---------- */
.foot{
  max-width:1180px;margin:34px auto 0;
  padding:22px clamp(14px,3.5vw,32px) 40px;
  display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;
  border-top:1px solid rgba(255,255,255,.12);
  color:#dcbcc6;font-size:16px;
}
.foot-brand{margin:0;font-weight:800;color:#fff}
.foot-links{margin:0;display:flex;flex-wrap:wrap;gap:2px;justify-content:center}
.foot-links a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 9px;
  color:#f2e0e3;text-decoration:none;font-size:16px;
}
.foot-links a:hover{color:#ff9cc4}
.foot small{justify-self:end;color:#b79aa2;font-size:15px}

/* ---------- 断点 ---------- */
@media (max-width:880px){
  .wrap{grid-template-columns:1fr;gap:24px}
  .content{order:1}
  .rail{order:2;position:static}
  .rail-nav ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero{min-height:62vh;justify-content:flex-start;border-radius:0 0 26px 26px}
  .hero-copy{text-align:left;max-width:none}
  .search input{width:88px}
  .foot{grid-template-columns:1fr;justify-items:start;gap:4px}
  .foot-links{justify-content:flex-start}
  .foot small{justify-self:start}
}

@media (max-width:560px){
  body{font-size:16px}
  .logo-name{max-width:26vw;font-size:15px}
  .search{padding-left:9px}
  .search input{width:64px;font-size:14px}
  .search button{padding:0 11px;font-size:13px}
  .menu summary{padding:0 11px;font-size:14px}
  .prose h2{font-size:1.3rem}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sky span{animation:none}
  html.js .prose div{opacity:1;transform:none;transition:none}
  .rail-nav a{transition:none}
}

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