body:has([id="X1134136285"]) {
  background: #000000 !important;
  color: #ffffff !important;
}

[id="X1134136285"].page,
[id="X1134136285"] .page-layout {
  width: 100%;
  max-width: 100%;
  padding: 0;
  background: transparent !important;
  color: #ffffff !important;
}

[id="X1134136285"].page {
  position: relative;
  isolation: isolate;
	min-height: auto;
}

[id="X1134136285"] .page-layout {
  position: relative;
  z-index: 2;
	align-items: flex-start;
}

[id="X1134136285"] .page-content {
  --site-type-size: 11px;
  position: relative;
  box-sizing: border-box;
  /* Wide black margins either side, like georgedommpower.com (Oct 8 2026). */
  --page-gutter: clamp(24px, 16.5vw, 560px);
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: 18px var(--page-gutter) 4rem !important;
  text-align: left;
  background: transparent !important;
  color: #ffffff !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: var(--site-type-size) !important;
  font-weight: 400;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

[id="X1134136285"] bodycopy,
[id="X1134136285"] a,
[id="X1134136285"] text-icon {
  color: #ffffff !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: var(--site-type-size) !important;
  font-weight: 400;
  line-height: 1.65;
}

/* Name bar along the top (built by home.js from the Cargo heading) */

[id="X1134136285"] .index-heading {
  position: relative;
  z-index: 1;
  margin: 0 0 2rem;
  font-family: inherit !important;
  font-size: var(--site-type-size) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  color: #ffffff;
}

/* Project list */

[id="X1134136285"] .project-accordion {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  color: #ffffff;
}

[id="X1134136285"] .project-item {
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

[id="X1134136285"] .project-item summary {
  position: relative;
  display: flex !important;
  align-items: baseline;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0.35rem 0 0.3rem;
  color: #ffffff;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--site-type-size) !important;
  font-weight: 400;
  line-height: 1.65;
  cursor: pointer;
  list-style: none !important;
  outline: none;
  transition: color 800ms ease;
}

/* No grey/blue flash when tapping a row on phones */
[id="X1134136285"] .project-item summary,
[id="X1134136285"] .project-navigation-link,
[id="X1134136285"] .video-controls button {
  -webkit-tap-highlight-color: transparent;
}

[id="X1134136285"] .project-item summary::-webkit-details-marker {
  display: none !important;
}

[id="X1134136285"] .project-item summary::marker {
  content: "" !important;
}

[id="X1134136285"] .project-title-text {
  border-bottom: 0;
  font-size: var(--site-type-size) !important;
  transition: border-color 800ms ease;
}

[id="X1134136285"] .project-category {
  flex: 0 0 auto;
  color: #8f8f8f;
  font-size: var(--site-type-size) !important;
  white-space: nowrap;
  transition: color 240ms ease;
}

[id="X1134136285"] .project-item[open] summary {
  color: #ffffff;
  font-style: normal;
}

[id="X1134136285"] .project-item[open] .project-title-text {
  font-style: normal;
}

/* Desktop project thumbnail preview */

[id="X1134136285"] .project-hover-preview {
  position: fixed;
  z-index: 1;
  inset: 0;
  display: block;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #000000;
  opacity: 0;
  pointer-events: none;
  transform: none;
  transition: opacity 360ms ease;
}

[id="X1134136285"] .project-hover-preview.is-visible {
  opacity: 1;
}

[id="X1134136285"] .project-hover-preview::after {
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(0, 0, 0, 0.58);
  content: "";
}

[id="X1134136285"] .project-hover-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: auto;
}

/* Intro showreel behind the project list; fades out for good on first hover or open */

[id="X1134136285"] .page-background {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background: #000000;
  pointer-events: none;
  transition: opacity 800ms ease;
}

/* Backup: never draw caption text over the intro reel */
[id="X1134136285"] .page-background video::cue {
  visibility: hidden;
  color: transparent;
  background: transparent;
}

[id="X1134136285"] .page-background video::-webkit-media-text-track-container {
  display: none !important;
}

[id="X1134136285"] .page-background video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dim so the white type stays legible over bright footage */
[id="X1134136285"] .page-background::after {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  content: "";
}

[id="X1134136285"].intro-dismissed .page-background,
[id="X1134136285"].is-light-theme .page-background {
  opacity: 0;
}

/* Open project: exactly the same width as its menu row */

[id="X1134136285"] .project-content {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  padding: 0.75rem 0 2.5rem;
}

/* Horizontal carousel */

[id="X1134136285"] .project-carousel {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: flex-start;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  overflow-x: auto !important;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  touch-action: pan-x pan-y;
}

[id="X1134136285"] .project-carousel::-webkit-scrollbar {
  display: none;
}

/* Multiple videos: 85% cards with the next card visible */

[id="X1134136285"] .project-slide {
  position: relative;
  display: block;
  box-sizing: border-box;
  flex: 0 0 85% !important;
  width: 85%;
  min-width: 85%;
  max-width: 85%;
  height: auto;
  margin: 0;
  padding: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* One video: fill the complete menu width */

[id="X1134136285"] .project-slide:only-child {
  flex: 0 0 100% !important;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

/* Preserve each Cargo/Vimeo item's own aspect ratio */

[id="X1134136285"] .project-slide media-item {
  position: relative !important;
  display: block !important;
  box-sizing: border-box;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  vertical-align: top;
}

[id="X1134136285"] .project-slide media-item::part(media) {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Direct Vimeo 2K MP4 players */

[id="X1134136285"] .video-wrap {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent !important;
}

[id="X1134136285"] .video-stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--video-ratio, 16 / 9);
  overflow: hidden;
  background: transparent;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

[id="X1134136285"] .video-stage video {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  object-fit: cover;
  background: transparent;
  cursor: pointer;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

[id="X1134136285"] .video-fullscreen-toggle {
  appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #ffffff;
  background: transparent;
  font: inherit;
  font-size: var(--site-type-size) !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Double-tap skip (touch): no browser zoom, brief "+3s" / "−3s" flash */
[id="X1134136285"] .video-stage {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

[id="X1134136285"] .video-skip-hint {
  position: absolute;
  z-index: 2;
  top: 50%;
  padding: 0.35rem 0.6rem;
  color: #ffffff;
  background: rgba(0, 0, 0, 0.45);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--site-type-size, 11px);
  line-height: 1;
  pointer-events: none;
  transform: translateY(-50%);
  animation: elliot-skip-hint 650ms ease forwards;
}

[id="X1134136285"] .video-skip-hint-back {
  left: 12%;
}

[id="X1134136285"] .video-skip-hint-forward {
  right: 12%;
}

@keyframes elliot-skip-hint {
  0% { opacity: 0; }
  15% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}

/* "↻ Replay" in place of the time once a video ends */
[id="X1134136285"] .video-time[data-replay="1"] {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[id="X1134136285"] .video-replay {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  transition: color 500ms ease;
}

[id="X1134136285"] .video-replay svg {
  display: block;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[id="X1134136285"] .video-time[data-replay="1"]:hover .video-replay {
  color: #8f8f8f;
}

[id="X1134136285"] .video-time[data-replay="1"]:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 3px;
}

[id="X1134136285"] .video-controls > * {
  flex: 0 0 auto;
}

[id="X1134136285"] .video-controls > .video-progress {
  flex: 1 1 auto;
  min-width: 0;
}

[id="X1134136285"] .video-mute-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 24px;
  -webkit-tap-highlight-color: transparent;
}

[id="X1134136285"] .video-mute-toggle svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

[id="X1134136285"] .video-mute-toggle svg .icon-fill {
  fill: currentColor;
  stroke: none;
}

[id="X1134136285"] .video-mute-toggle:hover {
  color: #8f8f8f;
}

[id="X1134136285"] .video-fullscreen-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 24px;
}

[id="X1134136285"] .video-fullscreen-toggle svg {
  display: block;
  width: 11px;
  height: 11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: square;
}

[id="X1134136285"] .video-fullscreen-toggle:hover {
  color: #8f8f8f;
}

[id="X1134136285"].is-light-theme .video-fullscreen-toggle {
  color: #000000 !important;
}

/* Fullscreen player: picture fills the screen, playbar along the bottom */
[id="X1134136285"] .video-wrap:fullscreen {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 2rem 1.25rem;
  background: #000000 !important;
}

[id="X1134136285"] .video-wrap:-webkit-full-screen {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 0 2rem 1.25rem;
  background: #000000 !important;
}

[id="X1134136285"].is-light-theme .video-wrap:fullscreen {
  background: #f8f8f8 !important;
}

[id="X1134136285"].is-light-theme .video-wrap:-webkit-full-screen {
  background: #f8f8f8 !important;
}

[id="X1134136285"] .video-wrap:fullscreen .video-stage {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

[id="X1134136285"] .video-wrap:-webkit-full-screen .video-stage {
  flex: 1 1 auto;
  min-height: 0;
  aspect-ratio: auto;
}

[id="X1134136285"] .video-wrap:fullscreen .video-stage video {
  object-fit: contain;
}

[id="X1134136285"] .video-wrap:-webkit-full-screen .video-stage video {
  object-fit: contain;
}

[id="X1134136285"] .video-mute-toggle {
  appearance: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  color: #ffffff;
  background: transparent;
  font: inherit;
  font-size: var(--site-type-size) !important;
  cursor: pointer;
}

[id="X1134136285"] .video-controls {
  /* One row that never wraps: time, progress bar (fills), then icons */
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 34px;
  gap: 10px;
  padding: 10px 0 0;
  color: #ffffff;
  background: transparent !important;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--site-type-size) !important;
  font-weight: 400;
  line-height: 24px;
}

[id="X1134136285"] .video-theme-toggle {
  appearance: none !important;
  -webkit-appearance: none !important;
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  color: #8f8f8f;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: 0;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--site-type-size) !important;
  font-weight: 400;
  line-height: 24px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 180ms ease;
}

[id="X1134136285"] .video-theme-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 24px;
}

[id="X1134136285"] .video-theme-toggle svg {
  display: block;
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 1.2;
}

[id="X1134136285"] .video-theme-toggle svg circle {
  fill: none;
}

[id="X1134136285"] .video-theme-toggle svg path {
  fill: currentColor;
  stroke: none;
}

[id="X1134136285"] .video-theme-toggle:hover,
[id="X1134136285"] .video-theme-toggle:active {
  color: #ffffff;
  background: none !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

[id="X1134136285"] .video-theme-toggle:focus-visible {
  outline: 1px dotted currentColor;
  outline-offset: 3px;
}

[id="X1134136285"] .video-theme-divider {
  color: rgba(255, 255, 255, 0.42);
}

[id="X1134136285"] .video-time {
  white-space: nowrap;
  font-size: var(--site-type-size) !important;
}

[id="X1134136285"] .video-progress {
  --progress: 0%;

  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 24px;
  margin: 0;
  padding: 0;
  background:
    linear-gradient(#ffffff, #ffffff) 0 50% / var(--progress) 2px no-repeat,
    linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.25)) 0 50% / 100% 1px no-repeat;
  cursor: pointer;
  touch-action: none;
}

[id="X1134136285"] .video-progress::-webkit-slider-runnable-track {
  width: 100%;
  height: 24px;
  background: transparent;
}

[id="X1134136285"] .video-progress::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 8px;
  height: 8px;
  margin-top: 8px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #000000;
}

[id="X1134136285"] .video-progress::-moz-range-track {
  width: 100%;
  height: 24px;
  background: transparent;
}

[id="X1134136285"] .video-progress::-moz-range-thumb {
  width: 8px;
  height: 8px;
  border: 1px solid #ffffff;
  border-radius: 50%;
  background: #000000;
}

/* Project information */

[id="X1134136285"] .project-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  box-sizing: border-box;
  width: 100%;
  gap: 1.5rem;
  padding-top: 0.75rem;
  color: #ffffff;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--site-type-size) !important;
  font-weight: 400;
  line-height: 1.5;
}

[id="X1134136285"] .project-meta-item {
  min-width: 0;
}

[id="X1134136285"] .project-meta-label {
  color: #8f8f8f;
}

[id="X1134136285"] .project-meta-right {
  margin-left: auto;
  text-align: right;
}

/* Previous and next project navigation */

[id="X1134136285"] .project-navigation {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  gap: 2rem;
  margin-top: 1.5rem;
}

[id="X1134136285"] .project-navigation-link {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 46%;
  gap: 0.2rem;
  margin: 0;
  padding: 0;
  border: 0;
  color: #ffffff;
  background: transparent;
  font: inherit;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--site-type-size) !important;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

[id="X1134136285"] .project-navigation-next {
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}

[id="X1134136285"] .project-navigation-direction {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
}

[id="X1134136285"] .project-navigation-arrow {
  color: #ffffff;
  transition: color 500ms ease;
}

[id="X1134136285"] .project-navigation-label {
  color: rgba(255, 255, 255, 0.45);
  transition: color 500ms ease;
}

[id="X1134136285"] .project-navigation-title {
  color: rgba(255, 255, 255, 0.7);
  transition: color 500ms ease;
}

[id="X1134136285"] .project-navigation-link:hover .project-navigation-arrow,
[id="X1134136285"] .project-navigation-link:hover .project-navigation-label,
[id="X1134136285"] .project-navigation-link:hover .project-navigation-title {
  color: #8f8f8f;
}

[id="X1134136285"] .project-navigation-short-label {
  display: none;
}

/* Footer: representation and sign-off */

[id="X1134136285"] .site-footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 2.5rem;
  color: #ffffff;
  font-size: var(--site-type-size) !important;
  line-height: 1.65;
}

