/* ============================================================
   Portfolio — 横向多列布局
   本工程禁止 inline CSS:所有样式只允许写在本文件,
   index.html 里不允许出现 <style> 标签或 style="" 属性。
   ============================================================ */

/* ============ 语义化主题令牌 ============ */
:root{
  --bg:#d4d4d8;
  --fg:#fafafa;
  --fg-lifted:#f4f4f5;
  --text-primary:#3f3f46;
  --text-secondary:#52525b;
  --text-tertiary:#a1a1aa;
  --border:#d4d4d8;
  --accent:#65a30d;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:Arial,"Helvetica Neue",sans-serif;
  background:var(--bg);
  color:var(--text-primary);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ============ i18n:按 <html lang> 显隐对应语言节点 ============ */
/* 注意必须限定在 body 内:[lang] 若匹配到 <html> 根元素本身会隐藏整个页面 */
body [lang]{display:none}
html[lang="zh"] body [lang="zh"],
html[lang="en"] body [lang="en"]{display:revert}

/* ============ 顶栏 ============ */
header{
  position:fixed;inset:0 0 auto 0;height:4rem;z-index:20;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;
}
.brand{display:flex;align-items:center;gap:.75rem}
/* 唱片占位:匀速旋转的圆形。接手后把 .disc 换成你的圆形 SVG,复用 spin 动画即可 */
.disc{
  width:1.75rem;height:1.75rem;border-radius:50%;flex:0 0 auto;
  background:
    radial-gradient(circle at center,var(--fg) 0 3px,var(--text-tertiary) 3px 4px,transparent 4px),
    conic-gradient(#3f3f46,#8a8a92,#3f3f46,#8a8a92,#3f3f46);
  animation:spin 3.5s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){ .disc{animation:none} }
header .name{font-size:1.15rem;font-weight:800;letter-spacing:.01em;white-space:nowrap}
header nav{display:flex;align-items:center;gap:.5rem}

/* 中英文 toggle slider(仅桌面端显示) */
#lang-toggle{
  position:relative;display:inline-flex;align-items:center;
  height:2.5rem;padding:.25rem;margin-right:.5rem;
  border:.5px solid var(--border);background:var(--fg);cursor:pointer;
}
#lang-toggle .thumb{
  position:absolute;top:.25rem;left:.25rem;width:2.25rem;height:calc(100% - .5rem);
  background:var(--bg);border:.5px solid var(--border);
  transition:transform .2s ease;
}
#lang-toggle.en .thumb{transform:translateX(2.25rem)}
#lang-toggle .opt{
  position:relative;z-index:1;width:2.25rem;text-align:center;
  font-size:.72rem;font-weight:700;color:var(--text-tertiary);
  transition:color .2s;
}
#lang-toggle .opt.active{color:var(--text-primary)}

.nav-btn{
  width:2.5rem;height:2.5rem;
  display:inline-flex;align-items:center;justify-content:center;
  border:.5px solid var(--border);background:var(--fg);
  color:var(--text-secondary);cursor:pointer;
  transition:transform .15s ease,background .15s,color .15s;
}
.nav-btn svg{width:20px;height:20px;display:block}
.nav-btn:hover:not(:disabled){
  background:#fff;color:var(--text-primary);
  transform:translateY(-2px) scale(1.05);
}
.nav-btn:disabled{opacity:.4;cursor:not-allowed}

/* 移动端语言切换:方形图标按钮,与导航按钮同款样式;桌面端隐藏 */
#lang-switch{display:none}

/* ============ 横向滚动轨道 ============ */
main{margin-top:4rem;height:calc(100dvh - 4rem)}
#rail{
  height:100%;overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
#rail::-webkit-scrollbar{display:none}
#track{display:flex;height:100%;gap:2rem;padding:2rem;padding-top:1px}

