/* JPJ's existing logo blue: identity and interaction, alongside the lime scenes.
   White on brand blue is 4.94:1. The lighter ink variant is for small dark-surface text. */
:root {
  --brand-blue: #006edb;
  --brand-blue-ink: #4092e4;
  --brand-blue-hover: #005bb8;
  --blue: var(--brand-blue);
}

::selection { background: var(--brand-blue); color: #fff; }
/* Use the original complete logo artwork without cropping or recolouring. */
.cinema-brand { display: block; align-self: flex-start; flex-shrink: 0; line-height: 0; }
.cinema-brand .brand-logo { display: block; width: 78px; height: auto; }
.footer-logo { display: block; flex-shrink: 0; line-height: 0; }
.footer-logo img { display: block; width: 64px; height: auto; }
@media (max-width: 700px) {
  .cinema-brand .brand-logo { width: 62px; }
  .credits-bottom { display: grid; grid-template-columns: 1fr auto; gap: 12px 20px; }
  .credits-bottom > span { grid-column: 1; }
  .credits-bottom .footer-logo { display: block; grid-column: 2; grid-row: 1 / 3; }
  .footer-logo img { width: 52px; }
}
.site-header nav a:last-child { color: var(--brand-blue-ink); }
.site-header nav a > span::after,
.reading-progress,
.nav-location i,
.signal-dot,
.dock-dot,
.scroll-track i,
.studio-location > .signal-dot { background: var(--brand-blue); }

/* One consistent action colour across the home page and film dossiers. */
.pill-accent { background: var(--brand-blue); color: #fff; }
.pill-accent:hover { background: var(--brand-blue-hover); color: #fff; }
.pill-light:hover,
.pill-dark:hover,
.credits-up:hover > span {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.chapter-role { border-left-color: var(--brand-blue); }
.finale-top .signal-dot { background: var(--black); }

/* The shutters and the closing signature repeat the same brand moment. */
.footer-signature { color: var(--brand-blue); }
.manifesto-orbit { color: var(--brand-blue); }
.footer-navigation > a:hover,
.footer-legal > a:hover,
.archive-row:hover { color: var(--brand-blue-ink); }

/* Keep editorial headings and big scene backgrounds in their original palette. */
.inner-page .page-intro .markers,
.inner-page .person-location .markers { color: var(--brand-blue); }
.inner-page .portfolio-count { border-left-color: var(--brand-blue); }
.inner-page .project-caption h2 a:hover,
.inner-page .text-play:hover { color: var(--brand-blue-ink); }
.inner-page .project-image:hover .image-link,
.inner-page .project-image:focus-visible .image-link,
.clip-visual:hover .clip-play,
.clip-visual:focus-visible .clip-play,
.inner-page .clip-visual:hover .clip-play,
.film-clips .clip-visual:focus-visible .clip-play {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.film-dialog .dialog-close:hover,
.film-dialog .clip-playlist button[aria-pressed=true] {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}

.film-chapters > span > i,
.film-chapters a::after { background: var(--brand-blue); }
.film-chapters a:hover,
.film-chapters a[aria-current="location"],
.film-frame-label,
.film-scroll > span,
.film-back:hover,
.film-credits > .eyebrow,
.film-sources summary:hover,
.film-sources a:hover { color: var(--brand-blue-ink); }
.film-role { border-top-color: var(--brand-blue); }
.film-festival .markers { color: var(--brand-blue); }
.film-next-link:hover .film-next-title > span,
.film-next-link:focus-visible .film-next-title > span {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.film-experience :where(a, button):focus-visible { outline-color: var(--brand-blue-ink); }
.film-story :where(a, button):focus-visible { outline-color: var(--brand-blue); }

/* Keep the complete company name legible at every navigation size. */
.site-header nav { gap: clamp(16px, 2.2vw, 32px); }
.site-header nav a { white-space: nowrap; }
.fold-message h2 > span { display: inline-block; font-size: .46em; margin-top: .22em; }
@media (min-width: 701px) and (max-width: 1100px) {
  .nav-location { display: none; }
  .site-header .nav-wrap { gap: 22px; }
  .site-header nav a { font-size: 10px; }
}
@media (max-width: 700px) {
  .site-header nav.open { grid-template-columns: 1fr; gap: 4px; }
  .site-header nav.open a { min-height: 44px; }
  .manifesto-label > .eyebrow { max-width: 220px; }
  .manifesto-foot > .eyebrow { display: block; max-width: 100%; }
}

/* The original artwork is the reveal, rather than a typeset imitation. */

.direction-icon { display: inline-block; width: 1em; height: 1em; vertical-align: -.1em; fill: none; stroke: currentColor; stroke-width: 1.3; }
.finale-arrow > svg, .fold-symbol > svg, .archive-arrow > svg { width: 1em; height: 1em; }
.film-back { display: inline-flex; align-items: center; gap: 8px; }
.film-next-title > span > svg { width: 55%; height: 55%; }
.credits-up > span > svg { width: 19px; height: 19px; }
.about-finale .finale-link h2 { font-size: clamp(62px, 10vw, 160px); }
.about-finale .finale-link h2 > span { display: inline-block; font-size: .62em; margin-top: .16em; }
.about-finale .finale-arrow { font-size: clamp(60px, 11vw, 175px); }
.about-finale .finale-link:hover .finale-arrow { transform: translate(6px, -6px); }

/* A compact closing sequence with film destinations and a blue end frame. */
.production-footer { position: relative; overflow: hidden; padding: 36px 0 0; background: #090c0f; }
.production-footer .credits-top { padding-bottom: 22px; }
.footer-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: 9%; padding: 58px 0; border-bottom: 1px solid #ffffff28; }
.footer-discover { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 25px; }
.footer-discover > .eyebrow { grid-column: 1 / -1; color: var(--muted); }
.footer-display { font: 600 clamp(65px, 8.5vw, 140px)/.88 'Barlow Condensed', sans-serif; letter-spacing: -.02em; }
.footer-discover-arrow { display: grid; place-items: center; width: clamp(62px, 7vw, 112px); aspect-ratio: 1; background: var(--brand-blue); color: white; overflow: hidden; transition: background .3s, transform .5s var(--ease); }
.footer-discover-arrow svg { width: 60%; height: 60%; transition: transform .5s var(--ease); }
.footer-discover:hover .footer-discover-arrow { background: var(--brand-blue-hover); }
.footer-discover:hover .footer-discover-arrow svg { transform: translate(5px, -5px); }
.footer-film-list { align-self: center; }
.footer-film-list > a { display: grid; grid-template-columns: 25px 1fr 24px; align-items: center; gap: 15px; padding: 19px 0; border-bottom: 1px solid #ffffff28; transition: color .3s, padding .4s var(--ease); }
.footer-film-list > a:hover { color: var(--brand-blue-ink); padding-left: 8px; }
.footer-film-list > a > span:nth-child(2) { font: 500 clamp(25px, 2.4vw, 40px)/1 'Barlow Condensed', sans-serif; }
.footer-film-no { font-size: 9px; color: var(--brand-blue-ink); }
.footer-film-list > .footer-all { display: flex; justify-content: space-between; border: 0; font-size: 11px; color: var(--muted); }
.footer-base { display: grid; grid-template-columns: 90px 1fr 1fr; align-items: start; gap: 40px; padding: 42px 0; }
.footer-brandmark { display: block; width: 82px; }
.footer-brandmark img { width: 100%; height: auto; }
.footer-description { font-size: 13px; line-height: 1.9; color: var(--muted); }
.production-footer .footer-navigation { display: flex; flex-direction: column; align-items: stretch; }
.production-footer .footer-navigation > a { display: flex; justify-content: space-between; min-height: 36px; gap: 20px; font-size: 12px; }
.footer-colophon { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 24px 0 30px; border-top: 1px solid #ffffff28; color: var(--muted); font-size: 9px; }
.footer-colophon nav { display: flex; gap: 25px; }
.footer-colophon nav a { padding: 8px 0; }
.footer-colophon a:hover { color: white; }
.footer-blue-line { height: 10px; background: var(--brand-blue); }
@media (max-width: 700px) {
  .about-finale .finale-link { align-items: center; }
  .about-finale .finale-link h2 { font-size: 14vw; }
  .about-finale .finale-link h2 > span { font-size: .54em; }
  .about-finale .finale-arrow { font-size: 12vw; }
  .production-footer { padding-top: 24px; }
  .production-footer .credits-top > .eyebrow { max-width: 170px; font-size: 8px; line-height: 1.7; }
  .footer-feature { grid-template-columns: 1fr; gap: 32px; padding: 35px 0 24px; }
  .footer-discover { gap: 22px; }
  .footer-display { font-size: 20vw; }
  .footer-discover-arrow { width: 76px; }
  .footer-film-list > a { padding: 17px 0; }
  .footer-film-list > a > span:nth-child(2) { font-size: 28px; }
  .footer-base { grid-template-columns: 62px 1fr; gap: 24px; padding: 30px 0; }
  .footer-brandmark { width: 62px; }
  .footer-description { font-size: 12px; }
  .production-footer .footer-navigation { grid-column: 1 / -1; padding-top: 12px; }
  .production-footer .footer-navigation > a { min-height: 44px; }
  .footer-colophon { display: grid; grid-template-columns: 1fr auto; gap: 12px; font-size: 8px; padding-bottom: 28px; }
  .footer-colophon nav { grid-column: 1 / -1; grid-row: 1; gap: 24px; font-size: 11px; }
  .footer-colophon > span:last-child { text-align: right; }
}
@media (prefers-reduced-motion: reduce) {
  .footer-film-list > a, .footer-discover-arrow, .footer-discover-arrow svg { transition: none; }
}