/* UI typography from 2026个人作品集 / 拾羽集.
   Masthead: Roboto Condensed Bold, matched against the 60fps SVG letter outlines.
   Keep actual font outlines; no synthetic weight or geometric text stretching. */
@font-face {
  font-family: 'Roboto Condensed';
  src: url('assets/roboto-condensed-latin-700-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Sans';
  src: url('assets/instrument-sans-medium.ttf') format('truetype');
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}
:root {
  --font-ui: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Segoe UI', 'Microsoft YaHei', sans-serif;
  --font-display: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;
  font-family: var(--font-ui);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
body, button, input, textarea, select { font-family: var(--font-ui); }
.masthead {
  height: clamp(245px, calc((100vw - 64px) * .226), 328px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: 'Roboto Condensed', 'Arial Narrow', sans-serif;
  font-weight: 700;
  font-size: min(calc((100vw - 64px) * .258), 374.6px);
  letter-spacing: -.035em;
  line-height: .75;
}
.masthead > span {
  transform: translateY(clamp(8px, 1.55vw, 22px));
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .masthead:hover > span { transform: translateY(clamp(2px, .42vw, 6px)); }
}
.wordmark { font-family: var(--font-display); font-weight: 500; letter-spacing: -.065em; }
.intro h1 { font-family: var(--font-ui); font-weight: 500; letter-spacing: -.02em; line-height: 1.5; }
.nav-item, .new-button, .category-card, .category-card.active, .primary {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: 0;
}
.paper h2, .card:first-child .paper h2, .dialog-head h2 {
  font-family: var(--font-ui);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.5;
}
.excerpt { line-height: 1.75; letter-spacing: .01em; }
.dialog-head small, .paper small, .footer-en {
  font-family: var(--font-display);
  font-weight: 500;
}
sup, .category-card small, #count, .card-head > span, .card-bottom .meta, kbd {
  font-family: var(--font-display);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
@media (max-width:1000px) {
  .masthead { height: 185px; font-size: calc((100vw - 40px) * .258); }
}
@media (max-width:600px) {
  .masthead { height: 90px; font-size: calc((100vw - 28px) * .258); }
}