@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{
  --red:#ff0000;
  --violet:#8b00ff;
  --ink:#261717;
  --txt:#f7eff1;
  --dim:#c9bcc0;
  --line:rgba(255,255,255,.18);
  --glass:rgba(255,255,255,.07);
  --serif:'Cinzel','Songti SC','SimSun','Noto Serif SC',serif;
  --sans:'Josefin Sans','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
}

*{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  font-family:var(--sans);
  font-size:17px;
  font-weight:300;
  line-height:1.85;
  letter-spacing:.01em;
  overflow-x:hidden;
}

img{max-width:100%}
a{color:#fff}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.beams{
  position:fixed;
  inset:-25% -12%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(40% 38% at 16% 10%, rgba(255,0,0,.45), transparent 70%),
    radial-gradient(44% 42% at 84% 22%, rgba(139,0,255,.44), transparent 72%),
    radial-gradient(62% 46% at 50% 98%, rgba(255,0,0,.20), transparent 76%);
  filter:blur(34px);
  transform:translate3d(0,0,0);
  will-change:transform;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(120% 90% at 50% 38%, transparent 40%, rgba(20,10,12,.78) 100%);
}

/* ---------- 顶栏 ---------- */
.site-head{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:70;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px clamp(16px,4vw,40px);
}
.site-head::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg, rgba(38,23,23,.82), rgba(38,23,23,0));
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.mark{
  position:relative;
  z-index:3;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#fff;
  border:1px solid var(--line);
  background:rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:.04em;
  overflow:hidden;
}
.mark-img{width:100%;height:100%;object-fit:cover;display:block}
.mark-glyph{line-height:1}

.burger{
  position:relative;
  z-index:3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:64px;
  min-height:46px;
  padding:5px 10px;
  gap:0;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,.08);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  font-family:var(--sans);
}
.burger span{
  display:block;
  width:20px;
  height:2px;
  margin:3px 0;
  background:#fff;
  transition:transform .3s ease, opacity .3s ease;
}
.burger .burger-word{
  width:auto;
  height:auto;
  margin:5px 0 0;
  background:none;
  font-size:12px;
  line-height:1.1;
  letter-spacing:.24em;
}
body.nav-open .burger span:nth-child(1){transform:translateY(8px) rotate(45deg)}
body.nav-open .burger span:nth-child(2){opacity:0}
body.nav-open .burger span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* ---------- 全屏遮罩菜单 ---------- */
.menu{
  position:fixed;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(24,13,15,.74);
  -webkit-backdrop-filter:blur(18px);
  backdrop-filter:blur(18px);
  opacity:0;
  visibility:hidden;
  transition:opacity .34s ease, visibility .34s ease;
}
.menu p{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin:0;
  padding:72px 20px 28px;
  max-height:100vh;
  overflow:auto;
}
.menu a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  min-width:min(72vw,440px);
  padding:12px 22px;
  font-family:var(--serif);
  font-size:clamp(20px,3.2vw,30px);
  line-height:1.4;
  color:#fff;
  text-decoration:none;
  text-align:center;
  border-bottom:1px solid rgba(255,255,255,.14);
  transition:color .25s ease, letter-spacing .25s ease;
}
.menu a:hover{color:#ff9a9a;letter-spacing:.06em}
body.nav-open .menu{opacity:1;visibility:visible}
body.nav-open{overflow:hidden}

/* ---------- 首屏 ---------- */
.hero{
  position:relative;
  z-index:1;
  min-height:100svh;
  display:grid;
  grid-template-columns:1.02fr .98fr;
  grid-template-areas:"media copy";
  align-items:stretch;
  overflow:hidden;
}
.hero--solo{grid-template-columns:1fr;grid-template-areas:"copy"}

.hero::after{
  content:"";
  position:absolute;
  left:-25%;
  right:-25%;
  bottom:-14%;
  height:34%;
  z-index:0;
  pointer-events:none;
  background:linear-gradient(100deg, rgba(255,0,0,.55), rgba(139,0,255,.5));
  transform:skewY(-6deg);
  filter:blur(42px);
  opacity:.6;
}

.hero-media{
  grid-area:media;
  position:relative;
  overflow:hidden;
  min-height:44vh;
  clip-path:polygon(0 0, 100% 0, calc(100% - 110px) 100%, 0 100%);
  background:linear-gradient(150deg, rgba(255,0,0,.18), rgba(139,0,255,.18));
}
.hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  transition:opacity 1.1s ease;
  filter:saturate(1.08) contrast(1.04);
}
.hero-media img.is-on{opacity:1}

.hero-copy{
  grid-area:copy;
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  justify-content:center;
  text-align:right;
  padding:clamp(96px,14vh,150px) clamp(20px,5vw,72px) clamp(56px,10vh,110px);
}

.hero-copy h1{
  margin:0 0 20px;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(30px,4.8vw,60px);
  line-height:1.22;
  letter-spacing:.02em;
  text-shadow:0 2px 26px rgba(0,0,0,.45);
}
.hero-copy h1::after{
  content:"";
  display:block;
  width:76px;
  height:2px;
  margin:22px 0 0 auto;
  background:linear-gradient(90deg, var(--violet), var(--red));
}
.hero-copy .lead{
  margin:0;
  max-width:46ch;
  color:var(--dim);
  font-size:clamp(16px,1.7vw,18px);
  line-height:1.8;
}