[id="X1134136285"] .site-footer-label {
  color: #8f8f8f;
}

/* Match the project list type exactly, whatever Cargo applies to the footer */
[id="X1134136285"] .site-footer,
[id="X1134136285"] .site-footer *,
.mobile [id="X1134136285"] .site-footer,
.mobile [id="X1134136285"] .site-footer * {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
  font-size: var(--site-type-size, 11px) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

/* Same thin underline as the "Contact" link in the heading */
[id="X1134136285"] .site-footer a {
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(222, 222, 222, 0.26) !important;
  padding-bottom: 1px;
}

[id="X1134136285"] .site-footer a:hover {
  color: #8f8f8f !important;
  border-bottom-color: #8f8f8f !important;
}

[id="X1134136285"].is-light-theme .site-footer {
  color: #000000;
}

[id="X1134136285"].is-light-theme .site-footer-label {
  color: rgba(0, 0, 0, 0.62);
}

[id="X1134136285"].is-light-theme .site-footer a {
  color: #000000 !important;
  border-bottom-color: rgba(0, 0, 0, 0.42) !important;
}

/* Cargo mobile mode */

.mobile [id="X1134136285"] .page-content {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 16px 1.25rem 3rem !important;
}

.mobile [id="X1134136285"] .index-heading {
  margin-bottom: 2rem;
}

.mobile [id="X1134136285"] .project-item summary {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.75ch;
  padding: 0.35rem 0 0.3rem;
}

.mobile [id="X1134136285"] .project-title-text {
  min-width: 0;
}

.mobile [id="X1134136285"] .project-content {
  padding-bottom: 2rem;
}

.mobile [id="X1134136285"] .project-hover-preview {
  display: none !important;
}

.mobile [id="X1134136285"] .project-meta {
  gap: 1rem;
  padding-top: 0.65rem;
  font-size: var(--site-type-size) !important;
  line-height: 1.65 !important;
}

.mobile [id="X1134136285"] .project-meta-item,
.mobile [id="X1134136285"] .project-meta-label,
.mobile [id="X1134136285"] .video-controls,
.mobile [id="X1134136285"] .video-controls * {
  font-size: var(--site-type-size) !important;
}

.mobile [id="X1134136285"] .project-navigation {
  display: none !important;
}

.mobile [id="X1134136285"] .project-navigation-long-label {
  display: none;
}

.mobile [id="X1134136285"] .project-navigation-short-label {
  display: inline;
}

/* Standard browser fallback for mobile */

@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  [id="X1134136285"] .page-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 16px 1.25rem 3rem !important;
}

  [id="X1134136285"] .index-heading {
    margin-bottom: 2rem;
  }

  [id="X1134136285"] .project-item summary {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 0.75ch;
    padding: 0.35rem 0 0.3rem;
  }

  [id="X1134136285"] .project-title-text {
    min-width: 0;
  }

  [id="X1134136285"] .project-content {
    padding-bottom: 2rem;
  }

  [id="X1134136285"] .project-hover-preview {
    display: none !important;
  }

  [id="X1134136285"] .project-meta {
    gap: 1rem;
    padding-top: 0.65rem;
    font-size: var(--site-type-size) !important;
    line-height: 1.65 !important;
  }

  [id="X1134136285"] .project-meta-item,
  [id="X1134136285"] .project-meta-label,
  [id="X1134136285"] .video-controls,
  [id="X1134136285"] .video-controls * {
    font-size: var(--site-type-size) !important;
  }

  [id="X1134136285"] .project-navigation {
    display: none !important;
  }

  [id="X1134136285"] .project-navigation-long-label {
    display: none;
  }

  [id="X1134136285"] .project-navigation-short-label {
    display: inline;
  }

  [id="X1134136285"] .project-navigation-title {
    max-width: 145px;
  }
}

