@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..800;1,9..144,400..700&family=DM+Serif+Display:ital@0;1&family=Young+Serif&family=Bricolage+Grotesque:opsz,wght@12..96,500..800&family=Anton&family=Spectral:ital,wght@0,400;1,400&family=Marcellus&display=swap");
/* Temporary type studies. Navigation and long-form reading keep their own voice. */
:root { --reading: 'Instrument Serif', Georgia, serif; }
:root[data-typeface="fraunces"] { --serif: 'Fraunces', Georgia, serif; }
:root[data-typeface="cormorant"] { --serif: 'Cormorant Garamond', Georgia, serif; }
:root[data-typeface="barlow"] { --serif: 'Barlow Condensed', 'Arial Narrow', sans-serif; }
:root[data-typeface="space"] { --serif: 'Space Grotesk', Arial, sans-serif; }
.story-prose, .story-signature { font-family: var(--reading); }
:root[data-typeface="fraunces"] .wordmark { font-size: 39px; }
:root[data-typeface="space"] .wordmark { font-size: 36px; letter-spacing: -1.6px; }
:root[data-typeface="fraunces"] .film-title,
:root[data-typeface="space"] .film-title { font-size: clamp(64px, 6.4vw, 118px); }
:root[data-typeface="fraunces"] .film-title.long,
:root[data-typeface="space"] .film-title.long { font-size: clamp(49px, 5.4vw, 94px); }
:root[data-typeface="fraunces"] .about-copy h1,
:root[data-typeface="space"] .about-copy h1 { font-size: clamp(48px, 5.4vw, 90px); }
:root[data-typeface="space"] .film-subtitle { font-size: clamp(21px, 2.1vw, 34px); }
:root[data-typeface="space"] .index-brand { font-size: clamp(26px, 2.8vw, 44px); }
:root[data-typeface="space"] .archive-brand { font-size: 34px; }
:root[data-typeface="space"] .story-panel h2,
:root[data-typeface="fraunces"] .story-panel h2 { font-size: 35px; line-height: 1.06; }
.type-tools { position: fixed; right: var(--pad); bottom: 82px; z-index: 32; color: var(--ink); font: 400 11px/1.4 var(--sans); }
body.locked .type-tools { visibility: hidden; pointer-events: none; }
.type-trigger { display: flex; align-items: center; gap: 12px; margin-left: auto; min-height: 44px; padding: 7px 14px; background: var(--paper); color: var(--ink); border: 1px solid rgba(32,33,29,.2); box-shadow: 0 3px 16px #0001; }
.type-trigger-sample { font: 400 25px/1 var(--serif); letter-spacing: -.03em; }
.type-trigger>span:nth-child(2) { font-size: 9px; text-transform: uppercase; letter-spacing: .1em; }
.type-trigger-plus { font-size: 16px; color: #7c7d71; transition: transform .2s; }
.type-trigger[aria-expanded="true"] .type-trigger-plus { transform: rotate(45deg); }
.type-trigger:hover { background: #f5f0e7; }
.type-panel { position: absolute; bottom: 57px; right: 0; width: 310px; max-width: calc(100vw - 44px); max-height: calc(100svh - 170px); overflow-y: auto; padding: 20px 22px 15px; background: var(--paper); border: 1px solid rgba(32,33,29,.18); box-shadow: 0 15px 60px #0004; }
.type-panel-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; margin-bottom: 17px; }
.type-kicker { font-size: 8px; text-transform: uppercase; letter-spacing: .16em; color: #76776a; margin-bottom: 7px; }
.type-panel h2 { font: 400 29px/1.1 var(--reading); letter-spacing: -.01em; }
.type-close { font: 300 24px/1 var(--sans); width: 36px; height: 36px; margin: -7px -9px 0 0; color: #6c6f61; }
.type-options { padding: 0; margin: 0; border: 0; min-width: 0; }
.type-option { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 16px; gap: 6px 12px; padding: 12px 0 13px; border-top: 1px solid var(--line); cursor: pointer; }
.type-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.type-sample { font-size: 32px; font-weight: 400; line-height: 1.05; letter-spacing: -.025em; }
.type-option[data-font="space"] .type-sample { font-size: 27px; }
.type-name { grid-column: 1; font-size: 9px; line-height: 1.5; color: #484c40; }
.type-name>span { display: block; color: #7b7e6f; font-size: 8px; letter-spacing: .02em; }
.type-selection { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 13px; height: 13px; border: 1px solid #a6a597; border-radius: 50%; display: grid; place-items: center; }
.type-option input:checked~.type-selection { border-color: var(--accent); }
.type-option input:checked~.type-selection::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.type-option input:checked~.type-sample, .type-option:hover .type-sample { color: var(--accent); }
.type-option:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 4px; }
.type-footnote { padding-top: 12px; border-top: 1px solid var(--line); color: #737769; font-size: 9px; line-height: 1.6; }
.type-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 760px) {
  :root[data-typeface="fraunces"] .wordmark { font-size: 30px; }
  :root[data-typeface="space"] .wordmark { font-size: 28px; letter-spacing: -1.3px; }
  :root[data-typeface="fraunces"] .film-title,
  :root[data-typeface="space"] .film-title { font-size: clamp(49px, 11.6vw, 78px); }
  :root[data-typeface="fraunces"] .film-title.long,
  :root[data-typeface="space"] .film-title.long { font-size: clamp(36px, 9.4vw, 66px); }
  :root[data-typeface="fraunces"] .film-subtitle,
  :root[data-typeface="space"] .film-subtitle { font-size: 24px; }
  :root[data-typeface="fraunces"] .about-copy h1,
  :root[data-typeface="space"] .about-copy h1 { font-size: clamp(48px, 12vw, 72px); }
  :root[data-typeface="space"] .index-brand { font-size: 27px; }
  :root[data-typeface="space"] .archive-brand { font-size: 25px; }
  :root[data-typeface="space"] .contact-heading h2 { font-size: 49px; }
  :root[data-typeface="space"] .work-ending h2 { font-size: 44px; }
  :root[data-typeface="fraunces"] .listing-header h1,
  :root[data-typeface="space"] .listing-header h1 { font-size: 65px; }
  .type-tools { bottom: 88px; }
  .type-trigger { gap: 9px; padding: 7px 10px; }
  .type-panel { max-height: calc(100svh - 170px); }
}

/* ---- Bolder, printed display faces (James, 20 Oct) ---- */
:root[data-typeface="dmserif"] { --serif: 'DM Serif Display', Georgia, serif; }
:root[data-typeface="young"] { --serif: 'Young Serif', Georgia, serif; }
:root[data-typeface="bricolage"] { --serif: 'Bricolage Grotesque', Arial, sans-serif; }
:root[data-typeface="anton"] { --serif: 'Anton', 'Arial Narrow', sans-serif; }
:root[data-typeface="fraunces"] :is(.film-title, .programme-brand, .wordmark, .about-copy h1, .listing-header h1, .film-window-title h1, .index-brand, .archive-brand, .contact-heading h2, .fto-brand) { font-weight: 650; }
:root[data-typeface="bricolage"] :is(.film-title, .programme-brand, .wordmark, .about-copy h1, .listing-header h1, .film-window-title h1, .index-brand, .archive-brand, .contact-heading h2) { font-weight: 750; letter-spacing: -.035em; }
:root[data-typeface="anton"] :is(.film-title, .programme-brand, .listing-header h1, .film-window-title h1, .archive-brand, .index-brand) { text-transform: uppercase; letter-spacing: .004em; line-height: .92; }
:root[data-typeface="anton"] .film-title { font-size: clamp(64px, 7vw, 128px); }
:root[data-typeface="young"] .film-title { font-size: clamp(60px, 6.4vw, 118px); letter-spacing: -.035em; }
:root[data-typeface="young"] .programme-brand, :root[data-typeface="bricolage"] .programme-brand { font-size: clamp(42px, 5vw, 86px); }

/* ---- Colour and pairing for client and title ---- */
:root { --brand-ink: inherit; --title-ink: inherit; }
:root[data-palette="mustard"] { --title-ink: #E9B342; }
:root[data-palette="blush"] { --brand-ink: #F2C4C0; }
:root[data-palette="mix"] { --title-ink: #E9B342; }
.film .title-lettering, .programme-brand, .film-window-title h1 { color: var(--brand-ink); }
.film .film-subtitle, .programme-subtitle, .film-window-title p { color: var(--title-ink); }
:root[data-palette="mustard"] .film .film-subtitle, :root[data-palette="mix"] .film .film-subtitle { opacity: 1; }
:root[data-palette="mix"] :is(.film .film-subtitle, .programme-subtitle, .film-window-title p) { font-family: 'DM Sans', Arial, sans-serif; font-style: normal; text-transform: uppercase; letter-spacing: .09em; font-weight: 500; }
:root[data-palette="mix"] .film .film-subtitle { font-size: clamp(15px, 1.25vw, 21px); margin-top: 18px; }
:root[data-palette="mix"] .programme-subtitle { font-size: 13px; }
:root[data-palette="mix"] .film-window-title p { font-size: 12px; }
.colour-options { margin-top: 18px; border-top: 1px solid rgba(32,33,29,.14); padding-top: 14px; }
.colour-legend { display: block; margin-bottom: 8px; }
.colour-option { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; padding: 9px 10px; margin: 0 -10px; cursor: pointer; border-radius: 2px; }
.colour-option input { position: absolute; opacity: 0; pointer-events: none; }
.colour-sample { grid-column: 1 / -1; display: block; padding: 10px 12px; background: #16170f; font: 400 22px/1.1 'Instrument Serif', Georgia, serif; }
.colour-sample i { font-style: italic; }
.colour-option:has(input:checked) .colour-sample { outline: 2px solid var(--accent); outline-offset: 2px; }
.colour-option:has(input:focus-visible) .colour-sample { outline: 2px solid var(--ink); }

/* ---- Menu font: navigation, Index and About, section tabs ---- */
:root { --nav-font: 'Fraunces', Georgia, serif; --nav-weight: 650; --nav-scale: 1.04; --nav-track: -.005em; }
:root[data-navface="sans"] { --nav-font: 'DM Sans', Arial, sans-serif; --nav-weight: 600; --nav-scale: 1; --nav-track: .005em; }
:root[data-navface="fraunces"] { --nav-font: 'Fraunces', Georgia, serif; --nav-weight: 650; --nav-scale: 1.04; --nav-track: -.005em; }
:root[data-navface="instrument"] { --nav-font: 'Instrument Serif', Georgia, serif; --nav-weight: 400; --nav-scale: 1.22; --nav-track: 0; }
:root[data-navface="young"] { --nav-font: 'Young Serif', Georgia, serif; --nav-weight: 400; --nav-scale: 1.02; --nav-track: -.01em; }
.main-nav a, .header-right a, .header-right .view-toggle, .section-tabs button { font-family: var(--nav-font) !important; font-weight: var(--nav-weight) !important; }
.main-nav a { font-size: calc(clamp(12.5px, .9vw, 14px) * var(--nav-scale)) !important; letter-spacing: var(--nav-track) !important; }
.header-right a, .header-right .view-toggle { font-size: calc(clamp(11.5px, .82vw, 13px) * var(--nav-scale)) !important; }
.section-tabs button { font-size: calc(clamp(10px, .74vw, 12px) * var(--nav-scale)) !important; }
@media (max-width: 1100px) { .main-nav a { font-size: calc(13px * var(--nav-scale)) !important; } }
@media (max-width: 760px) {
  .main-nav a { font-size: calc(13px * var(--nav-scale)) !important; }
  .header-right a, .header-right .view-toggle { font-size: calc(12px * var(--nav-scale)) !important; }
  .section-tabs button { font-size: calc(12px * var(--nav-scale)) !important; }
}
@media (max-width: 360px) { .main-nav a { font-size: calc(12px * var(--nav-scale)) !important; } }
.nav-options { margin-top: 16px; border-top: 1px solid rgba(32,33,29,.14); padding-top: 14px; }
.nav-sample { font-size: 21px !important; white-space: pre; }

/* Phone: fit all five sections, All included, on one line (M, 20 Oct) */
@media (max-width: 440px) {
  .main-nav { gap: min(10px, 2.6vw) !important; }
  html .main-nav a { font-size: min(calc(12px * var(--nav-scale)), 3.3vw) !important; }
  html[data-direction="programme"] .main-nav a { font-size: min(calc(9px * var(--nav-scale)), 2.4vw) !important; letter-spacing: .02em !important; }
}