/* ===== 基础颜色与通用样式 ===== */
:root{
  --black:#080808;
  --ink:#101010;
  --panel:#171517;
  --line:#343034;
  --white:#fff;
  --muted:#a6a1a5;
  --pink:#fa58a7;
  --gold:#efca62;
  --max:1400px;
  --pad:clamp(22px,5vw,80px)
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth
}
body{
  margin:0;
  background:var(--black);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased
}
button,a{
  font:inherit
}
button{
  cursor:pointer
}
a{
  color:inherit;
  text-decoration:none
}
img{
  display:block;
  max-width:100%
}
::selection{
  background:var(--pink);
  color:var(--black)
}
:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:5px
}
.skip-link{
  position:absolute;
  left:12px;
  top:-80px;
  background:var(--gold);
  color:#000;
  z-index:1000;
  padding:10px
}
.skip-link:focus{
  top:12px
}
.section-wrap{
  width:min(100%,var(--max));
  margin-inline:auto;
  padding-inline:var(--pad)
}
.pink{
  color:var(--pink)
}
.gold{
  color:var(--gold)
}
.eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin:0 0 24px
}
.spark{
  font-size:22px;
  vertical-align:middle;
  margin-right:8px;
  color:var(--pink)
}
/* ===== 顶部导航 ===== */
.site-header{
  height:74px;
  background:#fff;
  color:var(--ink);
  position:sticky;
  top:0;
  z-index:60;
  box-shadow:0 1px 0 rgba(0,0,0,.06)
}
.header-inner{
  height:100%;
  width:min(100%,var(--max));
  margin:auto;
  padding:0 var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px
}
.wordmark{
  font-size:20px;
  font-weight:900;
  letter-spacing:-.08em;
  white-space:nowrap
}
.wordmark-dot{
  display:inline-block;
  width:10px;
  height:10px;
  background:var(--pink);
  border-radius:50%;
  vertical-align:middle;
  margin-right:4px
}
.wordmark-star{
  color:var(--pink);
  margin:0 2px
}
.site-nav{
  display:flex;
  align-items:center;
  gap:clamp(18px,2.9vw,48px)
}
.site-nav a{
  font-size:14px;
  font-weight:700;
  color:#c7a94c;
  display:flex;
  align-items:center;
  gap:8px;
  transition:color .2s
}
.site-nav a:hover,.site-nav a:focus-visible{
  color:#bd3d7c
}
.nav-shape{
  width:12px;
  height:12px;
  background:var(--gold)
}
.nav-shape.circle{
  border-radius:50%
}
.nav-shape.triangle{
  clip-path:polygon(50% 0,100% 100%,0 100%)
}
.site-nav .nav-contact{
  padding:11px 16px;
  border:1.5px solid var(--ink);
  border-radius:100px;
  color:var(--ink)
}
.menu-toggle{
  display:none
}
/* ===== 首屏 ===== */
.hero{
  min-height:min(790px,calc(100vh - 74px));
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
  align-items:center;
  gap:clamp(36px,5vw,80px);
  padding-top:74px;
  padding-bottom:92px;
  overflow:hidden
}
.hero-copy{
  position:relative;
  z-index:2
}
.hero h1{
  font-size:clamp(70px,8vw,124px);
  letter-spacing:-.092em;
  line-height:.93;
  margin:0 0 36px;
  font-weight:900
}
.hero h1 em{
  font-style:normal;
  color:var(--pink)
}
.pink-period{
  color:var(--pink)
}
.hero-deck{
  display:flex;
  align-items:flex-start;
  gap:18px;
  font-size:clamp(25px,2.6vw,40px);
  line-height:1.17;
  max-width:700px;
  letter-spacing:-.045em
}
.hero-deck p{
  margin:0
}
.hero-deck strong{
  color:var(--pink)
}
.hero-deck-rule{
  height:80px;
  width:4px;
  flex:none;
  background:var(--gold)
}
.hero-detail{
  font-size:14px;
  line-height:1.7;
  color:#aaa4a8;
  margin:32px 0 28px
}
.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding:17px 22px;
  font-size:13px;
  font-weight:800;
  border-radius:100px;
  border:0;
  transition:transform .25s,background .25s
}
.button:hover{
  transform:translateY(-4px)
}
.button-pink{
  background:var(--pink);
  color:var(--black)
}
.button-outline{
  border:1px solid #6b6268
}
.hero-media{
  min-width:0;
  align-self:center;
}
.hero-media-label{
  display:flex;
  justify-content:space-between;
  gap:16px;
  margin:0 0 18px;
  color:var(--gold);
  font-size:11px;
  font-weight:800;
  letter-spacing:.17em;
}
.hero-media .video-shell{
  box-shadow:17px 17px 0 var(--pink);
}
.hero-media-note{
  margin:34px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}
