toolset {
	display: none;
}

body {
	background-color: #fff;
	color: #000;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: 1;
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

sub,
sup {
	position: relative;
	vertical-align: baseline;
}

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 4.5rem;
}

ol > li {
    padding-left: 0.75rem;
}

blockquote {
	margin: 0;
	padding: 0 0 0 2em;
}

hr {
	background: rgba(0, 0, 0, 0.3);
	border: 0;
	height: 1px;
	display: block;
}

.content img {
	float: none;
	margin-bottom: 0rem;
    vertical-align: bottom;
}

.gallery_image_caption {
    margin-top: 1.0em;
    margin-bottom: 0.5rem;
    font-size: 1rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.85);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;
    text-align: left;
}

/**
 * Loading Animation
 */

.loading[data-loading] {
	position: fixed;
	bottom: 8px; 
    left: 8px;
}

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.3rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	line-height: 1.2;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(0, 0, 0, 0.85);
	text-decoration: none;
}

[data-predefined-style="true"] bodycopy a:hover {

}

bodycopy a.image-link,
bodycopy a.icon-link,
bodycopy a.image-link:hover,
bodycopy a.icon-link:hover {
	border-bottom: 0;
	padding-bottom: 0;
}

[data-predefined-style="true"] h1 {
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 7.2rem;
	line-height: 0.9;
	color: rgba(0, 0, 0, 0.85);
    letter-spacing: -0.10rem;
	font-variation-settings: 'slnt' 0, 'MONO' 0;
}

[data-predefined-style="true"] h1 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] h2 {
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	font-weight: 500;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.85);
	font-size: 1.2rem;
	line-height: 1.2;
	letter-spacing: 0.01em;
	font-variation-settings: 'slnt' 0, 'MONO' 0.32;
}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.85);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.2;
	font-family: "Monument Grotesk Mono Variable", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.4);
	font-variation-settings: 'slnt' 0, 'MONO' 1;
}

[data-predefined-style="true"] small a {
	color: rgba(0, 0, 0, 0.4);
	border-bottom-width: 0em;
}

/**
 * Breakpoints
 */

[data-css-preset] .page {
    background-color: initial /*!page_bgcolor*/;
}

.mobile .page,
[data-css-preset].mobile .page {
	position: relative;
	min-height: 10px;
	max-width: 100%;
	width: 100%;
	background-color: transparent /*!page_bgcolor*/;
}

[data-css-preset] .container {
	margin-left: auto /*!content_center*/;
	margin-right: auto /*!content_center*/;
	text-align: center /*!text_center*/;
}

[data-css-preset] body {
	background-color: rgb(255, 255, 255)/*!body_bgcolor*/;
}

[data-css-preset] .container_width {
	width: 100% /*!content_center*/;
}

[data-css-preset] .content_padding {
	padding-top: 1.9rem/*!main_margin*/;
	padding-bottom: 1.9rem/*!main_margin*/;
	padding-left: 1.9rem/*!main_margin*/;
	padding-right: 1.9rem/*!main_margin*/;
}

[data-css-preset] .backdrop {
	width: 100% /*!background_cover*/;
}

/**
 * Thumbnails
 */

div[thumbnails] {
	justify-content: flex-start;
}

[data-css-preset] .thumbnails {
   	background-color: transparent/*!thumbnails_bgcolor*/;   
}

[data-css-preset] .thumbnails_width {
    width: 100%/*!thumbnails_width*/;
}

[data-css-preset] [thumbnails-pad] {
    padding: 0.5rem/*!thumbnails_padding*/;
}

[data-css-preset] [thumbnails-gutter] {
    margin: -1rem/*!thumbnails_padding*/;
}

[data-css-preset] [responsive-layout] [thumbnails-pad] {
    padding: 0.225rem/*!responsive_thumbnails_padding*/; 
}

[data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin: -0.45rem/*!responsive_thumbnails_padding*/; 
}

.thumbnails .thumb_image {
	outline: 0px solid rgba(0,0,0,.12);
    outline-offset: -1px;
}

.thumbnails .title {
    margin-top: 1.0rem;
    margin-bottom: 0.4rem;
    font-size: 1.3rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.85);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;
}

.thumbnails .tags {
    margin-top: .8rem;
    margin-bottom: 1.5rem;
	font-size: 1.2rem;
	line-height: 1.1;
	font-family: "Monument Grotesk Mono", Icons;	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.4);
}

.thumbnails .tags a {
	border-bottom: 0;
    color: rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

.thumbnails .has_title .tags {
	margin-top: 0rem;
}

/**
 * Site Menu Button
 */

[data-css-preset] #site_menu_button {
	color: rgba(0, 0, 0, 0.85);
	font-size: 26px /*!site_menu_button*/;
	padding: 6px;
	line-height: 1;
	background: rgba(33, 32, 46, 0);
	position: fixed;
	top: 1.0rem /*!site_menu_button*/;
	right: 1.2rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: -6px;
	font-size: 30px;
}

