/* ============================================================
   portfolio 2026 / xiong jie
   ============================================================ */
@font-face{
  font-family:"Bogart";
  src:url("../fonts/bogart-alt-variable-352828295aca9ad7.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
}
@font-face{
  font-family:"FragmentMono";
  src:url("../fonts/fragment-mono-regular-03840eb52c613576.woff2") format("woff2");
  font-weight:400; font-display:swap;
}

:root{
  --night:#0b0d06;
  --panel:#12140a;
  --chalk:#f5f4ed;
  --dawn:#badcf7;
  --sky:#aad1ee;
  --moss:#8a8a72;
  --olive:#373710;
  --line:rgba(245,244,237,.13);
  --line2:rgba(245,244,237,.07);
  --dim:rgba(245,244,237,.66);
  --accent:#e2601a;
  --serif:"Bogart","Noto Serif SC",Georgia,"Songti SC",serif;
  --mono:"FragmentMono","Noto Sans SC",ui-monospace,SFMono-Regular,monospace;
  --pad:8px;
  --ease:cubic-bezier(.19,1,.22,1);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--chalk);
  background:
    radial-gradient(95% 75% at 10% -6%, #1d2615 0%, rgba(29,38,21,0) 58%),
    radial-gradient(85% 70% at 104% 106%, #0f2230 0%, rgba(15,34,48,0) 56%),
    linear-gradient(178deg, #0e1208 0%, #0a0c06 52%, #07080a 100%);
  background-attachment:fixed;
  font-family:var(--serif); font-weight:300;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
ul,ol{margin:0; padding:0; list-style:none}
::selection{background:var(--sky); color:#0b0d06}

/* ---------- scroller ---------- */
.scroller{
  height:100svh; overflow-y:auto; overflow-x:hidden;
  scroll-behavior:smooth;
  scrollbar-width:none;
}
.scroller::-webkit-scrollbar{display:none}

.sec{position:relative; padding:var(--pad); min-height:100svh}
.panel{
  position:relative;
  min-height:calc(100svh - var(--pad)*2);
  border-radius:16px;
  background:
    radial-gradient(120% 95% at 6% -10%, rgba(86,110,54,.34) 0%, rgba(86,110,54,0) 56%),
    radial-gradient(105% 85% at 104% 108%, rgba(30,72,102,.32) 0%, rgba(30,72,102,0) 60%),
    linear-gradient(158deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 38%, rgba(0,0,0,.32) 100%),
    #10120a;
  overflow:hidden;
  padding:104px 56px 64px;
  display:flex; flex-direction:column; justify-content:center;
  contain:paint;
}
.sec.tall .panel{justify-content:flex-start}

/* ---------- type ---------- */
.eyebrow{
  margin:0 0 18px; font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--moss);
}
.eyebrow .en{color:rgba(186,220,247,.45); margin-left:8px}
.h2{
  margin:0 0 8px -.02em; font-size:clamp(28px,3.2vw,46px); font-weight:300;
  line-height:1.28; letter-spacing:.01em; color:var(--chalk); text-wrap:balance;
}
.h2.big{font-size:clamp(34px,4.2vw,60px); line-height:1.2; text-wrap:balance}
.sub{margin:0 0 34px; color:var(--dim); font-size:14px; line-height:1.8; max-width:52ch}
.tag{margin:0 0 10px; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:rgba(186,220,247,.5)}
.role{margin:6px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; color:var(--dawn); opacity:.8}

/* ---------- topbar ---------- */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:26px 64px; pointer-events:none;
}
.topbar > *{pointer-events:auto}
.brand{font-size:23px; letter-spacing:.04em; display:flex; align-items:baseline; gap:2px}
.brand-slash{color:rgba(245,244,237,.35); margin-left:4px}
.topnav{display:flex; align-items:center; gap:26px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em; color:var(--dim)}
.topnav a{transition:color .3s}
.topnav a:hover{color:var(--chalk)}
.tocbtn{
  display:inline-flex; align-items:center; gap:10px;
  background:transparent; color:var(--chalk); cursor:pointer;
  border:1px solid var(--line); border-radius:999px;
  padding:10px 18px; font-family:var(--mono); font-size:11.5px; letter-spacing:.14em;
  transition:background .3s, border-color .3s;
}
.tocbtn:hover{background:rgba(245,244,237,.06); border-color:rgba(245,244,237,.3)}
.tocbtn i{display:block; width:14px; height:8px; border-top:1px solid currentColor; border-bottom:1px solid currentColor}

/* ---------- hero ---------- */
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
.hero-name{
  margin:0 0 0 -.03em; font-size:clamp(56px,8.4vw,124px); font-weight:300;
  line-height:.95; letter-spacing:-.01em; color:var(--chalk);
}
.hero-name .en{
  display:block; margin-top:14px; font-family:var(--mono); font-size:11px;
  letter-spacing:.36em; text-transform:uppercase; color:rgba(186,220,247,.5);
}
.hero-role{margin:22px 0 0; font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--dawn)}
.hero-intro{margin:18px 0 0; max-width:44ch; font-size:14.5px; line-height:1.95; color:var(--dim)}
.hero-actions{display:flex; gap:12px; margin-top:30px}
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 30px; border-radius:999px; font-family:var(--mono);
  font-size:11.5px; letter-spacing:.18em; transition:transform .4s var(--ease), background .3s, color .3s;
}
.pill:hover{transform:translateY(-2px)}
.pill-sky{background:var(--sky); color:#0b1208}
.pill-ghost{border:1px solid rgba(245,244,237,.25); color:var(--chalk)}
.pill-ghost:hover{background:rgba(245,244,237,.08)}
.hero-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0; width:min(430px,100%); margin-top:44px}
.hero-stats li{display:flex; flex-direction:column; gap:6px}
.hero-stats b{font-size:26px; font-weight:300; color:var(--chalk); letter-spacing:.01em}
.hero-stats i{font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--moss); text-transform:uppercase}

