:root {
  --portfolio-font-display:
    "Archivo Black",
    "Noto Sans SC",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  --portfolio-font-body:
    "Gabarito",
    "Noto Sans SC",
    "PingFang SC",
    "Microsoft YaHei",
    system-ui,
    sans-serif;
  --portfolio-font-mono:
    "DM Mono",
    "SFMono-Regular",
    Consolas,
    monospace;
  --portfolio-font-hand:
    "Caveat",
    "Ma Shan Zheng",
    "STKaiti",
    "KaiTi",
    cursive;
}

html {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--portfolio-font-body);
}

/* Whiteboard: one graphic display face, with body copy kept readable. */
.portfolio-whiteboard-page :is(
  .intro h1,
  .welcome-cluster h1,
  .welcome-card h1,
  .case h2,
  dialog h2,
  .canvas-panel__body h2,
  .canvas-panel__body h3,
  .canvas-panel .panel-body h2,
  .canvas-panel .panel-body h3,
  .about-monogram
) {
  font-family: var(--portfolio-font-display);
  font-style: normal;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.portfolio-whiteboard-page :is(
  .intro-copy,
  .welcome-cluster p,
  .welcome-card .welcome-copy > .intro-copy,
  .case b,
  .note-stack blockquote,
  .about-facts dd,
  .idea-notes p,
  .reading-list strong
) {
  font-family: var(--portfolio-font-body) !important;
}

.portfolio-whiteboard-page :is(.note p, .note b, .listening, .micro-note) {
  font-family: var(--portfolio-font-hand);
}

/* Work archive: the reference's bold grotesk rhythm, without copying its layout. */
.portfolio-work-page :is(
  .archive-heading h1,
  .project-meta h2,
  .frame-transition__copy strong,
  .work-footer h2
) {
  font-family: var(--portfolio-font-display);
  font-style: normal;
  font-weight: 900;
}

.portfolio-work-page .archive-heading h1 {
  letter-spacing: -0.035em;
  line-height: 0.96;
}

.portfolio-work-page .project-meta h2 {
  letter-spacing: -0.025em;
  line-height: 1;
}

.portfolio-work-page .work-footer h2 {
  letter-spacing: -0.035em;
  line-height: 1.02;
}

/* Case studies: keep every 16:9 frame on the same typographic system. */
body[data-project] {
  font-family: var(--portfolio-font-body);
}

body[data-project] :is(
  .project-hero h1,
  .hero-subtitle,
  .cover-words h2,
  .frame-context > h2,
  .frame-research > h2,
  .frame-principles > h2,
  .ui-copy h2,
  .system-title h2,
  .frame-results > h2,
  .project-footer > a
) {
  font-family: var(--portfolio-font-display);
  font-style: normal;
  font-weight: 900;
}

body[data-project] .project-hero h1 {
  letter-spacing: -0.04em;
}

body[data-project] .project-hero:not(.is-concept) h1 {
  font-size: clamp(88px, 15vw, 240px);
  line-height: 0.72;
}

body[data-project] .project-hero.is-concept h1 {
  font-size: clamp(56px, 10.5vw, 150px);
  letter-spacing: -0.025em;
  line-height: 0.92;
}

body[data-project] .hero-subtitle {
  letter-spacing: -0.025em;
}

body[data-project] :is(
  .context-copy blockquote,
  .ui-copy p,
  .frame-results blockquote,
  .respira-note,
  .stitch-page p
) {
  font-family: var(--portfolio-font-body);
  font-style: italic;
  font-weight: 600;
}

@media (max-width: 800px) {
  .portfolio-whiteboard-page :is(
    .intro h1,
    .welcome-cluster h1,
    .welcome-card h1,
    dialog h2
  ) {
    letter-spacing: -0.025em;
  }

  .portfolio-work-page .archive-heading h1,
  body[data-project] .project-hero h1 {
    letter-spacing: -0.025em;
  }

  body[data-project] .project-hero.is-concept h1 {
    font-size: 15vw;
  }
}