#site_menu_button.custom_icon {
	width: 40px;
	height: auto;
}

#site_menu_button.active {
	display: none;
}

/**
 * Site Menu
 */

#site_menu {
	font-family: Diatype, Icons;
	background: rgba(20, 20, 20, 0.95);
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	padding: 20px 30px 90px 30px;
	max-width: 400px;
	min-width: 300px;
	text-align: left;
	display: flex;
	justify-content: flex-start;
}

body.mobile #site_menu {
	width: 100%;
}

#site_menu .page-link a {
	color: rgba(255, 255, 255, 0.75);
}

#site_menu .set-link > a {
	color: rgba(255, 255, 255, 0.75);
	font-weight: bold;
}

#site_menu a:active {
	opacity: .7;
}

#site_menu a.active {
	opacity: .4;
}

#site_menu .close {
	display: none;
	color: rgba(255, 255, 255, 0.4);
	line-height: .85em;
	font-size: 45px;
}

body.mobile #site_menu .close {
	display: block;
	font-size: 50px;
	line-height: 1em;
}

#site_menu .break {
	height: 28px;
}

#site_menu .indent {
	margin-left: 28px;
}

/**
 * Shop Button
 */

[data-css-preset] #shop_button {
	color: rgba(0, 0, 0, 0.85);
    background: transparent;
	font-size: 32px;
    font-style: normal;
	font-weight: 400;
    line-height: 1.;
    position: fixed;
	padding: 6px;
	bottom: 3rem /*!shop_button*/;
	right: 3rem /*!shop_button*/;
}

#shop_button.text {
	font-family: Diatype, Icons;
	font-size: 1.2rem;
    padding: 0;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.85);
	font-style: normal;
    line-height: 1.3;
    letter-spacing: .07em;
}

#shop_button.custom_icon {
	width: 40px;
    height: auto;
}

body.mobile #shop_button:not(.text) {
	margin: -6px;
    font-size: 36px;
}

/**
 * Shop Product Widget
 */

.shop_product {
    width: 100%;
	max-width: 22rem;
    position: relative;
    display: block;
}

.shop_product .price {
	font-family: Diatype, Icons;
	font-style: normal;
	font-weight: 500;
	margin-bottom: 1rem;
	font-size: 1.2rem;
	line-height: 1.1;
	color: rgba(0, 0, 0, 0.85);
}

.shop_product .dropdown {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
    font-size: 1.2rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 10rem;
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right .25rem top 0;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: 0.7rem 2.5rem 0.8rem 1.25rem;
	font-style: normal;
	font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
}

.shop_product .button {
	font-family: Diatype, Icons;
	font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.85);
    border-radius: 10rem;
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1.25rem;
	font-style: normal;
	font-weight: 500;
    text-decoration: none;
}

/**
 * Image Zoom
 */

.content img.image-zoom:active {
    opacity: .7;
}

/**
 * Quick View
 */

[data-css-preset] .quick-view {
    padding-top: 2.5rem /*!quick_view_padding*/;
    padding-bottom: 2.5rem /*!quick_view_padding*/;
    padding-left: 2.5rem /*!quick_view_padding*/;
    padding-right: 2.5rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

body.mobile .quick-view {
    width: 100%;
    height: 100%;
    margin: 0;
}

[data-css-preset] .quick-view-background {
	background: rgba(255, 255, 255, 1) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
	font-family: Diatype, Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1rem;
	font-style: normal;
	font-weight: 500;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.5);
    color: white;
}

/**
 * Quick View Navigation 
 */

.quick-view-navigation .left-arrow {
    left: 10px;
}

.quick-view-navigation .right-arrow {
    right: 10px;
}

.quick-view-navigation .left-arrow,
.quick-view-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

.quick-view-navigation .left-arrow .inner-color,
.quick-view-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    /* Change height/width together to scale */
    width: 36px;
    height: 36px;
}

.quick-view-navigation .close-button .inner-color {
    stroke: #fff;
    stroke-width: 0px;
}

.quick-view-navigation .close-button .outer-color {
    stroke: rgba(0, 0, 0, 0.85);
    stroke-width: 2px;
}





/* ==========================================
   CYBER-SONIC LIQUID PINK — CARGO COLLECTIVE
   Keeps the existing layout and content
   ========================================== */

:root {
  --pink: #ff149e;
  --hot-pink: #ff32bd;
  --electric-pink: #ff00e6;
  --cyan: #00f5ff;
  --lime: #d7ff00;
  --violet: #a500ff;
  --white: #ffffff;
}