/* ============ 列 ============ */
.column{
  flex:0 0 auto;width:95%;max-width:460px;height:100%;
  background:var(--fg);border:.5px solid var(--border);
  overflow:hidden;
  contain:paint;
}
.col-scroll{
  height:100%;width:100%;overflow-y:auto;
  scrollbar-width:none;padding:1.5rem;
}
.col-scroll::-webkit-scrollbar{display:none}

@media (max-width:767px){
  #rail{scroll-snap-type:x mandatory}
  .column{scroll-snap-align:start}
  #track{gap:1rem;padding:1rem;padding-top:1px}
  header{padding:0 1rem}
  #lang-toggle{display:none}            /* 移动端不用滑动 toggle */
  #lang-switch{display:inline-flex}     /* 改用方形 translate 图标按钮 */
}

/* ============ 列内容通用 ============ */
/* 面板标题比左上角站名(1.15rem)小一档,icon 同步放大 */
.col-label{
  display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;
  font-size:1rem;font-weight:700;letter-spacing:.04em;color:var(--text-primary);
  text-transform:uppercase;margin-bottom:1.25rem;
}
.col-label svg{width:18px;height:18px;flex:0 0 auto}
.col-label::after{
  content:"";flex-basis:100%;height:1px;margin-top:.75rem;
  background:repeating-linear-gradient(90deg,var(--border) 0 4px,transparent 4px 8px);
}
/* 头像占位:渐变图,接手后换成 <img> 正式照片即可 */
.portrait{
  width:100%;aspect-ratio:1/1;
  background:linear-gradient(135deg,#1c1917 30%,#65a30d);
  margin-bottom:1.25rem;
}
.bio{font-size:.95rem;line-height:1.6;color:var(--text-secondary);margin-bottom:1rem}
.kv{margin-bottom:1.25rem}
.kv dt{font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-tertiary);margin-bottom:.35rem}
.kv dd{font-size:.9rem;line-height:1.55;color:var(--text-secondary)}