/* ---------- 主体 ---------- */
main{
  position:relative;
  z-index:1;
  max-width:1180px;
  margin:0 auto;
  padding:clamp(30px,5vw,64px) clamp(16px,4vw,40px) clamp(56px,8vw,96px);
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(20px,3vw,42px);
  align-items:start;
}

article{min-width:0}

article > section{
  position:relative;
  scroll-margin-top:96px;
  margin:0 0 clamp(18px,2.6vw,30px);
  padding:clamp(22px,3.6vw,44px);
  background:linear-gradient(160deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border:1px solid var(--line);
  border-bottom:2px solid rgba(255,0,0,.62);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
}
article > section:last-child{margin-bottom:0}

article h2{
  margin:0 0 16px;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(21px,2.6vw,29px);
  line-height:1.36;
  letter-spacing:.02em;
}
article h2::after{
  content:"";
  display:block;
  width:48px;
  height:2px;
  margin-top:14px;
  background:linear-gradient(90deg, var(--red), var(--violet));
}
article h3{
  margin:26px 0 10px;
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(18px,2vw,21px);
  line-height:1.5;
  color:#ffe3e3;
}
article p{margin:0 0 14px;color:#e8dfe2}
article ul,article ol{margin:0 0 16px;padding-left:1.3em}
article li{margin:0 0 8px}
article a{color:#ffb3b3;text-underline-offset:3px}
article strong{color:#fff;font-weight:500}
article blockquote{
  margin:20px 0;
  padding:12px 20px;
  border-left:2px solid var(--violet);
  background:rgba(255,255,255,.05);
  color:var(--dim);
}
article img{display:block;margin:18px 0;border:1px solid var(--line)}
article figure{margin:18px 0}
article code{
  font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:15px;
  background:rgba(255,255,255,.09);
  padding:1px 6px;
}

/* ---------- 侧栏 ---------- */
.rail{
  position:sticky;
  top:96px;
  padding:22px;
  background:var(--glass);
  border:1px solid var(--line);
  border-left:2px solid var(--violet);
  -webkit-backdrop-filter:blur(15px);
  backdrop-filter:blur(15px);
}
.rail h2{
  margin:0 0 6px;
  font-family:var(--serif);
  font-weight:600;
  font-size:19px;
  line-height:1.4;
}
.rail .subtitle{
  margin:0 0 16px;
  color:var(--dim);
  font-size:15px;
  line-height:1.6;
  letter-spacing:.06em;
}
.rail .subtitle:empty{
  height:8px;
  width:64px;
  margin:4px 0 18px;
  background:linear-gradient(90deg, var(--red), var(--violet));
}
.rail ul{list-style:none;margin:0;padding:0}
.rail li a{
  display:flex;
  align-items:center;
  min-height:42px;
  padding:9px 0;
  font-size:16px;
  color:#efe4e7;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:color .2s ease, padding-left .2s ease;
}
.rail li:last-child a{border-bottom:0}
.rail li a:hover{color:#ff9a9a;padding-left:7px}

/* ---------- 页脚 ---------- */
.site-foot{
  position:relative;
  z-index:1;
  padding:clamp(30px,5vw,58px) clamp(16px,4vw,40px) 20px;
  border-top:1px solid var(--line);
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(0,0,0,.28));
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.foot-cols{
  display:grid;
  grid-template-columns:1.3fr 1fr auto;
  gap:26px;
  align-items:start;
  max-width:1180px;
  margin:0 auto;
}
.foot-cols address{
  font-style:normal;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.foot-brand{
  font-family:var(--serif);
  font-size:19px;
  letter-spacing:.05em;
}
.foot-host{color:var(--dim);font-size:15px;word-break:break-all}
.foot-links{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:2px 18px;
}
.foot-links li a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:8px 0;
  color:var(--dim);
  font-size:16px;
  text-decoration:none;
}
.foot-links li a:hover{color:#fff}
.foot-mark{margin-left:auto}
.foot-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  max-width:1180px;
  margin:24px auto 0;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.09);
  color:var(--dim);
  font-size:15px;
}
.foot-bar p{margin:0}
.foot-bar a{
  display:inline-flex;
  align-items:center;
  min-height:42px;
  padding:8px 14px;
  color:var(--txt);
  text-decoration:none;
  border:1px solid var(--line);
  background:rgba(255,255,255,.06);
}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  main{grid-template-columns:1fr}
  .rail{position:static;order:2}
}

@media (max-width:760px){
  body{font-size:16px}
  .hero{
    grid-template-columns:1fr;
    grid-template-areas:"copy" "media";
    min-height:100svh;
  }
  .hero-media{
    min-height:40vh;
    clip-path:none;
  }
  .hero-copy{
    align-items:flex-start;
    text-align:left;
    padding:clamp(88px,13vh,120px) 20px 32px;
  }
  .hero-copy h1::after{margin-left:0}
  .hero-copy .lead{max-width:none}
  .foot-cols{grid-template-columns:1fr;gap:14px}
  .foot-mark{margin-left:0}
  .foot-bar{flex-wrap:wrap}
  article > section{scroll-margin-top:84px}
  .menu a{min-width:min(84vw,440px)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .beams{transform:none}
  .hero-media img{transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

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