/* Bright, colorful page foundation */
html,
body {
  background-color: #ffb9ed !important;
  background-image:
    radial-gradient(ellipse at 12% 18%,
      rgba(255, 0, 230, .85), transparent 36%),
    radial-gradient(ellipse at 82% 15%,
      rgba(0, 245, 255, .8), transparent 34%),
    radial-gradient(ellipse at 70% 82%,
      rgba(213, 255, 0, .75), transparent 38%),
    radial-gradient(ellipse at 20% 85%,
      rgba(255, 70, 180, .8), transparent 38%) !important;
  background-attachment: fixed !important;
  background-size: 180% 180% !important;
  animation: liquid-background 12s ease-in-out infinite alternate !important;
  color: var(--pink) !important;
}

@keyframes liquid-background {
  0% {
    background-position: 0% 0%;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 100% 60%;
    filter: hue-rotate(18deg);
  }
  100% {
    background-position: 30% 100%;
    filter: hue-rotate(-12deg);
  }
}

/* Animated liquid light across the entire viewport */
body::before {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 25% 30%,
      rgba(255, 0, 230, .28), transparent 28%),
    radial-gradient(ellipse at 75% 55%,
      rgba(0, 245, 255, .28), transparent 30%),
    radial-gradient(ellipse at 45% 85%,
      rgba(255, 255, 0, .2), transparent 30%);
  background-size: 160% 160%;
  animation: liquid-flow 10s ease-in-out infinite alternate;
}

@keyframes liquid-flow {
  0% {
    transform: translate(-3%, -2%) rotate(0deg) scale(1);
    background-position: 0% 50%;
  }
  50% {
    transform: translate(3%, 2%) rotate(5deg) scale(1.08);
    background-position: 100% 30%;
  }
  100% {
    transform: translate(-1%, 4%) rotate(-4deg) scale(1.12);
    background-position: 40% 100%;
  }
}

/* Keep the real site content above the decorative layer */
body > * {
  position: relative;
}

/* Force pink across the actual text and common Cargo text elements */
body,
body p,
body span,
body li,
body a,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body strong,
body em,
body b,
body i,
body blockquote,
body figcaption,
body label,
body small,
body summary,
body [class*="text"],
body [class*="title"],
body [class*="caption"],
body [class*="heading"] {
  color: var(--pink) !important;
  -webkit-text-fill-color: var(--pink);
  text-shadow:
    0 0 2px rgba(255, 20, 158, .25),
    0 0 10px rgba(255, 20, 158, .15);
  transition:
    color .2s ease,
    text-shadow .2s ease,
    -webkit-text-fill-color .2s ease;
}

/* Hot pink headings with extra luminosity */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  text-shadow:
    0 0 5px rgba(255, 20, 158, .6),
    0 0 18px rgba(255, 0, 230, .3) !important;
}

/* Hovering text becomes an electric pink/cyan glitch */
body h1:hover,
body h2:hover,
body h3:hover,
body h4:hover,
body h5:hover,
body h6:hover,
body p:hover,
body li:hover,
body figcaption:hover,
body a:hover,
body .cyber-text-active {
  color: var(--hot-pink) !important;
  -webkit-text-fill-color: var(--hot-pink) !important;
  text-shadow:
    2px 0 var(--cyan),
    -2px 0 var(--electric-pink),
    0 0 8px var(--hot-pink),
    0 0 22px rgba(255, 0, 230, .8) !important;
}

/* Glowing links */
body a {
  text-decoration-color: var(--hot-pink) !important;
  text-underline-offset: .18em;
}

body a:hover {
  text-shadow:
    0 0 5px var(--hot-pink),
    0 0 16px var(--electric-pink),
    2px 0 var(--cyan) !important;
}

/* Fluid, colorful glow around project media */
media-item,
gallery-item,
figure {
  transition: filter .3s ease, box-shadow .3s ease;
}

media-item:hover,
gallery-item:hover,
figure:hover {
  filter: saturate(1.3) brightness(1.04);
  box-shadow:
    0 0 0 1px var(--hot-pink),
    0 0 20px rgba(255, 0, 230, .35),
    0 0 35px rgba(0, 245, 255, .2);
}

/* Soft neon scanlines */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9990;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 4px,
    rgba(255, 0, 230, .045) 5px
  );
  opacity: .65;
}

/* Existing custom cursor: pink with cyan glow */
.cy-cursor {
  border-color: var(--hot-pink) !important;
  box-shadow:
    0 0 8px var(--hot-pink),
    0 0 20px var(--electric-pink),
    0 0 32px rgba(0, 245, 255, .55) !important;
  mix-blend-mode: normal;
}

.cy-cursor-dot {
  background: var(--cyan) !important;
  box-shadow: 0 0 12px var(--cyan) !important;
}

