@charset "UTF-8";

/* Font family, radius and interaction layer. Text metrics use the original layout. */
@font-face{
  font-family:Manrope;
  src:url("assets/fonts/manrope.woff2") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Portfolio CJK";
  src:url("assets/fonts/portfolio-cjk.woff2?v=career-1") format("woff2");
  font-weight:400 600;
  font-style:normal;
  font-display:swap;
}
:root{
  --font-sans:Manrope,"Portfolio CJK","Microsoft YaHei",sans-serif;
  --radius-none:0;
  --radius-sm:4px;
  --radius-caption:6px;
  --radius-control:8px;
  --radius-card:12px;
  --radius-full:9999px;
}

body{font-family:var(--font-sans);font-synthesis:none}
.signature-mark{display:none}
@media(min-width:901px){
  .wordmark>.monogram{display:none}
  .wordmark>.signature-mark{
    display:block;
    width:80px;
    height:40px;
    flex:none;
    overflow:hidden;
    mix-blend-mode:screen;
  }
}
.button-primary,.toast,.skip{border-radius:var(--radius-control)}

/* Inset-zero image windows share their parent's radius; captions keep 6px. */
.about-copy,.expertise-list,.experience,.contact-copy,.work-toolbar,.work-empty{
  border-radius:var(--radius-card);
}
.gallery-item>button,.gallery-item img,.detail-video video,#lightbox-image{
  border-radius:var(--radius-control);
}
.project-grid .project-caption{border-radius:var(--radius-caption)}
.video-duration{border-radius:var(--radius-sm)}

/* The wake sits over the dimmed light field and underneath all page content. */
.hero-wake{
  position:absolute;inset:0;width:100%;height:100%;z-index:-1;
  pointer-events:none;opacity:.9;
}
.button-primary{position:relative;isolation:isolate}
.button-primary::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;
  border:1px solid var(--hover-highlight);pointer-events:none;opacity:0;
  box-shadow:0 12px 24px -8px #0008,0 0 14px -3px var(--hover-glow),
    0 0 46px -8px var(--hover-glow-soft),inset 0 1px rgba(var(--accent-rgb),.28);
  transition:opacity var(--hover-duration) var(--ease);
}
.button-primary>.button-label{font:inherit}
.button-primary>span{
  transform:scale(1);transform-origin:center;
  transition:transform var(--hover-duration) var(--ease);
}
.button-primary:focus-visible::before{opacity:1}
@media(hover:hover) and (pointer:fine){
  .button-primary:hover::before{opacity:1}
  .button-primary:hover>span{transform:scale(var(--hover-scale))}
}
.button-primary:active>span{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){
  .hero-wake{display:none}
  .button-primary:hover>span,.button-primary:active>span{transform:none}
}