.hero-avatar{margin:0; justify-self:center; text-align:center; position:relative}
.mark{
  width:clamp(180px,20vw,264px); aspect-ratio:1/1; border-radius:50%; position:relative;
  display:grid; place-items:center;
  background:
    radial-gradient(88% 88% at 22% 14%, rgba(104,132,64,.40) 0%, rgba(16,19,10,.97) 62%, #0a0c07 100%);
  box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(245,244,237,.20), 0 0 0 10px rgba(186,220,247,.03);
}
.mark b{
  font-family:var(--serif); font-weight:400; line-height:1;
  font-size:clamp(42px,6.4vw,84px); letter-spacing:.05em; text-indent:.05em;
  color:var(--chalk);
}
.mark::after{content:""; position:absolute; inset:11%; border-radius:50%; border:1px solid rgba(245,244,237,.10)}
.mark i{position:absolute; top:13%; right:13%; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 5px rgba(226,96,26,.12)}
.hero-avatar figcaption{
  position:absolute; top:100%; left:0; right:0; margin-top:16px;
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.16em; color:var(--moss);
}
.hero-avatar .dot{display:inline-block; width:5px; height:5px; border-radius:50%; background:var(--sky); margin-right:7px; vertical-align:middle}
.hero-avatar .en{display:block; margin-top:6px; color:rgba(245,244,237,.3)}

.scrollhint{
  position:absolute; left:56px; bottom:34px; margin:0;
  display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--moss);
}
.scrollhint i{display:block; width:44px; height:1px; background:linear-gradient(90deg, rgba(245,244,237,.5), rgba(245,244,237,0))}

/* ---------- grids ---------- */
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.grid4{display:grid; grid-template-columns:repeat(4,1fr); gap:12px}

.card{
  border:1px solid var(--line); border-radius:14px; padding:26px 24px 28px;
  background:linear-gradient(170deg, rgba(245,244,237,.05), rgba(245,244,237,.012));
}
.card .num{font-family:var(--mono); font-size:11px; letter-spacing:.2em; color:var(--accent)}
.card h3{margin:14px 0 0; font-size:21px; font-weight:400}
.card .lead{margin:8px 0 10px; color:var(--dawn); font-size:13.5px; line-height:1.7}
.card p:not(.lead):not(.num){margin:0; color:var(--dim); font-size:13px; line-height:1.85}