.cy-cursor.is-hover {
  border-color: var(--cyan) !important;
  box-shadow:
    0 0 12px var(--cyan),
    0 0 28px var(--hot-pink),
    0 0 42px rgba(255, 0, 230, .65) !important;
  transform: scale(1.4);
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  html,
  body,
  body::before {
    animation: none !important;
  }
}



/* Electric cursor response */
.cy-cursor {
  transition:
    transform .12s ease,
    border-color .12s ease,
    box-shadow .12s ease !important;
}

.cy-cursor.is-hover {
  transform: scale(1.5) rotate(12deg) !important;
  border-color: var(--glitch-cyan) !important;
  box-shadow:
    0 0 8px var(--glitch-cyan),
    0 0 18px var(--glitch-pink),
    0 0 36px var(--glitch-violet) !important;
}

.cy-cursor-dot {
  box-shadow:
    0 0 8px var(--glitch-cyan),
    0 0 18px var(--glitch-pink) !important;
}


/* Electric cursor response */
.cy-cursor {
  transition:
    transform .12s ease,
    border-color .12s ease,
    box-shadow .12s ease !important;
}

.cy-cursor.is-hover {
  transform: scale(1.5) rotate(12deg) !important;
  border-color: var(--glitch-cyan) !important;
  box-shadow:
    0 0 8px var(--glitch-cyan),
    0 0 18px var(--glitch-pink),
    0 0 36px var(--glitch-violet) !important;
}

.cy-cursor-dot {
  box-shadow:
    0 0 8px var(--glitch-cyan),
    0 0 18px var(--glitch-pink) !important;
}


/* Visible hover effect for real Cargo content */
.cyber-glitch-active {
  filter: saturate(1.8) brightness(1.08) !important;
  text-shadow:
    2px 0 #00f5ff,
    -2px 0 #a500ff,
    0 0 12px #ff32bd !important;
  animation: cargo-glitch-fix .25s steps(2, end) 2 !important;
}

@keyframes cargo-glitch-fix {
  0%   { transform: translate(0); }
  25%  { transform: translate(-2px, 1px); }
  50%  { transform: translate(2px, -1px); }
  75%  { transform: translate(-1px, 0); }
  100% { transform: translate(0); }
}

media-item.cyber-glitch-active,
gallery-item.cyber-glitch-active,
figure.cyber-glitch-active {
  outline: 2px solid #ff32bd !important;
  box-shadow:
    0 0 12px #ff32bd,
    0 0 28px #00f5ff !important;
  filter: saturate(1.8) contrast(1.15) !important;
}

.cy-cursor.is-hover {
  transform: scale(1.5) !important;
  border-color: #00f5ff !important;
  box-shadow:
    0 0 12px #00f5ff,
    0 0 28px #ff32bd !important;
}


/* ===== SUPER CURSOR: LIQUID NEON ===== */

#super-cursor {
  position: fixed !important;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  border: 2px solid #fff !important;
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 2147483647 !important;
  transform: translate(-50%, -50%);
  background: rgba(255, 20, 158, .2);
  box-shadow:
    0 0 8px #ff149e,
    0 0 20px #ff32bd,
    0 0 40px rgba(0, 245, 255, .85);
  mix-blend-mode: normal;
  transition:
    width .12s ease,
    height .12s ease,
    border-color .12s ease,
    background .12s ease;
}

#super-cursor::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: #00f5ff;
  box-shadow: 0 0 15px #00f5ff;
}

#super-cursor.super-hot {
  width: 58px;
  height: 58px;
  border-color: #d7ff00 !important;
  background: rgba(255, 0, 230, .25);
  box-shadow:
    0 0 12px #d7ff00,
    0 0 30px #ff32bd,
    0 0 55px #00f5ff;
}

.super-trail {
  position: fixed !important;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none !important;
  z-index: 2147483646 !important;
  background: #ff32bd;
  box-shadow: 0 0 12px #ff32bd, 0 0 24px #00f5ff;
  transform: translate(-50%, -50%);
  animation: super-trail-fade .45s ease-out forwards;
}

@keyframes super-trail-fade {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(2.8);
  }
}

/* Glitch anything the supercursor touches */
.super-glitch {
  animation: super-glitch-burst .25s steps(2, end) 2 !important;
  filter: saturate(1.8) contrast(1.1) !important;
  text-shadow:
    2px 0 #00f5ff,
    -2px 0 #ff00e6,
    0 0 12px #ff32bd !important;
}

@keyframes super-glitch-burst {
  0% { transform: translate(0); }
  25% { transform: translate(-2px, 1px); }
  50% { transform: translate(2px, -1px); }
  75% { transform: translate(-1px, 0); }
  100% { transform: translate(0); }
}

@media (hover: none), (pointer: coarse) {
  #super-cursor, .super-trail { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .super-trail { animation: none; }
  .super-glitch { animation: none !important; }
}