/* Partnerships For Change design layer. Shared by the Next.js and WordPress demos. */
@import url("fonts.css");

:root {
  /* ground and ink */
  --ground: #f3f5f8;
  --ground-sunk: #e6ebf2;
  --paper: #ffffff;
  --ink: #0b1a3e;
  --ink-soft: #3c4a68;
  --rule: #c9d1de;
  --link: #2a4a8a;

  /* strands */
  --education: #2f6cb0;
  --education-tint: #d6e5f6;
  --health: #c8432a;
  --health-tint: #f7ddd6;
  --climate: #22706f;
  --climate-tint: #d3e8e6;
  --media: #0c1a3f;
  --media-tint: #d9dde8;

  /* giving: gold is reserved for Donate */
  --gold: #ddb800;
  --gold-press: #c9a700;

  /* type */
  --font-display: "Anton", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-label: "Saira Extra Condensed", "Arial Narrow", sans-serif;
  --font-text: "Barlow", "Segoe UI", system-ui, sans-serif;

  /* space */
  --gutter: clamp(16px, 2.6vw, 36px);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 112px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--ink); }
::selection { background: var(--ink); color: var(--gold); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: var(--ink-soft) var(--ground-sunk); }
input, button { font: inherit; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 20;
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s4);
  text-decoration: none; font-weight: 600; transition: top 160ms var(--ease-out);
}
.skip:focus { top: var(--s3); }
.skip:hover, .skip:focus { color: var(--paper); }

.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 0.86;
  text-wrap: balance;
}

/* ---------- ticket: the only gold on the page ---------- */
.ticket {
  --notch: 7px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: 48px; padding: 10px 26px;
  background: var(--gold); color: var(--ink);
  font-family: var(--font-label); font-weight: 800; font-size: 26px; letter-spacing: 0.01em;
  line-height: 1; text-decoration: none; white-space: nowrap;
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 calc(var(--notch) - 0.5px), #000 var(--notch)) left / 51% 14px repeat-y,
    radial-gradient(circle at 100% 50%, #0000 calc(var(--notch) - 0.5px), #000 var(--notch)) right / 51% 14px repeat-y;
          mask:
    radial-gradient(circle at 0 50%, #0000 calc(var(--notch) - 0.5px), #000 var(--notch)) left / 51% 14px repeat-y,
    radial-gradient(circle at 100% 50%, #0000 calc(var(--notch) - 0.5px), #000 var(--notch)) right / 51% 14px repeat-y;
  transition: transform 160ms var(--ease-out), background-color 160ms ease;
}
.ticket:hover { color: var(--ink); background: var(--gold-press); }
.ticket:active { transform: scale(0.97); }
.ticket--lg { font-size: clamp(24px, 2.4vw, 34px); padding: 16px 34px; min-height: 64px; }
.ticket__inner { border: 2px solid rgb(11 26 62 / 0.55); padding: 6px 12px; border-radius: 2px; }

/* ---------- strand tabs and status bands ---------- */
.tab {
  display: inline-flex; align-items: center;
  font-family: var(--font-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1; color: #fff;
  padding: 7px 12px 6px; font-size: 17px;
}
.tab--education { background: var(--education); }
.tab--health { background: var(--health); }
.tab--climate { background: var(--climate); }
.tab--media { background: var(--media); }
.tab--lg { font-size: clamp(22px, 2.3vw, 34px); padding: 14px 22px 12px; }

.band {
  display: inline-flex; align-items: center;
  font-family: var(--font-label); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.03em; line-height: 1; color: var(--ink);
  background: var(--education-tint); padding: 7px 12px 6px; font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.band--pending { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rule); color: var(--ink-soft); }
.band--lg { font-size: clamp(22px, 2.3vw, 34px); padding: 14px 22px 12px; }

.kind {
  font-family: var(--font-label); font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.08em; font-size: 15px; color: var(--ink-soft);
}

/* ---------- header ---------- */
.masthead {
  position: sticky; top: 0; z-index: 10;
  background: rgb(243 245 248 / 0.94);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.masthead[data-scrolled] { border-bottom-color: var(--rule); }
.masthead__row {
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--s6);
  padding: 12px var(--gutter);
  max-width: 1600px; margin: 0 auto;
}
.masthead__logo img { height: 64px; width: auto; }
.masthead__line {
  margin: 0; font-family: var(--font-text); font-weight: 800; font-size: clamp(18px, 1.75vw, 30px);
  letter-spacing: -0.02em; line-height: 1.05; color: var(--ink); white-space: nowrap;
}
.nav { display: flex; gap: clamp(16px, 2vw, 34px); }
.nav a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: 17px; padding: 10px 0; position: relative; }
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 4px; height: 2px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }
.nav a[aria-current="page"]::after { transform: scaleX(1); }
.menu { display: none; }

/* ---------- programme: featured screening ---------- */
.programme {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 3.6fr);
  gap: 0; max-width: 1600px; margin: 0 auto; padding: var(--s2) var(--gutter) var(--s8);
}
.feature { padding-right: clamp(20px, 2.2vw, 32px); display: flex; flex-direction: column; gap: var(--s4); }
.feature__still { margin: 0; overflow: hidden; background: var(--ground-sunk); aspect-ratio: 1.92; }
.feature__still img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.feature__title { margin: var(--s2) 0 0; font-size: clamp(52px, 9.6vw, 150px); white-space: nowrap; line-height: 0.95; color: var(--ink); }
.feature__title a { color: inherit; text-decoration: none; }
.feature__credits { margin: 0; font-size: clamp(17px, 1.55vw, 23px); color: var(--ink); max-width: 70ch; }
.feature__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s4); margin-top: var(--s2); }
.feature__actions .sep { width: 1.5px; background: var(--rule); margin: 0 var(--s2); }