@media (max-width: 420px) {
  [id="X1134136285"] .project-meta,
  .mobile [id="X1134136285"] .project-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.1rem;
  }

  [id="X1134136285"] .project-meta-right,
  .mobile [id="X1134136285"] .project-meta-right {
    margin-left: 0;
    text-align: left;
  }
}

/* Optional white theme */

body:has([id="X1134136285"].is-light-theme) {
  background: #f8f8f8 !important;
  color: #000000 !important;
}

[id="X1134136285"].is-light-theme,
[id="X1134136285"].is-light-theme .page-layout,
[id="X1134136285"].is-light-theme .page-content {
  background: transparent !important;
  color: #000000 !important;
}

[id="X1134136285"].is-light-theme bodycopy,
[id="X1134136285"].is-light-theme a,
[id="X1134136285"].is-light-theme text-icon,
[id="X1134136285"].is-light-theme .index-heading,
[id="X1134136285"].is-light-theme .project-accordion,
[id="X1134136285"].is-light-theme .project-item summary,
[id="X1134136285"].is-light-theme .project-item[open] summary,
[id="X1134136285"].is-light-theme .video-mute-toggle,
[id="X1134136285"].is-light-theme .video-controls,
[id="X1134136285"].is-light-theme .project-meta,
[id="X1134136285"].is-light-theme .project-navigation-link,
[id="X1134136285"].is-light-theme .project-navigation-arrow {
  color: #000000 !important;
}

