:root {
      --bg: #080c12;
      --fg: #f0ede8;
      --fg-dim: rgba(240,237,232,0.55);
      --fg-mid: rgba(240,237,232,0.65);
      --line: rgba(200,220,240,0.08);
      --line-strong: rgba(200,220,240,0.18);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { background: var(--bg); }
    body { background: var(--bg); color: var(--fg); font-family: -apple-system, 'SF Pro Display', 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', system-ui, sans-serif; font-synthesis: none; text-spacing-trim: space-first; -webkit-tap-highlight-color: transparent; }
    button, input { font-family: inherit; color: inherit; }
    body::after { content:''; position:fixed; inset:0; z-index:-1; pointer-events:none;
      background-image: linear-gradient(rgba(80,140,200,0.05) 1px,transparent 1px), linear-gradient(90deg,rgba(80,140,200,0.05) 1px,transparent 1px);
      background-size:40px 40px; }

    /* CURSOR — 仅在精确指针设备（鼠标/触控板）启用 */
    @media (pointer: fine) {
      body { cursor: none; }
      #cursor { position:fixed; top:0; left:0; pointer-events:none; z-index:9999; transform:translate(-50%,-50%); }
      #cursor-h { position:fixed; top:0; left:0; height:1px; width:100vw; background:var(--fg); opacity:.18; pointer-events:none; z-index:9997; transform:translateY(-50%); }
      #cursor-v { position:fixed; top:0; left:0; width:1px; height:100vh; background:var(--fg); opacity:.18; pointer-events:none; z-index:9997; transform:translateX(-50%); }
      #cursor-dot { position:fixed; width:10px; height:10px; background:transparent; border:1px solid var(--fg); transform:translate(-50%,-50%); pointer-events:none; z-index:9998; top:0; left:0; transition:opacity .2s; }
      #cursor-box { position:fixed; top:0; left:0; width:10px; height:10px; background:var(--fg); transform:translate(-50%,-50%); pointer-events:none; z-index:9999; opacity:0; transition:opacity .2s; }
      body.hovering #cursor-h,
      body.hovering #cursor-v { opacity:0; }
      body.hovering #cursor-dot { opacity:0; }
      body.hovering #cursor-box { opacity:1; }
      body.typing #cursor-h,
      body.typing #cursor-v,
      body.typing #cursor-dot,
      body.typing #cursor-box { opacity:0 !important; }
      .filter-btn, .page-btn, .load-data-btn, #cf-send, #cf-again,
      .hero-slide-link, .hero-arrow, .hero-dot, .pp-close, .jp-close,
      #back-to-top, .project-card, .journal-card, .pp-nav-btn, .jp-nav-btn,
      .tb-menu-links a, .tb-val a, #lightbox, #lightbox-close, #lightbox-prev, #lightbox-next,
      .lightbox-thumb, #hero-info,
      #pp-masonry-grid img, .wp-content img, .pp-award-images img, .pp-award-img-wrap img, .pp-gallery-grid img,
      .btn-pill, .hint-card .btn,
      .about-honor-item { cursor:none; }
    }

    /* NAV */
    nav { position:fixed; top:0; left:0; right:0; z-index:1600; display:flex; justify-content:space-between; align-items:center; padding:10px 48px 5px; mix-blend-mode:difference; transition:background .35s ease, border-color .35s ease; }
    .nav-scrolled { background:rgba(8,12,18,.5); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); mix-blend-mode:normal; }
    .nav-logo { font-size:16px; font-weight:400; letter-spacing:.08em; color:var(--fg); text-decoration:none; }
    .nav-logo strong { font-weight:700; }
    .nav-links { display:flex; gap:36px; list-style:none; align-items:center; }
    .nav-links a { font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg); text-decoration:none; transition:color .3s; opacity:.72; }
    .nav-links a:hover { opacity:1; }

    /* HERO */
    #hero { height:100vh; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative; overflow:hidden; z-index:3; background:var(--bg); }
    .hero-grid { position:absolute; inset:-20%; background-image: linear-gradient(rgba(80,140,200,0.05) 1px,transparent 1px), linear-gradient(90deg,rgba(80,140,200,0.05) 1px,transparent 1px); background-size:80px 80px; opacity:.6; will-change:transform; }
    .hero-divider-h { position:absolute; height:1px; width:100%; top:50%; background:var(--line-strong); will-change:transform; z-index:1; }
    .hero-divider-v { position:absolute; width:1px; height:100%; left:50%; background:var(--line-strong); will-change:transform; z-index:1; }

    /* FADE IN */
    .fade-in { opacity:0; transform:translateY(48px); }
    .fade-in.visible, .gsap-ready .fade-in { opacity:1; transform:translateY(0); }

    /* ABOUT */
    #about { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); position:sticky; top:0; z-index:1; }
    .about-left { padding:20px 80px 128px 48px; display:flex; flex-direction:column; justify-content:flex-start; align-items:flex-end; text-align:right; border-right:1px solid var(--line); }
    .section-label { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); display:flex; align-items:center; gap:14px; }
    .section-label::before { content:''; display:block; width:28px; height:1px; background:rgba(240,237,232,0.25); }
        .about-heading { font-weight:300; font-size:clamp(38px,4.2vw,64px); line-height:1.05; margin:24px 0 0; align-self:flex-start; }
    .about-heading em { font-style:italic; color:var(--fg-mid); }
    .about-heading-sep { color:var(--fg-dim); }
    .about-left .section-label { align-self:flex-start; }
    .about-credentials { font-size:12px; letter-spacing:.08em; color:var(--fg-dim); }
    .about-philosophy { margin-top:22px; }
    .about-subheading { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); margin:0 0 16px; font-weight:400; }
    .about-experience { margin-top:36px; }
    .about-honors { padding-top:0; }
    .about-honors-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px 12px; }
    .about-honor-item {
      min-width:0;
      display:block;
      position:relative;
      color:inherit;
      text-decoration:none;
      padding:8px 12px;
      margin:-8px -12px;
      isolation:isolate;
      transition:transform .35s cubic-bezier(.16,1,.3,1);
    }
    .about-honor-item::before {
      content:'';
      position:absolute; inset:0;
      background-image:var(--bg-cover);
      background-size:cover;
      background-position:center;
      opacity:0;
      filter:brightness(.55) saturate(.85);
      transition:opacity .5s ease;
      z-index:-1;
      pointer-events:none;
    }
    .about-honor-item:hover { transform:translateY(-3px); }
    .about-honor-item:hover::before { opacity:.35; }
    .about-honor-project { transition:color .35s ease; }
    .about-honor-list li { transition:color .35s ease; }
    .about-honor-item:hover .about-honor-project { color:var(--fg-dim); }
    .about-honor-item:hover .about-honor-list li,
    .about-honor-item:hover .about-honor-list li::before { color:var(--fg); }
    .about-honor-project { font-size:16px; font-weight:400; color:var(--fg); margin-bottom:6px; }
    .about-honor-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:2px; }
    .about-honor-list li { font-size:16px; line-height:1.95; color:var(--fg-dim); }
    .about-honor-list li::before { content:'> '; color:var(--fg-dim); }
    .about-philosophy {
      font-weight:300; font-size:16px; line-height:1.9;
      color:var(--fg-mid); max-width:548px;
      position:relative;
      padding:10px 14px;
      margin-right:-14px; margin-left:-14px;
      isolation:isolate;
      transition:transform .35s cubic-bezier(.16,1,.3,1), color .35s ease;
    }
    .about-philosophy::before {
      content:'';
      position:absolute; inset:0;
      background-image:var(--bg-cover);
      background-size:cover;
      background-position:center;
      opacity:0;
      filter:brightness(.5) saturate(.85);
      transition:opacity .6s ease;
      z-index:-1;
      pointer-events:none;
    }
    .about-philosophy:hover { transform:translateY(-3px); color:var(--fg); }
    .about-philosophy:hover::before { opacity:.35; }
    .about-experience { max-width:520px; }
    .about-exp-header { display:flex; align-items:center; gap:8px; background:none; border:none; padding:0; cursor:pointer; color:inherit; width:100%; }
    .about-exp-chevron { font-size:11px; color:var(--fg-dim); transition:transform .25s; line-height:1; }
    .about-exp-header.open .about-exp-chevron { transform:rotate(90deg); }
    .about-exp-dropdown { max-height:0; overflow:hidden; transition:max-height .35s ease; display:flex; flex-direction:column; gap:4px; }
    .about-exp-header.open + .about-exp-dropdown { max-height:120px; }
    .about-exp-item { font-size:16px; font-weight:300; color:var(--fg-dim); padding:2px 0; }
    .about-exp-current { font-size:16px; font-weight:400; color:var(--fg); margin-top:10px; margin-bottom:48px; }
    .about-meta { margin-top:40px; margin-bottom:48px; display:grid; grid-template-columns:1fr 1fr 1fr; gap:28px 20px; }
    .about-meta-num { font-size:36px; font-weight:300; line-height:1.1; font-variant-numeric:tabular-nums; }
    .count-up { display:inline-block; }
    .about-meta-unit { font-size:13px; font-weight:300; color:var(--fg-dim); }
    .about-meta-label { font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-dim); margin-top:3px; }
    .about-right { padding:20px 80px 128px 48px; display:flex; flex-direction:column; justify-content:flex-end; gap:0; background:#0a1018; }
    .about-img-wrap { width:100%; aspect-ratio:3/4; overflow:hidden; border:1px solid var(--line); }
    .about-portrait { width:100%; height:100%; object-fit:cover; display:block; }
    .about-portrait-wrap { width:160px; height:160px; overflow:hidden; border:1px solid var(--line); flex-shrink:0; }
    .about-portrait-img { width:100%; height:100%; object-fit:cover; display:block; }
    .about-left .about-portrait-wrap { margin:16px 0 12px; }
    .about-skills { display:flex; flex-wrap:wrap; gap:8px; }
    .skill-tag { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:6px 14px; border:1px solid var(--line-strong); color:var(--fg-dim); }

    /* PROJECTS */
    #projects { border-top:1px solid var(--line); position:relative; z-index:2; background:var(--bg); }
    .projects-header { padding:16px 48px 48px; display:flex; justify-content:space-between; align-items:flex-end; border-bottom:1px solid var(--line); }
    .projects-title { font-weight:300; font-size:clamp(38px,4.2vw,64px); }

    /* FILTER TABS */
    .filter-bar { padding:24px 48px; display:flex; gap:8px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
    .filter-btn { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; padding:7px 16px; border:1px solid var(--line-strong); background:none; color:var(--fg-mid);  transition:all .2s; }
    .filter-btn:hover, .filter-btn.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }

    /* PAGINATION */
    .page-btn { font-size:11px; letter-spacing:.15em; min-width:32px; height:32px; padding:0 10px; border:1px solid var(--line-strong); background:none; color:var(--fg-dim);  transition:all .2s; }
    .page-btn:hover:not([disabled]), .page-btn.active { background:var(--fg); color:var(--bg); border-color:var(--fg); }
    .page-btn[disabled] { opacity:.2; }
    .page-info { font-size:11px; letter-spacing:.05em; color:var(--fg-dim); margin-left:8px; }

    /* PROJECT GRID */
    .projects-grid { display:grid; grid-template-columns:repeat(5,1fr); }

    .project-card { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0;  position:relative; overflow:hidden; touch-action:manipulation; }
    .project-card:nth-child(5n) { border-right:none; }

    .project-card-img { width:100%; aspect-ratio:4/3; background:repeating-linear-gradient(-45deg,#0f1824 0,#0f1824 1px,#0a121c 1px,#0a121c 14px); display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
    .project-card-img img { filter:blur(12px) brightness(0.5); transform:scale(1.08); transition:filter 3s .25s cubic-bezier(.16,1,.3,1), transform 3s .25s cubic-bezier(.16,1,.3,1); }
    .project-card.visible .project-card-img img { filter:blur(0) brightness(1); transform:scale(1); }
    .project-card:hover .project-card-img img { transform:scale(1.04); }
    .project-card-img span { font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:rgba(240,237,232,0.2); }
    .project-card-region { position:absolute; top:12px; right:12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg); background:rgba(8,12,18,0.5); padding:6px 14px; border:1px solid var(--line-strong); opacity:0; transition:opacity 1s; pointer-events:none; z-index:2; backdrop-filter:blur(4px); }
    .project-card:hover .project-card-region { opacity:1; }

    .project-card-body { position:absolute; bottom:0; left:0; right:0; padding:40px 16px 14px; background:linear-gradient(transparent, rgba(8,12,18,.80) 100%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
    .project-card-num { display:none; }
    .project-card-type { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(240,237,232,.7); margin-bottom:0; display:flex; align-items:center; gap:8px; transition:transform 1s cubic-bezier(.16,1,.3,1); }
    .award-badge { position:absolute; top:12px; left:12px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.6)); }
    .project-card-name { font-weight:400; font-size:15px; line-height:1.4; letter-spacing:0.02em; margin-bottom:0; color:var(--fg); transition:transform 1s cubic-bezier(.16,1,.3,1); }
    .project-card:hover .project-card-type,
    .project-card:hover .project-card-name { transform:translateY(-4px); }
    .project-card-expand { display:none; }
    .expand-arrow { font-size:11px; letter-spacing:.2em; color:var(--fg-mid); text-transform:uppercase; }

    /* MODAL */
    /* EMPTY STATE */
    .projects-empty { padding:120px 48px; text-align:center; display:none; }
    .projects-empty h3 { font-weight:300; font-size:36px; color:var(--fg-mid); margin-bottom:16px; }
    .projects-empty p { font-size:11px; letter-spacing:.08em; color:var(--fg-dim); margin-bottom:36px; }
    .load-data-btn { font-size:11px; letter-spacing:.08em; padding:12px 36px; border:1px solid var(--fg); background:none; color:var(--fg);  transition:all .3s; }
    .load-data-btn:hover { background:var(--fg); color:var(--bg); }

    /* CONTACT */
    #contact { min-height:70vh; display:flex; flex-direction:column; justify-content:center; padding:120px 48px; border-top:1px solid var(--line); position:relative; overflow:hidden; z-index:2; background:var(--bg); }
    .contact-bg-text { position:absolute; font-size:clamp(100px,20vw,260px); font-weight:300; color:rgba(240,237,232,0.025); letter-spacing:-.02em; white-space:nowrap; bottom:-10px; left:40px; pointer-events:none; line-height:1; }
    .contact-inner { max-width:860px; }
    .contact-heading { font-weight:300; font-size:clamp(46px,6vw,92px); line-height:1; margin:36px 0 56px; }
    .contact-heading em { font-style:italic; color:var(--fg-mid); }
    .contact-form-wrap { margin-top:56px; max-width:640px; }
    .contact-form { display:flex; flex-direction:column; gap:16px; padding:40px; }
    .contact-form input, .contact-form textarea { background:transparent; border:1px solid var(--line); color:var(--fg); padding:14px 16px; font-size:14px; font-family:inherit; outline:none; transition:border-color .2s; }
    .contact-form input::placeholder, .contact-form textarea::placeholder { color:var(--fg-dim); }
    .contact-form input:focus, .contact-form textarea:focus { border-color:var(--line-strong); cursor:text; }
    .contact-form textarea { resize:none; line-height:1.6; }
    #cf-send { padding:14px; background:none; color:var(--fg-mid); border:1px solid var(--line-strong); font-size:12px; letter-spacing:.08em; text-transform:uppercase; transition:all .2s; }
    #cf-send:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }
    #cf-send:disabled { opacity:.4; }
    .contact-form-success { display:none; flex-direction:column; align-items:center; gap:20px; text-align:center; padding:80px 40px; }
    .contact-form-success-icon { width:56px; height:56px; border-radius:50%; border:1px solid var(--line-strong); display:flex; align-items:center; justify-content:center; font-size:20px; color:var(--fg); }
    .contact-form-success-text { font-size:14px; line-height:1.7; color:var(--fg-mid); }
    #cf-again { padding:12px 32px; background:none; border:1px solid var(--line-strong); color:var(--fg-mid); font-size:11px; letter-spacing:.08em; text-transform:uppercase;  transition:all .2s; }
    #cf-again:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }

    /* JOURNAL */
    #journal { border-top:1px solid var(--line); position:relative; z-index:2; background:var(--bg); }
    .journal-header { padding:80px 48px 48px; }
    .journal-title { font-weight:300; font-size:clamp(38px,4.2vw,64px); margin-top:36px; }
    .journal-grid { display:grid; grid-template-columns:repeat(5,1fr); border-top:1px solid var(--line); }
    .journal-card { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:0;  position:relative; overflow:hidden; }
    .journal-card:nth-child(5n) { border-right:none; }
    .journal-card.visible, .gsap-ready .journal-card { opacity:1; transform:translateY(0); }
    .journal-card-img { width:100%; aspect-ratio:16/9; background:#0e141c; overflow:hidden; position:relative; }
    .journal-card-img img { width:100%; height:100%; object-fit:cover; display:block; filter:blur(12px) brightness(0.5); transform:scale(1.08); transition:filter 3s .25s cubic-bezier(.16,1,.3,1), transform 3s .25s cubic-bezier(.16,1,.3,1); }
    .journal-card.visible .journal-card-img img { filter:blur(0) brightness(1); transform:scale(1); }
    .journal-card:hover .journal-card-img img { transform:scale(1.04); }
    .journal-card-body { padding:24px 20px 20px; position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent, rgba(8,12,18,.80) 100%); }
    .journal-card-date { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:rgba(240,237,232,.55); margin-bottom:6px; transition:transform 1s cubic-bezier(.16,1,.3,1); }
    .journal-card-title { font-weight:400; font-size:15px; line-height:1.4; color:var(--fg); transition:transform 1s cubic-bezier(.16,1,.3,1); }
    .journal-card:hover .journal-card-date,
    .journal-card:hover .journal-card-title { transform:translateY(-4px); }
    /* 无图卡片：独立设计语言 + 蓝图底纹 */
    .journal-card.no-image {
      background-color: #0c121a;
      background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 12px,
        rgba(80, 140, 200, 0.1) 12px,
        rgba(80, 140, 200, 0.1) 13px
      );
      position: relative;
    }
    .journal-card.no-image::before {
      content: '“';
      position: absolute;
      top: 16px;
      left: 0px;
      font-size: 56px;
      line-height: 1;
      color: rgba(200, 220, 240, 0.2);
      font-family: sans-serif;
      pointer-events: none;
    }
    .journal-card.no-image::after {
      content: '”';
      position: absolute;
      bottom: 16px;
      right: 10px;
      font-size: 56px;
      line-height: 1;
      color: rgba(200, 220, 240, 0.2);
      font-family: sans-serif;
      pointer-events: none;
    }
    .journal-card.no-image .journal-card-body {
      position: static;
      background: transparent;
      padding: 40px 24px 32px 28px;
    }
    .journal-card.no-image .journal-card-date {
      font-size: 10px;
      letter-spacing: .08em;
      color: rgba(240, 237, 232, 0.4);
    }
    .journal-card.no-image .journal-card-title {
      font-size: 16px;
      line-height: 1.55;
      font-weight: 400;
    }

    /* JOURNAL PAGE */
    #journal-page { position:fixed; inset:0; background:var(--bg); z-index:2500; opacity:0; pointer-events:none; transition:opacity .6s ease; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
    #journal-page.open { opacity:1; pointer-events:auto; }
    .jp-close { position:fixed; top:28px; right:48px; z-index:2600; background:rgba(8,12,18,.7); border:1px solid var(--line-strong); color:var(--fg-mid); width:40px; height:40px; display:none; align-items:center; justify-content:center;  font-size:16px; backdrop-filter:blur(8px); transition:all .2s; }
    .jp-close:hover { background:var(--fg); color:var(--bg); }
    #journal-page.open ~ .jp-close, .jp-close.open { display:flex; }
    .jp-header { padding:100px 48px 40px; border-bottom:1px solid var(--line); max-width:800px; }
    .jp-date { font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:16px; }
    .jp-title { font-weight:300; font-size:clamp(32px,4vw,56px); line-height:1.15; }
    .jp-content { padding:80px 48px; max-width:760px; font-size:16px; }
    .jp-nav { display:flex; gap:2px; padding:0 48px 48px; max-width:800px; }
    .jp-nav-btn { flex:1; padding:20px; border:1px solid var(--line); display:flex; flex-direction:column; gap:6px;  text-decoration:none; color:var(--fg); transition:background .2s; }
    .jp-nav-btn:hover { background:rgba(240,237,232,.04); }
    .jp-nav-btn:last-child { align-items:flex-end; text-align:right; }
    .jp-nav-dir { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); }
    .jp-nav-title { font-size:14px; }

    /* WordPress content dark theme */
    .wp-content { font-size:16px; line-height:1.85; color:var(--fg-mid); }
    .wp-content > * { margin-bottom:20px; }
    .wp-content h1, .wp-content h2, .wp-content h3, .wp-content h4 { color:var(--fg); font-weight:300; line-height:1.3; margin:36px 0 16px; }
    .wp-content h1 { font-size:clamp(26px,3vw,40px); }
    .wp-content h2 { font-size:clamp(22px,2.5vw,32px); }
    .wp-content h3 { font-size:clamp(18px,2vw,24px); }
    .wp-content p { margin-bottom:20px; }
    .wp-content a { color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line-strong); transition:border-color .2s; }
    .wp-content a:hover { border-color:var(--fg); }
    .wp-content img { max-width:100%; height:auto; display:block; margin:24px 0; }
    .wp-content figure { margin:24px 0; }
    .wp-content blockquote { border-left:2px solid var(--line-strong); padding-left:20px; margin:24px 0; color:var(--fg-dim); font-style:italic; }
    .wp-content ul, .wp-content ol { padding-left:24px; margin:16px 0; }
    .wp-content li { margin-bottom:8px; }
    .wp-content pre, .wp-content code { background:rgba(240,237,232,0.06); font-family:monospace; font-size:13px; }
    .wp-content pre { padding:16px; overflow-x:auto; }
    .wp-content code { padding:2px 6px; }

    /* LIGHTBOX */
    #lightbox { display:none; flex-direction:column; position:fixed; inset:0; z-index:5000; background:var(--bg);  }
    .lightbox-main { flex:1; display:flex; align-items:center; justify-content:center; position:relative; padding:0; min-height:0; }
    #lightbox-img { max-width:100%; max-height:100%; object-fit:contain; display:block; transform-origin:center center; }
    #lightbox-close { position:absolute; top:16px; right:24px; z-index:5002; background:rgba(8,12,18,.7); border:1px solid var(--line-strong); color:var(--fg-mid); font-size:18px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;  transition:all .2s; backdrop-filter:blur(6px); }
    #lightbox-close:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }
    #lightbox-prev, #lightbox-next { position:absolute; top:50%; transform:translateY(-50%); z-index:5002; background:rgba(8,12,18,.5); border:1px solid var(--line); color:var(--fg-mid); font-size:clamp(28px,3.5vw,48px); font-weight:200; width:56px; height:100px; border-radius:4px; display:flex; align-items:center; justify-content:center;  transition:all .2s; }
    #lightbox-prev { left:16px; }
    #lightbox-next { right:16px; }
    #lightbox-prev:hover, #lightbox-next:hover { background:rgba(240,237,232,.12); border-color:var(--line-strong); color:var(--fg); }
    .lightbox-thumbs { height:80px; display:flex; align-items:center; gap:6px; padding:0 24px; overflow-x:auto; overflow-y:hidden; border-top:1px solid var(--line); flex-shrink:0; }
    .lightbox-thumbs::-webkit-scrollbar { height:2px; }
    .lightbox-thumb { height:52px; width:auto; aspect-ratio:4/3; object-fit:cover; display:block; border:2px solid transparent;  transition:border-color .2s; flex-shrink:0; }
    .lightbox-thumb.active { border-color:var(--fg); }

    /* FOOTER */
    footer { border-top:1px solid var(--line); padding:80px 48px 0; background:var(--bg); position:relative; z-index:2; }
    footer::before { content:''; position:absolute; top:0; left:0; right:0; height:80px; background:linear-gradient(to bottom, rgba(240,237,232,0.025), transparent); pointer-events:none; }
    .title-block { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line-strong); margin:0 0 24px; background:var(--line); gap:1px; }
    .tb-cell { padding:14px 18px; background:var(--bg); min-height:62px; }
    .tb-cell.tb-full { grid-column:1 / -1; }
    .tb-cell.tb-stamp { grid-column:span 2; padding:24px 22px; display:flex; flex-direction:column; gap:8px; }
    .tb-cell.tb-find { display:flex; flex-direction:column; gap:10px; }
    .tb-key { font-family:ui-monospace,'SF Mono',Menlo,Monaco,'Courier New',monospace; font-size:9.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:6px; }
    .tb-val { font-size:13px; color:var(--fg); line-height:1.45; }
    .tb-val a { color:var(--fg); text-decoration:none; border-bottom:1px solid var(--line-strong); transition:border-color .2s; }
    .tb-val a:hover { border-color:var(--fg); }
    .tb-stamp-logo { font-size:clamp(34px,4.2vw,52px); font-weight:300; line-height:1; letter-spacing:.04em; color:var(--fg); }
    .tb-stamp-logo span { font-weight:400; color:var(--fg-mid); margin-left:8px; }
    .tb-stamp-tag { font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:var(--fg-dim); }
    .tb-stamp-quote { font-size:13px; font-style:italic; color:var(--fg-mid); margin-top:auto; }
    .tb-qr { width:80px; height:80px; object-fit:contain; display:block; }
    .tb-menu-links { display:flex; flex-wrap:wrap; gap:0 18px; }
    .tb-menu-links a { color:var(--fg-mid); text-decoration:none; font-size:14px; transition:color .2s; }
    .tb-menu-links a:hover { color:var(--fg); }

    /* BACK TO TOP */
    #back-to-top { position:fixed; bottom:36px; right:36px; z-index:1500; width:38px; height:38px; border:1px solid var(--line-strong); background:rgba(8,12,18,.75); color:var(--fg-dim); font-size:16px; display:flex; align-items:center; justify-content:center;  opacity:0; pointer-events:none; transition:opacity .35s, background .2s; backdrop-filter:blur(6px); }
    #back-to-top.visible { opacity:1; pointer-events:all; }
    #back-to-top:hover { background:var(--fg); color:var(--bg); }

    /* HERO SLIDESHOW */
    .hero-slide { position:absolute; inset:0; opacity:0; pointer-events:none; }
    .hero-slide-bg { position:absolute; inset:0; background-size:cover; background-position:center; }
    .hero-slide-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(8,12,18,.85) 0%, rgba(8,12,18,.2) 50%, rgba(8,12,18,.35) 100%); }
    #hero-info { position:absolute; bottom:80px; left:48px; right:48px; display:none; z-index:2;  }
    .hero-slide-label { font-size:10.5px; letter-spacing:.10em; text-transform:uppercase; color:rgba(240,237,232,.5); margin-bottom:14px; display:flex; align-items:center; gap:12px; will-change:transform; }
    .hero-slide-label::before { content:''; display:block; width:24px; height:1px; background:rgba(240,237,232,.4); }
    .hero-slide-title { font-weight:300; font-size:clamp(34px,4.2vw,64px); line-height:1.1; color:var(--fg); max-width:700px; will-change:transform; }
    .hero-slide-row { margin-top:16px; display:flex; align-items:center; gap:14px; }
    .hero-slide-meta { font-size:11px; letter-spacing:.10em; text-transform:uppercase; color:rgba(240,237,232,.5); will-change:transform; }
    .hero-slide-link { font-size:11px; letter-spacing:.08em; color:var(--fg); background:rgba(240,237,232,0.12); border:1px solid rgba(240,237,232,0.18); padding:6px 18px; border-radius:100px;  transition:all .3s; white-space:nowrap; will-change:transform; }
    .hero-slide-link:hover { background:rgba(240,237,232,0.24); border-color:rgba(240,237,232,0.35); }
    .hero-counter { position:absolute; bottom:80px; right:48px; font-size:40px; font-weight:300; color:rgba(240,237,232,.15); line-height:1; z-index:2; }
    .hero-dots { position:absolute; bottom:48px; left:48px; display:flex; gap:8px; z-index:2; }
    .hero-dot { width:24px; height:2px; background:rgba(240,237,232,.3);  transition:all .4s; }
    .hero-dot.active { width:40px; background:rgba(240,237,232,.9); }
    .hero-progress { position:absolute; bottom:0; left:0; height:1px; background:rgba(240,237,232,.6); z-index:2; }
    .hero-arrow { display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:none; border:none; color:rgba(240,237,232,.75); padding:8px 12px; font-size:60px; font-weight:200; line-height:1; align-items:center; justify-content:center; transition:color .3s, transform .3s; text-shadow:0 1px 12px rgba(0,0,0,.5); }
    .hero-arrow:hover { color:var(--fg); transform:translateY(-50%) scale(1.15); }
    .hero-arrow-left { left:20px; }
    .hero-arrow-right { right:20px; }

    /* PROJECT LANDING PAGE */
    #project-page { position:fixed; inset:0; background:var(--bg); z-index:2500; opacity:0; pointer-events:none; transition:opacity 1s ease; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; }
    #project-page.open { opacity:1; pointer-events:auto; }
    .pp-close { position:fixed; top:28px; right:48px; z-index:2600; background:rgba(8,12,18,.7); border:1px solid var(--line-strong); color:var(--fg-mid); width:40px; height:40px; display:none; align-items:center; justify-content:center;  font-size:16px; backdrop-filter:blur(8px); transition:all .2s; }
    .pp-close:hover { background:var(--fg); color:var(--bg); }
    #project-page.open ~ .pp-close, .pp-close.open { display:flex; }
    .pp-hero { position:relative; }
    .pp-hero-img { width:100%; height:auto; display:block; }
    .pp-hero-pattern { width:100%; height:100%; background:repeating-linear-gradient(-45deg,#0f1824 0,#0f1824 1px,#0a121c 1px,#0a121c 18px); }
    .pp-hero-content { padding:32px 48px 24px; border-bottom:1px solid var(--line); }
    .pp-hero-type { font-size:10.5px; letter-spacing:.10em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:10px; display:flex; align-items:center; gap:10px; }
    .pp-hero-type::before { content:''; display:block; width:20px; height:1px; background:var(--fg-dim); }
    .pp-hero-name { font-weight:400; font-size:clamp(22px,2.8vw,40px); line-height:1.15; }
    .pp-meta-bar { display:inline-grid; grid-template-columns:repeat(4,auto); border-bottom:1px solid var(--line); }
    .pp-meta-item { padding:18px 20px; border-right:1px solid var(--line); }
    .pp-meta-item:last-child { border-right:none; }
    .pp-meta-val { font-size:13px; color:var(--fg); margin-bottom:3px; }
    .pp-meta-key { font-size:10px; letter-spacing:0; text-transform:none; color:var(--fg-dim); }
    .pp-body { display:block; border-bottom:1px solid var(--line); }
    .pp-body-left { padding:40px 48px; }
    .pp-body-right { padding:40px 48px; border-top:1px solid var(--line); }
    .pp-section-label { font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); margin-bottom:10px; display:flex; align-items:center; gap:12px; }
    .pp-section-label::before { content:''; display:block; width:20px; height:1px; background:rgba(240,237,232,0.25); }
    .pp-desc { font-weight:300; font-size:16px; line-height:1.85; color:var(--fg-mid); white-space:pre-line; }
    .pp-awards { padding:36px 48px; border-bottom:1px solid var(--line); }
    .pp-awards-text { font-weight:300; font-size:16px; line-height:1.85; color:var(--fg-mid); margin-top:16px; }
    .pp-award-header { display:flex; align-items:center; padding:6px 0; cursor:pointer; transition:color .2s; color:var(--fg-mid); gap:6px; }
    .pp-award-header:hover { color:var(--fg); }
    .pp-award-arrow { transition:transform .3s cubic-bezier(.16,1,.3,1); color:var(--fg-dim); flex-shrink:0; }
    .pp-award-header.expanded .pp-award-arrow { transform:rotate(180deg); }
    .pp-award-img-wrap { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.16,1,.3,1), opacity .3s, padding .3s; opacity:0; padding-bottom:0; }
    .pp-award-img-wrap.expanded { max-height:200px; opacity:1; padding-bottom:8px; }
    .pp-award-img-wrap img { width:140px; height:100px; object-fit:cover; display:block; border:1px solid var(--line); transition:opacity .2s; }
    .pp-award-img-wrap img:hover { opacity:.85; }
    .pp-award-images { display:none; }
    .pp-info-section { padding:24px 48px 0; border-bottom:1px solid var(--line); }
    .pp-team-section { padding:24px 48px 0; border-bottom:1px solid var(--line); }
    .pp-team-content { padding:0 0 24px; font-weight:300; font-size:16px; line-height:1.85; color:var(--fg-mid); white-space:pre-line; }
    .pp-info-rows { display:flex; flex-direction:column; padding-bottom:24px; }
    .pp-info-row { display:inline-grid; gap:24px; }
    .pp-info-row.col-1 { grid-template-columns:200px; }
    .pp-info-row.col-2 { grid-template-columns:200px auto; }
    .pp-info-item { padding:3px 0; border:none; }
    .pp-info-val { font-size:13px; color:var(--fg); line-height:1.35; white-space:pre-line; }
    .pp-info-key { font-size:10px; letter-spacing:0; text-transform:none; color:var(--fg-dim); line-height:1.3; margin-top:2px; }
    .pp-gallery { padding:48px 0; }
    .pp-gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; }
    .pp-gallery-grid img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block;  transition:opacity .3s; }
    .pp-gallery-grid img:hover { opacity:.85; }
    .pp-gallery-header { padding:0 48px 28px; }
    .pp-nav { display:flex; gap:2px; padding:0 48px 48px; }
    .pp-nav-btn { flex:1; padding:20px; border:none; display:flex; flex-direction:column; gap:6px;  text-decoration:none; color:var(--fg); transition:background .2s; }
    .pp-nav-btn:hover { background:rgba(240,237,232,.04); }
    .pp-nav-btn:last-child { align-items:flex-end; text-align:right; }
    .pp-nav-dir { font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); }
    .pp-nav-name { font-size:14px; }

    /* Masonry layout (JS-justified rows on all viewports) */
    .pp-masonry { padding:48px; }
    .pp-masonry-grid { display:flex; flex-direction:column; gap:8px; }
    .pp-row-top, .pp-row-justified { display:flex; gap:8px; }
    .pp-row-top img, .pp-row-justified img { display:block; max-width:100%; height:auto; }

    /* Masonry image staggered slide-up — GSAP handles animation */
    #pp-masonry-grid img { will-change:transform; transition:opacity .3s ease; }

    /* SCROLLBAR */
    ::-webkit-scrollbar { width:4px; } ::-webkit-scrollbar-track { background:var(--bg); } ::-webkit-scrollbar-thumb { background:var(--line-strong); }

    /* VIEW TRANSITIONS API */
    ::view-transition-old(root) { animation: vt-exit .35s cubic-bezier(.16,1,.3,1); }
    ::view-transition-new(root) { animation: vt-enter .45s .05s cubic-bezier(.16,1,.3,1) both; }
    ::view-transition-image-pair(project-hero) { isolation: isolate; }
    ::view-transition-old(project-hero) { animation: vt-img-old .35s cubic-bezier(.5,0,1,1); object-fit:cover; }
    ::view-transition-new(project-hero) { animation: vt-img-new .55s .05s cubic-bezier(.16,1,.3,1) both; object-fit:cover; }
    @keyframes vt-exit { to { opacity:0; transform:translateY(-12px); } }
    @keyframes vt-enter { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
    @keyframes vt-img-old { to { opacity:0; } }
    @keyframes vt-img-new { from { opacity:0; transform:scale(1.03); } to { opacity:1; transform:scale(1); } }

    @media(max-width:900px) {
      nav { padding:20px 24px; }
      #about { grid-template-columns:1fr; position:static; }
      .about-left { padding:80px 32px 128px; border-right:none; align-items:flex-start; text-align:left; }
      .about-left .section-label { flex-direction:row; }
      .about-right { padding:48px 32px 128px; border-top:1px solid var(--line); justify-content:flex-start; }
      .about-meta { grid-template-columns:1fr 1fr; gap:24px; }
      .about-honors { padding-top:0; }
      .about-honors-grid { grid-template-columns:1fr 1fr; }
      .projects-grid { grid-template-columns:repeat(3,1fr); }
      .project-card:nth-child(5n) { border-right:1px solid var(--line); }
      .project-card:nth-child(3n) { border-right:none; }
      .pp-masonry { padding:32px; }
      .pp-meta-bar { grid-template-columns:repeat(3,auto); }
      .journal-grid { grid-template-columns:repeat(3,1fr); }
      .journal-card:nth-child(5n) { border-right:1px solid var(--line); }
      .journal-card:nth-child(3n) { border-right:none; }
      .jp-header, .jp-content, .jp-nav { padding-left:24px; padding-right:24px; }
      .title-block { grid-template-columns:repeat(2,1fr); }
    }
    @media(max-width:600px) {
      .hero-arrow { font-size:32px; padding:6px 10px; }
      .projects-grid { grid-template-columns:repeat(1,1fr); }
      .project-card { border-right:none; }
      .about-left { padding:60px 20px 128px; align-items:flex-start; text-align:left; }
      .about-left .section-label { flex-direction:row; }
      .about-right { padding:32px 20px 128px; justify-content:flex-start; }
      .about-meta { grid-template-columns:1fr 1fr; gap:20px 16px; }
      .about-meta-num { font-size:28px; }
      .about-honors-grid { grid-template-columns:1fr; }
      .about-honors { padding-top:32px; border-top:1px solid var(--line); }
      .pp-masonry { padding:20px; }
      .pp-meta-bar { grid-template-columns:repeat(2,auto); }
      .pp-info-row.col-2 { grid-template-columns:auto; }
      .pp-info-section { padding:32px 20px 0; }
      .pp-team-section { padding:32px 20px 0; }
      .contact-form-wrap { max-width:none; }
      .contact-form { padding:28px; }
      .contact-form-success { padding:60px 28px; }
      footer { padding:60px 20px 0; }
      .title-block { grid-template-columns:1fr; }
      .tb-cell { padding:14px 16px; }
      .tb-cell.tb-stamp { padding:20px 16px; }
      .journal-grid { grid-template-columns:1fr; }
      .journal-card:nth-child(2n) { border-right:1px solid var(--line); }
      .journal-card { border-right:none; }
      .journal-header { padding:60px 20px 32px; }
      .jp-header, .jp-content, .jp-nav { padding-left:20px; padding-right:20px; }
      .jp-close { right:20px; }
    }

    /* ── vCard CTA button (copied from contact-card.html) ── */
    .about-vcard-cta { margin-top:14px; }

    .btn-pill {
      display:inline-flex; align-items:center; gap:6px;
      padding:6px 12px 6px 10px;
      font-size:13px; font-family:inherit; letter-spacing:.06em;
      color:var(--fg);
      background:rgba(240,237,232,0.04);
      border:1px solid var(--line-strong);
      border-radius:999px;
      cursor:pointer;
      white-space:nowrap;
      transition:background .2s, border-color .2s, transform .2s;
    }
    .btn-pill:hover {
      background:rgba(240,237,232,0.10);
      border-color:rgba(200,220,240,0.32);
      transform:translateY(-1px);
    }
    .btn-pill:active { transform:translateY(0); background:rgba(240,237,232,0.06); }
    .btn-pill svg { flex-shrink:0; opacity:.85; }

    #btn-vcard {
      background:var(--fg); color:var(--bg); border-color:var(--fg);
      font-size:11px; letter-spacing:.08em;
      animation:ctaPulse 2.4s ease-in-out infinite;
    }
    #btn-vcard svg { opacity:1; }
    #btn-vcard:hover {
      animation:none; transform:translateY(-1px);
      background:var(--fg); border-color:var(--fg); opacity:.92;
    }
    @keyframes ctaPulse {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(240,237,232,0.55), 0 0 0 0 rgba(240,237,232,0.25);
        transform:scale(1);
      }
      50% {
        box-shadow: 0 0 0 8px rgba(240,237,232,0), 0 0 0 16px rgba(240,237,232,0);
        transform:scale(1.06);
      }
    }

    /* WeChat-browser hint overlay */
    .hint-overlay {
      position:fixed; inset:0; z-index:9000;
      display:none; align-items:center; justify-content:center;
      padding:24px;
      background:rgba(8,12,18,0.85);
      backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    }
    .hint-overlay.show { display:flex; }
    .hint-arrow {
      position:absolute; top:14px; right:18px;
      font-size:44px; line-height:1; color:var(--fg);
      animation:hintArrow 1.4s ease-in-out infinite;
    }
    @keyframes hintArrow {
      0%, 100% { transform:translate(0,0); opacity:1; }
      50% { transform:translate(6px,-6px); opacity:.55; }
    }
    .hint-card {
      width:100%; max-width:320px; padding:28px 24px;
      border:1px solid var(--line-strong); background:rgba(8,12,18,0.96);
      text-align:center;
    }
    .hint-title { font-size:16px; letter-spacing:.06em; color:var(--fg); margin-bottom:14px; }
    .hint-desc { font-size:13px; line-height:1.95; color:var(--fg-mid); margin-bottom:22px; }
    .hint-desc .dots {
      display:inline-block; padding:1px 8px 2px; margin:0 2px;
      border:1px solid var(--line-strong); border-radius:4px;
      font-size:12px; letter-spacing:.1em; color:var(--fg);
      vertical-align:middle;
    }
    .hint-desc b { color:var(--fg); font-weight:400; }
    .hint-card .btn {
      display:block; width:100%; padding:14px;
      font-size:14px; font-family:inherit; letter-spacing:.06em;
      border:1px solid var(--line-strong);
      background:none; color:var(--fg);
      cursor:pointer; text-decoration:none; text-align:center;
      transition:all .2s;
    }
    .hint-card .btn-secondary:active { background:rgba(240,237,232,0.06); }