/* /projects — Ailyre 开源星轨图页（复用 echo 版设计 tokens） */

.projects-main{flex:1;display:flex;flex-direction:column}

/* ---- 顶部：标题 + 星轨图 ---- */
.projects-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:6%;align-items:center;padding:70px 0 50px}
.projects-copy{min-width:0;position:relative;z-index:2}
.projects-hero h1{font:400 clamp(44px,4.4vw,74px)/1.08 var(--serif);letter-spacing:-3.5px;margin:0 0 26px;position:relative;width:max-content;max-width:100%}
.projects-hero h1 em{font-style:normal;color:var(--accent)}
.projects-hero .title-spark{font-size:24px;top:-14px;right:-28px;position:absolute;animation:slow-turn 35s linear infinite;color:#bb8749}
.projects-intro{font-size:13.5px;line-height:2.1;color:var(--muted);margin:0 0 30px}
.projects-stats{display:flex;gap:34px;flex-wrap:wrap}
.projects-stats .stat{display:flex;flex-direction:column;gap:6px}
.projects-stats b{font:400 30px/1 var(--serif);letter-spacing:-1px;color:var(--ink)}
.projects-stats i{font:9px/1.5 monospace;letter-spacing:1.4px;color:var(--muted);font-style:normal}

/* 星轨图 */
.constellation{position:relative;width:100%;max-width:470px;justify-self:end;aspect-ratio:1/1.06;isolation:isolate}
.constellation .orbit{display:block;position:absolute;left:50%;top:50%;border:1px solid #8199bb3a;border-radius:50%;width:88%;height:84%;transform:translate(-50%,-50%) rotate(-18deg)}
.constellation .orbit-two{width:76%;height:104%;transform:translate(-50%,-50%) rotate(35deg)}
.constellation .orbit-three{width:57%;height:106%;transform:translate(-50%,-50%) rotate(-42deg);background:radial-gradient(ellipse,#e0e9f15c,transparent 70%)}
.constellation-lyre{position:absolute;left:50%;top:50%;width:56%;max-width:250px;transform:translate(-50%,-50%);filter:drop-shadow(0 16px 15px #48648315)}
.constellation-dot{position:absolute;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;background:#bb8749;box-shadow:0 0 0 7px #bb874914;transition:transform .25s var(--ease),box-shadow .25s}
.constellation-dot:hover{transform:scale(1.35);box-shadow:0 0 0 11px #bb87491e}
.constellation-dot span{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);white-space:nowrap;font:9px/1.5 monospace;letter-spacing:1.2px;color:var(--ink);background:#fffffff0;border:1px solid #d8e0e7;border-radius:99px;padding:5px 11px;opacity:0;pointer-events:none;transition:opacity .2s}
.constellation-dot:hover span{opacity:1}
.dot-a{top:17%;left:22%}
.dot-b{top:66%;left:74%;background:#263879;box-shadow:0 0 0 7px #26387912;animation:float 7s ease-in-out infinite}
.dot-c{top:84%;left:34%;background:#607b9e;box-shadow:0 0 0 7px #607b9e14;animation:float 7s ease-in-out -3.5s infinite}
.dot-a{animation:float 7s ease-in-out -1.5s infinite}
.constellation-caption{position:absolute;top:-8px;left:0;font:9px/1.5 monospace;letter-spacing:1.6px;color:var(--muted)}
.constellation-note{position:absolute;bottom:-6px;right:0;font-size:10px;letter-spacing:.6px;color:var(--muted)}

/* ---- 项目卡片 ---- */
.projects-list{display:flex;flex-direction:column;gap:22px;padding:34px 0 30px}
.project-card{display:grid;grid-template-columns:66px 1fr;background:#fff;border:1px solid var(--line);border-radius:16px;padding:30px 34px 26px 0;transition:box-shadow .3s,transform .3s var(--ease)}
.project-card:hover{box-shadow:0 12px 34px #48648314;transform:translateY(-2px)}
.project-string{display:flex;align-items:center;justify-content:center;gap:5px;border-right:1px dashed #d8e0e7;margin:6px 18px 6px 0}
.project-string i{width:2px;border-radius:2px;background:#bb8749;opacity:.85;transition:height .3s}
.project-string i:nth-child(1){height:22px}
.project-string i:nth-child(2){height:34px}
.project-string i:nth-child(3){height:16px}
.project-card:hover .project-string i{height:38px}
.project-card:hover .project-string i:nth-child(2){height:50px}
.project-card:hover .project-string i:nth-child(3){height:28px}
.project-body{min-width:0}
.project-body .chapter-kicker{margin:0 0 12px}
.project-body h2{font:400 clamp(26px,2.4vw,38px)/1.2 var(--serif);letter-spacing:-1.4px;margin:0 0 14px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.project-badge{font:10px/1 monospace;letter-spacing:1.2px;color:#a3752f;border:1px solid #e6d3b8;border-radius:99px;padding:6px 12px;transform:translateY(2px)}
.project-desc{font-size:13.5px;line-height:2.05;color:var(--muted);margin:0 0 16px;max-width:64ch}
.project-desc code{font:12px/1 monospace;background:var(--wash);border-radius:6px;padding:3px 8px;color:var(--ink)}
.project-meta{font:11px/1.8 monospace;letter-spacing:.8px;color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.project-meta b{color:var(--ink);font-weight:400}
.lang-dot{display:inline-block;width:9px;height:9px;border-radius:50%}
.lang-python{background:#3572A5}
.lang-c{background:#555}
.lang-go{background:#00ADD8}
.project-links{display:flex;gap:22px;margin:0}
.project-links a{font-size:12px;letter-spacing:.6px;color:var(--accent);border-bottom:1px solid transparent;padding-bottom:3px;transition:border-color .2s}
.project-links a:hover{border-color:var(--accent)}

/* ---- 回声 / 频道 ---- */
.echo-section{display:grid;grid-template-columns:.9fr 1.1fr;gap:6%;padding:64px 0 30px;align-items:start}
.echo-section .chapter-heading{position:static;padding-top:0}
.echo-cards{display:flex;flex-direction:column;gap:14px}
.echo-card{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:17px 22px;transition:box-shadow .3s,transform .3s var(--ease)}
.echo-card:hover{box-shadow:0 10px 26px #48648312;transform:translateY(-2px)}
.echo-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--wash);color:var(--ink);font-size:17px;flex-shrink:0}
.echo-name{font-size:13.5px;letter-spacing:.4px;color:var(--ink)}
.echo-note{margin-left:auto;font:9px/1.5 monospace;letter-spacing:1.2px;color:var(--muted);white-space:nowrap}

/* ---- 响应式 ---- */
@media(max-width:1080px){
  .projects-hero{grid-template-columns:1fr;gap:40px;padding:48px 0 30px}
  .constellation{justify-self:center;max-width:420px}
  .echo-section{grid-template-columns:1fr;gap:26px}
}
@media(max-width:740px){
  .projects-hero{padding:34px 0 24px}
  .projects-hero h1{font-size:clamp(34px,9.6vw,58px);letter-spacing:-2.4px}
  .projects-stats{gap:22px}
  .project-card{grid-template-columns:46px 1fr;padding:22px 20px 20px 0}
  .project-string{margin-right:12px}
  .echo-card{padding:14px 16px}
  .echo-note{display:none}
}
@media(prefers-reduced-motion:reduce){.constellation-dot,.title-spark{animation:none!important}}