/* One type system for the wordmark, work and studio information.
   Brandon covers Latin; the Korean system sans supplies Hangul.
   Keep all layout, image geometry and wordmark sizes in their original styles. */
:root {
  --studio-font: "brandon-grotesque", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --sans: var(--studio-font);
  --font-body: var(--studio-font);
  --font-label: var(--studio-font);
  --font-display: var(--studio-font);
}

body,
body.worktable {
  font-family: var(--studio-font);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.6;
}

button, select, input, textarea, .language-toggle {
  font-family: var(--studio-font);
}

/* Navigation and small supporting text remain clear beside the regular logo. */
.header nav { font-size: 14px; font-weight: 500; }
.header .menu-toggle { font-size: 13px; font-weight: 500; }
.location { font-size: 12px; line-height: 1.5; }
.language-options { font-size: 11px; letter-spacing: .02em; }
.menu-panel a { font-size: 15px; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.mosaic .tile-label { font-weight: 400; letter-spacing: .1em; }
.crumb-name { font-size: 14px; font-weight: 500; letter-spacing: .01em; text-transform: none; }
.crumb-sub { font-size: 14px; font-weight: 400; font-style: normal; }
.slideshow-toolbar { font-size: 13px; font-weight: 500; letter-spacing: .03em; }

/* A gentler display scale echoes the wordmark instead of compressing letters. */
.worktable-intro h1 {
  font-size: clamp(80px, 11vw, 160px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.08;
  margin-left: 0;
}
.page-intro h1,
.contact-words h1 {
  font-size: clamp(72px, 9vw, 136px);
  font-weight: 500;
  letter-spacing: -.04em;
  line-height: 1.12;
}
.productions-page .page-intro h1 { font-size: clamp(64px, 8vw, 120px); }
.project-intro h1 { font-size: clamp(64px, 8vw, 112px); font-weight: 500; letter-spacing: -.035em; }
html[lang=ko] .worktable-intro h1,
html[lang=ko] .page-intro h1,
html[lang=ko] .contact-words h1 { letter-spacing: -.035em; }

.worktable-intro p,
.page-intro > p,
.contact-message { font-size: 17px; line-height: 1.7; }
.sequence-heading h2 { font-size: 38px; font-weight: 500; letter-spacing: -.025em; }
.end-note,
.production-closing,
.email { font-weight: 500; letter-spacing: -.025em; }
.contact-email { font-size: clamp(30px, 3.8vw, 54px); font-weight: 500; letter-spacing: -.025em; }
.production-project h2 { font-size: 28px; font-weight: 500; letter-spacing: -.02em; }
.film-caption h2 { font-size: 28px; font-weight: 500; letter-spacing: -.02em; }
.motion-credits nav { font-size: 23px; font-weight: 500; }

/* 14px controls, 13px captions, 12px metadata; no tiny 9px body labels. */
.project-filter,
.project-filter select,
.production-filters button { font-size: 14px; font-weight: 500; }
.project-filter > label { font-weight: 500; }
.print figcaption,
.feature-caption,
.sequence-frames button > span,
.production-project figcaption > span,
.contact-kicker,
.footer-caption,
.mail-small,
.project-back,
.project-intro > div,
.film-caption p,
.film-watch-link,
.film-status,
.film-thumbnail-label,
.project-play,
.film-action,
.project-film-count { font-size: 13px; line-height: 1.5; }
.print figcaption a { font-weight: 500; }
.collection-count,
.production-count,
.print figcaption span,
.feature-caption > span:last-child,
.sequence-heading > span,
.sequence-frames button > span > span,
.motion-credits h2,
.copy-email,
.copy-status,
.contact-picture figcaption,
.studio-details h2,
.studio-details span,
.contact-footer,
.footer-side,
.project-intro p,
.film-caption time,
.film-thumbnail time,
.film-selection > h2,
.film-arrows > span { font-size: 12px; line-height: 1.5; }
.film-selection > h2,
.studio-details h2,
.motion-credits h2 { font-weight: 500; }
.studio-details p { font-size: 15px; line-height: 1.8; }
.studio-details a { font-size: 13px; }
.studio-details .studio-phone { font-size: 24px; font-weight: 500; letter-spacing: -.015em; }
.production-empty { font-size: 18px; font-weight: 500; }
.viewer-top,
.viewer-bottom,
.viewer-close,
.video-toolbar,
.video-close,
.video-caption { font-size: 13px; }
.viewer-prev, .viewer-next { font-family: var(--studio-font); }
.film-thumbnail-number { font-weight: 500; letter-spacing: -.025em; }
html[lang=ko] .end-note,
html[lang=ko] .email,
html[lang=ko] .production-closing,
html[lang=ko] .sequence-heading h2 { letter-spacing: -.025em; }

@media (max-width: 1000px) {
  .header nav { font-size: 13px; }
  .worktable-intro p, .page-intro > p { font-size: 15px; }
  .contact-email { font-size: 36px; }
}

@media (max-width: 650px) {
  body, body.worktable { font-size: 15px; }
  .header .language-options { font-size: 10px; }
  .header nav { font-size: 15px; }
  .header .menu-toggle { font-size: 12px; }
  .worktable-intro h1,
  html[lang=ko] .worktable-intro h1 { font-size: clamp(64px, 20vw, 84px); }
  .page-intro h1 { font-size: clamp(60px, 18vw, 80px); }
  .productions-page .page-intro h1 { font-size: clamp(38px, 12vw, 72px); }
  html[lang=ko] .productions-page .page-intro h1 { font-size: clamp(54px, 17vw, 80px); }
  .contact-words h1 { font-size: clamp(52px, 16vw, 80px); }
  .contact-email { font-size: clamp(24px, 7.6vw, 34px); }
  .project-intro h1 { font-size: clamp(42px, 14vw, 64px); }
  .project-intro h1.project-title-long { font-size: clamp(30px, 9.5vw, 48px); }
  .worktable-intro p, .page-intro > p, .contact-message { font-size: 15px; }
  .project-filter, .project-filter select, .production-filters button { font-size: 13px; }
  .project-filter > label { font-size: 13px; }
  .production-project h2 { font-size: 26px; }
  .sequence-heading h2 { font-size: 30px; }
  .film-caption h2 { font-size: 24px; }
  .motion-credits nav { font-size: 20px; }
  .print figcaption,
  .feature-caption,
  .sequence-frames button > span,
  .production-project figcaption > span,
  .contact-kicker,
  .project-intro > div,
  .film-caption p,
  .film-thumbnail-label { font-size: 12px; }
  .collection-count, .production-count, .print figcaption span,
  .feature-caption > span:last-child, .sequence-heading > span,
  .copy-email, .copy-status, .contact-picture figcaption,
  .studio-details h2, .studio-details span, .contact-footer,
  .footer-side, .project-intro p, .film-caption time,
  .film-thumbnail time, .film-selection > h2, .film-arrows > span,
  .project-film-count { font-size: 11px; }
  .studio-details p { font-size: 13px; }
  .studio-details .studio-phone { font-size: clamp(18px, 4.8vw, 21px); }
  .production-empty { font-size: 16px; }
  .viewer-top, .viewer-bottom, .viewer-close,
  .video-toolbar, .video-close, .video-caption { font-size: 12px; }
  .slideshow-toolbar { font-size: 11px; letter-spacing: .01em; }
}