/* ---------- jobs ---------- */
.jobs{display:grid; grid-template-columns:1fr 1fr; gap:14px 40px; margin-top:8px}
.jobs li{border-top:1px solid var(--line2); padding:16px 0 6px}
.jobs .yr{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--moss)}
.jobs h3{margin:8px 0 0; font-size:18px; font-weight:400; color:var(--chalk)}
.jobs .role{margin:4px 0 10px; font-size:11px}
.jobs ul li{
  position:relative; padding-left:14px; margin-bottom:6px;
  font-size:12.5px; line-height:1.75; color:var(--dim);
}
.jobs ul li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:1px; background:rgba(186,220,247,.55)}

/* ---------- projects ---------- */
.proj-card{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:linear-gradient(170deg, rgba(245,244,237,.05), rgba(245,244,237,.012));
  display:flex; flex-direction:column;
}
.proj-card figure{margin:0; aspect-ratio:16/9; overflow:hidden; background:#0e0f07}
.proj-card img{width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease)}
.proj-card:hover img{transform:scale(1.04)}
.proj-body{padding:20px 22px 22px}
.proj-body h3{margin:0 0 2px; font-size:19px; font-weight:400}
.proj-body ul{margin-top:8px}
.proj-body ul li{
  position:relative; padding-left:14px; margin-bottom:5px;
  font-size:12.5px; line-height:1.7; color:var(--dim);
}
.proj-body ul li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:1px; background:rgba(186,220,247,.55)}

/* ---------- skill ---------- */
.skill-grid{align-items:start}
.skill-col .tag{margin-top:22px}
.skill-col .tag:first-child{margin-top:0}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:6px}
.chips li{
  border:1px solid var(--line); border-radius:999px; padding:7px 15px;
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--dim);
}
.edu{border-left:1px solid var(--line); padding:4px 0 4px 20px; margin-bottom:26px}
.edu h3{margin:0 0 2px; font-size:19px; font-weight:400}
.edu p:last-child{margin:8px 0 0; color:var(--dim); font-size:13px; line-height:1.8}

/* ---------- works ---------- */
.works-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px}
.works-head .sub{margin:0}
.tile{
  position:relative; margin:0; border-radius:12px; overflow:hidden;
  aspect-ratio:4/3; background:#0e0f07; cursor:pointer;
}
.tile img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease)}
.tile:hover img{transform:scale(1.06)}
.tile figcaption{
  position:absolute; inset:auto 0 0 0; padding:34px 14px 12px;
  background:linear-gradient(180deg, rgba(8,10,4,0), rgba(8,10,4,.82));
  display:flex; flex-direction:column; gap:3px;
}
.tile figcaption b{font-weight:400; font-size:12.5px; color:var(--chalk)}
.tile figcaption span{font-family:var(--mono); font-size:9px; letter-spacing:.18em; color:rgba(186,220,247,.6)}

/* ---------- contact ---------- */
.rows{margin:12px 0 0; max-width:760px}
.rows li{
  display:grid; grid-template-columns:104px 1fr auto; gap:16px; align-items:center;
  padding:15px 4px; border-top:1px solid var(--line2); cursor:pointer;
  transition:background .3s;
}
.rows li:hover{background:rgba(245,244,237,.035)}
.rows .k{font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--moss)}
.rows .v{font-size:15px; color:var(--chalk)}
.rows .c{font-family:var(--mono); font-size:9.5px; letter-spacing:.16em; color:var(--moss); transition:color .3s}
.rows li:hover .c{color:var(--dawn)}
.foot{margin:40px 0 0; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:rgba(245,244,237,.3)}
.foot .en{margin-left:8px; color:rgba(245,244,237,.2)}