.showing { border-left: 1.5px solid var(--rule); padding-left: clamp(20px, 2.2vw, 32px); display: flex; flex-direction: column; }
.showing__title { margin: 0 0 var(--s2); font-size: clamp(40px, 4.3vw, 64px); line-height: 0.95; text-transform: none; letter-spacing: -0.005em; }
.showing ol { list-style: none; margin: 0; padding: 0; }
.row {
  display: grid; grid-template-columns: clamp(84px, 7.4vw, 108px) minmax(0, 1fr); gap: var(--s4); align-items: center;
  padding: 10px 0; border-bottom: 1.5px solid var(--rule); text-decoration: none; color: var(--ink);
}
.row__thumb { aspect-ratio: 3 / 4; overflow: hidden; background: var(--ground-sunk); box-shadow: 0 2px 6px rgb(11 26 62 / 0.14); }
.row__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: transform 320ms var(--ease-out); }
.row__body { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.row__title { font-size: clamp(22px, 2.1vw, 34px); margin: 0; line-height: 1.02; }
@media (hover: hover) and (pointer: fine) {
  .row:hover .row__thumb img { transform: scale(1.04); }
  .row:hover .row__title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
}
.showing__foot { margin-top: var(--s5); }
.row__cue { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--link); font-size: 15px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 0.2em; }
.row__cue svg { width: 16px; height: 16px; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .row:hover .row__cue svg { transform: translateX(3px); } }
.row__credit { font-size: 13px; color: var(--ink-soft); line-height: 1.3; }

/* placeholder frames: real images still to come from PFC */
.placeholder {
  width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: var(--s3);
  background: var(--ground-sunk);
  outline: 1.5px dashed var(--rule); outline-offset: -8px;
  color: var(--ink-soft); font-size: 12px; font-weight: 600; line-height: 1.25;
}

.button-line {
  display: inline-flex; align-items: center; gap: var(--s2); min-height: 48px;
  padding: 10px 20px; border: 2px solid var(--ink); color: var(--ink); background: transparent;
  font-weight: 700; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.button-line:hover { background: var(--ink); color: var(--paper); }
.button-line:active { transform: scale(0.97); }
.button-line svg { width: 18px; height: 18px; }

/* ---------- full season ---------- */
.section { max-width: 1600px; margin: 0 auto; padding: var(--s9) var(--gutter) 0; }
.section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s5); margin-bottom: var(--s6); }
.section__title { margin: 0; font-size: clamp(48px, 6vw, 96px); }
.section__lede { margin: var(--s3) 0 0; max-width: 60ch; color: var(--ink-soft); font-size: 18px; }

