:root{
    --ink:#0a0a0c;
    --surface:#131316;
    --surface-2:#1a1a1e;
    --paper:#d8d3c8;
    --paper-bright:#f1ede2;
    --muted:#8b877c;
    --muted-2:#5c584f;
    --line:#28282b;
    --line-soft:#1c1c1f;
    --bronze:#c99a5b;
    --bronze-dim:#8a6a3d;
    --cine:#7fa3ad;
    --cine-dim:#526b72;
    --accent: var(--bronze);
    --accent-dim: var(--bronze-dim);
    --font-display:'Instrument Serif', 'Noto Serif SC', 'Songti SC', serif;
    --font-body:'Manrope', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
    --nav-h: 84px;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--ink);
    color:var(--paper);
    font-family:var(--font-body);
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
    min-height:100vh;
  }
  ::selection{background:var(--accent);color:var(--ink);}

  a{color:inherit;text-decoration:none;}
  button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;}

  h1,h2,h3{font-family:var(--font-display);font-weight:400;margin:0;text-wrap:balance;}
  .zh{font-family:'Noto Serif SC','Noto Sans SC',var(--font-body);}
  .zh-sans{font-family:'Noto Sans SC',var(--font-body);}

  .mono-label{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--muted);
  }

  :focus-visible{outline:1.5px solid var(--accent);outline-offset:3px;}

  /* ---------- layout shell ---------- */
  #app{position:relative;min-height:100vh;}

  header.site-header{
    position:fixed;top:0;left:0;right:0;
    height:var(--nav-h);
    z-index:50;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 clamp(20px,4vw,48px);
    transition:background-color .5s ease, border-color .5s ease;
    border-bottom:1px solid transparent;
  }
  header.site-header.solid{
    background:rgba(10,10,12,.86);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom-color:var(--line);
  }

  .brand{display:flex;flex-direction:column;gap:1px;line-height:1;}
  .brand .name-en{font-family:var(--font-display);font-style:italic;font-size:22px;letter-spacing:.01em;color:var(--paper-bright);}
  .brand .name-zh{font-family:'Noto Serif SC',serif;font-size:12px;letter-spacing:.32em;color:var(--muted);margin-top:3px;}
  .brand{cursor:pointer;}

  nav.primary-nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);}
  .nav-link{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--muted);
    padding:6px 0;
    position:relative;
    white-space:nowrap;
  }
  .nav-link .zh-sans{font-family:'Noto Sans SC',var(--font-body);text-transform:none;letter-spacing:.04em;font-size:12.5px;}
  .nav-link::after{
    content:'';position:absolute;left:0;bottom:0;height:1px;width:0;
    background:var(--accent-a, var(--bronze));
    transition:width .3s ease;
  }
  .nav-link:hover, .nav-link.active{color:var(--paper-bright);}
  .nav-link:hover::after, .nav-link.active::after{width:100%;}

  .lang-switch{display:flex;align-items:center;gap:2px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--muted-2);}
  .lang-switch button{padding:5px 7px;color:var(--muted);}
  .lang-switch button.active{color:var(--paper-bright);}
  .lang-switch button:hover{color:var(--paper-bright);}
  .lang-dot{color:var(--muted-2);}

  .nav-toggle{display:none;}

  main{position:relative;z-index:2;}
  main#view-root.home-active{pointer-events:none;}

  .particle-layer{
    position:fixed;inset:0;z-index:1;
    opacity:0;pointer-events:none;
    transition:opacity .6s ease;
  }
  .particle-layer.active{opacity:1;pointer-events:auto;}

  footer.site-footer{
    border-top:1px solid var(--line);
    padding:28px clamp(20px,4vw,48px) 40px;
    display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px;
  }

  @media (max-width:760px){
    :root{--nav-h:68px;}
    nav.primary-nav{
      position:fixed;top:var(--nav-h);left:0;right:0;bottom:0;
      background:var(--ink);
      flex-direction:column;align-items:flex-start;justify-content:flex-start;
      padding:32px 24px;gap:22px;
      transform:translateX(100%);
      transition:transform .4s ease;
      z-index:49;
      overflow-y:auto;
    }
    nav.primary-nav.open{transform:translateX(0);}
    .nav-link{font-size:13px;}
    .nav-toggle{display:block;width:26px;height:18px;position:relative;z-index:51;}
    .nav-toggle span{position:absolute;left:0;right:0;height:1px;background:var(--paper);transition:transform .3s ease, opacity .3s ease;}
    .nav-toggle span:nth-child(1){top:0;}
    .nav-toggle span:nth-child(2){top:8px;}
    .nav-toggle span:nth-child(3){top:16px;}
    .nav-toggle.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
    .nav-toggle.open span:nth-child(2){opacity:0;}
    .nav-toggle.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}
  }



  /* ---------- home / hero ---------- */
  .view-home{position:relative;height:100vh;min-height:560px;overflow:hidden;pointer-events:none;}
  #particle-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;}
  #particle-canvas.dragging{cursor:grabbing;}
  .hero-overlay{
    position:absolute;left:0;right:0;bottom:0;
    padding:0 clamp(20px,4vw,48px) clamp(28px,5vh,64px);
    display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:20px;
    pointer-events:none;
  }
  .hero-thesis{max-width:520px;pointer-events:none;}
  .hero-thesis p{margin:10px 0 0;color:var(--muted);font-size:14.5px;max-width:46ch;}
  .hero-thesis .kicker{display:block;}
  .hero-hint{
    display:flex;flex-direction:column;gap:8px;align-items:flex-end;text-align:right;
    color:var(--muted-2);
  }
  .hero-hint .row{display:flex;gap:10px;align-items:center;justify-content:flex-end;}
  .hero-hint .key{
    border:1px solid var(--line);border-radius:3px;padding:2px 7px;
    font-family:var(--font-mono);font-size:10px;color:var(--muted);
  }
  .hero-loading{
    position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:14px;
    background:var(--ink);
    transition:opacity .6s ease;
    z-index:5;
  }
  .hero-loading .bar{width:180px;height:1px;background:var(--line);position:relative;overflow:hidden;}
  .hero-loading .bar i{position:absolute;top:0;left:0;bottom:0;width:30%;background:var(--accent);animation:loadsweep 1.1s ease-in-out infinite;}
  @keyframes loadsweep{0%{left:-30%;}100%{left:100%;}}
  .hero-loading span{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--muted-2);text-transform:uppercase;}

  /* ---------- section header (list pages) ---------- */
  .section-head{
    padding:calc(var(--nav-h) + 56px) clamp(20px,4vw,48px) 28px;
    border-bottom:1px solid var(--line);
    display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;
  }
  .section-head h1{font-size:clamp(34px,5vw,58px);color:var(--paper-bright);}
  .section-head h1 .zh{display:block;font-size:.5em;color:var(--muted);margin-top:10px;letter-spacing:.06em;}
  .section-head .section-meta{max-width:360px;color:var(--muted);font-size:13.5px;text-align:right;}
  .section-head .count{font-family:var(--font-mono);font-size:12px;color:var(--muted-2);}

  /* ---------- works index (editorial list) ---------- */
  .works-index{padding:0 clamp(20px,4vw,48px);}
  .work-row{
    display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1fr);
    gap:clamp(16px,3vw,40px);
    align-items:center;
    padding:clamp(22px,3.4vw,44px) 0;
    border-bottom:1px solid var(--line-soft);
    cursor:pointer;
  }
  .work-row:first-child{border-top:1px solid var(--line-soft);}
  .work-row .idx{font-family:var(--font-mono);font-size:13px;color:var(--muted-2);align-self:flex-start;padding-top:6px;}
  .work-row .frame{
    position:relative;aspect-ratio:4/3;overflow:visible;border:1px solid var(--line);
    background:var(--surface);
  }
  .work-row .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.16,.9,.35,1), filter .6s ease;transform-origin:center;will-change:transform;}
  .work-row.sculptural .frame:hover img{transform:scale(1.5);z-index:5;position:relative;}
  .work-row .info{display:flex;flex-direction:column;gap:8px;}
  .work-row .info h2{font-size:clamp(22px,2.6vw,34px);color:var(--paper-bright);}
  .work-row .info .title-zh{font-family:'Noto Serif SC',serif;font-size:.5em;color:var(--muted);}
  .work-row .info .desc{color:var(--muted);font-size:14px;max-width:46ch;}
  .work-row .info .meta-line{display:flex;gap:14px;flex-wrap:wrap;margin-top:2px;}
  .work-row .info .meta-line span{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted-2);text-transform:uppercase;}
  .work-row:hover .info h2{color:var(--accent);transition:color .3s ease;}
  .work-row .info h2{transition:color .3s ease;}

  /* fluid hover (cinematic sculpture) */
  .work-row.cinematic .frame{overflow:hidden;}
  .work-row.cinematic .frame img{transition:transform .8s ease, filter .4s ease;}
  .work-row.cinematic .frame.active img{filter:url(#fluid-distort);transform:scale(1.06);}

  /* mirror hover (parallel) */
  .work-row.parallel .frame{overflow:hidden;}
  .work-row.parallel .frame img{transition:transform .6s cubic-bezier(.16,.9,.35,1);}
  .work-row.parallel .frame:hover img{transform:scaleY(-1);}

  @media (max-width:720px){
    .work-row{grid-template-columns:32px 1fr;grid-template-rows:auto auto;}
    .work-row .frame{grid-column:2;order:1;}
    .work-row .idx{grid-column:1;order:1;}
    .work-row .info{grid-column:1/-1;order:2;margin-top:14px;}
    .section-head{flex-direction:column;align-items:flex-start;}
    .section-head .section-meta{text-align:left;}
  }

  /* ---------- detail page ---------- */
  .detail{padding:calc(var(--nav-h) + 40px) clamp(20px,4vw,48px) 80px;max-width:1180px;margin:0 auto;}
  .detail-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;margin-bottom:28px;}
  .detail-back:hover{color:var(--accent);}
  .detail-head{display:grid;grid-template-columns:2fr 1fr;gap:40px;padding-bottom:32px;border-bottom:1px solid var(--line);margin-bottom:36px;}
  .detail-head h1{font-size:clamp(32px,5vw,56px);color:var(--paper-bright);}
  .detail-head h1 .zh{display:block;font-size:.48em;color:var(--muted);margin-top:8px;}
  .detail-head .desc{margin-top:18px;color:var(--paper);font-size:16px;max-width:58ch;white-space:pre-line;}
  .detail-meta{display:flex;flex-direction:column;gap:14px;align-self:end;}
  .detail-meta .row{display:flex;justify-content:space-between;gap:16px;border-top:1px solid var(--line-soft);padding-top:8px;}
  .detail-meta .row span:first-child{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase;}
  .detail-meta .row span:last-child{font-size:13px;color:var(--paper);text-align:right;}

  .detail-gallery{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:40px;}
  .detail-gallery img{
    display:block;width:100%;height:auto;
    border:1px solid var(--line);background:var(--surface);
  }
  .detail-gallery.cols-1{grid-template-columns:1fr;}
  .detail-gallery.cols-3{grid-template-columns:1fr 1fr 1fr;}
  .detail-gallery.first-full img:first-child{grid-column:1 / -1;}

  .detail-gallery.hscroll{
    display:flex;gap:16px;overflow-x:auto;
    scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
    padding-bottom:14px;
  }
  .detail-gallery.hscroll::-webkit-scrollbar{height:4px;}
  .detail-gallery.hscroll::-webkit-scrollbar-thumb{background:var(--line);}
  .detail-gallery.hscroll > img, .detail-gallery.hscroll > .gallery-item{
    width:auto;height:min(52vh,460px);flex:0 0 auto;
    scroll-snap-align:start;
  }
  .detail-gallery .gallery-item{position:relative;display:block;}
  .detail-gallery .gallery-item img{
    height:100%;width:auto;display:block;
    border:1px solid var(--line);background:var(--surface);
  }
  .detail-gallery.cols-1 .gallery-item img,
  .detail-gallery.cols-3 .gallery-item img{width:100%;height:auto;}
  .model3d-trigger{cursor:pointer;}
  .model3d-badge{
    position:absolute;left:10px;bottom:10px;
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
    color:var(--paper-bright);background:rgba(10,10,12,.72);border:1px solid var(--line);
    padding:4px 8px;pointer-events:none;transition:background .2s ease;
  }
  .model3d-trigger:hover .model3d-badge{background:var(--accent);color:var(--ink);border-color:var(--accent);}

  .model3d-modal{
    position:fixed;inset:0;z-index:60;
    background:rgba(6,6,8,.94);
    display:none;align-items:center;justify-content:center;
    padding:64px 24px;
  }
  .model3d-modal.active{display:flex;}
  .model3d-close{
    position:absolute;top:20px;right:24px;
    width:42px;height:42px;border:1px solid var(--line);background:transparent;
    color:var(--paper);font-size:24px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:color .2s ease, border-color .2s ease;
  }
  .model3d-close:hover{color:var(--accent);border-color:var(--accent);}
  #model3d-viewer{width:100%;height:100%;max-width:1200px;max-height:900px;--poster-color:transparent;}

  .watch-icon{
    display:inline-flex;align-items:center;justify-content:center;
    width:40px;height:40px;margin-top:12px;
    font-size:20px;color:var(--accent);
    cursor:pointer;transition:transform .25s ease, color .25s ease;
  }
  .watch-icon:hover{color:var(--paper-bright);transform:scale(1.15);}
  .watch-icon.disabled{color:var(--muted-2);cursor:default;}
  .watch-icon.disabled:hover{color:var(--muted-2);transform:none;}

  .detail-nextprev{display:flex;justify-content:space-between;margin-top:56px;padding-top:24px;border-top:1px solid var(--line);gap:20px;flex-wrap:wrap;}
  .detail-nextprev a{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;}
  .detail-nextprev a:hover{color:var(--accent);}

  @media (max-width:760px){
    .detail-head{grid-template-columns:1fr;gap:24px;}
    .detail-meta{align-self:start;}
    .detail-gallery, .detail-gallery.cols-3{grid-template-columns:1fr;}
  }

  /* ---------- cv ---------- */
  .cv{padding:calc(var(--nav-h) + 40px) clamp(20px,4vw,48px) 80px;max-width:920px;margin:0 auto;}
  .cv h1{font-size:clamp(30px,5vw,48px);color:var(--paper-bright);margin-bottom:14px;}
  .cv-born{color:var(--muted);font-size:14.5px;margin-bottom:44px;}
  .cv-block{margin-bottom:44px;}
  .cv-block h3{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:18px;}
  .cv-entry{display:grid;grid-template-columns:88px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--line-soft);}
  .cv-entry .yr{font-family:var(--font-mono);font-size:12.5px;color:var(--muted-2);}
  .cv-entry .txt strong{display:block;color:var(--paper);font-weight:500;font-size:14.5px;}
  .cv-entry .txt span{display:block;color:var(--muted);font-size:13px;margin-top:2px;}
  @media (max-width:600px){.cv-entry{grid-template-columns:1fr;gap:4px;}}

  /* ---------- contact ---------- */
  .contact{padding:calc(var(--nav-h) + 40px) clamp(20px,4vw,48px) 100px;max-width:760px;margin:0 auto;}
  .contact h1{font-size:clamp(30px,5vw,48px);color:var(--paper-bright);margin-bottom:20px;}
  .contact > p{color:var(--muted);max-width:52ch;margin-bottom:44px;font-size:15px;}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--line);}
  .contact-item{padding:20px 0;border-bottom:1px solid var(--line);}
  .contact-item:nth-child(odd){padding-right:20px;}
  .contact-item .mono-label{display:block;margin-bottom:8px;}
  .contact-item a, .contact-item span.val{font-size:16px;color:var(--paper-bright);}
  .contact-item a:hover{color:var(--accent);}
  @media (max-width:560px){.contact-grid{grid-template-columns:1fr;}.contact-item:nth-child(odd){padding-right:0;}}

  .placeholder-badge{
    display:inline-flex;align-items:center;gap:6px;
    font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
    color:var(--muted-2);border:1px solid var(--line);padding:3px 8px;margin-top:18px;
  }
  .placeholder-badge::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--accent-dim);}

  @media (prefers-reduced-motion: reduce){
    *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  }