/* ---------- dock ---------- */
.dock{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:55;
  display:flex; align-items:center; gap:24px;
  padding:16px 38px; border-radius:999px;
  background:rgba(10,12,5,.62); border:1px solid var(--line);
  font-family:var(--mono); font-size:14px; letter-spacing:.16em;
}
.dock a{color:var(--dim); transition:color .3s}
.dock a:hover{color:var(--chalk)}
.dockbtn{
  background:none; border:0; padding:0; cursor:pointer;
  font:inherit; letter-spacing:inherit; color:var(--dim);
  transition:color .3s;
}
.dockbtn:hover{color:var(--chalk)}
.dock i{width:1px; height:16px; background:var(--line)}

/* ---------- toc ---------- */
.toc{
  position:fixed; inset:0; z-index:80; background:rgba(7,9,3,.97);
  opacity:0; visibility:hidden; transition:opacity .45s var(--ease), visibility .45s;
}
.toc.on{opacity:1; visibility:visible}
.toc-inner{height:100%; padding:56px 56px 40px; display:flex; flex-direction:column; max-width:1160px; margin:0 auto}
.toc-head{display:flex; align-items:center; justify-content:space-between}
.toc-head .eyebrow{margin:0}
.tocclose{
  background:none; border:1px solid var(--line); color:var(--chalk);
  width:42px; height:42px; border-radius:50%; font-size:20px; line-height:1; cursor:pointer;
}
.toc-list{flex:1; display:flex; flex-direction:column; justify-content:center; gap:2px; margin:26px 0}
.toc-list a{
  display:grid; grid-template-columns:64px 1fr auto; align-items:baseline; gap:20px;
  padding:13px 6px; border-bottom:1px solid var(--line2);
  transition:padding-left .4s var(--ease);
}
.toc-list a:hover{padding-left:16px}
.toc-list a:hover b{color:var(--sky)}
.toc-list i{font-style:normal; font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--moss)}
.toc-list b{font-weight:300; font-size:clamp(22px,3vw,34px); color:var(--chalk); transition:color .3s}
.toc-list span{font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:rgba(186,220,247,.4); text-transform:uppercase}
.toc-foot{margin:0; font-family:var(--mono); font-size:10.5px; letter-spacing:.18em; color:var(--moss)}

/* ---------- lightbox ---------- */
.lb{
  position:fixed; inset:0; z-index:90; background:rgba(6,8,3,.94);
  display:flex; align-items:center; justify-content:center; padding:40px;
  opacity:0; visibility:hidden; transition:opacity .35s, visibility .35s;
}
.lb.on{opacity:1; visibility:visible}
.lb img{max-width:92vw; max-height:84vh; border-radius:10px; object-fit:contain}
.lb button{
  position:absolute; top:26px; right:30px; width:44px; height:44px; border-radius:50%;
  background:none; border:1px solid rgba(245,244,237,.3); color:var(--chalk);
  font-size:20px; cursor:pointer;
}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translate3d(0,18px,0); transition:opacity .62s var(--ease), transform .62s var(--ease)}
.rv.in{opacity:1; transform:none}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .grid4{grid-template-columns:repeat(2,1fr)}
  .jobs{grid-template-columns:1fr; gap:6px}
  .hero-grid{gap:34px}
}


/* 网盘 / 下载 链接 */
.nlinks{display:flex; gap:12px; flex-wrap:wrap; margin:22px 0 26px}
.nlink{display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; padding:16px 22px;
  border:1px solid rgba(255,255,255,.14); border-radius:12px; width:fit-content; max-width:100%;
  transition:border-color .3s var(--ease), background .3s var(--ease)}
.nlink:hover{border-color:rgba(255,255,255,.34); background:rgba(255,255,255,.04)}
.nlink-t{font-size:15px; letter-spacing:.01em}
.nlink-s{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; color:rgba(245,244,237,.5)}

/* ---------- 图纸 / 海报 ---------- */
.works-sub{display:flex; align-items:baseline; gap:12px; margin:38px 0 16px;
  font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,244,237,.42)}
