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

:root{
  --ink:#0E0E10;
  --hot:#E8452C;
  --paper:#F2EFE9;
  --rail:236px;
  --bar:40px;
  --line:rgba(242,239,233,.12);
  --soft:rgba(242,239,233,.62);
}

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

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

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  font-size:17px;
  line-height:1.65;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

body::after{
  content:"";
  position:fixed;
  left:0;right:0;bottom:0;
  height:34vh;
  background:linear-gradient(transparent,rgba(14,14,16,.94));
  z-index:1;
  pointer-events:none;
}

/* —— 视差层 —— */
.sky{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.sky .layer{
  position:absolute;
  left:0;right:0;
  top:-20%;
  height:140%;
  display:block;
  will-change:transform;
}
.la{background:radial-gradient(58% 42% at 76% 6%,rgba(232,69,44,.30),transparent 72%)}
.lb{background-image:repeating-linear-gradient(90deg,rgba(242,239,233,.055) 0 1px,transparent 1px 132px)}
.lc{background:radial-gradient(52% 48% at 16% 94%,rgba(232,69,44,.15),transparent 74%)}

/* —— 顶部细条 —— */
.topbar{
  position:fixed;
  top:0;left:var(--rail);right:0;
  height:var(--bar);
  z-index:31;
  display:flex;
  align-items:center;
  gap:12px;
  padding:0 22px;
  border-bottom:1px solid var(--line);
  background:rgba(14,14,16,.84);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.tb-dot{width:8px;height:8px;background:var(--hot);display:block;flex:none}
.tb-name{font-size:14px;letter-spacing:.28em;color:rgba(242,239,233,.7);white-space:nowrap}
.tb-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(242,239,233,.2),transparent)}

/* —— 左侧竖栏 —— */
.rail{
  position:fixed;
  top:0;left:0;bottom:0;
  width:var(--rail);
  z-index:32;
  display:flex;
  flex-direction:column;
  gap:26px;
  padding:24px 16px;
  border-right:1px solid var(--line);
  background:rgba(14,14,16,.88);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  overflow-y:auto;
}
.mark{
  display:flex;
  align-items:center;
  justify-content:center;
  width:46px;height:46px;
  flex:none;
  background:var(--hot);
  color:var(--ink);
  text-decoration:none;
  font-weight:700;
  font-size:19px;
  overflow:hidden;
}
.mark-txt{line-height:1}
.mark-img{width:46px;height:46px;object-fit:cover;display:block;margin:0}

.rail-nav ol{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.rail-nav a{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  padding:11px 10px;
  color:rgba(242,239,233,.72);
  text-decoration:none;
  font-size:16px;
  line-height:1.35;
  border-left:2px solid transparent;
  transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.rail-nav a:hover{color:var(--paper);background:rgba(242,239,233,.05)}
.rail-nav a.on{color:var(--paper);border-left-color:var(--hot)}
.ic{
  width:7px;height:7px;
  flex:none;
  border:1px solid currentColor;
  transform:rotate(45deg);
  opacity:.8;
}
.rail-nav a.on .ic{background:var(--hot);border-color:var(--hot);opacity:1}

/* —— 主区 —— */
main.flow{
  position:relative;
  z-index:2;
  margin-left:var(--rail);
  padding-top:var(--bar);
}

main > div{
  position:relative;
  z-index:2;
  padding:72px 8vw;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--bar) + 26px);
}

main > div h2,
main > div h3,
main > div p,
main > div ul,
main > div ol,
main > div blockquote,
main > div figure{margin-left:0;margin-right:0}

main > div h2,
main > div h3,
main > div p,
main > div ul,
main > div ol,
main > div blockquote{max-width:66ch}

