/* Public identity approved from the client area's wordmark and palette. */
:root {
  --ink: #0b0d0e;
  --paper: #edeae3;
  --muted: #aaaead;
  --accent: #c9b69d;
  --identity-olive: #252823;
  --identity-sage: #d4ddcf;
}

.header,
.process-header {
  background: #0b0d0ef2;
  border-bottom: 1px solid #c9b69d26;
}

.header.is-scrolled {
  background: #0b0d0ef5;
}

.dg-brand {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  text-align: left;
}

.dg-brand .brand-name,
.header.is-scrolled .dg-brand .brand-name {
  display: block;
  color: var(--paper);
  font-family: Manrope, Arial, sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.45px;
  white-space: nowrap;
}

.dg-brand .brand-name .brand-surname {
  color: var(--accent);
}

.dg-brand .brand-name small,
.header.is-scrolled .dg-brand .brand-name small {
  display: block;
  color: var(--paper);
  font: 7.5px/1.6 ui-monospace, monospace;
  letter-spacing: 1.8px;
  margin-top: 10px;
}

.credentials {
  background: var(--identity-olive);
  color: var(--paper);
  border-color: #cad9b829;
}

.credentials a span {
  color: var(--identity-sage);
}

.process-hero .hero-intro > .eyebrow {
  background: var(--identity-olive);
  color: var(--identity-sage);
  padding: 11px 15px;
  border-left: 2px solid var(--accent);
}

.process-hero .hero-details {
  background: var(--identity-olive);
  color: var(--identity-sage);
  padding: 17px 20px;
  border-color: #cad9b829;
}

@media (max-width: 1050px) {
  .dg-brand .brand-name,
  .header.is-scrolled .dg-brand .brand-name { font-size: 24px; }
}

@media (max-width: 700px) {
  .dg-brand .brand-name,
  .header.is-scrolled .dg-brand .brand-name {
    font-size: 22px;
    letter-spacing: -1.2px;
  }
  .dg-brand .brand-name small,
  .header.is-scrolled .dg-brand .brand-name small {
    font-size: 6.5px;
    letter-spacing: 1.25px;
    margin-top: 8px;
  }
  .process-hero .hero-intro > .eyebrow { padding-inline: 12px; }
}

/* V20: ivory-to-champagne display type, derived from the approved wordmark. */
:root {
  --type-ivory: #f1eee7;
  --type-champagne: #c9ae85;
  --type-gradient: linear-gradient(115deg, var(--type-ivory) 8%, #e8dfce 46%, var(--type-champagne) 100%);
}

/* V20.1: extend the signature through the remaining public display type. */
:root { --type-body: #e4dac9; }
body { color: var(--type-body); }
body :is(.hero-intro, .header nav, .process-header nav, .credentials,
    .featured-heading .text-action, .dialog-close, .comparison-labels,
    .filmstrip span, .card-plus, .compare-line > span, .featured-overlay,
    .programme-open, .programme-index, .look-project-number,
    .filters button[aria-pressed=true], .view-buttons button[aria-pressed=true],
    .mode-buttons button[aria-pressed=true], .save-study, .film-dialog-footer a) {
  color: var(--type-body);
}
.hero-signature,
.footer-wordmark {
  --type-gradient: linear-gradient(105deg, var(--type-ivory) 0%, #e8dfce 24%, var(--type-champagne) 60%);
}
.hero-signature > span,
.footer-wordmark > span {
  color: var(--type-body);
  -webkit-text-fill-color: currentColor;
}

/* Keep prose, navigation, forms and the light biography in their solid colors. */
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  :is(#hero-title, #featured-title, #archive-title, #lab-title, #work-title,
      #look-projects-title, #remote-title, #contact-title,
      #page-title, #journey-title, #session-title, #care-title, #prepare-title, #faq-title,
      .featured-meta h3, .programme-caption h3, .look-project-caption h4,
      .process-invitation h3, .portal-invitation h3,
      .hero-signature, .footer-wordmark, .film-cover-title, .workflow-grid h3, .studio-equipment h3,
      .briefing-content h3, #dialog-film-title, #programme-title,
      #session-heading, .care-grid h3) {
    color: var(--type-ivory);
    background-image: var(--type-gradient);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
}

@media (forced-colors: active), (prefers-contrast: more) {
  :is(#hero-title, #featured-title, #archive-title, #lab-title, #work-title,
      #look-projects-title, #remote-title, #contact-title,
      #page-title, #journey-title, #session-title, #care-title, #prepare-title, #faq-title,
      .featured-meta h3, .programme-caption h3, .look-project-caption h4,
      .process-invitation h3, .portal-invitation h3,
      .hero-signature, .footer-wordmark, .film-cover-title, .workflow-grid h3, .studio-equipment h3,
      .briefing-content h3, #dialog-film-title, #programme-title,
      #session-heading, .care-grid h3) {
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

@media print {
  :is(#hero-title, #featured-title, #archive-title, #lab-title, #work-title,
      #look-projects-title, #remote-title, #contact-title,
      #page-title, #journey-title, #session-title, #care-title, #prepare-title, #faq-title,
      .featured-meta h3, .programme-caption h3, .look-project-caption h4,
      .process-invitation h3, .portal-invitation h3,
      .hero-signature, .footer-wordmark, .film-cover-title, .workflow-grid h3, .studio-equipment h3,
      .briefing-content h3, #dialog-film-title, #programme-title,
      #session-heading, .care-grid h3) {
    color: #20211e;
    background-image: none;
    -webkit-text-fill-color: currentColor;
  }
}

/* Keep the film metadata and download action on separate lines on small screens. */
@media (max-width: 600px) {
  .film-dialog-footer { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  .film-dialog-footer a { margin-top: 0; }
}