.works-sub i{font-style:normal; opacity:.65}
.boards{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.board{aspect-ratio:3/4}
.board figcaption{padding:16px 18px}
@media (max-width:820px){
  .boards{grid-template-columns:repeat(2,1fr); gap:10px}
  .board figcaption{padding:10px 12px}
  .board figcaption b{font-size:11px}
}
@media (max-width:820px){
  :root{--pad:6px}
  .panel{padding:92px 22px 90px; border-radius:13px}
  .topbar{padding:18px 16px}
  .topnav{gap:10px}
  .topnav a{display:none}
  .tocbtn{padding:8px 13px; font-size:10px; gap:7px; background:#ff5c26; color:#fff}
  .brand{font-size:19px}
  .hero-grid{grid-template-columns:1fr; gap:24px}
  .hero-avatar{order:-1; justify-self:start}
  .mark{width:112px}
  .hero-avatar figcaption{position:static; text-align:left; margin-top:10px}
  .hero-name{font-size:clamp(44px,13vw,64px)}
  .hero-intro{font-size:13px; line-height:1.85}
  .hero-actions{margin-top:22px}
  .pill{padding:12px 22px; font-size:11px}
  .hero-stats{gap:0; width:100%; margin-top:26px}
  .hero-stats b{font-size:19px}
  .scrollhint{display:none}
  .grid3,.grid2{grid-template-columns:1fr}
  .grid4{grid-template-columns:repeat(2,1fr); gap:8px}
  .h2{font-size:24px}
  .h2.big{font-size:31px; line-height:1.3}
  .sub{font-size:12.5px; margin-bottom:20px}
  .card{padding:20px 18px}
  .works-head{flex-direction:column; align-items:flex-start; gap:8px}
  .tile figcaption b{font-size:11px}
  .rows li{grid-template-columns:64px 1fr; row-gap:4px}
  .rows .c{grid-column:2; font-size:9px}
  .rows .v{font-size:13.5px}
  .dock{bottom:14px; padding:13px 26px; font-size:12.5px; gap:18px}
  .toc-inner{padding:70px 22px 30px}
  .toc-list a{grid-template-columns:44px 1fr; gap:12px; padding:11px 2px}
  .toc-list span{display:none}
  .toc-list b{font-size:22px}
  .lb{padding:16px}
  .foot{margin-top:26px}
}

/* ---------- loader ---------- */
.loader{
  position:fixed; inset:0; z-index:200; background:#080a04;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.loader.done{opacity:0; visibility:hidden}
.loader-brand{margin:0 0 16px; font-family:var(--mono); font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--moss); text-align:center}
.loader-brand span{color:rgba(186,220,247,.5)}
.loader-brand i{font-style:normal; color:rgba(245,244,237,.22); margin-left:8px}
.loader-num{margin:0; display:flex; align-items:flex-start; justify-content:center; gap:3px; font-size:64px; line-height:.9; color:var(--chalk)}
.loader-num b{font-weight:300}
.loader-num em{font-style:normal; font-size:13px; color:var(--moss); margin-top:6px}
.loader-bar{position:absolute; left:0; right:0; bottom:0; height:1px; background:rgba(245,244,237,.08)}
.loader-bar i{display:block; height:100%; width:0; background:linear-gradient(90deg, var(--sky), rgba(186,220,247,.15)); transition:width .35s linear}

/* ---------- side dots ---------- */
.dots{position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:55; display:flex; flex-direction:column; gap:11px}
.dots button{width:6px; height:6px; padding:0; border:0; border-radius:50%; background:rgba(245,244,237,.2); cursor:pointer; transition:background .35s, transform .35s}
.dots button.on{background:var(--sky); transform:scale(1.6)}

/* ---------- section entrance ---------- */
.mask{display:block; overflow:hidden}
.mask > span{display:block; transform:translateY(104%); transition:transform .95s var(--ease)}
.sec.on .mask > span{transform:none}

.rv{transition-delay:calc(var(--i, 0) * 80ms)}

/* ---------- toc stagger ---------- */
.toc-list li{opacity:0; transform:translateY(16px); transition:opacity .55s var(--ease), transform .55s var(--ease)}
.toc.on .toc-list li{opacity:1; transform:none; transition-delay:calc(var(--i, 0) * 50ms + 100ms)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .rv{opacity:1 !important; transform:none !important; transition:none !important}
  .scroller{scroll-behavior:auto}
  *{animation:none !important}
}