/* Page layout vars（design token 已抽到 _tokens.css） */
:root{--max-w:1200px;--pad-x:2rem;--sidebar-w:220px}
@media(max-width:768px){:root{--sidebar-w:0px;--pad-x:1.25rem}}

body{min-height:100vh;overflow:hidden}
@media(max-width:768px){body{overflow:auto}}

[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
[data-reveal].revealed{opacity:1;transform:translateY(0)}
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}

#neural-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

/* ── Layout ── */
.dash-wrap{position:fixed;inset:0;z-index:1;display:grid;grid-template-columns:var(--sidebar-w) 1fr;background:var(--bg);overflow:hidden}
.dash-sidebar{background:var(--bg-sidebar);border-right:1px solid var(--border-dim);display:flex;flex-direction:column;overflow:hidden;height:100vh}
.dash-main{display:flex;flex-direction:column;height:100vh;overflow:hidden;min-width:0}
.dash-content{flex:1;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;min-height:0}
.dash-content::-webkit-scrollbar{width:4px}
.dash-content::-webkit-scrollbar-track{background:transparent}
.dash-content::-webkit-scrollbar-thumb{background:var(--border-mid);border-radius:2px}
.dash-content::-webkit-scrollbar-thumb:hover{background:var(--border-bright)}

/* .sb-* / .m-* mobile topbar / overlay 已集中至 _components.css */

@media(max-width:768px){
  .dash-wrap{position:relative;display:block;height:auto;min-height:100svh;overflow:visible}
  .dash-sidebar{display:none}
  .dash-main{display:block;height:auto;overflow:visible}
  .dash-content{overflow:visible;height:auto;background:var(--bg);padding-top:52px;padding-bottom:2rem;min-height:100svh}
}

/* ── Footer ── */
.footer{border-top:1px solid var(--border-dim);background:var(--bg-titlebar)}
.footer-inner{max-width:var(--max-w);margin:0 auto;padding:2.5rem var(--pad-x);display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:start;gap:2.5rem}
.footer .logo{height:72px;width:auto;display:block;margin-bottom:.45rem;opacity:.7}
.footer .tagline{font-size:.76rem;color:var(--text-dim);max-width:26rem;line-height:1.65}
.footer-links{display:flex;gap:2rem}
.footer-links a{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);transition:color .2s ease}
.footer-links a:hover{color:var(--text-muted)}
.footer-contact{display:flex;flex-direction:column;gap:.5rem}
.footer-contact-title{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.2rem}
.footer-contact-item{display:flex;align-items:center;gap:.45rem;font-size:.76rem;color:var(--text-dim);transition:color .2s ease}
.footer-contact-item:hover{color:var(--text-muted)}
.footer-contact-item svg{width:13px;height:13px;flex-shrink:0}
.copy{font-family:var(--font-mono);font-size:.62rem;color:var(--text-dim);width:100%;grid-column:1/-1;opacity:.6}

/* ══════════════════════════════════════════════════
   ABOUT PAGE STYLES
   ══════════════════════════════════════════════════ */

.about-wrap{padding:clamp(2.5rem,5vw,4rem) 2rem;max-width:var(--max-w);margin:0 auto}

/* Hero: 2-column */
.about-hero{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);margin-bottom:clamp(3rem,6vw,5rem);align-items:start}
@media(max-width:768px){.about-hero{grid-template-columns:1fr}}

/* Identity card */
.ab-identity{display:flex;align-items:center;gap:.85rem;margin-bottom:1.5rem}
.ab-avatar{height:48px;width:auto;min-width:48px;border-radius:14px;background:var(--bg-elevated);border:1px solid var(--border-dim);display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:.3rem .6rem}
.ab-logo{height:34px;width:auto}
.ab-name{font-size:1rem;font-weight:600;color:var(--text);line-height:1.2}
.ab-role{font-size:.78rem;color:var(--text-muted);margin-top:.15rem}

