@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("assets/AlibabaPuHuiTi-Regular.woff2") format("woff2");
  font-weight: 300 400;
  font-display: swap;
}
@font-face {
  font-family: "Alibaba PuHuiTi";
  src: url("assets/AlibabaPuHuiTi-Medium.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("assets/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; }
html {
  background: var(--color-background-canvas);
  scrollbar-gutter: stable;
  scroll-padding-block-start: var(--navigation-height);
}
body {
  margin: 0;
  color: var(--color-text-primary);
  font-family: var(--font-sans);
}
.works-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 2;
  height: var(--navigation-height);
  background: var(--color-background-canvas);
}
.works-skip {
  position: fixed;
  z-index: 3;
  inset: var(--space-sm) auto auto var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--color-background-surface);
  color: inherit;
  transform: translateY(-200%);
}
.works-skip:focus { transform: none; }

.works-gallery {
  --works-gutter: var(--navigation-wide-inline-start);
  --works-top: clamp(32px, 3vw, 43px);
  --works-columns: 3;
  --works-gap: clamp(var(--space-2xl), 3.85vw, 56px);
  --work-radius: 8px;
  padding: var(--works-top) var(--works-gutter) clamp(48px, 8vw, 120px);
}
.works-grid {
  display: grid;
  grid-template-columns: repeat(var(--works-columns), minmax(0, 1fr));
  gap: var(--works-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.work-card {
  position: relative;
  display: block;
  width: 100%;
  overflow: clip;
  isolation: isolate;
  border-radius: var(--work-radius);
  background: var(--color-background-surface);
  box-shadow: 0 6px 18px var(--color-shadow-soft);
  color: inherit;
  text-decoration: none;
  touch-action: manipulation;
}
.work-card:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: var(--space-xs);
}
.work-cover { display: none; }
.work-portrait {
  position: relative;
  container-type: inline-size;
  aspect-ratio: 414.111 / 649.63;
}
.work-portrait img,
.work-portrait h2,
.work-portrait p,
.dash-badge {
  position: absolute;
  margin: 0;
}
.work-portrait img { height: auto; }
.xianyu-disc { inset: 12.11% auto auto 28.87%; width: 65.90%; }
.xianyu-headline { inset: 9.28% auto auto 10.88%; width: 68.70%; }
.xianyu-screen {
  inset: 32.16% auto auto 10.87%;
  width: 60.46%;
  border-radius: 4.35cqw 4.35cqw 0 0;
}
.xianyu-phone { inset: 30.49% auto auto 7.85%; width: 66.91%; opacity: .95; }
.xianyu-character {
  inset: 72.52% auto auto 53.67%;
  width: 41.45%;
  transform: rotate(5.1deg);
  border-radius: 2.72cqw;
}
.work-portrait--xr {
  color: var(--works-xr-ink);
  background: linear-gradient(var(--color-background-surface), var(--works-xr-base));
}
.xr-logo { inset: 8.5% auto auto 4.47%; width: 43.5%; }
.work-portrait--xr h2 {
  inset: 15.98% 0 auto 8.3%;
  font-size: 8.49cqw;
  font-weight: 700;
  line-height: 1.2;
}
.xr-screen {
  inset: 43.68% 0 auto 8.3%;
  width: 91.7%;
  border: 1.4cqw solid var(--works-xr-frame);
  border-inline-end: 0;
  border-radius: 3.25cqw 0 0 3.25cqw;
  box-shadow: var(--shadow-paper);
}
.work-portrait--dash {
  color: var(--color-brand-on-primary);
  background: linear-gradient(var(--color-shadow), var(--works-dash-base));
}
.work-portrait--dash h2 {
  inset: 8.5% 3% auto 9.47%;
  font: 400 12.68cqw / 1.043 "IBM Plex Sans", var(--font-sans);
}
.work-portrait--dash p {
  inset: 29% auto auto 9.88%;
  font-size: 5.8cqw;
  font-weight: 500;
  line-height: 1.75;
}
.dash-badge {
  inset: 38.14% auto auto 9.47%;
  display: grid;
  place-items: center;
  width: 39.49%;
  height: 5.72%;
  border-radius: var(--radius-full);
  background: var(--color-text-primary);
}
.dash-badge .dash-badge-label { position: static; width: 70.02%; }
.dash-laptop { inset: 55.02% 0 auto; width: 100%; }
.dash-screen {
  inset: 57.6% auto auto 9.88%;
  width: 80.05%;
  border-radius: 1.81cqw 1.81cqw 0 0;
}

@container portfolio (width <= 960px) {
  .works-gallery {
    --works-gutter: var(--navigation-inline-start);
    --works-top: clamp(28px, 6.2vw, 45px);
    --works-columns: 2;
    --works-gap: 37px var(--space-xl);
  }
  .work-card { box-shadow: 0 2px 8px var(--color-shadow-soft); }
  .work-portrait { display: none; }
  .work-cover { display: block; width: 100%; height: auto; }
}
@container portfolio (width <= 520px) {
  .works-gallery {
    --works-gutter: clamp(var(--space-2xl), 7.4vw, 29px);
    --works-top: 32px;
    --works-columns: 1;
    --works-gap: 26px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .work-tile {
    animation: work-card-in var(--duration-title-return) var(--ease-out) backwards;
    animation-delay: calc(var(--work-order, 0) * var(--title-return-stagger));
  }
  .work-tile:nth-child(2) { --work-order: 1; }
  .work-tile:nth-child(3) { --work-order: 2; }
  .work-tile:focus-within { animation: none; }
  .work-card { transition: transform var(--duration-press) var(--ease-out); }
  .work-card:active { transform: scale(.985); }
  @media (hover: hover) and (pointer: fine) {
    .work-card:hover { transform: translateY(-4px); }
    .work-card:hover:active { transform: scale(.985); }
  }
}
@keyframes work-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}