/* vietnamese */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/barlow-1.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/barlow-2.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/fonts/barlow-3.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-4.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-5.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-6.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(assets/fonts/dm-sans-7.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* MQ Media — designer's typography brief, 14 September 2026.
   Public pages only. Keep screenplay text and numeric instrument readouts in
   their functional monospace faces. The extra body specificity also keeps
   these rules stable when room navigation appends a destination stylesheet. */
:root {
  --mq-font-body: "DM Sans", sans-serif;
  --mq-font-label: "Barlow", sans-serif;
  --mq-text-link: #1266df;
}

body.mq-typography,
body.mq-typography :is(.studio-edition, .listening-edition, .production-programme,
  .screening-programme, .contact-content, .news-content, .shop-content,
  .vip-content, .forensics-content, .script-reader) {
  font-family: var(--mq-font-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

body.mq-typography :is(p, dd, blockquote):not(:where(.reader-text *, .news-script-sheet > p)),
body.mq-typography .archive-mandate__copy .forensics-lead,
body.mq-typography .credit-person__body > p:not([class]) {
  font-family: var(--mq-font-body);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

body.mq-typography :is(button, input, select, textarea) {
  font-family: var(--mq-font-body);
  letter-spacing: 0;
}

body.mq-typography :is(h1, h2, h3, h4, h5, h6),
body.mq-typography :is(.desk-film figcaption strong, .private-screening__art strong,
  .salon-register strong, .species-file__marker > strong, .intel-file > aside > strong, .brief-sheet__number,
  .access-register article > span, .level-card > span, .floor-grid > a > span,
  .script-shelf a > strong, .chapter-programme strong) {
  font-family: var(--mq-font-body);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
}

body.mq-typography .beat > p {
  font-family: var(--mq-font-body);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.15;
}

body.mq-typography .final__line { letter-spacing: -.02em; }

/* Eyebrows, credit roles, and compact section headings. */
html body.mq-typography :is(.eyebrow, .edition-eyebrow, .edition-kicker,
  .edition-film__category, .edition-film__role, .production-eyebrow,
  .credit-person__roles, .programme-label, .desk-eyebrow, .shop-kicker,
  .news-kicker, .vip-kicker, .forensics-kicker, .floor-label, .section-kicker,
  .sound-gate__eyebrow, .sound-gate__section-label, .routing-note > span,
  .document-stamp, .programme-credits h3, .programme-facts dt, .programme-credits dt,
  .episode-credits h3, .reader-paper h3, .reader-edition,
  .access-register h3, .access-register small, .vault-grid small,
  .salon-register small, .desk-film__index, .news-script-sheet > div,
  .listening-session__identity > span, .site-fader__heading label) {
  font-family: var(--mq-font-label);
  font-weight: 700;
  letter-spacing: .15em;
  line-height: 1.5;
  text-transform: uppercase;
}

body.mq-typography .filmmaker-note > .desk-eyebrow span {
  font-family: var(--mq-font-body);
  font-weight: 400;
  letter-spacing: 0;
}

/* Labels integrated into the illustrated room navigation. */
body.mq-typography :is(.screen__label, .screen__detail,
  [class$="hotspot__label"] text, .theatre-program-monitor__label,
  .theatre-program-monitor__index, .theatre-transport-terminal__verb,
  .theatre-transport-terminal__hint, .theatre-transport-terminal__meta) {
  font-family: var(--mq-font-label);
  font-weight: 700;
  letter-spacing: .15em;
}

/* Blue text links use a lighter blue against dark reading surfaces. */
body.mq-typography :is(.screening-programme, .listening-edition,
  .vip-content, .forensics-content) { --mq-text-link: #82aaff; }
body.mq-typography :is(.archive-mandate, .species-file, .archive-exit,
  .vault-grid, .vip-invitation) { --mq-text-link: #1266df; }

body.mq-typography :is(.edition-identity > a, .edition-secondary,
  .edition-film__copy > a, .edition-contributors header > a,
  .edition-people figcaption a, .edition-contact a,
  .episode-credits a, .production-selection > a, .production-masthead > a,
  .credit-person__body > a, .credit-person__media figure > a,
  .programme-masthead > a, .programme-index__commission,
  .programme-still figcaption a, .programme-distinction a,
  .programme-film__end > a, .programme-extras__links a,
  .desk-masthead > a, .desk-other a, .desk-text-link, .desk-text-button,
  .desk-colophon a, .desk-film figcaption a > span,
  .shop-editorial-link, .news-editorial-link, .news-text-link,
  .news-script-links a, .news-start a, .script-shelf a > b,
  .reader-source a, .lobby-text-link) {
  color: var(--mq-text-link);
  font-family: var(--mq-font-body);
  font-weight: 700;
  letter-spacing: 0;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: .075em;
  text-underline-offset: .18em;
}

body.mq-typography .programme-film__end > a > span { color: inherit; }


/* The specimen establishes a hierarchy as well as font settings. Display
   headings are roughly 4.5 times the reading size on a wide screen; category,
   credits, and text links sit near reading size rather than UI-label size. */
:root {
  --mq-type-display: clamp(3.5rem, 6.5vw, 6.5rem);
  --mq-type-section: clamp(2.75rem, 4.5vw, 4.5rem);
  --mq-type-reading: clamp(1.125rem, 1.4vw, 1.375rem);
  --mq-type-label: clamp(1rem, 1.25vw, 1.25rem);
}

body.mq-typography :is(.studio-edition, .listening-edition,
  .production-programme, .screening-programme, .contact-content,
  .news-content, .shop-content, .vip-content, .forensics-content)
  :is(h1, h2, h3) {
  text-transform: none;
}

body.mq-typography :is(.edition-story h2, .edition-film h2,
  .listening-notes h2, .production-opening h2, .programme-film h2,
  .filmmaker-note h2, .news-masthead h1, .shop-opening h1) {
  font-size: var(--mq-type-display);
}

body.mq-typography :is(.edition-contributors h2, .chapter-programme h2,
  .brief-sheet h2, .news-feature h2, .news-section-heading h2,
  .news-start h2, .shop-support h2, .vip-content h2, .forensics-content h2) {
  font-size: var(--mq-type-section);
}

body.mq-typography :is(.edition-story__premise,
  .edition-film__copy > p:not([class]), .edition-identity > p,
  .series-premise, .episode-premise, .production-opening > div > p:last-child,
  .programme-summary, .filmmaker-note__copy, .news-masthead__intro,
  .news-feature__copy > p:not(.news-kicker), .shop-opening__intro,
  .shop-opening__copy > p:not(.shop-kicker), .shop-support > div > p:not([class]),
  .vip-lead, .vip-intro__grid > div > p, .private-screening__copy > p:not(.vip-kicker),
  .forensics-section-heading > p, .archive-mandate__copy > p,
  .archive-exit p:not(.forensics-kicker)) {
  font-size: var(--mq-type-reading);
  line-height: 1.5;
}

html body.mq-typography :is(.edition-eyebrow, .edition-kicker,
  .production-eyebrow, .programme-label, .desk-eyebrow, .news-kicker,
  .shop-kicker, .vip-kicker, .forensics-kicker) {
  font-size: var(--mq-type-label);
}

/* Match the designer's featured-film category / title / body / credits / link. */
html body.mq-typography :is(.edition-film__category, .edition-film__role) {
  color: #737373;
  font-size: var(--mq-type-reading);
}

body.mq-typography .edition-film__category { margin: 24px 0 12px; }
body.mq-typography .edition-film h2 { margin: 0 0 28px; }
body.mq-typography .edition-film__copy > p:not([class]) { margin-bottom: 30px; }
body.mq-typography .edition-film__role { margin: 0 0 32px; }
body.mq-typography .edition-film__copy > a { font-size: var(--mq-type-reading); }

body.mq-typography :is(.edition-secondary, .edition-contributors header > a,
  .edition-contact a, .production-selection > a, .programme-index__commission,
  .programme-film__end > a, .shop-editorial-link, .news-text-link) {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
}

/* This all-caps string is published CMS content. Sentence case here changes
   its visual treatment without rewriting the CMS's stored wording. */
body.mq-typography #collaboration-title {
  text-transform: lowercase;
  max-width: 15ch;
}
body.mq-typography #collaboration-title::first-letter { text-transform: uppercase; }

/* Give the display title a full column before the text becomes cramped. */
@media (max-width: 800px) {
  body.mq-typography .edition-film { grid-template-columns: 1fr; gap: 28px; }
  body.mq-typography .edition-film__still { grid-row: 1; }
  body.mq-typography .edition-film h2 { font-size: clamp(3.5rem, 16vw, 4.5rem); }
}

@media (max-width: 620px) {
  :root {
    --mq-type-display: clamp(3.5rem, 16vw, 4.5rem);
    --mq-type-section: clamp(2.5rem, 11vw, 3.25rem);
    --mq-type-reading: 1.125rem;
    --mq-type-label: 1rem;
  }
  body.mq-typography .edition-film h2 { margin-bottom: 22px; }
  body.mq-typography .edition-film__copy > p:not([class]) { margin-bottom: 24px; }
  body.mq-typography .edition-film__role { margin-bottom: 24px; }
}