/* ---------- 字体:Space Grotesk v22(可变字重 300–700),本地文件 ----------
     出处与校验值见 assets/fonts/SOURCE.txt;latin 已 preload,latin-ext 按需加载 */
  @font-face{
    font-family:'Space Grotesk';
    font-style:normal;
    font-weight:300 700;
    font-display:swap;
    src:url('fonts/space-grotesk-latin.woff2') format('woff2');
    unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
  }
  @font-face{
    font-family:'Space Grotesk';
    font-style:normal;
    font-weight:300 700;
    font-display:swap;
    src:url('fonts/space-grotesk-latin-ext.woff2') format('woff2');
    unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
  }
  :root{
    --paper:#F4F2ED;
    --ink:#141414;
    --muted:#635F57;
    --line:rgba(20,20,20,.16);
    --line-strong:rgba(20,20,20,.55);
    --accent:#B3341F;
    --tint:#ECE9E0;
    --font:'Space Grotesk','Segoe UI','Microsoft YaHei','PingFang SC',sans-serif;
    --ease:cubic-bezier(.33,1,.68,1);
    --wrap:clamp(860px, 72vw, 1920px);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth;scroll-padding-top:124px}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:var(--font);
    font-size:16px;
    line-height:1.7;
    overflow-x:hidden;
  }
  ::selection{background:var(--accent);color:#fff}
  a{color:inherit;text-decoration:none}
  :focus-visible{outline:2px solid var(--ink);outline-offset:3px}
  a,button,.drow{cursor:pointer}

  /* 背景层:制图网点 + 星尘(固定,极淡) */
  body::before{
    content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
    background-image:radial-gradient(rgba(20,20,20,.12) 1px,transparent 1px);
    background-size:30px 30px;
  }
  #dust{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
  #dust i{position:absolute;background:var(--ink)}
  #dust i.a{background:var(--accent)}

  /* ---------- 花样:颗粒质感 / 滚动条 / 跟随光标 ---------- */
  body::after{
    content:"";position:fixed;inset:0;z-index:98;pointer-events:none;opacity:.05;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  ::-webkit-scrollbar{width:10px}
  ::-webkit-scrollbar-track{background:var(--paper)}
  ::-webkit-scrollbar-thumb{background:var(--ink);border:3px solid var(--paper)}
  ::-webkit-scrollbar-thumb:hover{background:var(--accent)}
  #cursor{
    position:fixed;top:0;left:0;width:10px;height:10px;background:var(--accent);
    z-index:99;pointer-events:none;opacity:0;transform:translate(-50%,-50%);
    transition:width .3s var(--ease),height .3s var(--ease),opacity .4s ease;
  }
  #cursor.on{opacity:1}
  #cursor.big{width:38px;height:38px;opacity:.22}
  @media (pointer:coarse){#cursor{display:none}}
  /* 点阵 Logo 水印:固定右下,极淡,由约 1100 个网点构成羽翼轨道环 */
  #logoDots{
    position:fixed;right:3vw;bottom:6vh;z-index:-2;pointer-events:none;
    width:min(44vw,720px);aspect-ratio:64/40;opacity:0;
    transition:opacity 1.6s ease .3s;
  }
  #logoDots.show{opacity:1}
  #logoDots i{position:absolute;border-radius:50%;background:var(--ink);opacity:.13;aspect-ratio:1}
  #logoDots i.a{background:var(--accent);opacity:.28}
  @media (max-width:860px){#logoDots{display:none}}

  .wrap{width:var(--wrap);margin:0 auto;padding:0 48px}
  .wrap-full{margin:0 auto;padding:0 48px}
  @media (max-width:960px){.wrap{width:auto}.skywrap{width:auto}}
  .cap{
    font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
  }
  .hollow{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
  @supports not (-webkit-text-stroke:1px #000){.hollow{color:var(--ink)}}
  .accent{color:var(--accent)}

  /* ---------- 顶栏:透明悬浮,滚动后浮现毛玻璃 ---------- */
  nav{position:fixed;top:44px;left:0;right:0;z-index:60;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,top .3s ease}
  nav.scrolled{background:rgba(244,242,237,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
  .nav-inner{margin:0 auto;padding:0 48px;height:60px;display:flex;align-items:center;gap:30px}
  .logo{display:flex;align-items:center;gap:9px;font-weight:700;font-size:14px;letter-spacing:.12em}
  .logo img{height:21px;width:auto;display:block;transition:transform .45s var(--ease)}
  .logo:hover img{transform:rotate(-8deg)}
  .logo .cn{font-size:11px;color:var(--muted);letter-spacing:.34em;font-weight:400}
  .nav-links{display:flex;gap:30px;margin-left:auto}
  .nav-links a{
    display:inline-flex;align-items:baseline;gap:7px;
    font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--ink);
    position:relative;padding:4px 0;transition:color .22s;
  }
  .nav-links a i{font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--muted);transition:color .22s}
  .nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--ink);transition:width .26s var(--ease)}
  .nav-links a:hover::after{width:100%}
  .nav-links a:hover i{color:var(--accent)}
  .live{width:7px;height:7px;background:var(--accent);flex:0 0 auto;animation:livepulse 2.6s ease-in-out infinite}
  @keyframes livepulse{0%,100%{opacity:.25}50%{opacity:1}}
  .nav-join{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--ink);color:var(--paper);
    padding:11px 20px;font-size:13px;font-weight:700;letter-spacing:.08em;
    transition:background .24s,color .24s,transform .24s var(--ease);
  }
  .nav-join:hover{background:var(--accent);color:#fff;transform:translateY(-1px)}
  .nav-join .arr{transition:transform .24s var(--ease)}
  .nav-join:hover .arr{transform:translateX(4px)}
  #menuBtn{display:none;margin-left:auto;background:none;border:none;color:var(--ink);padding:10px;margin-right:-10px}
  #menuBtn svg{width:22px;height:22px}

  /* 移动端全屏菜单 */
  #mMenu{
    position:fixed;inset:0;z-index:70;background:var(--paper);
    display:none;flex-direction:column;padding:24px 28px 40px;
  }
  #mMenu.open{display:flex}
  #mMenu .top{display:flex;align-items:center;justify-content:space-between;height:36px}
  #mMenu .top button{background:none;border:none;color:var(--ink);padding:10px;margin-right:-10px}
  #mMenu .top svg{width:22px;height:22px}
  #mMenu .links{margin-top:7vh;display:flex;flex-direction:column}
  #mMenu .links a{
    display:flex;align-items:baseline;gap:16px;
    font-size:clamp(28px,7.6vw,40px);font-weight:700;letter-spacing:.02em;
    padding:13px 4px;border-top:1px solid var(--line);
  }
  #mMenu .links a:last-child{border-bottom:1px solid var(--line)}
  #mMenu .links a i{font-style:normal;font-size:12px;letter-spacing:.2em;color:var(--muted);font-weight:400}
  #mMenu .links a:active{color:var(--accent)}
  #mMenu .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:center}
  @media (max-width:860px){
    .nav-links,.nav-join{display:none}
    #menuBtn{display:inline-flex}
  }

  /* ---------- Hero ---------- */
  .hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 56px;position:relative}
  .hero>.wrap{width:var(--wrap)}
  @media (max-width:960px){.hero>.wrap{width:100%}}
  .hero .cap-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:14px}
  .hero-title{position:relative;padding:46px 0 12px}
  .hero-en{
    font-size:clamp(58px,11.5vw,280px);font-weight:700;line-height:.92;
    letter-spacing:-.015em;white-space:nowrap;
  }
  .hero-cn{
    display:flex;align-items:flex-end;gap:26px;flex-wrap:wrap;
    margin-top:28px;
  }
  .hero-cn h1{font-size:clamp(30px,4.6vw,56px);font-weight:700;letter-spacing:.14em;line-height:1.1}
  .hero-cn p{max-width:30em;font-size:14.5px;color:var(--muted);line-height:1.9;padding-bottom:6px}
  .hero-cta{display:flex;align-items:center;gap:28px;margin-top:46px}
  .btn{
    display:inline-flex;align-items:center;gap:12px;
    background:var(--ink);color:var(--paper);
    font-family:var(--font);font-weight:700;font-size:14px;letter-spacing:.1em;
    padding:16px 30px;border:1px solid var(--ink);border-radius:0;
    transition:background .24s,border-color .24s,color .24s,transform .24s var(--ease);
  }
  .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translateY(-2px)}
  .link-u{font-weight:700;font-size:14px;letter-spacing:.1em;position:relative;padding:4px 0}
  .link-u::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--ink);transition:background .22s}
  .link-u:hover{color:var(--accent)}
  .link-u:hover::after{background:var(--accent)}

  /* 抽象图形:星体炸成方块——挂在右上空区,与左下文字构成对角;外圈轨道线带科幻制图感 */
  .burst{
    position:absolute;right:1.5%;top:2%;
    display:grid;grid-template-columns:repeat(13,var(--cell));gap:3px;
    --cell:clamp(8px,1.3vw,17px);
    z-index:-1;
  }
  .burst::before{
    content:"";position:absolute;inset:-16% -9%;border:1px solid var(--line);border-radius:50%;
    transform-origin:center;animation:orb 60s linear infinite;
  }
  .burst::after{
    content:"";position:absolute;inset:-34% -26%;border:1px dashed var(--line);border-radius:50%;
    transform-origin:center;animation:orb 96s linear infinite reverse;
  }
  @keyframes orb{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
  .burst i{width:var(--cell);height:var(--cell);opacity:0}
  .burst i.on{background:var(--ink)}
  .burst i.ring{background:var(--accent)}
  .burst i.faint{background:var(--ink);opacity:0}
  .burst i.faint.show{opacity:.14}
  .burst i.show{opacity:1}
  @media (max-width:1024px){
    .burst{opacity:.85}
  }
  @media (max-width:860px){
    .hero{min-height:auto;padding-top:88px}
    .burst{position:relative;right:auto;top:auto;transform:none;margin:40px auto 6px;order:2;width:fit-content}
    .hero-en{white-space:normal;font-size:clamp(52px,15.2vw,96px)}
    .hero .cap-row{flex-direction:column;align-items:flex-start;gap:6px}
    .hero .cap-row .cap{font-size:10px}
  }

  /* 元信息行 */
  .meta{
    display:grid;grid-template-columns:repeat(4,1fr);
    border-top:1px solid var(--line-strong);margin-top:56px;
  }
  .meta>div{padding:24px 18px 34px;border-left:1px solid var(--line)}
  .meta>div:first-child{border-left:none;padding-left:0}
  .meta b{display:block;font-size:clamp(26px,2.8vw,42px);font-weight:500;letter-spacing:.02em;line-height:1.15}
  .meta span{font-size:11px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}
  @media (max-width:640px){
    .meta{grid-template-columns:repeat(2,1fr)}
    .meta>div{padding:16px 14px 18px}
    .meta>div:nth-child(odd){border-left:none;padding-left:0}
    .meta>div:nth-child(n+3){border-top:1px solid var(--line)}
  }

  /* ---------- 标语横带 ---------- */
  .slogan .wrap{
    border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line);
    padding-top:64px;padding-bottom:64px;
  }
  .slogan .cap-row{display:flex;justify-content:space-between;margin-bottom:26px}
  .slogan h2{font-size:clamp(34px,6.4vw,100px);letter-spacing:.08em;line-height:1.18}
  .slogan .sub-slogan{
    margin-top:30px;font-size:clamp(17px,2vw,28px);font-weight:500;
    letter-spacing:.18em;display:flex;align-items:center;gap:16px;
  }
  .slogan .sub-slogan::before{content:"";width:11px;height:11px;background:var(--accent);flex:0 0 auto}
  .slogan .sign{margin-top:24px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

  /* ---------- 区块骨架 ---------- */
  section{padding:128px 0 120px}
  .sec-head{
    position:relative;
    border-top:none;padding-top:16px;display:flex;justify-content:space-between;align-items:baseline;margin-bottom:64px;
    background:linear-gradient(var(--line-strong),var(--line-strong)) left top/0% 1px no-repeat;
    transition:background-size .9s var(--ease);
  }
  .sec-head.reveal{opacity:1;transform:none;transition:background-size .9s var(--ease)}
  .sec-head.reveal.in{background-size:100% 1px}
  /* 科幻制图刻度:边线两端的 + 标记 */
  .sec-head::before,.sec-head::after{
    content:"+";position:absolute;top:-8px;font-size:14px;line-height:1;color:var(--ink);
    background:var(--paper);padding:0 5px;opacity:0;transition:opacity .4s ease .95s;
  }
  .sec-head.reveal.in::before,.sec-head.reveal.in::after{opacity:1}
  .sec-head .no,.sec-head .sec-en{opacity:0;transform:translateY(8px);transition:opacity .45s ease .5s,transform .45s var(--ease) .5s}
  .sec-head.reveal.in .no,.sec-head.reveal.in .sec-en{opacity:1;transform:none}
  .sec-head::before{left:-7px}
  .sec-head::after{right:-7px}
  .sec-head .no{font-size:12px;letter-spacing:.24em;color:var(--muted)}
  .sec-head .no b{color:var(--ink);font-weight:700}
  h2{font-size:clamp(30px,4vw,52px);font-weight:700;letter-spacing:.1em}
  .sec-en{font-size:12px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase}

  /* ---------- 报头变体:让六节不再同构 ---------- */
  /* v1 竖线堆叠(01 理念) */
  .sec-head.v1{display:block;padding:2px 0 2px 24px;margin-bottom:54px;border-left:3px solid var(--ink);
    background:linear-gradient(var(--line-strong),var(--line-strong)) left top/0% 1px no-repeat}
  .sec-head.v1.reveal.in{background:none}
  .sec-head.v1::before,.sec-head.v1::after{content:none}
  .sec-head.v1 .no b{font-size:15px}
  .sec-head.v1 .sec-en{display:block;margin-top:9px}
  /* v2 右半线 + 大编号(02 方向) */
  .sec-head.v2{padding-top:24px;background:linear-gradient(var(--line-strong),var(--line-strong)) right top/0% 1px no-repeat}
  .sec-head.v2.reveal.in{background-image:linear-gradient(var(--line-strong),var(--line-strong));background-position:right top;background-repeat:no-repeat;background-size:46% 1px}
  .sec-head.v2::before{content:none}
  .sec-head.v2 .no b{font-size:24px;letter-spacing:0}
  /* v3 顺序反转,编号落右(03 作品) */
  .sec-head.v3{flex-direction:row-reverse;padding-top:26px}
  .sec-head.v3::before{left:auto;right:-7px}
  .sec-head.v3::after{right:auto;left:-7px}
  /* v4 居中小报头(04 大家) */
  .sec-head.v4{display:block;text-align:center;padding-top:0;margin-bottom:16px;background:none}
  .sec-head.v4::before,.sec-head.v4::after{content:none}
  .sec-head.v4 .no,.sec-head.v4 .sec-en{display:inline-block;opacity:1;transform:none}
  .sec-head.v4 .no{margin-right:20px}

  /* ---------- 节间距差异化:打破全站等距节奏 ---------- */
  #philosophy{padding-top:168px}
  #direction{padding-top:104px;padding-bottom:132px}
  #works{padding-top:150px}
  #members{padding-top:112px;padding-bottom:118px}

  /* ---------- 01 理念:首条提级,分出主次 ---------- */
  #philosophy .phil .p-item:first-child .p-body h3{font-size:clamp(26px,3.2vw,44px)}

  /* ---------- 04 大家:报头下沉为居中卷首语 ---------- */
  #members .crew-note{
    margin:0 auto 46px;text-align:center;max-width:26em;
    font-size:clamp(17px,2.1vw,26px);line-height:1.72;color:var(--ink);letter-spacing:.03em;
  }

  /* ---------- 01 理念:宣言式排版(镂空大编号,无分隔线) ---------- */
  .phil{display:flex;flex-direction:column;gap:64px}
  .p-item{display:grid;grid-template-columns:170px 1fr;gap:44px;align-items:start}
  .p-no{font-size:clamp(52px,5.6vw,84px);font-weight:700;line-height:.9;transition:color .3s,-webkit-text-stroke-color .3s}
  .p-item:hover .p-no{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
  .p-body h3{font-size:clamp(22px,2.6vw,34px);font-weight:700;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:center;gap:14px}
  .p-body h3::before{content:"";width:10px;height:10px;background:var(--accent);flex:0 0 auto}
  .p-body p{font-size:15px;color:var(--muted);max-width:34em}
  .p-body .tags{display:block;margin-top:10px;font-size:12px;letter-spacing:.12em;color:var(--muted)}
  @media (max-width:860px){.p-item{grid-template-columns:1fr;gap:14px}}

  /* ---------- 02 风格与题材:编辑式行列表 ---------- */
  .drow{
    display:grid;grid-template-columns:90px 1.1fr 1.4fr;gap:28px;align-items:baseline;
    padding:38px 14px;border-top:1px solid var(--line);
    transition:background .24s,color .24s,padding .3s var(--ease);
  }
  .drow:last-of-type{border-bottom:1px solid var(--line)}
  .drow .no{font-size:13px;letter-spacing:.16em;color:var(--muted);transition:color .24s}
  .drow h3{font-size:clamp(22px,2.6vw,36px);font-weight:700;letter-spacing:.08em}
  .drow .desc{font-size:15px;color:var(--muted);max-width:34em;transition:color .24s}
  .drow .tags{display:block;margin-top:8px;font-size:12px;letter-spacing:.12em;color:var(--muted);transition:color .24s}
  .drow:hover{background:var(--ink);color:var(--paper);padding-left:30px}
  .drow:hover .no{color:var(--accent)}
  .drow:hover .desc,.drow:hover .tags{color:rgba(244,242,237,.72)}
  @media (max-width:860px){
    .drow{grid-template-columns:48px 1fr;gap:10px 16px;padding:24px 6px}
    .drow .desc{grid-column:2}
  }

  /* ---------- 作品:细线网格 + 抽象图形 ---------- */
  #works .wgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
  #works .wcard{grid-column:span 2}
  #works .wcard:nth-child(1){grid-column:span 6;padding:44px 46px 52px}
  #works .wcard:nth-child(1) .thumb{aspect-ratio:2.6/1}
  #works .wcard:nth-child(1) h3{font-size:clamp(23px,2.6vw,34px)}
  .wcard{display:block;background:var(--paper);padding:32px 32px 40px;transition:background .26s}
  .wcard .wtop{display:flex;justify-content:space-between;margin-bottom:22px}
  .wcard .wtop .no{font-size:12px;letter-spacing:.2em;color:var(--muted)}
  .wcard .wtop .cat{font-size:11px;letter-spacing:.24em;color:var(--muted);text-transform:uppercase}
  .thumb{aspect-ratio:16/9;border:1px solid var(--line);position:relative;overflow:hidden;margin-bottom:22px;background:var(--muted);transition:border-color .26s}
  .thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
  .thumb .s{position:absolute;transition:background .26s,border-color .26s}
  .thumb .c{position:absolute;border:1.5px solid currentColor;border-radius:50%;color:var(--ink)}
  .thumb .bar{position:absolute;bottom:0;background:var(--ink);transition:background .26s}
  .wcard h3{font-size:21px;font-weight:700;letter-spacing:.06em;margin-bottom:8px}
  .wcard p{font-size:14px;color:var(--muted);max-width:32em}
  .wcard:hover{background:var(--ink)}
  .wcard:hover h3{color:var(--paper)}
  .wcard:hover p{color:rgba(244,242,237,.72)}
  .wcard:hover .wtop .no,.wcard:hover .wtop .cat{color:rgba(244,242,237,.55)}
  .wcard:hover .thumb{border-color:rgba(244,242,237,.4)}
  .wcard:hover .thumb .c{color:var(--paper)}
  .wcard:hover .thumb .s{background:var(--paper)}
  .wcard:hover .thumb .bar{background:var(--paper)}
  .wcard:hover .thumb .dot{background:var(--accent)}
  .t1 .c{width:58%;height:76%;left:21%;top:12%}
  .t1 .s{width:15%;height:24%;left:42.5%;top:38%;background:var(--ink)}
  .t1 .s.dot{background:var(--accent);width:7%;height:11%;left:16%;top:22%}
  .t2 .bar{width:7%;bottom:0}
  .t2 .b1{height:38%;left:16%}
  .t2 .b2{height:62%;left:30%}
  .t2 .b3{height:84%;left:44%;background:var(--accent)}
  .t2 .b4{height:52%;left:58%}
  .t2 .b5{height:70%;left:72%}
  .t3 .s{width:40%;height:56%;right:12%;bottom:14%;background:var(--ink)}
  .t3 .s2{width:11%;height:17%;left:44%;top:20%;background:var(--accent)}
  .t3 .c{width:36%;height:56%;left:14%;top:18%}
  .t4 .s{width:56%;height:74%;left:22%;top:13%;border:1.5px solid var(--ink);background:transparent;transition:border-color .26s}
  .t4 .s.dot{width:12%;height:18%;right:20%;bottom:14%;left:auto;top:auto;background:var(--accent)}
  .wcard:hover .t4 .s{border-color:var(--paper);background:transparent}
  /* 作品缩略图:悬停时几何元素轻微活动 */
  .thumb .c,.thumb .s,.thumb .bar{transition-property:background,border-color,transform;transition-duration:.3s;transition-timing-function:var(--ease)}
  .thumb .bar{transform-origin:bottom}
  .wcard:hover .t1 .c{transform:scale(1.06)}
  .wcard:hover .t3 .c{transform:translateX(7px)}
  .wcard:hover .t1 .s,.wcard:hover .t3 .s:not(.dot){transform:translateY(-5px)}
  .wcard:hover .t2 .bar{transform:scaleY(1.16)}
  .wcard:hover .t4 .s{transform:rotate(-2deg)}
  .wcard:hover .thumb .dot{transform:translateY(-5px) scale(1.18)}
  @media (max-width:860px){
    #works .wcard{grid-column:span 6}
    #works .wcard:nth-child(1){padding:32px 32px 40px}
    #works .wcard:nth-child(1) .thumb{aspect-ratio:16/9}
    #works .wcard:nth-child(1) h3{font-size:21px}
  }

  /* ---------- 合作服务器横带 ---------- */
  .p-band{
    margin-top:96px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    padding:34px 0;display:flex;align-items:center;gap:44px;
  }
  .p-band .cap{flex:0 0 auto}
  .p-row{flex:1;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}
  .p-row span{font-size:15px;letter-spacing:.12em;color:var(--muted);font-weight:500;transition:color .2s;cursor:pointer}
  .p-row span:hover{color:var(--ink)}
  @media (max-width:860px){.p-band{flex-direction:column;align-items:flex-start;gap:20px}}

  /* ---------- 04 团队的大家:报头式分栏(顶线 + 悬停橙条) ---------- */
  .crew-note{margin:-34px 0 42px;font-size:14.5px;color:var(--muted);max-width:36em}
  .mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px 36px}
  .mcard{border-top:1px solid var(--line-strong);padding:18px 0 10px;position:relative}
  .mcard::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:var(--accent);transition:width .35s var(--ease)}
  .mcard:hover::before{width:64px}
  .mcard .no{font-size:11px;letter-spacing:.22em;color:var(--muted)}
  .mcard h3{font-size:19px;font-weight:700;letter-spacing:.06em;margin:14px 0 2px}
  .mcard .role{font-size:11px;letter-spacing:.2em;color:var(--accent);text-transform:uppercase;font-weight:500}
  .mcard p{font-size:13.5px;color:var(--muted);margin-top:10px}
  .mcard.mjoin{background:var(--ink);color:var(--paper);padding:26px 26px 30px;border-top-color:var(--ink)}
  .mcard.mjoin::before{z-index:1}
  .mcard.mjoin .no{color:rgba(244,242,237,.55)}
  .mcard.mjoin h3{color:var(--paper)}
  .mcard.mjoin p{color:rgba(244,242,237,.72)}
  .mcard.mjoin .go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:13px;font-weight:700;letter-spacing:.1em;color:var(--paper)}
  .mcard.mjoin .go svg{transition:transform .24s var(--ease)}
  .mcard.mjoin:hover .go svg{transform:translateX(4px)}
  .mcard.mjoin:hover{background:var(--accent)}
  .mcard.mjoin:hover .no,.mcard.mjoin:hover p{color:rgba(255,255,255,.8)}
  @media (max-width:1024px){.mgrid{grid-template-columns:repeat(2,1fr)}}
  @media (max-width:640px){.mgrid{grid-template-columns:1fr}}

  /* ---------- 成员规模带:单行数据条 ---------- */
  .mband{display:flex;flex-wrap:wrap;margin-top:52px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .mband>div{display:flex;align-items:baseline;gap:12px;padding:22px 34px;border-left:1px solid var(--line)}
  .mband>div:first-child{border-left:none;padding-left:0}
  .mband b{font-size:26px;font-weight:500;letter-spacing:.02em}
  .mband span{font-size:12px;letter-spacing:.16em;color:var(--muted)}
  @media (max-width:700px){.mband{flex-direction:column}.mband>div{border-left:none;padding:14px 0}}

  /* ---------- 荣誉(旧列表,已被星图取代) ---------- */

  /* ---------- 背景音乐按钮:迷你星系 ---------- */
  #bgmBtn{
    position:fixed;left:26px;bottom:26px;z-index:85;
    width:58px;height:58px;border-radius:50%;
    background:var(--ink);border:1px solid rgba(20,20,20,.2);color:var(--paper);
    cursor:pointer;overflow:hidden;
    transition:transform .25s var(--ease),border-color .25s,box-shadow .25s;
  }
  #bgmBtn:hover{transform:scale(1.08);border-color:var(--accent)}
  .galaxy{position:absolute;inset:0;display:block}
  .galaxy .core{
    position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;
    background:var(--paper);opacity:.75;
    transform:translate(-50%,-50%);
    transition:background .3s,opacity .3s,box-shadow .3s;
  }
  .galaxy .ring{
    position:absolute;left:50%;top:50%;border-radius:50%;
    border:1px solid rgba(244,242,237,.28);
    transform:translate(-50%,-50%);
    transition:border-color .3s;
  }
  .galaxy .ring i{
    position:absolute;width:4px;height:4px;border-radius:50%;
    background:var(--paper);opacity:.6;
    left:50%;top:-2px;margin-left:-2px;
  }
  .galaxy .r1{width:26px;height:26px}
  .galaxy .r2{width:38px;height:38px}
  .galaxy .r3{width:50px;height:50px}
  .galaxy .r2 i{background:var(--accent);opacity:.9}
  #bgmBtn.playing{border-color:rgba(179,52,31,.5);box-shadow:0 0 22px rgba(179,52,31,.25)}
  #bgmBtn.playing .core{background:var(--accent);opacity:1;box-shadow:0 0 10px rgba(179,52,31,.8);animation:corepulse 2.4s ease-in-out infinite}
  #bgmBtn.playing .ring{border-color:rgba(244,242,237,.5)}
  #bgmBtn.playing .ring i{opacity:1}
  #bgmBtn.playing .r1{animation:orbit 7s linear infinite}
  #bgmBtn.playing .r2{animation:orbit 13s linear infinite reverse}
  #bgmBtn.playing .r3{animation:orbit 21s linear infinite}
  @keyframes orbit{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
  @keyframes corepulse{0%,100%{box-shadow:0 0 8px rgba(179,52,31,.6)}50%{box-shadow:0 0 14px rgba(179,52,31,.95)}}

  /* ---------- 荣誉星图 ---------- */
  .honormap{padding:104px 0 72px;position:relative}
  .honormap .sec-head{margin-bottom:44px}
  .in-word{
    position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);
    font-size:clamp(64px,10vw,168px);font-weight:700;letter-spacing:.08em;white-space:nowrap;
    color:transparent;-webkit-text-stroke:1px rgba(20,20,20,.09);
    pointer-events:none;user-select:none;line-height:1;
  }
  /* 用 min(100%,…) 兜底:--wrap 最小 860px,窄屏下直接用它会把星图撑出视口 */
  .skywrap{position:relative;width:min(100%,var(--wrap));margin:0 auto;padding:0 48px}
  /* 星图舞台:与 <svg> 完全重合。卡片用百分比定位,必须落在这个盒子上,
     否则会落进 .skywrap 的 padding 盒(左偏 48px、宽多 96px)而与星星错位。 */
  .skystage{position:relative}
  .sky{display:block;width:100%;height:auto;position:relative;z-index:1}
  .cline{fill:none;stroke:var(--ink);stroke-width:1.5;stroke-dasharray:1;stroke-dashoffset:1;opacity:.5;transition:stroke-dashoffset 2.4s var(--ease) .2s}
  .honormap.in .cline{stroke-dashoffset:0}
  .cstar .core{fill:var(--ink);transform-box:fill-box;transform-origin:center}
  .cstar .halo{fill:var(--paper);stroke:var(--ink);stroke-width:1.2;opacity:0;transform:scale(.4);transform-box:fill-box;transform-origin:center;transition:opacity .4s ease,transform .55s var(--ease);transition-delay:var(--d,0s)}
  .honormap.in .cstar .halo{opacity:1;transform:scale(1)}
  .honormap.in .cstar .core{animation:twinkle 3s ease-in-out infinite;animation-delay:var(--d,0s)}
  @keyframes twinkle{0%,100%{transform:scale(1)}50%{transform:scale(1.4)}}
  .cstar.you .core{fill:var(--accent);animation:youpulse 2.2s ease-in-out infinite!important}
  .cstar.you .halo{stroke:var(--accent)}
  @keyframes youpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
  .milestones{position:absolute;inset:0;z-index:2}
  .ms{position:absolute;width:250px;opacity:0;transform:translate(-50%,12px);transition:opacity .5s ease,transform .55s var(--ease);transition-delay:calc(var(--d,0s) + .3s)}
  .ms.above{transform:translate(-50%,calc(-100% + 12px))}
  .honormap.in .ms{opacity:1;transform:translate(-50%,0)}
  .honormap.in .ms.above{transform:translate(-50%,-100%)}
  /* 第五张「你」卡原先用 translate(-78%)——刻意左移半个身位,避免它的右边缘
     顶出容器(它是最后一颗星,锚点落在 92.4% 处)。但那样卡片锚点不在中心,
     视觉上明显与其他四张不齐、像"没对齐"。
     实测:改用居中的 -50% 后,≥1141px 的所有桌面视口下右边缘仍在视口内
     (最窄的 1141:星星中心 894 + 半宽 125 = 1019 < 1141),不会裁切、不会出横向滚动。
     故与其余四张统一为居中。堆叠布局(≤1140)另有规则,不受影响。 */
  .ms b{display:block;font-size:30px;font-weight:700;line-height:1;letter-spacing:.02em}
  .ms h3{font-size:15.5px;font-weight:700;letter-spacing:.04em;margin:10px 0 6px}
  .ms p{font-size:12.5px;color:var(--muted);line-height:1.7}
  .ms.you b{color:var(--accent)}
  .ms.you h3{color:var(--accent)}
  .ms.you p{color:var(--ink)}
  .in-note{text-align:center;margin-top:26px;font-size:13px;letter-spacing:.18em;color:var(--muted)}
  @media (max-width:1140px){
    .in-word,.sky{display:none}
    .milestones{position:static}
    /* 必须带 .honormap.in 前缀:否则这条 transform:none 会被
       .honormap.in .ms 的 translate(-50%) 覆盖(specificity 不够),
       板块滚入视口加上 .in 后卡片会整体左移半个身位、跑出屏幕。 */
    .ms,.honormap.in .ms,
    .ms.above,.honormap.in .ms.above,
    .ms.you,.honormap.in .ms.you{
      position:static;width:auto;transform:none;opacity:1;
      border-top:1px solid var(--line);padding:22px 2px
    }
  }

  /* ---------- 06 加入:双栏 ---------- */
  .join{padding-bottom:140px;position:relative;overflow:hidden}
  .join .wm{
    position:absolute;right:-1%;top:-6%;line-height:1;
    font-size:clamp(90px,13vw,230px);font-weight:700;letter-spacing:.02em;
    color:transparent;-webkit-text-stroke:1px rgba(20,20,20,.07);
    pointer-events:none;user-select:none;white-space:nowrap;
  }
  .join-grid{
    display:grid;grid-template-columns:1.15fr 1fr;gap:72px;align-items:start;
    border-top:1px solid var(--line-strong);padding-top:26px;position:relative;
  }
  .join .cap{display:block;margin-bottom:22px}
  .join h2{font-size:clamp(34px,4.6vw,68px);letter-spacing:.08em;line-height:1.22}
  .join .sub{margin-top:26px;max-width:24em;font-size:15px;color:var(--muted)}
  .req-list{border-top:1px solid var(--line)}
  .req-list>div{
    display:flex;justify-content:space-between;align-items:baseline;gap:16px;
    padding:17px 4px;border-bottom:1px solid var(--line);font-size:14.5px;
  }
  .req-list>div span{font-size:11px;letter-spacing:.2em;color:var(--muted)}
  .join .btn{margin-top:36px;font-size:15px;padding:18px 38px}
  @media (max-width:900px){.join-grid{grid-template-columns:1fr;gap:46px}}

  /* ---------- 页脚:两栏 + 居中合作伙伴(参考排版) ---------- */
  footer{border-top:1px solid var(--line-strong)}
  .foot-brand{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:52px 0 42px}
  .foot-brand .cap-r{font-size:11px;letter-spacing:.28em;color:var(--muted)}
  .foot-top{display:grid;grid-template-columns:1.15fr 1fr;gap:72px}
  .fcol h4{
    font-size:14px;font-weight:700;letter-spacing:.06em;
    border-bottom:1px solid var(--line-strong);padding-bottom:13px;margin-bottom:20px;
    display:flex;justify-content:space-between;align-items:baseline;
  }
  .fcol h4 .en{font-size:11px;letter-spacing:.22em;color:var(--muted);font-weight:500}
  .fcol ul{list-style:none}
  .flinks li{margin-bottom:13px}
  .flinks a{font-size:14px;display:inline-flex;align-items:center;gap:9px;transition:color .2s}
  .flinks a::before{content:"›";color:var(--muted);transition:color .2s,transform .22s var(--ease)}
  .flinks a:hover{color:var(--accent)}
  .flinks a:hover::before{color:var(--accent);transform:translateX(3px)}
  .fcontact li{margin-bottom:14px;display:flex;align-items:center;gap:11px;font-size:14px}
  .fcontact svg{width:15px;height:15px;color:var(--muted);flex:0 0 auto}
  .fcontact a{transition:color .2s}
  .fcontact a:hover{color:var(--accent)}
  .foot-partners{border-top:1px solid var(--line);margin-top:56px;padding:46px 0 50px;text-align:center}
  .foot-partners h4{
    font-size:14px;font-weight:700;letter-spacing:.06em;margin-bottom:26px;
    display:flex;justify-content:center;align-items:baseline;gap:10px;
  }
  .foot-partners h4 .en{font-size:11px;letter-spacing:.22em;color:var(--muted);font-weight:500}
  .prow{display:flex;justify-content:center;flex-wrap:wrap;gap:14px}
  .prow span{font-size:13px;letter-spacing:.12em;color:var(--muted);border:1px solid var(--line);padding:11px 24px;transition:color .2s,border-color .2s}
  .prow span:hover{color:var(--ink);border-color:var(--ink)}
  .foot-end{border-top:1px solid var(--line);padding:36px 0 42px;text-align:center}
  .foot-end .logo{display:inline-flex;margin-bottom:14px}
  .foot-end .cp{font-size:13px;color:var(--muted);letter-spacing:.06em}
  .foot-end .beian{font-size:12.5px;color:var(--muted);letter-spacing:.06em;margin-top:8px}
  .foot-end .beian a{
    color:inherit;text-decoration:none;
    border-bottom:1px solid transparent;
    transition:color .2s var(--ease),border-color .2s var(--ease);
  }
  .foot-end .beian a:hover,.foot-end .beian a:focus-visible{color:var(--accent);border-bottom-color:var(--accent)}
  .foot-end .disc{font-size:11.5px;color:var(--muted);letter-spacing:.06em;margin-top:10px;opacity:.85}
  @media (max-width:860px){
    .foot-brand{flex-direction:column;align-items:flex-start;gap:10px}
    .foot-top{grid-template-columns:1fr;gap:46px}
  }

  /* ---------- 开场动效 ---------- */
  body.intro-lock{overflow:hidden}
  #intro{
    position:fixed;inset:0;z-index:100;background:var(--paper);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    cursor:pointer;transition:opacity .65s ease,visibility .65s ease;
  }
  #intro.done{opacity:0;visibility:hidden;pointer-events:none}
  .intro-dots{position:relative;width:min(52vw,620px);aspect-ratio:64/40}
  .intro-dots i{
    position:absolute;border-radius:50%;background:var(--ink);opacity:0;aspect-ratio:1;
    transform:translate(var(--dx,0),var(--dy,0)) scale(.35);
    transition:opacity .55s ease,transform .75s cubic-bezier(.22,1,.36,1);
  }
  .intro-dots i.a{background:var(--accent)}
  .intro-dots i.in{opacity:.88;transform:none}
  .intro-word{margin-top:38px;text-align:center;opacity:0;transform:translateY(14px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .intro-word.in{opacity:1;transform:none}
  .intro-word b{display:block;font-weight:700;font-size:clamp(22px,3vw,40px);letter-spacing:.32em;text-indent:.32em}
  .intro-word span{display:block;margin-top:12px;font-size:12px;letter-spacing:.3em;color:var(--muted)}
  .intro-skip{
    position:absolute;bottom:28px;left:0;right:0;text-align:center;
    font-size:10px;letter-spacing:.3em;color:var(--muted);text-transform:uppercase;
  }
  @media (max-width:860px){.intro-dots{width:80vw}}

  /* ---------- 阅读进度条 ---------- */
  #progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:90;pointer-events:none}

  /* ---------- 跑马灯 ---------- */
  /* ---------- 顶栏跑马灯:置顶公告带 ---------- */
  .marquee{
    overflow:hidden;position:fixed;top:0;left:0;right:0;z-index:65;
    background:var(--ink);border-bottom:1px solid rgba(244,242,237,.25);
    padding:9px 0;
  }
  .marquee-track{display:flex;width:max-content;animation:mq 32s linear infinite}
  .marquee:hover .marquee-track{animation-play-state:paused}
  .marquee-track span{
    display:inline-flex;align-items:center;white-space:nowrap;
    font-weight:700;font-size:14px;letter-spacing:.24em;color:var(--paper);
  }
  .marquee-track span::after{content:"";width:8px;height:8px;background:var(--accent);margin:0 30px}
  @keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- 逐字入场 ---------- */
  .ch{display:inline-block;opacity:0;transform:translateY(30px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
  .ch.in{opacity:1;transform:none}

  /* ---------- 滚动显现 ---------- */
  .reveal{opacity:0;transform:translateY(10px);transition:opacity .34s ease-out,transform .34s ease-out}
  .reveal.in{opacity:1;transform:none}

  /* ---------- 板块切换:大元素方向性进阶 ---------- */
  .p-item.reveal .p-no{opacity:0;transform:translateY(26px);transition:opacity .5s ease,transform .55s var(--ease),color .3s,-webkit-text-stroke-color .3s}
  .p-item.reveal.in .p-no{opacity:1;transform:none}
  .wcard.reveal .thumb{transform:scale(1.05);transition-property:background,border-color,transform;transition-duration:.7s;transition-timing-function:var(--ease)}
  .wcard.reveal.in .thumb{transform:scale(1)}
  .hrow.reveal .year{opacity:0;transform:translateX(-30px);transition:opacity .5s ease .1s,transform .55s var(--ease) .1s,color .3s}
  .hrow.reveal.in .year{opacity:1;transform:none}

  /* ---------- 花样:滚动定位 / 呼吸橙点 / 缩略图悬浮 ---------- */
  .nav-links a.active{color:var(--ink)}
  .nav-links a.active i{color:var(--accent)}
  .thumb .dot{animation:dotpulse 2.8s ease-in-out infinite}
  .wcard:nth-child(2) .thumb .dot{animation-delay:-.9s}
  .wcard:nth-child(3) .thumb .dot{animation-delay:-1.8s}
  @keyframes dotpulse{0%,100%{opacity:.45}50%{opacity:1}}

  /* ---------- 小屏边距(置末避免被基础规则覆盖) ---------- */
  @media (max-width:640px){.wrap,.wrap-full,.nav-inner{padding:0 22px}}

  /* ---------- 减少动态 ---------- */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto}
    .reveal{opacity:1;transform:none;transition:none}
    .sec-head{background:none;border-top:1px solid var(--line-strong)}
    .sec-head .no,.sec-head .sec-en,.sec-head::before,.sec-head::after{opacity:1;transform:none;transition:none}
    .p-item.reveal .p-no,.wcard.reveal .thumb,.hrow.reveal .year{opacity:1;transform:none;transition:none}
    .burst i{opacity:1}
    .burst i.faint{opacity:.14}
    .burst::before,.burst::after{animation:none}
    .marquee-track{animation:none}
    .ch{opacity:1;transform:none;transition:none}
    .live{animation:none}
    #bgmBtn.playing .ring,#bgmBtn.playing .core{animation:none}
    .honormap .cline{stroke-dashoffset:0}
    .cstar .halo{opacity:1;transform:none;transition:none}
    .cstar .core{animation:none}
    .ms,.ms.above,.ms.you{opacity:1;transform:none;transition:none}
    #cursor{display:none}
    #intro{display:none}
    *{transition-duration:.01ms!important}
  }

/* ============================================================
   加入指南页(join.html)专用
   ------------------------------------------------------------
   本段追加在 site.css 末尾,由 index.html 与 join.html 共同加载。
   所有选择器都限定在 .jhero / .jtoc / .jfacts / .acc / .chips /
   .req2 / .flow / .tasks / .faq / .jcta / .jsec-head 这些首页
   完全不使用的类名上,以及 #roles/#bar/#flow/#task/#faq 这些
   首页不存在的 id 上,所以对 index.html 的渲染没有任何影响。
   ============================================================ */

/* ---------- 章节报头:朱砂方号 + 大标题 + 右端英文 ----------
   首页四种报头(v1-v4)都是"编号 / 中文"在左、"英文"在右、配横线与 + 刻度;
   这一页改用朱砂实心方号,不再画线,也没有刻度。 */
.jsec-head{display:flex;align-items:baseline;gap:18px;border-top:1px solid var(--line-strong);padding-top:24px;margin-bottom:48px}
.jsec-head .jno{flex:0 0 auto;background:var(--accent);color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;padding:3px 7px;transform:translateY(-3px)}
.jsec-head h2{letter-spacing:.06em}
.jsec-head .jen{margin-left:auto;flex:0 0 auto;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
@media (max-width:700px){
  .jsec-head{flex-wrap:wrap;gap:12px 14px}
  .jsec-head .jen{width:100%;margin-left:0}
}

/* ---------- Hero:右侧挂一张"工单头",不开场帷幕 ---------- */
.jhero{padding:150px 0 0}
.jhero .jh-top{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding-bottom:14px}
.jhero .jh-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:58px;align-items:start;padding-top:44px}
.jhero h1{font-size:clamp(38px,5.6vw,86px);font-weight:700;letter-spacing:.12em;line-height:1.1}
.jhero .lead{margin-top:20px;font-size:15px;color:var(--muted);max-width:30em;line-height:1.9}
@media (max-width:860px){
  .jhero .jh-grid{grid-template-columns:1fr;gap:32px;align-items:start}
  .jhero h1{font-size:clamp(36px,11vw,62px)}
  .jhero .lead{font-size:14.5px}
}

.jfacts{border:1px solid var(--line-strong)}
.jfacts .jf-top{background:var(--ink);color:var(--paper);font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;padding:12px 16px;display:flex;align-items:center;gap:10px}
.jfacts .jf-top i{width:7px;height:7px;background:var(--accent);flex:0 0 auto;animation:livepulse 2.6s ease-in-out infinite}
.jfacts .jf{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:14px 16px;border-top:1px solid var(--line);font-size:13.5px}
.jfacts .jf span{font-size:10.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase}
.jfacts .jf b{font-weight:700;letter-spacing:.02em}

/* ---------- 本页目录条 ---------- */
.jtoc{display:flex;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:54px}
.jtoc a{flex:1 1 148px;display:flex;align-items:baseline;gap:10px;padding:17px 20px;border-left:1px solid var(--line);font-size:13px;font-weight:500;letter-spacing:.06em;transition:background .22s,color .22s}
.jtoc a:first-child{border-left:none}
.jtoc a i{font-style:normal;font-size:10px;letter-spacing:.14em;color:var(--muted);transition:color .22s}
.jtoc a:hover{background:var(--ink);color:var(--paper)}
.jtoc a:hover i{color:var(--accent)}

/* ---------- 01 招募方向:手风琴(首页没有的交互语法) ---------- */
.acc{border-top:1px solid var(--line-strong)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{
  width:100%;display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:baseline;
  background:none;border:0;font-family:var(--font);color:inherit;text-align:left;cursor:pointer;
  padding:26px 10px;transition:background .24s,color .24s,padding .3s var(--ease);
}
.acc-head:hover{background:var(--ink);color:var(--paper);padding-left:28px}
.acc-head .ano{font-size:11.5px;letter-spacing:.18em;color:var(--muted);transition:color .24s}
.acc-head:hover .ano{color:var(--accent)}
.acc-head .atitle{font-size:clamp(19px,2.2vw,30px);font-weight:700;letter-spacing:.06em}
.acc-head .amore{display:inline-flex;align-items:center;gap:9px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);transition:color .24s}
.acc-head:hover .amore{color:rgba(244,242,237,.66)}
.acc-head .amore svg{width:13px;height:13px;transition:transform .32s var(--ease)}
.acc-item.open .acc-head .amore svg{transform:rotate(180deg)}
/* 高度由脚本按 scrollHeight 写死,内层 padding 不动画,避免展开瞬间读到插值 */
.acc-body{max-height:0;overflow:hidden;opacity:0;transition:max-height .5s var(--ease),opacity .4s ease}
.acc-item.open .acc-body{opacity:1}
.acc-inner{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;padding:0 10px 34px 98px}
.acc-inner p{font-size:14.5px;color:var(--muted);line-height:1.85;max-width:30em}
.acc-inner .care{margin-top:12px;font-size:13.5px;line-height:1.75;display:flex;gap:11px;align-items:baseline}
.acc-inner .care::before{content:"";width:8px;height:8px;background:var(--accent);flex:0 0 auto}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-content:flex-start}
.chips b{font-weight:500;font-size:12px;letter-spacing:.08em;color:var(--muted);border:1px solid var(--line);padding:6px 13px;transition:color .2s,border-color .2s}
.acc-item.open .chips b{color:var(--ink);border-color:var(--line-strong)}
@media (max-width:860px){
  .acc-head{grid-template-columns:44px 1fr auto;gap:14px;padding:22px 4px}
  .acc-head:hover{padding-left:12px}
  .acc-inner{grid-template-columns:1fr;gap:20px;padding:0 4px 28px 58px}
}
@media (max-width:560px){
  .acc-head .amore span{display:none}
  .acc-inner{padding-left:4px}
}

/* ---------- 02 准入条件:两栏对照 ---------- */
.req2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.req2 .col{background:var(--paper);padding:32px 32px 38px}
.req2 h3{font-size:16.5px;font-weight:700;letter-spacing:.06em;margin-bottom:18px;display:flex;align-items:center;gap:11px}
.req2 h3 i{width:9px;height:9px;background:var(--ink);flex:0 0 auto}
.req2 .plus h3 i{background:var(--accent)}
.req2 ul{list-style:none}
.req2 li{display:flex;gap:14px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.7}
.req2 li:first-child{border-top:none}
.req2 li em{font-style:normal;font-size:10.5px;letter-spacing:.16em;color:var(--muted);flex:0 0 auto}
@media (max-width:760px){.req2{grid-template-columns:1fr}}

/* ---------- 03 加入流程:四段横向,空心数字 ---------- */
.flow{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line)}
.flow-item{padding:30px 26px 36px;border-left:1px solid var(--line)}
.flow-item:first-child{border-left:none}
.flow-item .fno{display:block;font-size:clamp(32px,3.6vw,54px);font-weight:700;line-height:1;color:transparent;-webkit-text-stroke:1.4px var(--ink);transition:color .3s,-webkit-text-stroke-color .3s}
.flow-item:hover .fno{color:var(--accent);-webkit-text-stroke-color:var(--accent)}
.flow-item h3{font-size:16.5px;font-weight:700;letter-spacing:.06em;margin:18px 0 9px}
.flow-item p{font-size:13.5px;color:var(--muted);line-height:1.8}
.flow-item .ftag{display:inline-block;margin-top:16px;font-size:11px;letter-spacing:.18em;color:var(--accent);border-top:1px solid var(--accent);padding-top:7px}
@supports not (-webkit-text-stroke:1px #000){.flow-item .fno{color:var(--ink)}}
@media (max-width:860px){
  .flow{grid-template-columns:1fr}
  .flow-item{border-left:none;border-top:1px solid var(--line);padding:26px 4px 30px}
  .flow-item:first-child{border-top:none}
}

/* ---------- 04 试做题目:三张卡 ---------- */
.tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.task{background:var(--paper);padding:32px 30px 38px;display:flex;flex-direction:column;transition:background .26s,color .26s}
.task dl{margin:0}
.task .tlabel{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:var(--ink);color:var(--paper);font-size:14px;font-weight:700;margin-bottom:20px;transition:background .26s}
.task h3{font-size:19px;font-weight:700;letter-spacing:.05em;line-height:1.45;margin-bottom:6px}
.task dt{font-size:10.5px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:16px;transition:color .26s}
.task dd{margin:6px 0 0;font-size:13.5px;line-height:1.75;transition:color .26s}
.task .tfoot{margin-top:auto;padding-top:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--muted);transition:color .26s,border-color .26s}
.task:hover{background:var(--ink);color:var(--paper)}
.task:hover .tlabel{background:var(--accent)}
.task:hover dt,.task:hover .tfoot{color:rgba(244,242,237,.62)}
.task:hover dd{color:rgba(244,242,237,.9)}
.task:hover .tfoot{border-top-color:rgba(244,242,237,.24)}
@media (max-width:900px){.tasks{grid-template-columns:1fr}}

