.portfolio-site{font-family:Grotesk,'Microsoft YaHei',sans-serif}.portfolio-site .brand{width:64px;height:auto;perspective:none;display:flex;flex-direction:column;align-items:flex-start;gap:6px}.portfolio-site .brand strong{font-size:27px;font-weight:700;line-height:.85;letter-spacing:-.07em;writing-mode:vertical-rl;transform:rotate(180deg)}.portfolio-site .brand small{font-size:8px;writing-mode:vertical-rl;letter-spacing:.06em;position:absolute;left:31px;top:0}.portfolio-site .brand>span{display:none}.portfolio-site .nav-links{line-height:1.1;gap:3px}.portfolio-site .nav-links .project-nav{font-family:Grotesk,'Microsoft YaHei',sans-serif;font-size:12px;line-height:1.5;letter-spacing:0;margin-top:5px}.portfolio-site .nav-links .active{padding-left:25px}.portfolio-site .nav-links .active:before{left:0;font-size:22px}.portfolio-site .inquiry{gap:14px}.portfolio-site .copy-item h2{font-family:Grotesk,'Microsoft YaHei',sans-serif;font-size:22px;line-height:1.25;white-space:normal}.portfolio-site .copy-item .description{font-size:12px;line-height:1.65}.portfolio-site .copy-item .category{font-size:10px}.portfolio-site .metadata{font-size:11px;line-height:1.6}.portfolio-site .metadata .recognition{display:none}.portfolio-site .counter>.muted{width:auto}.portfolio-site .counter .total{margin-left:8px}.portfolio-site .showreel{font-size:11px}.gallery-controls{position:fixed;left:20px;bottom:20px;z-index:40;display:flex;gap:20px;font-size:12px}.gallery-controls button{padding:5px 8px}.gallery-controls button:hover{text-decoration:underline}.portfolio-site .scroll-hint{left:auto;right:20px}.portfolio-site .keyboard-help,.portfolio-site .swatches{display:none}.portfolio-site .project-image:after{content:'查看项目 ↗'}.portfolio-site .project-open{display:inline-block;font-size:12px;margin-top:18px;border-bottom:1px solid #888;padding-bottom:4px;pointer-events:auto}.portfolio-site .copy-item{pointer-events:none}.portfolio-site .copy-item[aria-hidden=false]{pointer-events:auto}.portfolio-site .brand:hover{color:var(--accent,#2b409a)}.portfolio-site .menu-toggle{z-index:70}.portfolio-site .gallery-title{font-size:12px;position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:10;color:#888}.site-skip{position:fixed;left:12px;top:-100px;z-index:150;background:#fff;padding:10px}.site-skip:focus{top:10px}.portfolio-site .intro{display:none}
@media(max-width:799px){.portfolio-site .brand{left:50%;transform:translateX(-50%);width:auto;top:20px;z-index:70}.portfolio-site .brand strong{writing-mode:horizontal-tb;transform:none;font-size:22px;letter-spacing:-.02em}.portfolio-site .brand small{display:none}.portfolio-site .nav-links{font-size:34px;gap:15px;top:40%;font-family:Grotesk,'Microsoft YaHei',sans-serif}.portfolio-site .nav-links .project-nav{font-size:22px}.portfolio-site .nav-links .active:before{font-size:28px}.portfolio-site .copy-item h2{font-size:25px}.portfolio-site .copy-item .description{font-size:12px;line-height:1.5}.portfolio-site .copy-item .category{font-size:10px}.portfolio-site .project-open{font-size:11px;margin-top:12px}.portfolio-site .project-copy{top:calc(100% - 240px)}.portfolio-site .gallery-title{display:none}.gallery-controls{left:16px;bottom:16px;gap:12px}.portfolio-site .scroll-hint{display:block;font-size:10px;bottom:22px;right:20px}.portfolio-site .inquiry{display:none}.portfolio-site .counter{top:112px}.portfolio-site .counter strong{font-size:86px}}

/* Match the WebGL cover ratio when rendering the accessible flat fallback. */
.portfolio-site .gallery:not(.webgl-ready) .project-image{aspect-ratio:16/9}


/* Subdivide the twelve-column grid for a half-column inset away from the cover. */
.portfolio-site .tool-icons{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0}
.portfolio-site .tool-icons img{display:block;width:26px;height:26px;object-fit:contain}
.portfolio-site .project-nav-list{display:flex;flex-direction:column;gap:2px;max-height:clamp(90px,calc(32vh - 105px),220px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#8886 transparent;width:clamp(96px,calc(12.5vw - 38px),180px);padding:0 8px 6px 0;letter-spacing:0}
.portfolio-site .tool-icons .tool-name{font-size:10px;line-height:1.4;padding:5px 0;grid-column:1 / -1;white-space:normal}
@media(max-width:799px){.portfolio-site .project-nav-list{width:100%;max-height:calc(100dvh - 340px);gap:7px}.portfolio-site .nav-links{top:190px;margin-top:0}.portfolio-site .mobile-tagline{top:110px}.portfolio-site .project-nav-list .project-nav{font-size:18px}}
@media(min-width:800px){
  .portfolio-site .metadata{--metadata-gutter:24px;--metadata-column:calc((100vw - 40px - 264px) / 12);display:grid;grid-template-columns:repeat(8,minmax(0,1fr));column-gap:var(--metadata-gutter);row-gap:32px;align-items:start;left:20px;width:calc(4 * var(--metadata-column) + 3 * var(--metadata-gutter))}
  .portfolio-site .metadata .role,.portfolio-site .metadata .launch,.portfolio-site .metadata .recognition{position:static;display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;min-width:0;white-space:normal;align-items:start}
  .portfolio-site .metadata .role{grid-column:1 / span 3;grid-row:1;grid-template-columns:40px minmax(0,1fr)}
  .portfolio-site .metadata .launch{grid-column:4 / span 4;grid-row:1}
  .portfolio-site .metadata .recognition{grid-column:4 / span 4;grid-row:2}
  .portfolio-site .metadata .muted,.portfolio-site .metadata p{margin:0;line-height:16px}
  .portfolio-site .metadata .tool-icons{display:grid;grid-template-columns:repeat(auto-fit,26px);gap:7px}
}