/* Typography: the supplied wide face is reserved for the four-character brand lockup. */
@font-face {
  font-family: 'MuluoLogo';
  src: url('assets/fonts/muluo-logo.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+6C90, U+843D, U+6210, U+5668;
}

@font-face {
  font-family: 'MuluoLogo';
  src: url('assets/fonts/muluo-logo-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-007E;
}

@font-face {
  font-family: 'MuluoEditorial';
  src: url('assets/fonts/muluo-editorial-extrabold.woff2?v=4.4') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --type-h1: clamp(2.125rem, 4.2vw, 3.5rem);
  --type-h2: clamp(2rem, 3.3vw, 3rem);
  --type-h3: 1.25rem;
  --type-body: 1rem;
  --type-label: .875rem;
  --type-note: .75rem;
  --section-face: 'MuluoEditorial', 'Songti SC', 'STSong', serif;
}

body {
  font-family: var(--sans);
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .015em;
}
button { font-family: var(--sans); font-weight: 400; }

.brand-lockup { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.brand-wordmark {
  font-family: 'MuluoLogo', var(--sans);
  font-size: 2.25rem;
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  letter-spacing: .025em;
  line-height: 1.15;
  white-space: nowrap;
}
.brand-descriptor {
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .14em;
}
/* Header-only secondary signature: smaller and narrower than the Chinese wordmark. */
.site-header .brand-lockup { gap: .3rem; }
.site-header .brand-descriptor {
  font-size: .625rem;
  line-height: 1.3;
  letter-spacing: .06em;
  align-self: center;
  white-space: nowrap;
}
.header-inner { min-height: 100px; }
.main-nav { font-size: var(--type-label); font-weight: 400; gap: 30px; }
.nav-cta { font-weight: 500; }

h1, h2, h3 { font-family: var(--sans); font-stretch: normal; }
.hero h1, .hero--panorama h1 {
  font-size: var(--type-h1);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
}
h2, .manifesto h2, .process h2, .contact h2 {
  font-size: var(--type-h2);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .02em;
}
.section-heading h2, .manifesto h2, .process-copy h2,
.about-copy h2, .faq-grid h2, .contact h2 {
  font-family: var(--section-face);
  font-weight: 800;
  font-synthesis: none;
  line-height: 1.42;
  letter-spacing: .025em;
  overflow-wrap: break-word;
}
h3, .service-item h3 {
  font-size: var(--type-h3);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .015em;
}
.work-info h3, .step h3 { font-size: 1.125rem; font-weight: 500; line-height: 1.6; }
.hero-title, .hero--panorama .hero-title {
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: .04em;
}
.hero-lead, .hero--panorama .hero-lead, .hero--panorama .hero-intro .hero-lead,
.section-heading > p, .manifesto p:last-child, .service-item p, .step p,
.about-copy > p:not(.eyebrow), .faq details p, .contact p, .contact dl {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.85;
  letter-spacing: .015em;
}
.about-copy > p.company-line { font-size: var(--type-label); }
.eyebrow, .hero-copy .eyebrow, .manifesto .eyebrow {
  font-family: var(--sans);
  font-size: var(--type-note);
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: .15em;
}
.hero-topline, .hero-bottom { font-size: var(--type-note); font-weight: 400; letter-spacing: .06em; }
.hero-panorama figcaption, .hero-panorama figcaption span:first-child, .studio-media figcaption,
.process-media figcaption {
  font-family: var(--sans);
  font-size: var(--type-note);
  font-weight: 400;
  line-height: 1.7;
  letter-spacing: .06em;
}
.gallery-filters button, .button { font-size: var(--type-label); font-weight: 400; }
.work-number, .service-item > span, .step > span {
  font-family: var(--sans);
  font-size: var(--type-label);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.work-info small, .gallery-count, .gallery-note { font-size: var(--type-note); }
.work-zoom { font-size: var(--type-note); }
.faq summary { font-size: 1rem; font-weight: 500; line-height: 1.7; }
.manifesto-grid { grid-template-columns: minmax(210px, .8fr) 2fr; gap: 8%; }
.manifesto-lockup { align-self: center; }
.manifesto-lockup .brand-wordmark { font-size: 2rem; }
.manifesto-lockup .brand-descriptor { color: #bbb; }
.footer-lockup .brand-wordmark { font-size: 2.375rem; }
.footer-lockup .brand-descriptor { color: #aaa; }
.footer-top p { font-family: var(--sans); font-size: var(--type-label); font-weight: 400; line-height: 1.8; letter-spacing: .04em; }
.work-dialog h2 { font: 500 1.25rem/1.6 var(--sans); letter-spacing: .015em; }

@media (max-width: 1100px) {
  .main-nav { gap: 18px; }
  .brand-wordmark { font-size: 2rem; }
}
@media (max-width: 760px) {
  :root { --type-h1: clamp(2rem, 7.8vw, 2.75rem); --type-h2: clamp(1.875rem, 6.8vw, 2.125rem); --type-h3: 1.125rem; }
  .header-inner { min-height: 84px; }
  .main-nav { top: 84px; }
  .brand-wordmark { font-size: 1.875rem; }
  .brand-lockup { gap: 6px; }
  .brand-descriptor { font-size: .75rem; letter-spacing: .09em; }
  .hero--panorama .hero-title { font-size: 1.125rem; }
  .work-info h3, .step h3 { font-size: 1rem; }
  .manifesto-grid { grid-template-columns: 1fr; gap: 28px; }
  .manifesto-lockup .brand-wordmark { font-size: 1.875rem; }
  .footer-lockup .brand-wordmark { font-size: 2rem; }
  .contact-card { font-size: var(--type-body); }
  .gallery-filters button { font-size: var(--type-label); }
}