@charset "UTF-8";

/* F03 Montserrat for Latin text; the established Chinese family remains in use. */
@font-face {
  font-family: "ML Site Montserrat";
  src: url("assets/fonts/montserrat/montserrat-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-024F, U+1E00-1EFF;
}
:root {
  --site-font-family: "ML Site Montserrat", "HarmonyOS Sans SC", "HarmonyOS Sans", sans-serif;
  --site-latin-family: var(--site-font-family);
  --site-major-heading: var(--site-heading, #534A43);
}
body,
body.category-page { font-family: var(--site-font-family); }
button, input, select, textarea { font-family: inherit; }

/* Keep G31-derived text over the homepage's earlier local palette. */
body.page-home {
  --site-ink: var(--site-body);
  --site-heading: #534A43;
  --site-muted: var(--site-body);
  --site-accent: var(--site-heading);
  --site-on-deep: #eeedec;
  --site-muted-on-deep: #c8c5c3;
  --ink: var(--site-body);
  --sub: var(--site-body);
  --blue: var(--site-heading);
  color: var(--site-body);
}

/* G31 on large headings on light surfaces, including both profile cards. */
body.page-home #home .person-top h2,
body.page-home #brands #brand-title,
body.page-home #work .section-heading h2,
body.page-home #work .work-copy :is(h2, h3),
body.page-home #work .space-copy :is(h2, h3),
body.page-home #live-services #services-title,
body.page-home #live-services .presenter-feature-copy h3,
body.page-home #film #film-title,
body.page-home #art #art-title,
body.page-home #art .art-row h3,
body.page-home #contact h2,
body.page-home #contact .contact-grid h3,
body.page-live :is(.page-heading h1, .work-copy h2, .space-copy h2, .case-collection-heading h2, .live-case h3, .more-cases > h3),
body.page-technology :is(.tech-hero h1, .section-lead h2, .evidence-copy h3, .virtual-guide h3, .maintenance-copy h3),
body.page-styling :is(.service-hero h1, .service-chapter-head h2),
body.page-photography :is(.photo-intro h1, .photo-chapter-heading h2, .photo-exhibition-heading h2,
  .photo-subheading, .photo-exhibition-list h3),
body.page-curation :is(.page-heading h1, .curation-name h2, .curation-copy h3),
body.page-painting .page-heading h1,
body.page-video :is(.page-heading h1, .documentary-heading h2) {
  color: var(--site-major-heading);
}
#detail-dialog #dialog-title { color: var(--site-major-heading); }
body #detail-dialog :is(.dialog-close, .gallery-nav button, .gallery-count,
  .film-player-state button) { color: var(--site-body); }

/* A complete headline shares one colour across its inline parts. */
body.page-home #brands #brand-title span,
body.page-home #work .section-heading h2 span,
body.page-home #work .work-copy :is(h2, h3) span,
body.page-home #work .space-copy :is(h2, h3) span,
body.page-home #film #film-title span,
body.page-home #art #art-title span,
body.page-home #contact h2 span,
body.page-live :is(.page-heading h1, .work-copy h2, .space-copy h2, .case-collection-heading h2, .live-case h3) span,
body.page-technology :is(.tech-hero h1, .section-lead h2, .evidence-copy h3, .virtual-guide h3, .maintenance-copy h3) span,
body.page-styling :is(.service-hero h1, .service-chapter-head h2) span,
body.page-photography :is(.photo-intro h1, .photo-chapter-heading h2, .photo-exhibition-heading h2) span,
body.page-curation :is(.page-heading h1, .curation-name h2, .curation-copy h3) span,
body.page-painting .page-heading h1 span,
body.page-video :is(.page-heading h1, .documentary-heading h2) span {
  color: inherit;
}

/* Photographic overlays and the dark grading panel keep their light type. */

/* Shared framework type: preserve each page's existing sizes and hierarchy. */
body .skip { color: var(--site-heading); }
body.page-live #cases .case-index > a { color: var(--site-body); }
body.page-live #cases .case-index > a:is(:hover, :focus-visible) { color: var(--site-heading); }
body :is(.site-header, .page-heading, .section-heading, .section-lead,
  .service-hero, .service-chapter-head, .service-discovery-head,
  .photo-intro, .photo-chapter-heading, .curation-heading,
  .curation-section-heading, .person-card, .film-overlay, .dialog-inner) {
  font-family: var(--site-font-family);
}
body main :is(h1, h2, h3, h4, h5, h6) { color: var(--site-heading); }
body.page-home #home :is(.person-en, .person-role, .person-description),
body.page-home #home .intro-heading .eyebrow,
body.page-home #home .intro-line,
body.page-home .brand-caption,
body.page-home .brand-name-label,
body.page-home #art .art-row .art-owner,
body.page-home :is(.brand-text-list, .collaboration-label, .collaboration-label span,
  .creator-name, .creator-platform, .art-type span, .art-tags, .art-owner,
  .site-footer, .contact-links),
body.page-home #work .light .eyebrow,
body.page-home #work .light > p:last-child:not(.eyebrow),
body.page-home #work .work-copy .eyebrow,
body.page-home #work .space-copy .eyebrow,
body.page-home #work .work-copy > p:not(.eyebrow),
body.page-home #work .space-copy > p:not(.eyebrow),
body.page-home #work .choice,
body.page-home #work .desert-concept-media figcaption,
body.page-home #work .home-case-details,
body.page-home #film .film-caption .text-button,
body.page-technology #gamut-color-preview .gamut-drag-guide,
body.page-live #space.space-stage > .space-copy > p:not(.eyebrow),
body.page-live #space.space-stage .desert-concept-media > figcaption {
  color: var(--site-body);
}
body.page-home #home .person-card,
body.page-home :is(.presenter-feature, .film-section, .contact-section, dialog) {
  color: var(--site-body);
}
body.page-home :is(.star-name, .creator-name),
body.page-home :is(.people-names, .creator-names) li,
body.page-home #work .choice.active,
body.page-technology #tech-stability .section-lead .lead-copy h3 {
  color: var(--site-heading);
}
body.page-technology #tech-stability .section-lead :is(.eyebrow, .lead-copy p),
body .styling-contents span { color: var(--site-body); }
body .styling-contents a:is(:hover, :focus-visible) { color: var(--site-heading); }
body :is(a, button, input, select, textarea):focus-visible {
  outline-color: var(--site-focus) !important;
}