.task-note{margin-top:34px;display:grid;grid-template-columns:186px 1fr;gap:24px;align-items:baseline;border-top:1px solid var(--line);padding-top:24px}
.task-note ul{list-style:none;display:flex;flex-wrap:wrap;gap:12px 34px}
.task-note li{font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:baseline}
.task-note li::before{content:"✓";color:var(--accent);font-size:12px}
@media (max-width:700px){.task-note{grid-template-columns:1fr;gap:14px}}

/* ---------- 05 常见问题 ---------- */
.faq{border-top:1px solid var(--line-strong)}
.faq-item{display:grid;grid-template-columns:40px 1fr;gap:22px;padding:26px 4px;border-bottom:1px solid var(--line)}
.faq-item .q{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent);padding-top:5px}
.faq-item h3{font-size:16px;font-weight:700;letter-spacing:.04em;line-height:1.6;margin-bottom:9px}
.faq-item p{font-size:14px;color:var(--muted);line-height:1.85;max-width:46em}
@media (max-width:640px){.faq-item{grid-template-columns:1fr;gap:8px}.faq-item .q{padding-top:0}}

/* ---------- 06 提交:黑底收尾 ---------- */
.jcta{background:var(--ink);color:var(--paper);padding:96px 0 104px;position:relative;overflow:hidden}
.jcta .wm{position:absolute;right:-2%;bottom:-16%;font-size:clamp(80px,12vw,200px);font-weight:700;letter-spacing:.02em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(244,242,237,.12);pointer-events:none;user-select:none;white-space:nowrap}
.jcta .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:58px;align-items:center;position:relative;z-index:1}
.jcta h2{color:var(--paper);font-size:clamp(28px,3.8vw,52px);letter-spacing:.08em;line-height:1.26}
.jcta .lead{margin-top:16px;font-size:14.5px;color:rgba(244,242,237,.66);max-width:28em;line-height:1.85}
.jcta .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.jcta .btn:hover{background:var(--accent);border-color:var(--accent);color:#fff}
/* 按钮贴右边缘,与左列文字拉开距离 */
.jcta .wrap > div:last-child{justify-self:end}
.jcta .fmt{margin-top:20px;font-size:13px;color:rgba(244,242,237,.66);line-height:1.8}
.jcta .fmt b{color:var(--paper);font-weight:700;background:rgba(244,242,237,.12);padding:3px 9px;letter-spacing:.04em}
@media (max-width:860px){.jcta .wrap{grid-template-columns:1fr;gap:34px}.jcta .wrap > div:last-child{justify-self:start}}

/* ---------- 节间距:与首页那组数值刻意错开 ---------- */
#roles{padding:150px 0 118px}
#bar{padding:104px 0 112px}
#flow{padding:132px 0 122px}
#task{padding:116px 0 124px}
#faq{padding:126px 0 128px}

/* ---------- 顶栏「返回首页」箭头:方向与前进按钮相反 ---------- */
.nav-join .arr-back{transition:transform .24s var(--ease)}
.nav-join:hover .arr-back{transform:translateX(-4px)}

/* ---------- 窄屏:音乐按钮缩小并贴边 ----------
   58px 的圆盘固定在左下,在 492 及以下会压住正文/C 目录条。
   缩到 48px 并推到 16px 边距;三个轨道环必须同比缩小,否则会被 overflow 裁掉。 */
@media (max-width:640px){
  #bgmBtn{width:48px;height:48px;left:16px;bottom:16px}
  .galaxy .r1{width:22px;height:22px}
  .galaxy .r2{width:32px;height:32px}
  .galaxy .r3{width:42px;height:42px}
}

/* ---------- 首页 06 加入:主按钮旁补一条通向本指南的文字链 ---------- */
.join-actions{margin-top:36px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.join-actions .btn{margin-top:0}