/* —— 首屏 —— */
main > div.hero{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  text-align:right;
  padding:calc(var(--bar) + 52px) 8vw 62px;
  border-top:0;
  overflow:hidden;
}
.hero h1{
  margin:0;
  max-width:18em;
  position:relative;
  z-index:3;
  font-size:clamp(2.3rem,7.4vw,6rem);
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.03em;
}
.hero h1 span{display:block}
.lede{
  position:relative;
  z-index:3;
  margin:26px 0 0;
  max-width:34ch;
  color:var(--soft);
  font-size:17px;
}

.ghost{
  position:absolute;
  right:5vw;
  bottom:-1vh;
  width:60%;
  height:46vh;
  z-index:1;
  pointer-events:none;
}
.ghost span{
  position:absolute;
  right:0;
  bottom:0;
  font-size:clamp(8rem,24vw,21rem);
  line-height:.78;
  font-weight:700;
  letter-spacing:-.05em;
  color:transparent;
  -webkit-text-stroke:1px rgba(232,69,44,.34);
  opacity:0;
  animation:ghostcycle 13.5s infinite;
}
.ghost span:nth-child(2){animation-delay:4.5s}
.ghost span:nth-child(3){animation-delay:9s}
@keyframes ghostcycle{
  0%{opacity:0;transform:translateY(26px)}
  5%{opacity:1;transform:none}
  28%{opacity:1;transform:none}
  34%{opacity:0}
  100%{opacity:0}
}

/* —— 视差图版 —— */
main > div.plate{
  border-top:0;
  padding:0 8vw;
}
.plate-fig{
  position:relative;
  margin:0;
  height:min(54vh,430px);
  background:#141417;
  border:1px solid var(--line);
  overflow:hidden;
}
.pf{position:absolute;display:block;top:0;bottom:0;will-change:transform}
.pf-a{left:0;width:34%;background:linear-gradient(180deg,rgba(232,69,44,.92),rgba(232,69,44,.28))}
.pf-b{right:0;width:15%;background:repeating-linear-gradient(180deg,rgba(242,239,233,.20) 0 2px,transparent 2px 15px)}
.plate-fig img.shot{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  margin:0;
  opacity:.72;
  filter:grayscale(.35) contrast(1.06);
}

/* —— 正文排版 —— */
main > div h2{
  margin-top:0;
  margin-bottom:22px;
  font-size:clamp(1.45rem,3vw,2.15rem);
  line-height:1.2;
  font-weight:600;
  letter-spacing:-.02em;
}
main > div h2::before{
  content:"";
  display:block;
  width:42px;
  height:3px;
  background:var(--hot);
  margin-bottom:16px;
}
main > div h3{
  margin-top:34px;
  margin-bottom:14px;
  font-size:clamp(1.12rem,1.8vw,1.35rem);
  line-height:1.3;
  font-weight:600;
}
main > div p{
  margin:0 0 20px;
  color:rgba(242,239,233,.76);
}
main > div ul,
main > div ol{
  margin:0 0 22px;
  padding-left:1.25em;
  color:rgba(242,239,233,.76);
}
main > div li{margin-bottom:10px}
main > div a{color:var(--hot);text-decoration:underline;text-underline-offset:3px}
main > div a:hover{color:var(--paper)}
main > div strong{color:var(--paper);font-weight:600}
main > div blockquote{
  margin:28px 0;
  padding:6px 0 6px 20px;
  border-left:3px solid var(--hot);
  color:rgba(242,239,233,.9);
  font-style:normal;
}
main > div img{
  max-width:100%;
  height:auto;
  display:block;
  margin:26px 0;
}
main > div code{
  font-size:15px;
  background:rgba(242,239,233,.09);
  padding:2px 6px;
}
main > div pre{
  overflow-x:auto;
  padding:16px;
  background:rgba(242,239,233,.07);
  border-left:3px solid var(--hot);
  max-width:66ch;
}
main > div pre code{background:none;padding:0}
main > div hr{
  border:0;
  border-top:1px solid var(--line);
  margin:36px 0;
}