[id="X1134136285"].is-light-theme .project-navigation-label {
  color: rgba(0, 0, 0, 0.45);
}

[id="X1134136285"].is-light-theme .project-navigation-title {
  color: rgba(0, 0, 0, 0.7);
}

[id="X1134136285"].is-light-theme .video-controls {
  background: transparent !important;
}

[id="X1134136285"].is-light-theme .video-progress {
  background:
    linear-gradient(#000000, #000000) 0 50% / var(--progress) 2px no-repeat,
    linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) 0 50% / 100% 1px no-repeat;
}

[id="X1134136285"].is-light-theme .video-progress::-webkit-slider-thumb {
  border-color: #000000;
  background: #f8f8f8;
}

[id="X1134136285"].is-light-theme .video-progress::-moz-range-thumb {
  border-color: #000000;
  background: #f8f8f8;
}

[id="X1134136285"].is-light-theme .project-hover-preview {
  background: #e9e9e9;
}

[id="X1134136285"].is-light-theme .project-hover-preview::after {
  background: rgba(248, 248, 248, 0);
}

[id="X1134136285"].is-light-theme .video-theme-toggle {
  color: #8f8f8f;
}

[id="X1134136285"].is-light-theme .video-theme-toggle:hover,
[id="X1134136285"].is-light-theme .video-theme-toggle:active {
  color: #000000;
}