/* Headline */
.ab-headline{font-family:var(--font-sans);font-size:clamp(1.9rem,4.5vw,3.2rem);font-weight:700;line-height:1.15;color:var(--text);margin-bottom:1.1rem;letter-spacing:-.02em}
.ab-headline-grad{display:block;background:linear-gradient(135deg,#7370EC 0%,#5B8BF5 60%,#4DA8DA 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Description */
.ab-desc{font-size:.95rem;color:var(--text-muted);line-height:1.8;margin-bottom:1.5rem}

/* Stats */
.ab-stats{display:flex;gap:2rem;margin-bottom:1.75rem;flex-wrap:wrap}
.ab-stat{display:flex;flex-direction:column;gap:.2rem}
.ab-stat-n{font-family:var(--font-sans);font-size:1.5rem;font-weight:700;color:var(--accent);line-height:1;letter-spacing:-.02em}
.ab-stat-l{font-family:var(--font-mono);font-size:.63rem;color:var(--text-dim);letter-spacing:.06em}

/* CTA button */
.ab-cta{display:inline-flex;align-items:center;padding:.7rem 1.6rem;background:linear-gradient(135deg,#7370EC,#5B8BF5);color:#fff;font-family:var(--font-sans);font-size:.9rem;font-weight:600;border-radius:10px;text-decoration:none;box-shadow:0 4px 14px rgba(108,110,229,.28);transition:filter .18s ease,transform .18s ease}
.ab-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* Section labels */
.ab-section-label{font-family:var(--font-mono);font-size:.82rem;letter-spacing:.12em;color:var(--accent);opacity:.75;margin-bottom:.75rem}
.ab-section-sub{font-size:.95rem;color:var(--text-muted);margin-bottom:1.5rem}

/* Timeline */
.about-right{padding-top:.25rem}
.ab-timeline{display:flex;flex-direction:column}
.tl-row{display:grid;grid-template-columns:3.2rem 18px 1fr;gap:.65rem;align-items:start;padding:.65rem 0;border-bottom:1px solid var(--border-dim);opacity:0;transform:translateX(14px);transition:opacity .5s ease,transform .5s ease}
.tl-row.revealed{opacity:1;transform:translateX(0)}
.tl-row:last-child{border-bottom:none}
.tl-year{font-family:var(--font-mono);font-size:.78rem;font-weight:500;color:var(--accent);padding-top:.15rem;text-align:right;white-space:nowrap}
.tl-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);outline:2px solid var(--accent-dim);outline-offset:2px;flex-shrink:0;margin-top:.3rem;justify-self:center}
.tl-text{font-size:.875rem;color:var(--text-muted);line-height:1.65}

/* Values section */
.ab-values-section{border-top:1px solid var(--border-dim);padding-top:clamp(2rem,4vw,3rem);margin-bottom:clamp(2rem,4vw,3rem)}
.ab-values-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;margin-top:.25rem}
@media(max-width:900px){.ab-values-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.ab-values-grid{grid-template-columns:1fr}}
.ab-value-card{background:var(--bg-surface);border:1px solid var(--border-dim);border-radius:12px;padding:1.25rem;transition:border-color .2s ease}
.ab-value-card:hover{border-color:var(--border-bright)}
.ab-value-title{font-size:.9rem;font-weight:600;color:var(--text);margin-bottom:.5rem}
.ab-value-text{font-size:.8rem;color:var(--text-muted);line-height:1.75}

/* Skills section */
.ab-skills-section{border-top:1px solid var(--border-dim);padding-top:clamp(2rem,4vw,3rem);margin-bottom:clamp(2rem,4vw,3rem)}
.ab-skills-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;margin-top:.25rem}
@media(max-width:1000px){.ab-skills-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){.ab-skills-grid{grid-template-columns:repeat(2,1fr)}}
.ab-skill-cat{background:var(--bg-surface);border:1px solid var(--border-dim);border-radius:10px;padding:1rem;transition:border-color .2s ease}
.ab-skill-cat:hover{border-color:var(--accent-dim)}
.ab-skill-name{font-family:var(--font-mono);font-size:.7rem;color:var(--accent);margin-bottom:.5rem;letter-spacing:.04em;opacity:.85}
.ab-skill-tags{font-size:.78rem;color:var(--text-muted);line-height:1.8}