/* —— 页脚 —— */
.foot{
  position:relative;
  z-index:2;
  margin-left:var(--rail);
  border-top:1px solid rgba(242,239,233,.16);
  background:rgba(14,14,16,.7);
  padding:52px 8vw 30px;
}
.foot-cols{
  display:grid;
  grid-template-columns:1.15fr 1.15fr .85fr;
  gap:34px;
  align-items:start;
}
.foot dl{margin:0}
.foot dt{
  font-size:14px;
  letter-spacing:.16em;
  color:rgba(242,239,233,.45);
  margin-bottom:12px;
  font-weight:500;
}
.foot dd{margin:0}
.foot dd a{
  display:flex;
  align-items:center;
  min-height:40px;
  font-size:16px;
  color:rgba(242,239,233,.8);
  text-decoration:none;
}
.foot dd a:hover{color:var(--hot)}
.f-desc{
  margin-top:12px !important;
  color:rgba(242,239,233,.52) !important;
  font-size:15px;
  line-height:1.6;
}
.foot-base{
  margin-top:42px;
  padding-top:20px;
  border-top:1px solid var(--line);
  text-align:center;
}
.foot-base p{
  margin:0;
  font-size:15px;
  color:rgba(242,239,233,.44);
}

/* —— 滚动揭示 —— */
.js main > div{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.22,.68,.24,1);
}
.js main > div.in{opacity:1;transform:none}
.js main > div > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s ease,transform .55s cubic-bezier(.22,.68,.24,1);
}
.js main > div.in > *{opacity:1;transform:none}
.js main > div.in > *:nth-child(2){transition-delay:.06s}
.js main > div.in > *:nth-child(3){transition-delay:.12s}
.js main > div.in > *:nth-child(4){transition-delay:.18s}
.js main > div.in > *:nth-child(5){transition-delay:.24s}
.js main > div.in > *:nth-child(6){transition-delay:.3s}
.js main > div.in > *:nth-child(7){transition-delay:.36s}
.js main > div.in > *:nth-child(n+8){transition-delay:.4s}
.js main > div.hero,
.js main > div.hero > *{opacity:1;transform:none}

/* —— 窄屏 —— */
@media (max-width:900px){
  .rail{
    top:auto;
    left:0;right:0;bottom:0;
    width:auto;
    height:auto;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:8px 12px;
    border-right:0;
    border-top:1px solid rgba(242,239,233,.16);
    background:rgba(14,14,16,.97);
    overflow:visible;
  }
  .rail .mark{width:40px;height:40px;font-size:17px}
  .mark-img{width:40px;height:40px}
  .rail-nav{
    flex:1;
    min-width:0;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
  }
  .rail-nav ol{flex-direction:row;gap:6px;padding-bottom:2px}
  .rail-nav a{
    white-space:nowrap;
    padding:9px 12px;
    min-height:42px;
    font-size:16px;
    border-left:0;
    border-bottom:2px solid transparent;
  }
  .rail-nav a.on{border-left:0;border-bottom-color:var(--hot)}

  .topbar{left:0;padding:0 16px}

  main.flow{margin-left:0;padding-bottom:88px}
  main > div{padding:56px 22px}
  main > div.hero{padding:calc(var(--bar) + 40px) 22px 54px;align-items:flex-start;text-align:left;min-height:62vh}
  .ghost{right:18px;width:76%;height:34vh;bottom:0}
  .ghost span{font-size:clamp(6rem,40vw,11rem)}
  .lede{margin-top:20px}
  main > div.plate{padding:0 22px}

  .foot{margin-left:0;padding:42px 22px 112px}
  .foot-cols{grid-template-columns:1fr;gap:24px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sky .layer{transform:none !important}
  .ghost span{animation:none;opacity:0}
  .ghost span:first-child{opacity:1}
  .js main > div,
  .js main > div > *{opacity:1;transform:none;transition:none}
}

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