/* V2 typography and explicitly requested visual/interaction refinements.
   V1's base styles remain an unchanged snapshot. */
/* Keep the Latin fonts unchanged. Chinese uses self-hosted Noto Sans SC,
   including the residual monospace roles inherited from the V1 snapshot. */
:root {
  --font-sans: "Helvetica Neue", "Inter", Helvetica, "Noto Sans SC", sans-serif;
  --font-mono: "Geist Mono", "Noto Sans SC", monospace;
  font-family: var(--font-sans);
  font-weight: 400;
}

/* Variable Inter includes real Regular 400 and Medium 500. Load only the
   required style/subset when fallback is needed; no unconditional preload,
   local-font substitution, or third-party font service. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-normal-latin-ext.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-normal-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-italic-latin-ext.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-regular-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/fonts/instrument-serif-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

/* Keep the English wordmark's requested half-pixel stroke. */
.name h1 {
  font-family: "Instrument Serif", "Noto Sans SC", serif;
  font-size: 20px;
  line-height: 24px;
  -webkit-text-stroke: 0.5px currentColor;
}

/* Keep the authored Chinese name in the document for easy restoration. */
.name > span[lang="zh-CN"] { display: none; }

/* One intro role for Home, About and all three category pages. */
.photo-intro,
.motion-intro,
.video-intro,
.introduction {
  font-family: "Instrument Serif", "Noto Sans SC", serif;
  font-size: 20px;
  font-weight: 400;
  font-style: normal;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--muted);
}

/* Inline category labels share the intro's type and line entrance. Keep this
   class self-contained so temporary line copies retain the primary color. */
.category-intro-title { color: var(--ink); }

.photo-intro em,
.motion-intro em,
.video-intro em,
.introduction em { font-style: normal; }

.index-number {
  font: normal 400 10px/12px "Instrument Serif", "Noto Sans SC", serif;
  color: var(--ink);
}

/* Figma 1051-6092: sans-serif labels with small trailing serif indices.
   About now uses its own serif role, not the navigation label role. */
.work-nav {
  line-height: 19px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
}

/* Tighten labels and their hover-mask copies, not the superscript numbers. */
.work-nav .category,
.work-nav .index-title {
  letter-spacing: -0.02em;
}

.sidebar-footer, .card-tags {
  font-family: var(--font-sans);
}
.sidebar-footer { font-weight: 500; }
.card-tags { font-weight: 500; }

/* Homepage project names and their metadata both use Medium. */
.card-title { font-weight: 500; }

/* Other sans-serif headings/copy keep Regular without changing sizes.
   Serif and remaining monospace roles retain their explicit weights. */
.empty-state h3,
.dialog-project h2,
.about-content h2,
.photo-dialog h2 {
  font-weight: 400;
}

/* Figma 891-15747: zero-gap {About}; braces now match the gray intro.
   Hug the text instead of retaining the previous fixed icon slot. */
.about-link {
  font: normal 400 20px/24px "Instrument Serif", "Noto Sans SC", serif;
  align-items: center;
  gap: 0;
  padding: 0;
  color: var(--ink);
}
.about-bracket {
  font: normal 400 20px/24px "Instrument Serif", serif;
  color: var(--muted);
}

/* English wordmark and About match the intro's 22px line height.
   Include the hover-copy braces; keep the Chinese 24px line boxes intact. */
html[lang="en"] :is(.name h1, .about-link, .about-bracket) {
  line-height: 22px;
}

/* Chinese intro and About share 20px type with a unified 24px line height.
   The About mask inherits this size; both original and cloned braces match.
   English, project headings, body copy and the name logo stay unchanged. */
html[lang="zh-CN"] :is(
  .introduction,
  .photo-intro,
  .motion-intro,
  .video-intro,
  .about-link,
  .about-bracket
) {
  font-size: 20px;
  line-height: 24px;
}

/* Keep the bear still on hover without changing its About button behavior. */
.portrait img, .portrait:hover img { transform: none; transition: none; }