.filters { display: flex; flex-wrap: wrap; gap: var(--s2); }
.filter {
  min-height: 44px; padding: 8px 16px; border: 2px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--font-label); font-weight: 700; font-size: 18px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out);
}
.filter:active { transform: scale(0.97); }
.filter[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

.season { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.entry {
  display: grid; grid-template-columns: 140px minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: var(--s5);
  align-items: center; padding: 20px 0; border-bottom: 1.5px solid var(--rule);
  transition: opacity 260ms var(--ease-out), filter 260ms var(--ease-out);
}
.entry[data-dim] { opacity: 0.28; filter: grayscale(1); }
.entry__title { margin: 0; font-size: clamp(28px, 2.7vw, 42px); line-height: 1.02; }
.entry__title a { color: inherit; text-decoration: none; }
.entry__title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.entry__place { margin: 4px 0 0; color: var(--ink-soft); font-size: 16px; }
.entry__go { justify-self: end; }
.entry__go a { font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.entry__go svg { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.entry__go a:hover svg { transform: translateX(3px); }

/* ---------- submissions (fiscal sponsorship) ---------- */
.submissions {
  margin-top: var(--s9); background: var(--ink); color: var(--paper);
}
.submissions__inner {
  max-width: 1600px; margin: 0 auto; padding: var(--s8) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--s8); align-items: start;
}
.submissions h2 { margin: 0; font-size: clamp(48px, 5.6vw, 92px); color: var(--paper); }
.submissions p { color: #c7d0e3; max-width: 56ch; margin: var(--s4) 0 0; font-size: 18px; }
.offer { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1.5px solid #34466f; }
.offer li { padding: 16px 16px 16px 0; border-bottom: 1.5px solid #34466f; font-family: var(--font-label); font-weight: 700; text-transform: uppercase; font-size: 22px; letter-spacing: 0.03em; }
.submissions .button-line { border-color: var(--paper); color: var(--paper); margin-top: var(--s6); }
.submissions .button-line:hover { background: var(--paper); color: var(--ink); }
.fine { font-size: 14px !important; color: #9fb0cf !important; }

/* ---------- the record ---------- */
.record { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 3px solid var(--ink); }
.figure { padding: var(--s5) var(--s5) var(--s5) 0; border-right: 1.5px solid var(--rule); display: flex; flex-direction: column; gap: var(--s2); }
.figure:last-child { border-right: 0; }
.figure + .figure { padding-left: var(--s5); }
.figure__n { font-family: var(--font-display); font-weight: 400; font-size: clamp(56px, 6vw, 96px); line-height: 0.9; font-variant-numeric: tabular-nums; }
.figure__n--ghost { color: transparent; -webkit-text-stroke: 2px var(--ink-soft); }
.figure__what { margin: 0; font-size: 17px; }
.figure__src { margin: 0; font-size: 14px; color: var(--ink-soft); }
.figure__src strong { color: var(--climate); font-weight: 700; }

/* ---------- recently ---------- */
.recent { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--ink); }
.recent li { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s5); padding: 20px 0; border-bottom: 1.5px solid var(--rule); align-items: baseline; }
.recent time { font-family: var(--font-label); font-weight: 700; font-size: 26px; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.recent p { margin: 0; font-size: 19px; max-width: 70ch; }

/* ---------- footer ---------- */
.footer { margin-top: var(--s9); background: var(--ink); color: #c7d0e3; }
.footer__inner { max-width: 1600px; margin: 0 auto; padding: var(--s8) var(--gutter) var(--s6); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.3fr; gap: var(--s7); }
.footer h2 { margin: 0 0 var(--s3); font-family: var(--font-label); font-size: 18px; letter-spacing: 0.06em; text-transform: uppercase; color: #9fb0cf; font-weight: 700; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer a { color: var(--paper); text-decoration: none; }
.footer a:hover { text-decoration: underline; color: var(--paper); }
.footer__name { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: 34px; color: var(--paper); line-height: 1; margin: 0 0 var(--s3); }
.footer address { font-style: normal; line-height: 1.6; }
.footer label { display: block; margin-bottom: var(--s2); }
.footer input {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1.5px solid #5d6f96; background: #13244d; color: var(--paper);
}
.footer input::placeholder { color: #9fb0cf; }
.footer button { margin-top: var(--s2); border-color: var(--paper); color: var(--paper); }
.footer button:hover { background: var(--paper); color: var(--ink); }
.footer__legal { max-width: 1600px; margin: 0 auto; padding: var(--s5) var(--gutter) var(--s6); border-top: 1px solid #2a3b63; font-size: 14px; color: #9fb0cf; }

/* ---------- motion: the programme runs like a screening ----------
   On load the projector shutter opens on the feature. On scroll the house lights come up on it,
   ink rules draw on, the season prints row by row, and the record prints only what is verified.
   The Donate ticket tilts toward the pointer (motion.js).
   Everything below runs only under prefers-reduced-motion: no-preference. Scroll moments also need
   .pfc-motion on <html> (set by motion.js on the public site, never inside an editor) and a browser
   with scroll-driven animations; anywhere else the page is simply static. */
@media (prefers-reduced-motion: no-preference) {
  .feature__still img { animation: shutter 900ms var(--ease-out) both; }
  .row { animation: settle 520ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 60ms + 260ms); }

  /* the ticket: a real stub in 3D; pressing flattens it */
  .pfc-motion .ticket {
    position: relative;
    transform: perspective(520px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform 420ms var(--ease-out), background-color 160ms ease;
  }
  .pfc-motion .ticket[data-tilt] { transition: transform 120ms var(--ease-out), background-color 160ms ease; }
  .pfc-motion .ticket::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgb(255 255 255 / 0.34), transparent 58%);
    transition: opacity 240ms ease;
  }
  .pfc-motion .ticket[data-tilt]::after { opacity: 1; }
  .pfc-motion .ticket:active { transform: scale(0.97); transition-duration: 120ms; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* house lights: the featured still dims and drifts inside its frame as the page moves on */
    .pfc-motion .programme .feature__still { animation: lights auto linear both; animation-timeline: scroll(root); animation-range: 0 80vh; }
    .pfc-motion .programme .feature__still img {
      animation: shutter 900ms var(--ease-out) both, drift auto linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0 80vh;
    }

    /* ink rules draw on as each list comes into view */
    .pfc-motion :is(.season, .record, .recent) { position: relative; border-top-color: transparent; }
    .pfc-motion :is(.season, .record, .recent)::before {
      content: ""; position: absolute; left: 0; right: 0; top: -3px; height: 3px; background: var(--ink);
      transform-origin: left; animation: rule-draw auto var(--ease-out) both;
      animation-timeline: view(); animation-range: entry 20% cover 30%;
    }
    .pfc-motion .section__head > div { animation: lift auto var(--ease-out) both; animation-timeline: view(); animation-range: entry 10% cover 25%; }

    /* the season prints: each row wipes on as it reaches the page (opacity is left to the filter) */
    .pfc-motion .entry,
    .pfc-motion .recent li { animation: print auto var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 22%; }

    /* the record: verified figures print solid; unverified ones only ever draw as outlines */
    .pfc-motion .figure__n:not(.figure__n--ghost) { animation: print-up auto var(--ease-out) both; animation-timeline: view(); animation-range: entry 30% cover 35%; }
    .pfc-motion .figure__n--ghost { animation: outline-in auto ease both; animation-timeline: view(); animation-range: entry 30% cover 40%; }

    /* submissions: what PFC provides is billed item by item */
    .pfc-motion .offer li { animation: lift auto var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
  }
}

@keyframes shutter {
  from { clip-path: inset(9% 0 9% 0); transform: scale(1.05); filter: brightness(0.9); }
  to { clip-path: inset(0 0 0 0); transform: scale(1); filter: none; }
}
@keyframes settle {
  from { transform: translateY(10px); filter: blur(2px); }
  to { transform: none; filter: none; }
}
@keyframes lights { to { filter: brightness(0.62) saturate(0.8); } }
@keyframes drift { from { scale: 1.06; translate: 0 -1.5%; } to { scale: 1.06; translate: 0 2.5%; } }
@keyframes rule-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lift { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes print {
  from { clip-path: inset(-8px 100% -8px -8px); translate: -14px 0; }
  to { clip-path: inset(-8px -8px -8px -8px); translate: 0 0; }
}
@keyframes print-up {
  from { clip-path: inset(100% -8px -8px -8px); translate: 0 18px; }
  to { clip-path: inset(-8px -8px -8px -8px); translate: 0 0; }
}
@keyframes outline-in { from { -webkit-text-stroke-color: transparent; } to { -webkit-text-stroke-color: var(--ink-soft); } }

/* ---------- responsive ---------- */
@media (max-width: 1320px) {
  .masthead__line { grid-row: 2; grid-column: 1 / -1; font-size: clamp(20px, 3.4vw, 28px); padding-bottom: 4px; }
  .masthead__row { grid-template-columns: auto 1fr auto; }
  .nav { justify-content: flex-end; }
}
@media (max-width: 1180px) {
  .nav { justify-content: flex-end; }
  .programme { grid-template-columns: minmax(0, 1fr); }
  .feature { padding-right: 0; }
  .showing { border-left: 0; padding-left: 0; margin-top: var(--s7); border-top: 3px solid var(--ink); padding-top: var(--s4); }
  .showing ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s6); }
  .entry { grid-template-columns: 110px minmax(0, 1.5fr) minmax(0, 1fr) auto; }
  .entry__status { display: none; }
  .record { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure:nth-child(2) { border-right: 0; }
  .figure:nth-child(3) { padding-left: 0; }
  .figure:nth-child(n+3) { border-top: 1.5px solid var(--rule); }
  .submissions__inner, .footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .programme { padding-bottom: var(--s5); }
  .section { padding-top: var(--s8); }
  .submissions, .footer { margin-top: var(--s8); }
  .masthead { position: static; }
  .masthead__row { gap: var(--s3); padding-block: 8px; }
  .masthead__logo img { height: 46px; }
  .nav { display: none; }
  .menu { display: block; position: relative; }
  .menu summary {
    list-style: none; cursor: pointer; min-width: 44px; min-height: 44px; display: grid; place-items: center; color: var(--ink);
  }
  .menu summary::-webkit-details-marker { display: none; }
  .menu nav { position: absolute; right: 0; top: 52px; background: var(--paper); box-shadow: 0 12px 30px rgb(11 26 62 / 0.16); padding: var(--s3) var(--s5); display: grid; min-width: 220px; }
  .menu nav a { color: var(--ink); text-decoration: none; padding: 10px 0; font-weight: 600; }
  .masthead .ticket { font-size: 20px; padding: 8px 16px; min-height: 44px; }
  .feature__actions .sep { display: none; }
  .feature__actions .ticket { width: 100%; }
  .showing ol { grid-template-columns: minmax(0, 1fr); }
  .entry { grid-template-columns: 84px minmax(0, 1fr); row-gap: var(--s2); }
  .entry__kind, .entry__go { grid-column: 2; justify-self: start; }
  .record, .submissions__inner, .footer__inner, .offer { grid-template-columns: minmax(0, 1fr); }
  .figure, .figure + .figure { padding-left: 0; border-right: 0; border-top: 1.5px solid var(--rule); }
  .recent li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ---------- archived work: never presented as current ---------- */
.band--archive { background: var(--ground-sunk); color: var(--ink-soft); }

/* ---------- program page: a single screening in the programme ---------- */
.screening { max-width: 1600px; margin: 0 auto; padding: var(--s4) var(--gutter) 0; }
.crumbs { font-size: 15px; color: var(--ink-soft); margin: 0 0 var(--s4); display: flex; gap: var(--s2); }
.crumbs a { color: var(--ink-soft); }
.screening__still { margin: 0; aspect-ratio: 2.4; overflow: hidden; background: var(--ground-sunk); }
.screening__still img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.screening__still .placeholder { font-size: 16px; }
.screening__title { margin: var(--s5) 0 var(--s2); font-size: clamp(56px, 10vw, 160px); line-height: 0.95; }
.screening__credits { margin: 0; font-size: clamp(17px, 1.55vw, 23px); max-width: 70ch; }
.screening__meta { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s4); margin-top: var(--s5); padding-bottom: var(--s6); border-bottom: 3px solid var(--ink); }
.screening__meta .sep { width: 1.5px; background: var(--rule); margin: 0 var(--s2); }
.screening__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: var(--s8); padding-top: var(--s7); }
.prose { max-width: 66ch; font-size: 19px; line-height: 1.65; }
.prose h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 3vw, 44px); line-height: 1; margin: var(--s7) 0 var(--s3); }
.prose > :first-child { margin-top: 0; }
.facts { border-top: 3px solid var(--ink); align-self: start; }
.facts div { padding: 14px 0; border-bottom: 1.5px solid var(--rule); display: grid; gap: 2px; }
.facts dt { font-family: var(--font-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 15px; color: var(--ink-soft); }
.facts dd { margin: 0; font-size: 17px; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .screening__still { aspect-ratio: 1.5; }
  .screening__meta .sep { display: none; }
  .screening__meta .ticket { width: 100%; }
  .screening__body { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
}

/* Also showing at full width (foot of a program page) */
.showing--wide { border-left: 0; padding-left: 0; border-top: 3px solid var(--ink); padding-top: var(--s4); }
.showing--wide ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s7); }
@media (max-width: 760px) { .showing--wide ol { grid-template-columns: minmax(0, 1fr); } }