/* 职业时间轴 */
.year{display:flex;align-items:center;gap:.75rem;font-size:.75rem;color:var(--text-tertiary);margin:1.25rem 0 .5rem}
.year::after{content:"";flex:1;height:1px;background:var(--border)}
/* 职位标题用黑字,下方两行——一行地点、一行时间段 */
.job{background:var(--fg-lifted);border:.5px solid var(--border);padding:.9rem 1rem;margin-bottom:.5rem;font-size:.85rem}
.job b{display:block;font-size:.9rem;color:#18181b;margin-bottom:.3rem}
.job .job-loc, .job .job-detail, .job .job-date{display:block;color:var(--text-tertiary);font-size:.75rem;line-height:1.5}

/* ============ 统一卡片组件 ============ */
.card{
  border:.5px solid var(--border);background:var(--fg-lifted);
  margin-bottom:1rem;cursor:pointer;overflow:hidden;
  transition:transform .15s ease,background .15s;
}
/* 全站统一 hover 语言:上升 + 放大 = 可交互 */
.card:hover{
  background:#fff;
  transform:translateY(-2px) scale(1.02);
}
.card .thumb{height:180px}
.card .meta{padding:.9rem 1rem;font-size:.85rem}
.card .meta b{display:block;font-size:.95rem;margin-bottom:.2rem}
.card .meta .tag{color:var(--text-tertiary);font-size:.75rem}
/* 渐变占位缩略图,接手后换 <img> */
.t1{background:linear-gradient(135deg,#0f172a 30%,#1e3a8a)}
.t2{background:linear-gradient(135deg,#1c1917 30%,#65a30d)}
.t3{background:linear-gradient(135deg,#312e81 30%,#0f172a)}
.t4{background:linear-gradient(135deg,#3f3f46 30%,#a1a1aa)}
.t5{background:linear-gradient(135deg,#365314 30%,#4d7c0f)}
.t6{background:linear-gradient(135deg,#7c2d12 30%,#ea580c)}
.t7{background:linear-gradient(135deg,#0c4a6e 30%,#38bdf8)}

/* 想法清单 */
.idea{font-size:.88rem;line-height:1.6;color:var(--text-secondary);padding:.75rem 0;border-bottom:.5px dashed var(--border)}
.idea::before{content:"— "}

/* copyright 列 */
.copyright-center{
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;color:var(--text-tertiary);
}

/* ============ 统一详情抽屉 ============ */
#backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:30;
  opacity:0;pointer-events:none;transition:opacity .3s;
}
#backdrop.open{opacity:1;pointer-events:auto}
#drawer{
  position:fixed;z-index:31;background:var(--fg);
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.32,.72,0,1);
}
/* 移动端:底部升起 */
@media (max-width:767px){
  #drawer{inset:auto 0 0 0;height:85dvh;transform:translateY(100%)}
  #drawer.open{transform:translateY(0)}
}
/* 桌面端:右侧滑入 90% 宽、全高,左侧留 10% 遮罩返回区 */
@media (min-width:768px){
  #drawer{inset:0 0 0 auto;width:90%;transform:translateX(102%)}
  #drawer.open{transform:translateX(0)}
}

/* 桌面端左侧 10% 区域的返回按钮 */
#drawer-back{
  position:fixed;left:1.75rem;top:50%;z-index:32;display:none;
  width:3rem;height:3rem;align-items:center;justify-content:center;
  border:.5px solid var(--border);background:var(--fg);
  color:var(--text-primary);cursor:pointer;
  transform:translateY(-50%);
  transition:transform .15s ease,background .15s;
}
#drawer-back svg{width:22px;height:22px}
#drawer-back:hover{background:#fff;transform:translateY(calc(-50% - 2px)) scale(1.05)}
@media (min-width:768px){ #drawer-back.open{display:inline-flex} }

.drawer-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.5rem;border-bottom:.5px solid var(--border);flex:0 0 auto;
}
.drawer-head b{font-size:.95rem}
#drawer-close{
  display:inline-flex;align-items:center;justify-content:center;
  border:.5px solid var(--border);background:var(--fg-lifted);
  width:2rem;height:2rem;cursor:pointer;color:var(--text-secondary);
  transition:transform .15s ease,background .15s,color .15s;
}
#drawer-close:hover{
  background:#fff;color:var(--text-primary);
  transform:translateY(-2px) scale(1.05);
}
#drawer-close svg{width:16px;height:16px}
#drawer-body{flex:1;overflow-y:auto;padding:2.5rem 1.5rem}

/* 抽屉内长内容:文字限宽 720px,图片限宽 1000px */
#drawer-body > *, .case-lang > *{margin-left:auto;margin-right:auto}
.case-text{max-width:720px;font-size:.95rem;line-height:1.75;color:var(--text-secondary)}
.case-text h3{font-size:1.35rem;color:var(--text-primary);margin:2.25rem 0 .9rem}
.case-text h3:first-child{margin-top:0}
.case-text p{margin-bottom:1rem}
.case-img,.case-hero{max-width:1000px;margin-top:2rem;margin-bottom:2rem}
.case-img{height:280px}
.case-hero{height:min(46vh,420px);margin-top:0;margin-bottom:2.5rem}
.stats{max-width:720px;display:flex;gap:1rem;margin-top:2rem;margin-bottom:2rem}
.stat{flex:1;border:.5px solid var(--border);background:var(--fg-lifted);padding:1.1rem 1rem}
.stat b{display:block;font-size:1.4rem;color:var(--text-primary);margin-bottom:.2rem}
.stat span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--text-tertiary)}
/* 语言 fallback 提示条 */
.lang-fallback{
  max-width:720px;font-size:.78rem;color:var(--text-tertiary);
  border:.5px dashed var(--border);padding:.6rem .9rem;margin-bottom:1.5rem;
}
@media (max-width:767px){
  #drawer-body{padding:1.5rem 1.25rem}
  .stats{flex-direction:column}
}