/* Retain the selected C01 opening names while its supporting type joins the site. */
body.page-home .home-entry {
  --entry-ink: var(--site-heading);
  --entry-muted: var(--site-body);
  font-family: var(--site-font-family);
}
body.page-home .home-entry :is(.entry-mark, .entry-mark span, .entry-discipline,
  .entry-eyebrow, .entry-name-en, .entry-tagline, .entry-caption, .entry-skip,
  .entry-cross) {
  font-family: var(--site-font-family);
}

/* Inverse text belongs to its dark surface; illustrations keep their own colours. */
body.page-technology #tech-grading .grading-integrated,
body.page-technology #tech-stability .stability-system,
body .film-stage {
  --site-heading: var(--site-on-deep);
  --site-major-heading: var(--site-on-deep);
  --site-body: var(--site-muted-on-deep);
  --site-ink: var(--site-muted-on-deep);
  --site-muted: var(--site-muted-on-deep);
  --site-action-text: var(--site-on-deep);
  --site-action-strong: #fff;
  --site-action-border: #ffffff70;
  --site-action-fill: #ffffff12;
  --site-action-hover: #ffffff24;
  --site-action-disc: #ffffff20;
  --site-focus: var(--site-on-deep);
}
body.page-technology #tech-grading .grading-integrated {
  --grading-heading: var(--site-on-deep);
  --grading-copy: var(--site-muted-on-deep);
  --grading-muted: var(--site-muted-on-deep);
}
body.page-technology #tech-grading .grading-integrated .grading-case-hint {
  color: var(--site-muted-on-deep);
}
body.page-technology #tech-grading .grading-integrated .grading-case-hint:is(:hover,:focus-visible) {
  color: var(--site-on-deep);
}
body.page-technology #tech-stability .stability-system .redundancy-number,
body.page-technology #tech-stability .stability-system .redundancy-grid h3 {
  color: var(--site-on-deep);
}
body.page-technology #tech-stability .stability-system :is(.redundancy-number span, .redundancy-grid h3 span,
  .redundancy-grid p, .redundancy-animation figcaption) {
  color: var(--site-muted-on-deep);
}
body:is(.page-home,.page-video) .film-stage .film-overlay,
body :is(.film-stage, .film-overlay) :is(.film-name, .film-kicker) {
  color: var(--site-on-deep);
}
body .film-stage :is(.view-action-duration, .film-play small) {
  color: var(--site-muted-on-deep);
}