[id="X1134136285"].is-light-theme .video-theme-divider {
  color: rgba(0, 0, 0, 0.42);
}

/* Phone held sideways: shrink the video so all of it, and its playbar,
   fits the screen's height (its width follows the video's shape). */
@media (hover: none) and (pointer: coarse) and (orientation: landscape) and (max-height: 500px) {
  [id="X1134136285"] .video-wrap {
    width: min(100%, calc((100vh - 5rem) * (var(--video-ratio, 16 / 9))));
    width: min(100%, calc((100svh - 5rem) * (var(--video-ratio, 16 / 9))));
    margin-right: auto;
    margin-left: auto;
  }

  [id="X1134136285"] .video-wrap:fullscreen {
    width: 100%;
    margin: 0;
  }

  [id="X1134136285"] .video-wrap:-webkit-full-screen {
    width: 100%;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------
   Table layout: name bar, type filters, column headings, one row per
   project, and the contact sheet. Colours come from these tokens so the
   light theme only has to swap them.
   --------------------------------------------------------------------- */

[id="X1134136285"] .page-content {
  --row-fg: #ffffff;
  --row-dim: #8f8f8f;
  --row-faint: rgba(255, 255, 255, 0.42);
  --row-columns: 4ch minmax(0, 3fr) minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1.2fr) 5ch;
}

[id="X1134136285"].is-light-theme .page-content {
  --row-fg: #000000;
  --row-dim: rgba(0, 0, 0, 0.55);
  --row-faint: rgba(0, 0, 0, 0.35);
}

[id="X1134136285"] .index-heading.is-built {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 2ch;
  align-items: baseline;
  margin: 0;
}

[id="X1134136285"] .site-role {
  color: var(--row-dim);
}

[id="X1134136285"] .site-nav {
  display: flex;
  justify-self: end;
  gap: 2.5ch;
}

[id="X1134136285"] .site-nav a {
  color: var(--row-fg) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
}

[id="X1134136285"] .site-nav a.is-current,
[id="X1134136285"] .site-nav a:hover {
  border-bottom-color: var(--row-fg) !important;
}

[id="X1134136285"] .project-tools {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 3ch;
  margin-top: clamp(4rem, 14vh, 9rem);
  padding-bottom: 14px;
}

[id="X1134136285"] .project-filters,
[id="X1134136285"] .project-views {
  display: flex;
  flex-wrap: wrap;
  gap: 0 2.5ch;
}

[id="X1134136285"] .project-tools button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--row-dim);
  font: inherit;
  font-size: var(--site-type-size) !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[id="X1134136285"] .project-tools button sup {
  margin-left: 2px;
  font-size: 8px;
  line-height: 0;
  vertical-align: 4px;
}

[id="X1134136285"] .project-tools button[aria-pressed="true"],
[id="X1134136285"] .project-tools button:hover {
  color: var(--row-fg);
}

[id="X1134136285"] .project-tools button:focus-visible,
[id="X1134136285"] .project-frame:focus-visible {
  outline: 1px solid var(--row-fg);
  outline-offset: 2px;
}

[id="X1134136285"] .project-columns,
[id="X1134136285"] .project-item summary {
  display: grid !important;
  grid-template-columns: var(--row-columns);
  column-gap: 2ch;
  align-items: baseline;
}

[id="X1134136285"] .project-columns {
  position: relative;
  z-index: 1;
  padding-bottom: 6px;
  color: var(--row-faint);
}

