:root {
      /* ── Core ── */
      --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);

      /* ── Surface layers ── */
      --surface-1: #0a1018;          /* about right panel */
      --surface-2: #0c121a;          /* no-image journal card */
      --surface-3: #0e141c;          /* journal card image placeholder */
      --surface-pattern-a: #0f1824;  /* card placeholder stripe – lighter */
      --surface-pattern-b: #0a121c;  /* card placeholder stripe – darker */
      --surface-fallback: #111;      /* JS inline image fallback bg */

      /* ── Blueprint atmosphere ── */
      --blueprint-grid: rgba(80,140,200,0.05);
      --blueprint-grid-strong: rgba(80,140,200,0.10);
      --blueprint-quote: rgba(200,220,240,0.20);

      /* ── Chrome UI semi-transparent bg (based on --bg) ── */
      --chrome-bg-50: rgba(8,12,18,0.50);
      --chrome-bg-70: rgba(8,12,18,0.70);
      --chrome-bg-75: rgba(8,12,18,0.75);
      --chrome-bg-85: rgba(8,12,18,0.85);
      --chrome-bg-96: rgba(8,12,18,0.96);

      /* ── Chrome highlights (based on --fg) ── */
      --hl-soft: rgba(240,237,232,0.025);
      --hl-04: rgba(240,237,232,0.04);
      --hl-06: rgba(240,237,232,0.06);
      --hl-10: rgba(240,237,232,0.10);
      --hl-12: rgba(240,237,232,0.12);
      --hl-25: rgba(240,237,232,0.25);
      --hl-strong-border: rgba(200,220,240,0.32);
      --cta-pulse-1: rgba(240,237,232,0.55);
      --cta-pulse-2: rgba(240,237,232,0.25);

      /* ── Shadows ── */
      --shadow-badge: 0 2px 6px rgba(0,0,0,0.6);
      --shadow-text: 0 1px 12px rgba(0,0,0,0.5);

      /* ── On-photo tokens (always over images — DO NOT swap with theme) ── */
      --on-photo-fg: #f0ede8;
      --on-photo-fg-90: rgba(240,237,232,0.9);
      --on-photo-fg-75: rgba(240,237,232,0.75);
      --on-photo-fg-70: rgba(240,237,232,0.7);
      --on-photo-fg-60: rgba(240,237,232,0.6);
      --on-photo-fg-55: rgba(240,237,232,0.55);
      --on-photo-fg-50: rgba(240,237,232,0.5);
      --on-photo-fg-40: rgba(240,237,232,0.4);
      --on-photo-fg-35: rgba(240,237,232,0.35);
      --on-photo-fg-30: rgba(240,237,232,0.3);
      --on-photo-fg-24: rgba(240,237,232,0.24);
      --on-photo-fg-20: rgba(240,237,232,0.2);
      --on-photo-fg-18: rgba(240,237,232,0.18);
      --on-photo-fg-15: rgba(240,237,232,0.15);
      --on-photo-fg-12: rgba(240,237,232,0.12);
      --on-photo-bg-strong: rgba(8,12,18,0.85);
      --on-photo-bg-mid: rgba(8,12,18,0.35);
      --on-photo-bg-light: rgba(8,12,18,0.2);
      --on-photo-card-grad: rgba(8,12,18,0.80);
      --on-photo-region-bg: rgba(8,12,18,0.5);
    }
    *, *::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(var(--blueprint-grid) 1px,transparent 1px), linear-gradient(90deg,var(--blueprint-grid) 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,
      #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, .theme-toggle { cursor:none; }
    }

    /* NAV */
    nav { position:fixed; top:0; left:0; right:0; z-index:2700; 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:var(--chrome-bg-50); 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; }
    .nav-end { display:flex; align-items:center; gap:24px; }

    /* THEME TOGGLE */
    .theme-toggle {
      background:none;
      border:1px solid var(--line-strong);
      color:var(--fg);
      width:30px; height:30px;
      border-radius:50%;
      display:inline-flex; align-items:center; justify-content:center;
      padding:0;
      transition:background .2s, color .2s, border-color .2s, transform .3s cubic-bezier(.16,1,.3,1);
      opacity:.85;
    }
    .theme-toggle:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); opacity:1; transform:rotate(20deg); }
    .theme-toggle .theme-icon { display:block; }
    .theme-toggle .theme-icon-sun { display:none; }
    [data-theme="light"] .theme-toggle .theme-icon-moon { display:none; }
    [data-theme="light"] .theme-toggle .theme-icon-sun { display:block; }
    .theme-toggle.is-close .theme-icon { display:none; }
    .theme-toggle.is-close::after { content:'✕'; font-size:16px; font-weight:300; line-height: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(var(--blueprint-grid) 1px,transparent 1px), linear-gradient(90deg,var(--blueprint-grid) 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; scroll-margin-top:100px; }
    .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:12px; 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:var(--hl-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:12px; 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:14px; 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:12px; font-weight:300; color:var(--fg-dim); }
    .about-meta-label { font-size:12px; 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:var(--surface-1); }
    .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:12px; 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); scroll-margin-top:100px; }
    .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:12px; 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:12px; 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:12px; 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,var(--surface-pattern-a) 0,var(--surface-pattern-a) 1px,var(--surface-pattern-b) 1px,var(--surface-pattern-b) 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:var(--on-photo-fg-20); }
    .project-card-region { position:absolute; top:12px; right:12px; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--on-photo-fg); background:var(--on-photo-region-bg); 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, var(--on-photo-card-grad) 100%); transition:transform .4s cubic-bezier(.16,1,.3,1); }
    .project-card-num { display:none; }
    .project-card-type { font-size:12px; font-weight:300; letter-spacing:.08em; text-transform:uppercase; color:var(--on-photo-fg-70); 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; color:var(--on-photo-fg); filter:drop-shadow(var(--shadow-badge)); }
    .project-card-name { font-weight:400; font-size:16px; line-height:1.4; letter-spacing:0.02em; margin-bottom:0; color:var(--on-photo-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:12px; 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); scroll-margin-top:100px; }
    .contact-bg-text { position:absolute; font-size:clamp(100px,20vw,260px); font-weight:300; color:var(--hl-soft); 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); scroll-margin-top:100px; }
    .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:var(--surface-3); 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, var(--on-photo-card-grad) 100%); }
    .journal-card-date { font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--on-photo-fg-55); margin-bottom:6px; transition:transform 1s cubic-bezier(.16,1,.3,1); }
    .journal-card-title { font-weight:400; font-size:16px; line-height:1.4; color:var(--on-photo-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: var(--surface-2);
      background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 12px,
        var(--blueprint-grid-strong) 12px,
        var(--blueprint-grid-strong) 13px
      );
      position: relative;
    }
    .journal-card.no-image::before {
      content: '“';
      position: absolute;
      top: 16px;
      left: 0px;
      font-size: 56px;
      line-height: 1;
      color: var(--blueprint-quote);
      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: var(--blueprint-quote);
      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: 12px;
      letter-spacing: .08em;
      color: var(--fg-dim);
    }
    .journal-card.no-image .journal-card-title {
      font-size: 16px;
      line-height: 1.55;
      font-weight: 400;
      color: var(--fg);
    }

    /* 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-header { padding:100px 48px 40px; border-bottom:1px solid var(--line); max-width:800px; }
    .jp-date { font-size:12px; 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:var(--hl-04); }
    .jp-nav-btn:last-child { align-items:flex-end; text-align:right; }
    .jp-nav-dir { font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); }
    .jp-nav-title { font-size:16px; }

    /* 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:var(--hl-06); font-family:monospace; font-size:14px; }
    .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:var(--chrome-bg-70); border:1px solid var(--line-strong); color:var(--fg-mid); font-size:18px; width:44px; height:44px; border-radius:50%; 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:var(--chrome-bg-50); 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:var(--hl-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, var(--hl-soft), transparent); pointer-events:none; }
    .title-block { display:grid; grid-template-columns:repeat(4,1fr); border:2px solid var(--line-strong); margin:0 0 24px; background:var(--line); gap:2px; }
    .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:var(--chrome-bg-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, var(--on-photo-bg-strong) 0%, var(--on-photo-bg-light) 50%, var(--on-photo-bg-mid) 100%); }
    #hero-info { position:absolute; bottom:80px; left:48px; right:48px; display:none; z-index:2;  }
    .hero-slide-label { font-size:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--on-photo-fg-50); 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:var(--on-photo-fg-40); }
    .hero-slide-title { font-weight:300; font-size:34px; line-height:1.1; color:var(--on-photo-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:12px; letter-spacing:.10em; text-transform:uppercase; color:var(--on-photo-fg-50); will-change:transform; }
    .hero-slide-link { font-size:12px; letter-spacing:.08em; color:var(--on-photo-fg); background:var(--on-photo-fg-12); border:1px solid var(--on-photo-fg-18); padding:6px 18px; border-radius:100px;  transition:all .3s; white-space:nowrap; will-change:transform; }
    .hero-slide-link:hover { background:var(--on-photo-fg-24); border-color:var(--on-photo-fg-35); }
    .hero-counter { position:absolute; bottom:80px; right:48px; font-size:40px; font-weight:300; color:var(--on-photo-fg-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:var(--on-photo-fg-30);  transition:all .4s; }
    .hero-dot.active { width:40px; background:var(--on-photo-fg-90); }
    .hero-progress { position:absolute; bottom:0; left:0; height:1px; background:var(--on-photo-fg-60); z-index:2; }
    .hero-arrow { display:none; position:absolute; top:50%; transform:translateY(-50%); z-index:3; background:none; border:none; color:var(--on-photo-fg-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:var(--shadow-text); }
    .hero-arrow:hover { color:var(--on-photo-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-hero { position:relative; }
    .pp-hero-img { width:100%; height:auto; display:block; }
    .pp-hero-pattern { width:100%; height:100%; background:repeating-linear-gradient(-45deg,var(--surface-pattern-a) 0,var(--surface-pattern-a) 1px,var(--surface-pattern-b) 1px,var(--surface-pattern-b) 18px); }
    .pp-hero-content { padding:32px 48px 24px; border-bottom:1px solid var(--line); }
    .pp-hero-type { font-size:12px; 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:14px; color:var(--fg); margin-bottom:3px; }
    .pp-meta-key { font-size:12px; 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:12px; 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:var(--hl-25); }
    .pp-desc { font-weight:400; 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:400; 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:400; 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:14px; color:var(--fg); line-height:1.35; white-space:pre-line; }
    .pp-info-key { font-size:12px; 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:var(--hl-04); }
    .pp-nav-btn:last-child { align-items:flex-end; text-align:right; }
    .pp-nav-dir { font-size:12px; letter-spacing:.05em; text-transform:uppercase; color:var(--fg-dim); }
    .pp-nav-name { font-size:16px; }

    /* 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); }
      /* font-size scaling: ~+15-20% for mobile readability */
      .tb-key { font-size:11px; }
      .project-card-img span { font-size:12px; }
      .about-exp-chevron, .expand-arrow, .projects-empty p, #cf-again, .tb-stamp-tag { font-size:13px; }
      .section-label, .about-credentials, .about-subheading, .about-meta-unit, .about-meta-label,
      .skill-tag, .filter-btn, .page-btn, .page-info, .project-card-type, .project-card-region,
      .hero-slide-label, .hero-slide-meta, .hero-slide-link, .pp-hero-type, .pp-meta-key,
      .pp-section-label, .pp-info-key, .pp-nav-dir, .jp-date, .jp-nav-dir, .journal-card-date,
      .journal-card.no-image .journal-card-date, #cf-send, #btn-vcard, .hint-desc .dots { font-size:14px; }
      .tb-val, .tb-stamp-quote, .hint-desc { font-size:15px; }
      .about-honor-list li, .pp-meta-val, .pp-info-val,
      .contact-form input, .contact-form textarea, .contact-form-success-text,
      .tb-menu-links a, .wp-content pre, .wp-content code, .btn-pill, .hint-card .btn { font-size:17px; }
      .nav-logo, .about-honor-project, .about-philosophy, .about-exp-item, .about-exp-current,
      .project-card-name, .pp-desc, .pp-awards-text, .pp-team-content,
      .jp-content, .jp-nav-title, .pp-nav-name, .journal-card-title,
      .journal-card.no-image .journal-card-title, .wp-content, .hint-title,
      #back-to-top { font-size:18px; }
      .pp-desc { line-height:1.7; }
      .contact-form-success-icon { font-size:24px; }
      .hero-slide-title { font-size:40px; }
      .hero-counter { font-size:47px; }
      .hint-arrow { font-size:52px; }
      /* clamp() minimums raised ~+15% */
      .about-heading, .projects-title, .journal-title { font-size:clamp(44px,4.2vw,64px); }
      .jp-title { font-size:clamp(37px,4vw,56px); }
      .pp-hero-name { font-size:clamp(26px,2.8vw,40px); }
      .tb-stamp-logo { font-size:clamp(39px,4.2vw,52px); }
      .contact-heading { font-size:clamp(53px,6vw,92px); }
      .wp-content h1 { font-size:clamp(30px,3vw,40px); }
      .wp-content h2 { font-size:clamp(26px,2.5vw,32px); }
      .wp-content h3 { font-size:clamp(21px,2vw,24px); }
      #lightbox-prev, #lightbox-next { font-size:clamp(33px,3.5vw,48px); }
    }
    @media(max-width:600px) {
      .hero-arrow { 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-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:repeat(2,1fr); }
      .journal-card:nth-child(2n) { border-right:none; }
      .journal-header { padding:60px 20px 32px; }
      .jp-header, .jp-content, .jp-nav { padding-left:20px; padding-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:14px; font-family:inherit; letter-spacing:.06em;
      color:var(--fg);
      background:var(--hl-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:var(--hl-10);
      border-color:var(--hl-strong-border);
      transform:translateY(-1px);
    }
    .btn-pill:active { transform:translateY(0); background:var(--hl-06); }
    .btn-pill svg { flex-shrink:0; opacity:.85; }

    #btn-vcard {
      background:var(--fg); color:var(--bg); border-color:var(--fg);
      font-size:12px; 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 var(--cta-pulse-1), 0 0 0 0 var(--cta-pulse-2);
        transform:scale(1);
      }
      50% {
        box-shadow: 0 0 0 8px transparent, 0 0 0 16px transparent;
        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:var(--chrome-bg-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:var(--chrome-bg-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:var(--hl-06); }

    /* ─────────────────────────────────────────────────────────────
       LIGHT THEME — 暖米纸张感
       触发条件:<html data-theme="light"> 由 head 内联脚本设置
       ───────────────────────────────────────────────────────────── */
    [data-theme="light"] {
      /* Core */
      --bg: #f5f3ef;
      --fg: #1a1f26;
      --fg-dim: rgba(26,31,38,0.55);
      --fg-mid: rgba(26,31,38,0.70);
      --line: rgba(40,60,90,0.10);
      --line-strong: rgba(40,60,90,0.22);

      /* Surface layers — 比 bg 略深的暖灰,保留层次感 */
      --surface-1: #ebe7df;
      --surface-2: #e8e4dc;
      --surface-3: #e3dfd5;
      --surface-pattern-a: #ddd7c9;
      --surface-pattern-b: #d6d0c2;
      --surface-fallback: #e8e4dc;

      /* Blueprint — 浅底上需稍提透明度才看得见 */
      --blueprint-grid: rgba(60,100,160,0.08);
      --blueprint-grid-strong: rgba(60,100,160,0.16);
      --blueprint-quote: rgba(60,100,160,0.28);

      /* Chrome bg — 基于浅底翻转 */
      --chrome-bg-50: rgba(245,243,239,0.55);
      --chrome-bg-70: rgba(245,243,239,0.75);
      --chrome-bg-75: rgba(245,243,239,0.80);
      --chrome-bg-85: rgba(245,243,239,0.88);
      --chrome-bg-96: rgba(245,243,239,0.96);

      /* Highlights — 浅底上需用深色高光 */
      --hl-soft: rgba(26,31,38,0.03);
      --hl-04: rgba(26,31,38,0.05);
      --hl-06: rgba(26,31,38,0.07);
      --hl-10: rgba(26,31,38,0.10);
      --hl-12: rgba(26,31,38,0.13);
      --hl-25: rgba(26,31,38,0.30);
      --hl-strong-border: rgba(40,60,90,0.30);
      --cta-pulse-1: rgba(26,31,38,0.45);
      --cta-pulse-2: rgba(26,31,38,0.20);

      /* Shadows — 浅底上柔和很多 */
      --shadow-badge: 0 2px 6px rgba(20,30,50,0.18);
      --shadow-text: 0 1px 8px rgba(20,30,50,0.15);

      /* On-photo 变量保持不变(继承 :root)— 始终是叠在照片上的语义 */
    }

    /* mix-blend-mode 在浅色背景上会让 nav 文字颜色乱跳,关闭它;
       hero 顶部 nav 保持完全透明(与深色模式一致),滚动后才显毛玻璃底(由 .nav-scrolled 接管) */
    [data-theme="light"] nav { mix-blend-mode: normal; }

    /* 主题切换平滑过渡(只对会受影响的属性) */
    html, body, nav, #projects, #journal, #contact, footer, #hero,
    #about, .about-right, .journal-card.no-image, .project-card,
    .filter-btn, .page-btn, .skill-tag, .hint-card, .theme-toggle {
      transition: background-color .3s ease, color .3s ease, border-color .3s ease;
    }