.hero-bottom{
  position:absolute;
  bottom:24px;
  left:var(--pad);
  right:var(--pad);
  border-top:1px solid var(--line);
  padding-top:16px;
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.17em
}
.scroll-cue span{
  font-size:18px;
  color:var(--pink)
}
/* ===== 滚动标语与动画 ===== */
.ticker{
  overflow:hidden;
  background:var(--gold);
  color:var(--black);
  padding:16px 0;
  white-space:nowrap
}
.ticker-track{
  display:inline-block;
  font-size:15px;
  font-weight:900;
  letter-spacing:.14em;
  animation:marquee 35s linear infinite
}
.ticker-track span{
  color:var(--pink);
  padding:0 26px;
  font-size:23px;
  vertical-align:middle
}
@keyframes marquee{
  to{
    transform:translateX(-50%)
  }
}
/* ===== 项目卡片 ===== */
.work-section,/* ===== 经历时间线 ===== */
.experience-section{
  padding-top:128px;
  padding-bottom:132px
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:50px;
  margin-bottom:47px
}
.section-head h2,.about-copy h2{
  font-size:clamp(52px,6.3vw,102px);
  letter-spacing:-.073em;
  line-height:.96;
  margin:0
}
.section-intro{
  max-width:340px;
  color:#beb8bd;
  font-size:17px;
  line-height:1.5;
  margin:0 0 8px
}
.filter-bar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:30px
}
.filter{
  border:1px solid #51474e;
  border-radius:99px;
  background:transparent;
  color:#e8e3e6;
  padding:11px 19px;
  font-size:12px;
  font-weight:800;
  transition:background .2s,color .2s,border-color .2s
}
.filter:hover,.filter.active{
  background:var(--gold);
  border-color:var(--gold);
  color:var(--black)
}
.filter span{
  margin-left:5px
}
.project-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}
.project-card{
  min-width:0;
  background:var(--panel);
  border:1px solid #302930;
  transition:transform .3s,border-color .3s
}
.project-card:hover{
  transform:translateY(-7px);
  border-color:var(--pink)
}
.project-card.hidden{
  display:none
}
.project-open{
  display:block;
  width:100%;
  border:0;
  padding:0;
  background:none;
  color:inherit;
  text-align:left
}
.project-image{
  height:clamp(270px,29vw,410px);
  overflow:hidden;
  position:relative;
  background:#201a20
}
.project-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .6s
}
.project-card:hover .project-image img{
  transform:scale(1.045)
}
.project-large .project-image{
  height:clamp(330px,34vw,475px)
}
.asset-note{
  position:absolute;
  right:14px;
  bottom:14px;
  background:rgba(0,0,0,.75);
  color:#fff;
  padding:8px 10px;
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.1em
}
.project-body{
  padding:26px 26px 28px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px 10px;
  min-height:215px
}
.project-index{
  grid-column:1/-1;
  color:var(--gold);
  font-size:10px;
  font-weight:800;
  letter-spacing:.2em;
  margin-bottom:7px
}
.project-title{
  font-size:clamp(25px,2.4vw,37px);
  font-weight:900;
  letter-spacing:-.055em;
  line-height:1.08
}
.project-desc{
  grid-column:1/-1;
  color:#bdb5bb;
  font-size:14px;
  line-height:1.5;
  max-width:58ch
}
.project-more{
  grid-column:1/-1;
  color:var(--pink);
  font-size:10px;
  font-weight:800;
  letter-spacing:.18em;
  margin-top:16px
}
.project-more span{
  font-size:18px;
  margin-left:8px
}
.work-note{
  font-size:12px;
  color:var(--muted);
  margin:24px 0 0
}
.reveal{
  opacity:0;
  transform:translateY(25px);
  transition:opacity .65s ease,transform .65s ease
}
.reveal.visible{
  opacity:1;
  transform:none
}
/* ===== 动态简历视频 ===== */
.video-shell{
  background:#080808;
  border:1px solid #604451;
  box-shadow:20px 20px 0 var(--pink)
}
.video-shell video{
  display:block;
  width:100%;
  aspect-ratio:16/9;
  background:#000
}
.video-caption{
  display:flex;
  justify-content:space-between;
  padding:14px 17px;
  gap:10px;
  font-size:10px;
  letter-spacing:.1em;
  color:var(--gold)
}
.experience-section{
  padding-top:130px
}
.timeline{
  border-top:1px solid #4c3c48
}
.timeline-item{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:40px;
  border-bottom:1px solid #4c3c48;
  padding:37px 0 48px
}
.timeline-when{
  font-size:13px;
  font-weight:900;
  color:var(--gold);
  letter-spacing:.05em
}
.timeline-when span{
  display:block;
  margin-top:8px;
  font-size:10px;
  color:var(--muted);
  letter-spacing:.2em
}
.timeline-content h3{
  font-size:clamp(28px,3vw,47px);
  margin:0 0 7px;
  letter-spacing:-.05em
}
.timeline-content h3 span{
  font-size:.65em;
  color:var(--pink)
}
.timeline-place{
  font-weight:800;
  color:var(--pink);
  margin:0 0 15px!important
}
.timeline-content>p{
  font-size:16px;
  line-height:1.6;
  max-width:800px;
  color:#d1c9ce;
  margin:0
}
.tag-list{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:22px
}
.tag-list span{
  font-size:10px;
  letter-spacing:.12em;
  color:var(--gold);
  border:1px solid #6a554b;
  border-radius:30px;
  padding:8px 11px
}
.stats{
  display:flex;
  gap:35px;
  margin-top:30px;
  flex-wrap:wrap
}
.stats div{
  display:grid;
  gap:2px
}
.stats strong{
  font-size:39px;
  color:var(--pink);
  letter-spacing:-.06em
}
.stats span{
  font-size:10px;
  letter-spacing:.14em;
  color:var(--muted)
}
/* ===== 关于与素材展示 ===== */
.about-section{
  background:#131013;
  padding-top:130px;
  padding-bottom:130px
}
.about-grid{
  display:grid;
  grid-template-columns:.84fr 1.16fr;
  gap:clamp(35px,7vw,110px);
  align-items:center
}
.about-photo{
  position:relative
}
.about-photo img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 63%;
  filter:saturate(.82)
}
.about-photo:after{
  content:'';
  position:absolute;
  inset:auto -16px -16px 16px;
  height:38%;
  border-bottom:17px solid var(--gold);
  border-right:17px solid var(--gold);
  pointer-events:none
}
.photo-label{
  position:absolute;
  bottom:22px;
  left:20px;
  background:var(--black);
  padding:11px 14px;
  letter-spacing:.16em;
  font-size:9px;
  z-index:1
}
.about-copy h2{
  max-width:800px
}
.about-copy>p:not(.eyebrow){
  line-height:1.65;
  color:#c5bdc3;
  max-width:650px
}
.about-copy .about-lead{
  font-size:clamp(19px,2vw,25px);
  color:var(--white)!important;
  margin:32px 0 22px;
  line-height:1.44!important
}
.skill-list{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin:30px 0
}
.skill-list span{
  border:1px solid #61545d;
  padding:8px 12px;
  border-radius:30px;
  color:#ded8dd;
  font-size:11px
}
.text-link{
  display:inline-flex;
  gap:20px;
  align-items:center;
  border-bottom:1px solid var(--pink);
  padding-bottom:8px;
  color:var(--pink);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em
}
.text-link span{
  font-size:20px
}
.side-story{
  margin-top:140px
}
.side-story-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  margin-bottom:32px
}
.side-story-head>span{
  font-size:11px;
  font-weight:800;
  letter-spacing:.17em;
  color:var(--gold)
}
.side-story-head h3{
  font-size:clamp(36px,5vw,70px);
  line-height:1;
  letter-spacing:-.07em;
  margin:0
}
.side-story-head h3 em{
  font-style:normal;
  color:var(--pink)
}
.side-gallery{
  display:grid;
  grid-template-columns:1.3fr .55fr .65fr;
  gap:17px
}
.side-gallery figure{
  margin:0
}
.side-gallery img{
  width:100%;
  height:360px;
  object-fit:cover
}
.side-gallery figure:nth-child(2) img{
  object-position:center top
}
.side-gallery figcaption{
  font-size:10px;
  color:var(--gold);
  margin-top:13px;
  letter-spacing:.12em
}
/* ===== 联系与页脚 ===== */
.contact-section{
  background:var(--pink);
  color:var(--black);
  padding:104px 0 90px;
  overflow:hidden
}
.contact-inner h2{
  font-size:clamp(60px,10vw,154px);
  line-height:.9;
  letter-spacing:-.085em;
  margin:30px 0 67px
}
.contact-inner h2 em{
  font-style:normal;
  color:var(--white)
}
.contact-email{
  font-size:clamp(30px,5.5vw,75px);
  letter-spacing:-.05em;
  font-weight:900;
  border-bottom:5px solid #101010;
  padding-bottom:9px
}
.contact-email span{
  font-size:.65em
}
.contact-links{
  display:flex;
  gap:24px;
  flex-wrap:wrap;
  margin-top:98px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em
}
.contact-links a:hover{
  text-decoration:underline
}
.footer{
  background:#fff;
  color:#141414;
  padding:22px 0
}
.footer-inner{
  display:flex;
  justify-content:space-between;
  gap:25px;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em
}
/* ===== 项目详情弹窗 ===== */
.project-dialog{
  width:min(92vw,950px);
  max-height:90vh;
  border:1px solid #61515c;
  padding:0;
  background:#171517;
  color:#fff;
  overflow:auto
}
.project-dialog::backdrop{
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(8px)
}
.dialog-close{
  position:sticky;
  float:right;
  top:16px;
  right:16px;
  z-index:5;
  border:0;
  background:var(--pink);
  color:#000;
  border-radius:50%;
  width:44px;
  height:44px;
  font-size:30px;
  line-height:1
}
.dialog-media{
  background:#090909
}
.dialog-media img{
  width:100%;
  max-height:400px;
  object-fit:cover
}
.dialog-content{
  padding:clamp(24px,5vw,58px)
}
.dialog-content h2{
  font-size:clamp(36px,6vw,70px);
  letter-spacing:-.065em;
  line-height:1;
  margin:0 0 20px
}
.dialog-summary{
  font-size:clamp(20px,2.8vw,30px);
  line-height:1.28;
  color:var(--pink);
  max-width:700px
}
.dialog-content>p:last-of-type{
  color:#d0c9ce;
  line-height:1.65
}
.dialog-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  border-top:1px solid #4b4248;
  border-bottom:1px solid #4b4248;
  margin:30px 0;
  padding:22px 0
}
.dialog-facts span{
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--gold)
}
.dialog-facts p{
  margin:8px 0 0;
  line-height:1.4
}
.project-dialog:not([open]){
  display:none
}
/* ===== 平板与手机适配 ===== */
@media(max-width:950px){
  .hero{
    grid-template-columns:1fr;
    min-height:0;
    padding-top:105px;
    padding-bottom:90px
  }
  .hero-copy{
    max-width:750px
  }
  .hero-media{
    width:min(100%,760px);
    margin-inline:auto
  }
  .about-grid{
    gap:40px
  }
  .side-gallery img{
    height:260px
  }
}
@media(max-width:680px){
  :root{
    --pad:22px
  }
  .site-header{
    height:64px
  }
  .header-inner{
    gap:15px
  }
  .wordmark{
    font-size:19px
  }
  .menu-toggle{
    display:grid;
    gap:5px;
    border:0;
    background:none;
    padding:10px
  }
  .menu-toggle span{
    display:block;
    width:25px;
    height:2px;
    background:#111
  }
  .site-nav{
    display:none;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    padding:22px;
    background:#fff;
    box-shadow:0 10px 20px #0003;
    flex-direction:column;
    align-items:stretch;
    gap:20px
  }
  .site-nav.open{
    display:flex
  }
  .site-nav .nav-contact{
    justify-content:center
  }
  .hero{
    padding-top:85px;
    padding-bottom:82px
  }
  .hero h1{
    font-size:clamp(67px,17vw,105px)
  }
  .hero-deck{
    font-size:28px
  }
  .hero-media-label{
    font-size:9px
  }
  .hero-media-note{
    margin-top:20px
  }
  .hero-bottom{
    font-size:8px
  }
  .scroll-cue{
    display:none
  }
  .work-section,.experience-section{
    padding-top:90px;
    padding-bottom:90px
  }
  .section-head{
    display:block;
    margin-bottom:30px
  }
  .section-intro{
    margin-top:20px
  }
  .section-head h2,.about-copy h2{
    font-size:clamp(48px,12vw,72px)
  }
  .filter-bar{
    gap:7px
  }
  .filter{
    font-size:10px;
    padding:9px 12px
  }
  .project-grid{
    grid-template-columns:1fr;
    gap:20px
  }
  .project-image,.project-large .project-image{
    height:260px
  }
  .project-body{
    min-height:0;
    padding:20px
  }
  .hero-media .video-shell{
    box-shadow:9px 9px 0 var(--pink)
  }
  .video-caption{
    font-size:8px
  }
  .timeline-item{
    grid-template-columns:1fr;
    gap:17px
  }
  .timeline-content h3{
    font-size:32px
  }
  .about-section{
    padding-top:90px;
    padding-bottom:90px
  }
  .about-grid{
    grid-template-columns:1fr
  }
  .about-photo{
    max-width:430px
  }
  .side-story{
    margin-top:90px
  }
  .side-story-head{
    display:block
  }
  .side-story-head h3{
    margin-top:18px
  }
  .side-gallery{
    grid-template-columns:1fr 1fr
  }
  .side-gallery figure:first-child{
    grid-column:1/-1
  }
  .side-gallery img{
    height:230px
  }
  .contact-inner h2{
    font-size:clamp(57px,13vw,94px)
  }
  .contact-email{
    font-size:clamp(29px,7vw,48px)
  }
  .footer-inner{
    flex-direction:column
  }
  .dialog-facts{
    grid-template-columns:1fr
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  .reveal{
    opacity:1;
    transform:none;
    transition:none
  }
  .ticker-track{
    animation:none
  }
  .project-card,.project-image img,.button{
    transition:none
  }
}
.text-link[hidden]{
  display:none
}
.project-card[data-project="playlist"] .project-image img,
.project-card[data-project="profiled"] .project-image img,
.project-card[data-project="city"] .project-image img{
  object-fit:contain
}
/* ===== 项目图片：content.js 中 coverMode: 'contain' 时完整显示素材 ===== */
.project-image img.image-contain {
  object-fit: contain;
}
/* ===== 顶部“Let's talk”菜单：直接提供邮件与电话链接 ===== */
.contact-menu {
  position: relative;
}
.site-nav .nav-contact {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.site-nav .nav-contact:hover {
  color: #bd3d7c;
  border-color: #bd3d7c;
}
.contact-options {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  min-width: 275px;
  padding: 8px;
  background: #fff;
  border: 1px solid #e4dbe0;
  box-shadow: 0 18px 35px #0003;
  z-index: 80;
}
.contact-options[hidden] {
  display: none;
}
.site-nav .contact-options a {
  display: block;
  padding: 12px 13px;
  color: var(--ink);
  font-size: 14px;
  overflow-wrap: anywhere;
}
.site-nav .contact-options a:hover {
  background: #fff0f7;
  color: #bd3d7c;
}
.contact-options small {
  display: block;
  color: #a14974;
  font-size: 10px;
  letter-spacing: .15em;
  margin-bottom: 4px;
}
/* ===== 完整经历：分开最新简历与旧版补充经历 ===== */
.timeline-group {
  margin: 0;
  padding: 22px 0 0;
  color: var(--pink);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
}
.timeline-group:not(:first-child) {
  padding-top: 65px;
}
/* ===== 联系方式：邮箱和电话号码都可直接点击 ===== */
.contact-phone {
  display: block;
  width: max-content;
  max-width: 100%;
  margin-top: 30px;
  font-size: clamp(23px, 3vw, 43px);
  font-weight: 900;
  letter-spacing: -.045em;
  border-bottom: 3px solid #101010;
}
.contact-phone span {
  font-size: .7em;
}
.contact-email:hover, .contact-phone:hover {
  color: #fff;
  border-color: #fff;
}
#work, #experience, #about, #contact, #motion-resume {
  scroll-margin-top: 74px;
}
@media (max-width: 680px) {
  .contact-menu {
    width: 100%;
  }
  .site-nav .nav-contact {
    width: 100%;
    justify-content: center;
  }
  .contact-options {
    position: static;
    min-width: 0;
    margin-top: 10px;
    box-shadow: none;
  }
  .contact-phone {
    margin-top: 24px;
  }
  #work, #experience, #about, #contact, #motion-resume {
    scroll-margin-top: 64px;
  }
}