[id="X1134136285"] .project-columns span:last-child,
[id="X1134136285"] .project-time {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

[id="X1134136285"] .project-columns[hidden],
[id="X1134136285"] .project-accordion[hidden],
[id="X1134136285"] .project-sheet[hidden],
[id="X1134136285"] .project-item[hidden],
[id="X1134136285"] .project-frame[hidden] {
  display: none !important;
}

[id="X1134136285"] .project-item summary {
  padding: 4px 0;
  color: var(--row-fg) !important;
  transition: color 240ms ease;
}

[id="X1134136285"] .project-item summary > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[id="X1134136285"] .project-number {
  font-variant-numeric: tabular-nums;
}

[id="X1134136285"] .project-director,
[id="X1134136285"] .project-format,
[id="X1134136285"] .project-category,
[id="X1134136285"] .project-time {
  color: var(--row-dim) !important;
  transition: color 240ms ease;
}

[id="X1134136285"] .project-item[open] summary > span {
  color: var(--row-fg) !important;
}

/* Hovering the list fades every other row back */
@media (hover: hover) and (pointer: fine) {
  [id="X1134136285"] .project-accordion:hover .project-item:not([open]) summary:not(:hover),
  [id="X1134136285"] .project-accordion:hover .project-item:not([open]) summary:not(:hover) > span {
    color: var(--row-faint) !important;
  }

  [id="X1134136285"] .project-item summary:hover > span {
    color: var(--row-fg) !important;
  }
}

[id="X1134136285"] .project-content {
  padding: 14px 0 34px;
}

/* Open project (desktop): the playbar and credits run the full width of
   the rows, like the name bar, and every film fills that width at its own
   shape (no black bars either side). The chevrons sit in the side margins. */
@media (min-width: 768px) and (min-height: 501px), (min-width: 768px) and (hover: hover) {
  [id="X1134136285"] .project-content > .project-carousel,
  [id="X1134136285"] .project-content > .project-meta {
    max-width: none;
    margin-right: 0;
    margin-left: 0;
  }

  [id="X1134136285"] .project-content .video-stage video {
    object-fit: contain;
  }

  [id="X1134136285"] .project-content .video-wrap:fullscreen .video-stage {
    height: auto;
  }

  [id="X1134136285"] .project-content .video-wrap:-webkit-full-screen .video-stage {
    height: auto;
  }
}

/* Contact sheet */
[id="X1134136285"] .project-sheet {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 26px 14px;
}

[id="X1134136285"] .project-frame {
  appearance: none;
  -webkit-appearance: none;
  display: grid;
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--row-fg);
  font: inherit;
  font-size: var(--site-type-size) !important;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

[id="X1134136285"] .project-frame-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(127, 127, 127, 0.12);
  transition: opacity 200ms ease;
}

[id="X1134136285"] .project-frame-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (hover: hover) and (pointer: fine) {
  [id="X1134136285"] .project-sheet:hover .project-frame-image {
    opacity: 0.45;
  }

  [id="X1134136285"] .project-sheet .project-frame:hover .project-frame-image {
    opacity: 1;
  }
}

[id="X1134136285"] .project-frame-edge {
  display: flex;
  justify-content: space-between;
  gap: 1ch;
  min-width: 0;
}

[id="X1134136285"] .project-frame-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[id="X1134136285"] .project-frame-number {
  color: var(--row-dim);
}

/* Dotted leaders: title, director, format and type each run a dotted line
   to the next column, so the eye can follow a row across. */
[id="X1134136285"] .page-content {
  --row-leader: rgba(255, 255, 255, 0.3);
}

[id="X1134136285"].is-light-theme .page-content {
  --row-leader: rgba(0, 0, 0, 0.28);
}

[id="X1134136285"] .project-item summary > .project-title-text,
[id="X1134136285"] .project-item summary > .project-director,
[id="X1134136285"] .project-item summary > .project-format,
[id="X1134136285"] .project-item summary > .project-category {
  display: flex;
  align-items: baseline;
  min-width: 0;
}

