/* Direction 02: a warm, typographic film programme over one moving stage. */
.programme { position: relative; isolation: isolate; color: #f1eadb; }
.programme-stage { position: fixed; inset: 0; z-index: -2; background: #211f18; transition: opacity .35s; }
.programme-scene { position: absolute; inset: 0; opacity: 0; transition: opacity .6s ease; }
.programme-scene.is-active { opacity: 1; }
.programme-scene>img, .programme-scene>video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.programme-scene>.programme-loop { z-index: 0; }
.programme-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(19,19,14,.78),rgba(19,19,14,.34) 47%,rgba(19,19,14,.05) 80%),linear-gradient(0deg,rgba(17,18,13,.73),transparent 35%,transparent 70%,rgba(17,18,13,.36)); }
.programme-stage-hit { position: fixed; inset: 135px 0 165px 66%; z-index: 0; }
.programme-running { position: absolute; left: var(--pad); top: 167px; display: flex; align-items: center; gap: 13px; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: #ded5c1; }
.programme-running-dot { width: 5px; height: 5px; background: #d58c56; border-radius: 50%; }
.programme-running-line { width: 32px; height: 1px; background: #d8d0ba66; }
.programme-list { position: relative; z-index: 1; list-style: none; padding: calc(46svh - 70px) 0 calc(50svh - 55px); margin: 0 var(--pad); width: min(78vw,1150px); }
.programme-row { min-height: clamp(120px,17svh,190px); display: flex; align-items: center; scroll-margin-top: 36svh; }
.programme-row>a { display: flex; align-items: flex-start; gap: 23px; width: fit-content; max-width: 100%; padding: 10px 0; }
.programme-number { font-size: 10px; line-height: 1; letter-spacing: .06em; min-width: 23px; padding-top: 15px; color: #d58c56; opacity: .55; }
.programme-lettering { min-width: 0; }
.programme-brand { display: block; font: 400 clamp(54px,6.3vw,108px)/.91 var(--serif); letter-spacing: -.02em; text-transform: uppercase; opacity: .32; transition: opacity .3s,transform .3s; }
.programme-brand.long { font-size: clamp(44px,5.1vw,86px); }
.programme-subtitle { display: block; margin-top: 13px; font: 400 italic clamp(23px,2.4vw,35px)/1.1 var(--reading); opacity: 0; transform: translateY(5px); transition: opacity .3s,transform .3s; }
.programme-row-arrow { padding-top: 12px; margin-left: 5px; font-size: 25px; opacity: 0; color: #dbc59b; transform: translate(-6px,6px); transition: opacity .3s,transform .3s; }
.programme-row.is-active .programme-brand, .programme-row:focus-within .programme-brand, .programme-row:hover .programme-brand { opacity: 1; }
.programme-row.is-active .programme-number { opacity: 1; }
.programme-row.is-active .programme-subtitle, .programme-row:focus-within .programme-subtitle { opacity: .86; transform: none; }
.programme-row.is-active .programme-row-arrow, .programme-row:focus-within .programme-row-arrow { opacity: .9; transform: none; }
.programme-row>a:focus-visible { outline-offset: 9px; outline-color: #dbc59b; }
.programme-bottom { position: fixed; bottom: 25px; left: var(--pad); right: var(--pad); z-index: 14; display: flex; align-items: center; justify-content: space-between; gap: 25px; transition: opacity .2s; }
.programme-status { display: flex; align-items: center; gap: 10px; text-transform: uppercase; font-size: 9px; letter-spacing: .12em; }
.programme-current { color: #efd9b2; }
.programme-total { color: #e3ddcb66; }
.programme-kind { margin-left: 15px; color: #e3ddcbb3; }
.programme-scroll { font-size: 9px; letter-spacing: .08em; color: #e3ddcb99; }
.programme-scroll span { margin-left: 12px; }
.programme-watch { display: flex; align-items: center; gap: 26px; text-transform: uppercase; font-size: 9px; letter-spacing: .1em; padding: 7px 0 7px 15px; }
.programme-watch-icon { font-size: 26px; font-weight: 400; transition: transform .2s; }
.programme-watch:hover .programme-watch-icon { transform: translate(3px,-3px); }
.programme-bottom.is-away, .programme-stage.is-away { opacity: 0; pointer-events: none; }
:root[data-direction="programme"] { --paper: #ece5d5; --paper-dark: #dfd5c0; --accent: #a54933; }
:root[data-direction="programme"] .site-header { height: 110px; padding-top: 27px; }
:root[data-direction="programme"] .wordmark { font-size: 35px; letter-spacing: .005em; text-transform: uppercase; }
:root[data-direction="programme"] .wordmark span { font-size: 8px; letter-spacing: .23em; margin-top: 10px; }
:root[data-direction="programme"] .main-nav { top: 38px; }
:root[data-direction="programme"] .main-nav a { font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
:root[data-direction="programme"] .header-right>a { text-transform: uppercase; font-size: 9px; letter-spacing: .08em; }
:root[data-direction="programme"] .index-toggle { text-transform: uppercase; font-size: 9px; }
:root[data-direction="programme"] .work-ending { position: relative; z-index: 2; min-height: 570px; padding-top: 100px; }
:root[data-direction="programme"] .work-ending h2 { text-transform: uppercase; font-size: clamp(56px,7vw,104px); }
:root[data-direction="programme"] .work-ending h2 em { font-family: var(--reading); text-transform: none; font-size: .78em; }
.programme-at-end .site-header { background: var(--paper); color: var(--ink); }
.programme-at-end .site-header::before { opacity: 0; }
:root[data-direction="programme"] .story-panel { background: #e9dfc7; }
:root[data-direction="programme"] .story-panel h2 { font-size: 42px; line-height: 1; }
:root[data-direction="programme"] .about-intro { grid-template-columns: 1.2fr 1fr; }
:root[data-direction="programme"] .about-copy { order: 1; }
:root[data-direction="programme"] .portrait-wrap { order: 2; }
:root[data-direction="programme"] .about-copy h1 { text-transform: uppercase; }
:root[data-direction="programme"] .about-copy h1 em { font-family: var(--reading); text-transform: none; }
:root[data-direction="programme"][data-typeface="instrument"] .programme-brand,
:root[data-direction="programme"][data-typeface="fraunces"] .programme-brand,
:root[data-direction="programme"][data-typeface="cormorant"] .programme-brand { text-transform: none; font-size: clamp(48px,5.8vw,96px); }
:root[data-direction="programme"][data-typeface="space"] .programme-brand { font-size: clamp(44px,4.9vw,84px); }
:root[data-direction="programme"][data-typeface="space"] .programme-brand.long,
:root[data-direction="programme"][data-typeface="fraunces"] .programme-brand.long { font-size: clamp(37px,4.2vw,72px); }

/* A small review dock keeps both directions and their type studies together. */
.type-tools { display: flex; align-items: center; gap: 8px; }
.direction-switch { display: flex; align-items: stretch; min-height: 44px; padding: 0 5px; background: var(--paper); color: var(--ink); border: 1px solid rgba(32,33,29,.2); box-shadow: 0 3px 16px #0001; }
.direction-label { font-size: 8px; text-transform: uppercase; letter-spacing: .08em; padding: 16px 9px 0 5px; color: #7b7e6c; }
.direction-switch button { position: relative; display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 9px; color: #737768; }
.direction-switch button>span:first-child { font-size: 10px; font-variant-numeric: tabular-nums; }
.direction-switch button[aria-pressed="true"] { color: var(--ink); }
.direction-switch button[aria-pressed="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 7px; height: 1px; background: var(--accent); }
.direction-switch button:hover { color: var(--accent); }
@media(max-width:1100px) {
  .programme-list { width: 85vw; }
  .programme-row { min-height: 145px; }
  .direction-name { display: none; }
  .direction-switch button { min-width: 35px; justify-content: center; }
}
@media(max-width:760px) {
  .type-tools { top: auto; bottom: 88px; right: 22px; }
  .type-panel { top: auto; bottom: 57px; max-height: calc(100svh - 170px); }
  .type-trigger { min-width: 44px; justify-content: center; padding: 7px 9px; }
  .type-trigger>span:nth-child(2), .type-trigger-plus { display: none; }
  .direction-label { display: none; }
  .direction-switch { padding: 0 2px; }
  .direction-switch button { padding: 0 9px; min-width: 44px; }
  :root[data-direction="programme"] .site-header { height: 125px; padding-top: 24px; }
  :root[data-direction="programme"] .wordmark { font-size: 31px; }
  :root[data-direction="programme"] .main-nav { top: 92px; }
  :root[data-direction="programme"] .main-nav a { font-size: 9px; }
  :root[data-direction="programme"] .header-right>a { font-size: 8px; }
  .programme-running { top: 176px; font-size: 8px; gap: 9px; }
  .programme-running>span:last-child { display: none; }
  .programme-running-line { width: 24px; }
  .programme-list { width: calc(100% - 44px); padding-top: max(240px,calc(46svh - 55px)); padding-bottom: 42svh; }
  .programme-row { min-height: 140px; }
  .programme-row>a { gap: 11px; padding: 10px 0; }
  .programme-number { min-width: 18px; padding-top: 8px; font-size: 8px; }
  .programme-brand { font-size: clamp(40px,11.2vw,72px); }
  .programme-brand.long { font-size: clamp(32px,8.8vw,60px); }
  .programme-subtitle { margin-top: 10px; font-size: 26px; }
  .programme-row-arrow { font-size: 18px; padding-top: 4px; margin-left: 0; }
  .programme-stage::after { background: linear-gradient(90deg,#14150ecc,#14150e55 80%),linear-gradient(0deg,#14150eaa,transparent 40%,transparent 70%,#14150e55); }
  .programme-stage-hit { display: none; }
  .programme-bottom { bottom: 22px; gap: 10px; }
  .programme-status { font-size: 8px; gap: 7px; }
  .programme-kind { margin-left: 5px; letter-spacing: .05em; }
  .programme-scroll { display: none; }
  .programme-watch { gap: 13px; font-size: 8px; }
  .programme-watch-icon { font-size: 24px; }
  :root[data-direction="programme"] .work-ending { min-height: 500px; padding-top: 65px; }
  :root[data-direction="programme"] .work-ending h2 { font-size: 58px; }
  :root[data-direction="programme"] .about-intro { flex-direction: column; }
  :root[data-direction="programme"] .about-copy h1 { font-size: 65px; }
  :root[data-direction="programme"][data-typeface="instrument"] .programme-brand,
  :root[data-direction="programme"][data-typeface="cormorant"] .programme-brand { font-size: clamp(42px,11vw,68px); }
  :root[data-direction="programme"][data-typeface="fraunces"] .programme-brand,
  :root[data-direction="programme"][data-typeface="space"] .programme-brand { font-size: clamp(32px,8.5vw,57px); }
  :root[data-direction="programme"][data-typeface="fraunces"] .programme-brand.long,
  :root[data-direction="programme"][data-typeface="space"] .programme-brand.long { font-size: clamp(27px,7vw,48px); }
  :root[data-direction="programme"][data-typeface="space"] .wordmark { font-size: 23px; letter-spacing: -.02em; }
  :root[data-direction="programme"][data-typeface="fraunces"] .wordmark { font-size: 25px; }
}
@media(prefers-reduced-motion:reduce) {
  .programme-scene, .programme-stage, .programme-brand, .programme-subtitle, .programme-row-arrow { transition: none; }
}

.director-dialog{position:fixed;inset:0;width:100%;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--ink);overflow:hidden}
.director-dialog::backdrop{background:rgba(18,20,14,.62);backdrop-filter:blur(4px)}
.director-sheet{width:min(1080px,84vw);height:100%;margin-left:auto;overflow:auto;background:var(--paper);box-shadow:-12px 0 60px #0003}
.director-toolbar{position:sticky;top:0;z-index:3;background:var(--paper);display:flex;justify-content:space-between;align-items:center;padding:24px 42px;border-bottom:1px solid var(--line);gap:20px}
.director-toolbar .eyebrow{font-size:8px;color:#777b68}
.director-toolbar button{display:flex;gap:20px;align-items:center;min-height:44px;font-size:9px;text-transform:uppercase;letter-spacing:.08em;padding:0}
.director-toolbar button span{font-size:25px}
.director-sheet .editorial-page{padding:48px 42px 28px;min-height:0}
:root[data-direction="programme"] .director-sheet .about-intro{grid-template-columns:1.4fr .8fr;gap:42px;padding-bottom:50px}
:root[data-direction="programme"] .director-sheet .about-copy h1{font-size:clamp(48px,5vw,73px)}
.director-sheet .about-copy .intro{font-size:24px}
.director-sheet .portrait-wrap img{height:350px}
.director-sheet .portrait-caption{flex-direction:column;gap:5px;font-size:8px}
.director-sheet .contact-heading{display:block}
.director-sheet .contact-heading h2{font-size:57px;margin-bottom:22px}
.director-sheet .contact-grid{gap:35px 28px}
.director-sheet .contact-card a{overflow-wrap:anywhere}
.director-sheet .site-footer{flex-wrap:wrap}
@media(max-width:760px){.director-sheet{width:100%}.director-toolbar{padding:16px 22px;gap:10px}.director-toolbar .eyebrow{max-width:120px;line-height:1.6}.director-sheet .editorial-page{padding:35px 25px 26px}:root[data-direction="programme"] .director-sheet .about-intro{gap:35px}:root[data-direction="programme"] .director-sheet .about-copy h1{font-size:58px}.director-sheet .portrait-wrap img{height:350px}.director-sheet .portrait-caption{flex-direction:row;gap:10px}.director-sheet .contact-heading h2{font-size:49px}}
.director-sheet .contact-section{scroll-margin-top:110px}

/* Design 3: no Watch film button; the titles and the picture open the film */
.programme-watch { display: none !important; }