[id="X1134136285"] .project-item summary .cell-text {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[id="X1134136285"] .project-item summary > .project-title-text::after,
[id="X1134136285"] .project-item summary > .project-director::after,
[id="X1134136285"] .project-item summary > .project-format::after,
[id="X1134136285"] .project-item summary > .project-category::after {
  flex: 1 1 0;
  min-width: 2ch;
  margin-left: 1ch;
  border-bottom: 1px dotted var(--row-leader);
  content: "";
  transform: translateY(-0.3em);
}

/* Grid view: grey titles. On desktop they slide out from behind the
   thumbnail when it's hovered. */
[id="X1134136285"] .project-frame-title {
  color: var(--row-dim);
}

@media (hover: hover) and (pointer: fine) {
  [id="X1134136285"] .project-frame-image {
    position: relative;
    z-index: 1;
  }

  [id="X1134136285"] .project-frame-edge {
    position: relative;
    z-index: 0;
    opacity: 0;
    transform: translateY(-120%);
    transition:
      transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
      opacity 220ms ease;
  }

  [id="X1134136285"] .project-frame:hover .project-frame-edge,
  [id="X1134136285"] .project-frame:focus-visible .project-frame-edge {
    opacity: 1;
    transform: none;
  }
}

/* Footer: representation left, sign-off right */
[id="X1134136285"] .site-footer {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 3ch;
  margin-top: 5rem;
}

/* Phones: number, title and type only; the open project runs full width */
.mobile [id="X1134136285"] .index-heading.is-built {
  grid-template-columns: minmax(0, 1fr) auto;
}

.mobile [id="X1134136285"] .site-role {
  grid-row: 2;
  grid-column: 1;
}

.mobile [id="X1134136285"] .site-nav {
  grid-row: 1 / span 2;
  grid-column: 2;
  flex-direction: column;
  gap: 0;
  text-align: right;
}

.mobile [id="X1134136285"] .project-tools {
  margin-top: 4.5rem;
}

.mobile [id="X1134136285"] .project-columns {
  display: none !important;
}

.mobile [id="X1134136285"] .project-item summary {
  grid-template-columns: 4ch minmax(0, 1fr) auto;
  padding: 0.35rem 0 0.3rem;
}

.mobile [id="X1134136285"] .project-category,
.mobile [id="X1134136285"] .project-format,
.mobile [id="X1134136285"] .project-time {
  display: none;
}

.mobile [id="X1134136285"] .project-content {
  padding-left: 0;
}

.mobile [id="X1134136285"] .project-content > .project-carousel,
.mobile [id="X1134136285"] .project-content > .project-meta {
  max-width: none;
}

.mobile [id="X1134136285"] .project-sheet {
  grid-template-columns: 1fr 1fr;
  gap: 18px 10px;
}

.mobile [id="X1134136285"] .site-footer {
  flex-direction: column;
  gap: 0.1rem;
  margin-top: 3rem;
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  [id="X1134136285"] .index-heading.is-built {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  [id="X1134136285"] .site-role {
    grid-row: 2;
    grid-column: 1;
  }

  [id="X1134136285"] .site-nav {
    grid-row: 1 / span 2;
    grid-column: 2;
    flex-direction: column;
    gap: 0;
    text-align: right;
  }

  [id="X1134136285"] .project-tools {
    margin-top: 4.5rem;
  }

  [id="X1134136285"] .project-columns {
    display: none !important;
  }

  [id="X1134136285"] .project-item summary {
    grid-template-columns: 4ch minmax(0, 1fr) auto;
    padding: 0.35rem 0 0.3rem;
  }

  [id="X1134136285"] .project-category,
  [id="X1134136285"] .project-format,
  [id="X1134136285"] .project-time {
    display: none;
  }

  [id="X1134136285"] .project-content {
    padding-left: 0;
  }

  [id="X1134136285"] .project-content > .project-carousel,
  [id="X1134136285"] .project-content > .project-meta {
    max-width: none;
  }

  [id="X1134136285"] .project-sheet {
    grid-template-columns: 1fr 1fr;
    gap: 18px 10px;
  }

  [id="X1134136285"] .site-footer {
    flex-direction: column;
    gap: 0.1rem;
    margin-top: 3rem;
  }
}

/* Phones: the right of each row shows the director or the type, switched
   by Dir / Type above the list; row by row, the value scrambles into the
   new one (home.js). */
[id="X1134136285"] .project-detail-switch {
  display: none;
}

.mobile [id="X1134136285"] .project-item summary {
  overflow: hidden;
  position: relative;
  grid-template-columns: 4ch minmax(0, 1fr);
}

/* Both sit at the right of the row; the title's leader stops short of
   whichever is showing (--dir-w / --type-w, its length in ch, set by
   home.js, which also scrambles the text on a switch). */
.mobile [id="X1134136285"] .project-item summary > .project-director,
.mobile [id="X1134136285"] .project-item summary > .project-category {
  display: block !important;
  position: absolute;
  top: 0.35rem;
  right: 0;
  max-width: 22ch;
  text-align: right;
  transition: none;
}

.mobile [id="X1134136285"] .project-item summary > .project-category {
  opacity: 0;
}

.mobile [id="X1134136285"].shows-type .project-item summary > .project-director {
  opacity: 0;
}

.mobile [id="X1134136285"].shows-type .project-item summary > .project-category {
  opacity: 1;
}

.mobile [id="X1134136285"] .project-item summary > .project-title-text::after {
  margin-right: calc(var(--dir-w, 0ch) + 0.75ch);
}

.mobile [id="X1134136285"].shows-type .project-item summary > .project-title-text::after {
  margin-right: calc(var(--type-w, 0ch) + 0.75ch);
}

.mobile [id="X1134136285"] .project-views {
  align-self: stretch;
}

.mobile [id="X1134136285"] .project-item summary > .project-format {
  display: none !important;
}

.mobile [id="X1134136285"] .project-item summary > .project-director::after,
.mobile [id="X1134136285"] .project-item summary > .project-format::after,
.mobile [id="X1134136285"] .project-item summary > .project-category::after {
  display: none;
}

.mobile [id="X1134136285"] .project-detail-switch {
  display: flex;
  gap: 0 0.6ch;
  margin-left: auto;
  color: var(--row-faint);
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  [id="X1134136285"] .project-item summary {
    overflow: hidden;
    position: relative;
    grid-template-columns: 4ch minmax(0, 1fr);
  }

  /* Both sit at the right of the row; the title's leader stops short of
     whichever is showing (--dir-w / --type-w, its length in ch, set by
     home.js, which also scrambles the text on a switch). */
  [id="X1134136285"] .project-item summary > .project-director,
  [id="X1134136285"] .project-item summary > .project-category {
    display: block !important;
    position: absolute;
    top: 0.35rem;
    right: 0;
    max-width: 22ch;
    text-align: right;
    transition: none;
  }

  [id="X1134136285"] .project-item summary > .project-category {
    opacity: 0;
  }

  [id="X1134136285"].shows-type .project-item summary > .project-director {
    opacity: 0;
  }

  [id="X1134136285"].shows-type .project-item summary > .project-category {
    opacity: 1;
  }

  [id="X1134136285"] .project-item summary > .project-title-text::after {
    margin-right: calc(var(--dir-w, 0ch) + 0.75ch);
  }

  [id="X1134136285"].shows-type .project-item summary > .project-title-text::after {
    margin-right: calc(var(--type-w, 0ch) + 0.75ch);
  }

  [id="X1134136285"] .project-views {
    align-self: stretch;
  }

  [id="X1134136285"] .project-item summary > .project-format {
    display: none !important;
  }

  [id="X1134136285"] .project-item summary > .project-director::after,
  [id="X1134136285"] .project-item summary > .project-format::after,
  [id="X1134136285"] .project-item summary > .project-category::after {
    display: none;
  }

  [id="X1134136285"] .project-detail-switch {
    display: flex;
    gap: 0 0.6ch;
    margin-left: auto;
    color: var(--row-faint);
  }
}

/* Phones: one link in the name bar (the page you're not on), no
   underlines, filters on one line */
.mobile [id="X1134136285"] .page-layout {
  padding: 0 !important;
}

.mobile [id="X1134136285"] .site-nav {
  grid-row: 1;
  grid-column: 2;
  flex-direction: row;
  gap: 2ch;
}

.mobile [id="X1134136285"] .site-nav a.is-current {
  display: none !important;
}

.mobile [id="X1134136285"] .site-nav a,
.mobile [id="X1134136285"] .site-nav a:hover {
  border-bottom-color: transparent !important;
}

.mobile [id="X1134136285"] .project-tools {
  flex-direction: column;
  gap: 6px;
  margin-top: 3.5rem;
}

.mobile [id="X1134136285"] .project-filters {
  flex-wrap: nowrap;
  gap: 0 2ch;
  overflow-x: auto;
  scrollbar-width: none;
}

.mobile [id="X1134136285"] .project-filters::-webkit-scrollbar {
  display: none;
}

.mobile [id="X1134136285"] .project-filters button {
  flex: none;
  white-space: nowrap;
}

.mobile [id="X1134136285"] .project-views {
  gap: 0 2ch;
}

@media (max-width: 767px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  [id="X1134136285"] .page-layout {
    padding: 0 !important;
  }

  [id="X1134136285"] .site-nav {
    grid-row: 1;
    grid-column: 2;
    flex-direction: row;
    gap: 2ch;
  }

  [id="X1134136285"] .site-nav a.is-current {
    display: none !important;
  }

  [id="X1134136285"] .site-nav a,
  [id="X1134136285"] .site-nav a:hover {
    border-bottom-color: transparent !important;
  }

  [id="X1134136285"] .project-tools {
    flex-direction: column;
    gap: 6px;
    margin-top: 3.5rem;
  }

  [id="X1134136285"] .project-filters {
    flex-wrap: nowrap;
    gap: 0 2ch;
    overflow-x: auto;
    scrollbar-width: none;
  }

  [id="X1134136285"] .project-filters::-webkit-scrollbar {
    display: none;
  }

  [id="X1134136285"] .project-filters button {
    flex: none;
    white-space: nowrap;
  }

  [id="X1134136285"] .project-views {
    gap: 0 2ch;
  }
}

/* One type size everywhere (the filter counts are the only smaller text),
   whatever size Cargo gives its own elements. */
[id="X1134136285"] {
  --site-type-size: 11px;
}

[id="X1134136285"] .page-content,
[id="X1134136285"] .page-content *:not(sup),
.project-navigation-link {
  font-size: 11px !important;
  line-height: 1.65;
}