@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

a {
    cursor: url("https://files.cargocollective.com/c518461/Rainbow-classic.cur"), auto !important;
}

.content img {
    cursor: url("https://files.cargocollective.com/c518461/Rainbow-classic.cur"), auto !important;
}

/**
 * Content
 */

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

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: 0.4;
}

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 1em;
}

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

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

.content img {
	float: none;
	margin-bottom: .5em;
}

.gallery_image_caption {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	line-height: 1.3;
	font-family: 'Neue Haas Grotesk', Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(41, 41, 41, 0.3);
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.6rem;
	font-weight: 200;
	color: rgba(0, 0, 0, 0.9);
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	line-height: 1.3;
    letter-spacing: 0.01em;
}

[data-predefined-style="true"] bodycopy a {
	color: rgba(0, 0, 0, 0.9);
	padding-bottom: 0.1em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.9);
	text-decoration: blink;
}

[data-predefined-style="true"] h1 a:hover {
    color: rgba(15, 206, 131, 1);
}

[data-predefined-style="true"] small a:hover {
	color: rgba(216, 0, 72, 1);
}

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: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 3.5rem;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.9);
    letter-spacing: 0.01em;
}

[data-predefined-style="true"] h1 a:hover {
	color: rgb(255, 8, 255);
    border-bottom: 1px solid rgb(41, 41, 41);
}

[data-predefined-style="true"] h2 {
	font-family: "Times New Roman", Times, serif, Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.9);
	font-size: 1.4rem;
	line-height: 1.3;
}

[data-predefined-style="true"] h2 a {
	color: rgba(0, 0, 0, 0.9);
    border-bottom: 1px solid rgb(41, 41, 41);
}

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1.3;
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.9);
    background-color: rgba(10, 231, 251, 0);
}

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

/**
 * 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: left /*!text_left*/;
}

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

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

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

[data-css-preset] text-limit {
	display: inline-block /*!text_width*/;
	max-width: 66rem/*!text_width*/;
}

/**
 * Thumbnails
 */

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

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

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

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

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

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

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

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

.thumbnails .title {
    margin-top: 1.2rem;
    margin-bottom: 0.1rem;
    font-size: 1.2rem;
	font-weight: 400;
	color: rgba(249, 9, 255, 0.9);
	font-family: HelveticaNeue-Light, "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif, Icons;
	font-style: normal;
	line-height: 1.3;
    text-align: left;
}

.thumbnails .tags {
    margin-top: 1.2rem;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
	line-height: 1.3;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.35);
	font-family: 'Neue Haas Grotesk', Icons;
	font-style: normal;
}

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

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

/**
 * Thumbnail Hover
 */

.thumbnails .thumbnail > a {
    overflow:hidden;
	position: relative;
}

.thumbnails .thumbnail .title {
    text-align: left;
	background: rgba(255, 0, 101, 0.61);
    padding: 0.9rem 1.6rem 1.1rem 1.6rem;
    margin: 0 auto;
    color: rgba(255, 255, 255, 1);
    align-content:center;
    display: inline-block;
    position: absolute;
    left: 3;
    top: 0;
    z-index: 9;
    opacity: 0;
}

.thumbnails .title span {
	margin: auto;
	display: inline-block;
    text-align: center;
}

.thumbnails .thumbnail:hover .title {
    opacity: 1;
}

body.mobile .thumbnails .thumbnail:hover .title {
	opacity: 0;
}

/**
 * Site Menu
 */

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

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

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

#site_menu_button.active {
	display: none;
}

#site_menu {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, 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: 40px;
    font-style: normal;
	font-weight: 400;
    line-height: 1;
    position: fixed;
	padding: 6px;
	top: 1.2rem /*!shop_button*/;
	right: 1.2rem /*!shop_button*/;
}

#shop_button.text {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 2.2rem;
    padding: 0;
    line-height: 1.2;
	font-style: normal;
	font-weight: 400;
}

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

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

/*
 * Shop Product Widget
 */

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

.shop_product .price {
	font-family: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	font-size: 2.2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.9);
    display: block;
    margin-bottom: 1rem;
}

.shop_product .dropdown {
    font-family: "Neue Haas Grotesk", Icons;
    color: rgba(0, 0, 0, .9);
    font-size: 1.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background: white url(https://static.cargo.site/assets/images/select-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 1rem;
}

.shop_product .button {
    font-family: "Neue Haas Grotesk", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.8);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1;
    padding: .8rem 1rem .9rem;
}

/*
 * 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(0, 0, 0, 0.9) /*!quick_view_bgcolor*/;
}

.quick-view-caption {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2rem 0;
    text-align: center;
    font-size: 1.8rem;
}

.quick-view-caption span {
    padding: 0.5rem 1rem;
    display: inline-block;
    background: rgba(0,0,0,0.4);
    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 {
    height: 36px;
    width: 36px;
}

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

.quick-view-navigation .left-arrow .outer-color,
.quick-view-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

.quick-view-navigation .close-button {  
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
}

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

.quick-view-navigation .close-button .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/** 
 * Image Gallery Navigation Arrows 
 */

.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    height: 36px;
    width: 36px;
}

.image-gallery-navigation .left-arrow .inner-color,
.image-gallery-navigation .right-arrow .inner-color {
    stroke: #fff;
    stroke-width: 1.5px;
}

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

.wallpaper-navigation .left-arrow,
.wallpaper-navigation .right-arrow {
   width: 36px;
   height: 36px;
}

.wallpaper-navigation .left-arrow .inner-color,
.wallpaper-navigation .right-arrow .inner-color {
   stroke: #fff;
   stroke-width: 1.5px;
}

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: #000;
    stroke-width: 2.5px;
    opacity: 0.6;
}

/**
 * Feed
 */

.feed .content_container .page {
    border-top: 0px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:first-child .page {
	border-top: 0;
}

/*
 * Audio Player
 */

.audio-player {
    max-width: 36rem;
    height: 3.3rem;
    outline: 1px solid rgba(0,0,0,0.15);
    color: rgba(0, 0, 0, 0.6);
    background: #fff;
    font-size: 1.2rem;
    line-height: 1.3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, Icons;
    font-style: normal;
    font-weight: 400;
    text-align: left;
    margin: 1px 1px 1em 1px;
}

body.mobile .audio-player {
    max-width: 100%;
}

.audio-player .separator {
    width: 1px;
    background-color: rgba(0,0,0,0.15);
}

.audio-player .button {
    background: transparent;
    cursor: pointer;
    fill: rgba(0, 0, 0, 0.85);
}

.audio-player .icon {
    fill: rgba(0, 0, 0, 0.85);
    padding: 30%;
    width: 100%;
    margin: auto;
}

.audio-player .buffer {
    background: rgba(0,0,0,0.03);
}

.audio-player .progress {
    background: rgba(0,0,0,0.1);
}

.audio-player .progress-indicator {
    border: 1px solid rgba(0, 0, 0, 0.7);
    width: 1px;
    height: 100%;
    right: 0;
    position: absolute;
    cursor: ew-resize;
}

.audio-player .note-icon {
    height: 100%;
    width: 3.8rem;
    padding: 1rem;
    fill: rgba(0, 0, 0, 0.5);
}

.audio-player .current-time {
    padding-left: 1rem;
}

.audio-player .total-time {
    padding-right: 1rem;
}


/* ========================================
   PONY SAYS — PROGRAMS
   ======================================== */

.ps-program-card {
  --ps-accent: #ff0065;
  position: relative;
  width: 100%;
  min-height: 560px;
  margin: 0 0 28px 0;
  overflow: hidden;
  background: #0b0710;
  color: #fff;
  font-family: "Space Grotesk", sans-serif !important;
}

.ps-program-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.55) saturate(1.05);
  transform: scale(1.005);
}

.ps-program-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0.48) 0%,
    rgba(0, 0, 0, 0.34) 58%,
    rgba(0, 0, 0, 0.18) 100%
  );
}

.ps-program-overlay {
  position: relative;
  z-index: 2;
  min-height: 560px;
  box-sizing: border-box;
  padding: 32px 36px 34px 36px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.ps-program-title {
  align-self: flex-start;
  display: inline-block;
  margin: 0 0 22px 0;
  padding: 14px 20px 13px 20px;
  background: var(--ps-accent);
  color: #000;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 22px !important;
  line-height: 1.05 !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase;
}

.ps-program-frame {
  width: 84%;
  max-width: 1180px;
  box-sizing: border-box;
  padding: 24px 30px 23px 30px;
  border: 2px solid var(--ps-accent);
  background: rgba(8, 4, 12, 0.42);
  color: #fff;
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 20px !important;
  line-height: 1.26 !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

.ps-program-frame p,
.ps-program-frame strong,
.ps-program-frame em,
.ps-program-frame a,
.ps-program-frame li {
  font-family: "Space Grotesk", sans-serif !important;
}

.ps-program-frame p {
  margin: 0 0 17px 0;
}

.ps-program-frame p:last-child {
  margin-bottom: 0;
}

.ps-program-frame strong {
  font-weight: 600 !important;
}

.ps-program-frame em {
  font-style: italic;
  font-weight: 500 !important;
}

.ps-program-frame a,
.ps-program-frame a:visited {
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.ps-program-frame a:hover {
  border-bottom-width: 2px;
}

/* Program colours */

.ps-program-card.liquid {
  --ps-accent: #ff0065;
}

.ps-program-card.saturate {
  --ps-accent: #00c9e8;
}

.ps-program-card.virtuosity {
  --ps-accent: #dbea36;
}

.ps-program-card.iteration {
  --ps-accent: #9d83ff;
}

/* Individual crops */

.ps-program-card.liquid .ps-program-bg {
  object-position: center center;
}

.ps-program-card.saturate .ps-program-bg {
  object-position: center 42%;
}

@media (max-width: 1100px) {
  .ps-program-card,
  .ps-program-overlay {
    min-height: 520px;
  }

  .ps-program-frame {
    width: 90%;
  }
}

@media (max-width: 768px) {
  .ps-program-card,
  .ps-program-overlay {
    min-height: 0;
  }

  .ps-program-overlay {
    padding: 22px 18px 24px 18px;
  }

  .ps-program-title {
    margin-bottom: 16px;
    padding: 11px 15px 10px 15px;
    font-size: 18px !important;
  }

  .ps-program-frame {
    width: 100%;
    max-width: none;
    padding: 18px;
    font-size: 17px !important;
    line-height: 1.28 !important;
  }

  .ps-program-frame p {
    margin-bottom: 14px;
  }
}


/* ========================================
   PONY SAYS — DATES / NEW CLEAN STRUCTURE
   ======================================== */

.ps-dates {
  width: 100%;
  margin: 0;
  padding: 0;
  color: #000;
  font-family: "Space Grotesk", sans-serif !important;
}


/* YEARS */

.ps-dates .ps-year {
  display: block !important;
  width: 100%;
  box-sizing: border-box;

  margin: 32px 0 14px 0 !important;
  padding: 0 22px !important;

  text-align: left !important;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 34px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;

  color: #ff0065 !important;
  background: transparent !important;
}

.ps-dates .ps-year:first-child {
  margin-top: 0 !important;
}


/* CONCERT ROW */

.ps-dates > .ps-date-row {
  display: grid !important;
  grid-template-columns: 16% 59% 25%;

  width: 100%;
  min-height: 100px;
  box-sizing: border-box;

  margin: 0;
  padding: 15px 22px;

  align-items: center;

  font-family: "Space Grotesk", sans-serif !important;
  text-align: left !important;
}


/* ========================================
   4 PROGRAM COLORS — PASTEL VERSIONS
   ======================================== */

/* LIQUIDITY — MAGENTA */
.ps-dates > .ps-date-row:nth-of-type(4n+1) {
  background: #efd3df;
}

/* SATURATE — CYAN */
.ps-dates > .ps-date-row:nth-of-type(4n+2) {
  background: #d2edf2;
}

/* ITERATION — VIOLET */
.ps-dates > .ps-date-row:nth-of-type(4n+3) {
  background: #ddd6f0;
}

/* VIRTUOSITY — ACID LIME */
.ps-dates > .ps-date-row:nth-of-type(4n+4) {
  background: #e7edbd;
}


/* DATE */

.ps-date {
  padding-right: 20px;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 19px;
  line-height: 1.15;
  font-weight: 400;

  text-align: left !important;
}


/* MAIN COLUMN */

.ps-main {
  padding-right: 34px;

  font-family: "Space Grotesk", sans-serif !important;
  text-align: left !important;
}


/* festival / presenter */

.ps-festival {
  margin: 0 0 4px 0;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 22px;
  line-height: 1.16;
  font-weight: 600;
}


/* Pony Says project */

.ps-project {
  margin: 0;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 20px;
  line-height: 1.18;
  font-weight: 600;
}


/* works / composers / details */

.ps-people {
  margin-top: 4px;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 17px;
  line-height: 1.22;
  font-weight: 400;
}


/* VENUE */

.ps-venue {
  padding-left: 24px;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 16px;
  line-height: 1.22;
  font-weight: 400;

  text-align: left !important;
}


/* LINKS */

.ps-dates a,
.ps-dates a:visited {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.ps-dates a:hover {
  border-bottom-width: 2px;
}


/* ITALICS */

.ps-dates em {
  font-family: "Space Grotesk", sans-serif !important;
  font-style: italic;
}


/* ========================================
   MOBILE
   ======================================== */

@media (max-width: 768px) {

  .ps-dates .ps-year {
    margin: 25px 0 11px 0 !important;
    padding: 0 17px !important;
    font-size: 28px !important;
  }

  .ps-dates > .ps-date-row {
    display: block !important;

    min-height: 0;
    padding: 17px 18px 19px 18px;
  }

  .ps-date {
    margin-bottom: 8px;
    padding: 0;

    font-size: 16px;
  }

  .ps-main {
    padding: 0;
  }

  .ps-festival {
    font-size: 20px;
  }

  .ps-project {
    margin-top: 3px;
    font-size: 18px;
  }

  .ps-people {
    font-size: 16px;
  }

  .ps-venue {
    margin-top: 9px;
    padding: 0;

    font-size: 15px;
  }
}
/* ========================================
   HOMEPAGE — PROGRAM COLOR BANDS
   Desktop: 4 columns
   Mobile: 2 columns
   ======================================== */


/* DESKTOP — 4 vertical program bands */

.thumbnails,
div[thumbnails] {
  background:
    linear-gradient(
      to right,

      /* LIQUIDITY — magenta */
      #efd3df 0%,
      #efd3df 25%,

      /* SATURATE! — cyan */
      #d2edf2 25%,
      #d2edf2 50%,

      /* ITERATION — violet */
      #ddd6f0 50%,
      #ddd6f0 75%,

      /* VIRTUOSITY — acid lime */
      #e7edbd 75%,
      #e7edbd 100%
    ) !important;
}


/* keep thumbnails themselves clean */

.thumbnails .thumbnail,
.thumbnails .thumbnail > a,
.thumbnails .thumb_image {
  background-color: transparent !important;
}


/* ========================================
   MOBILE — 2 vertical bands
   all 4 colors remain present
   ======================================== */

@media (max-width: 768px) {

  .thumbnails,
  div[thumbnails] {
    background:
      linear-gradient(
        to right,

        /* LEFT:
           Liquidity → Iteration */
        transparent 0%,
        transparent 50%,

        /* RIGHT:
           Saturate → Virtuosity */
        transparent 50%,
        transparent 100%
      ),

      linear-gradient(
        to bottom,
        #efd3df 0%,
        #ddd6f0 100%
      ) left / 50% 100% no-repeat,

      linear-gradient(
        to bottom,
        #d2edf2 0%,
        #e7edbd 100%
      ) right / 50% 100% no-repeat !important;
  }

}
/* ========================================
   HOMEPAGE — ALIGN COLOR BANDS TO GRID
   ======================================== */

.thumbnails {
  position: relative;
}

/* Farbe nur hinter der tatsächlichen Grid-Fläche */
.thumbnails_width {
  background:
    linear-gradient(
      to right,
      #efd3df 0%,
      #efd3df 25%,
      #d2edf2 25%,
      #d2edf2 50%,
      #ddd6f0 50%,
      #ddd6f0 75%,
      #e7edbd 75%,
      #e7edbd 100%
    ) !important;
}

/* alter Hintergrund auf äußerem Thumbnail-Container weg */
.thumbnails,
div[thumbnails] {
  background: transparent !important;
}


/* MOBILE — 2 columns */
@media (max-width: 768px) {

  .thumbnails_width {
    background:
      linear-gradient(
        to right,
        #efd3df 0%,
        #efd3df 50%,
        #d2edf2 50%,
        #d2edf2 100%
      ) !important;
  }

}
/* ========================================
   HOMEPAGE — FINAL BAND ALIGNMENT
   ======================================== */

/* Farbe exakt in den sichtbaren Grid-Bereich ziehen */
.thumbnails_width {
  box-sizing: border-box;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;

  background:
    linear-gradient(
      to right,
      #efd3df 0%,
      #efd3df 25%,
      #d2edf2 25%,
      #d2edf2 50%,
      #ddd6f0 50%,
      #ddd6f0 75%,
      #e7edbd 75%,
      #e7edbd 100%
    ) content-box !important;
}

/* äußerer Container bleibt transparent */
.thumbnails,
div[thumbnails] {
  background: transparent !important;
}

/* die Gutter nicht zusätzlich verschieben */
[data-css-preset] [thumbnails-gutter] {
  margin-left: -0.35rem !important;
  margin-right: -0.35rem !important;
}

/* Mobile: 2 exakt gleich breite Zonen */
@media (max-width: 768px) {

  .thumbnails_width {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;

    background:
      linear-gradient(
        to right,
        #efd3df 0%,
        #efd3df 50%,
        #d2edf2 50%,
        #d2edf2 100%
      ) content-box !important;
  }

  [data-css-preset] [responsive-layout] [thumbnails-gutter] {
    margin-left: -0.6rem !important;
    margin-right: -0.6rem !important;
  }
}
/* ========================================
   HOMEPAGE — BAND WIDTHS MATCH GRID
   outer bands slightly wider
   ======================================== */

.thumbnails_width {
  background:
    linear-gradient(
      to right,

      /* LIQUIDITY — outer band */
      #efd3df 0,
      #efd3df calc(25% + 0.35rem),

      /* SATURATE */
      #d2edf2 calc(25% + 0.35rem),
      #d2edf2 50%,

      /* ITERATION */
      #ddd6f0 50%,
      #ddd6f0 calc(75% - 0.35rem),

      /* VIRTUOSITY — outer band */
      #e7edbd calc(75% - 0.35rem),
      #e7edbd 100%
    ) content-box !important;
}
/* ========================================
   HOMEPAGE — FINAL COLUMN ALIGNMENT
   ======================================== */

@media (min-width: 769px) {

  .thumbnails_width {
    background:
      linear-gradient(
        to right,

        /* LIQUIDITY */
        #efd3df 0,
        #efd3df calc(25% + 9px),

        /* SATURATE */
        #d2edf2 calc(25% + 9px),
        #d2edf2 50%,

        /* ITERATION */
        #ddd6f0 50%,
        #ddd6f0 calc(75% - 9px),

        /* VIRTUOSITY */
        #e7edbd calc(75% - 9px),
        #e7edbd 100%
      ) content-box !important;
  }

}

/* ========================================
   HOMEPAGE — NAV MATCHES COLOR BANDS
   ======================================== */

.ps-band-nav {
  display: grid;

  grid-template-columns:
    calc(25% + 9px)
    calc(25% - 9px)
    calc(25% - 9px)
    calc(25% + 9px);

  width: 100%;
  box-sizing: border-box;
}

.ps-band-nav-group {
  min-height: 105px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 38px;

  box-sizing: border-box;
}

.ps-band-nav-group a {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 14px;
  line-height: 1;
  font-weight: 600;

  color: #111 !important;

  text-decoration: none !important;
  border-bottom: 1px solid #111;

  padding-bottom: 3px;
}

.ps-band-nav-group a:hover {
  opacity: 0.5;
}

.ps-band-socials {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.ps-band-socials a {
  border-bottom: 0 !important;
  padding-bottom: 0;
  letter-spacing: 0;
}


/* MOBILE — 2 columns */

@media (max-width: 768px) {

  .ps-band-nav {
    grid-template-columns: 50% 50%;
  }

  .ps-band-nav-group {
    min-height: 76px;
    gap: 18px;
  }

  .ps-band-nav-group a {
    font-size: 11px;
  }

  /* on mobile the 3rd group starts a new row */
  .ps-band-nav-empty {
    display: none;
  }

}
/* FIX SOCIAL ICON FONT */

.ps-band-socials a,
.ps-band-socials a.icon-link {
  font-family: Icons !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
  text-decoration: none !important;
}
/* ========================================
   HOMEPAGE — PIXEL HOVER
   based on original thiloruck.com effect
   ======================================== */

@media (min-width: 769px) {

  .thumbnails .thumbnail > a {
    position: relative;
    overflow: hidden;
  }


  /* PIXEL OVERLAY */

  .thumbnails .thumbnail > a::after {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 7;
    pointer-events: none;

    opacity: 0;

    background-color: rgba(0, 0, 0, 0.72);
    background-image:
      url("https://thiloruck.com/wp-content/uploads/2022/04/pixel_b.png");

    background-repeat: repeat;
    background-size: 150px;

    background-position-y: 0px;
  }


  .thumbnails .thumbnail:hover > a::after {
    opacity: 1;

    animation:
      ps-pixel-original
      0.8s
      steps(8)
      forwards;
  }


  /* PHOTO DOES NOT MOVE */

  .thumbnails .thumbnail:hover .thumb_image {
    transform: none !important;
    animation: none !important;
  }


  /* TITLE ABOVE PIXEL EFFECT */

  .thumbnails .thumbnail .title {
    z-index: 9;

    opacity: 0;

    transition: none !important;
  }


  .thumbnails .thumbnail:hover .title {
    opacity: 1;

    transition:
      opacity 0s linear 0.72s !important;
  }

}


/* ORIGINAL PIXEL MOVEMENT */

@keyframes ps-pixel-original {

  0% {
    background-position-y: 0px;
  }

  100% {
    background-position-y: 480px;
  }

}


/* MOBILE — no hover animation */

@media (max-width: 768px) {

  .thumbnails .thumbnail > a::after {
    display: none !important;
  }

}
/* PIXEL HOVER — TITLE IMMEDIATELY VISIBLE */

@media (min-width: 769px) {

  .thumbnails .thumbnail:hover .title {
    opacity: 1 !important;
    transition: none !important;
    animation: none !important;
    z-index: 9 !important;
  }

  .thumbnails .thumbnail > a::after {
    z-index: 7 !important;
  }

}
/* HOMEPAGE — TITLE COLORS MATCH PROGRAM BANDS */

.thumbnails .thumbnail:nth-child(4n+1) .title {
  background: rgba(255, 0, 101, 0.82) !important; /* magenta */
}

.thumbnails .thumbnail:nth-child(4n+2) .title {
  background: rgba(0, 201, 232, 0.82) !important; /* cyan */
}

.thumbnails .thumbnail:nth-child(4n+3) .title {
  background: rgba(157, 131, 255, 0.82) !important; /* violet */
}

.thumbnails .thumbnail:nth-child(4n+4) .title {
  background: rgba(219, 234, 54, 0.86) !important; /* lime */
  color: #000 !important;
}
/* HOMEPAGE — TITLE COLORS MATCH PROGRAM BANDS */

.thumbnails .thumbnail:nth-child(4n+1) .title {
  background: rgba(255, 0, 101, 0.82) !important; /* magenta */
}

.thumbnails .thumbnail:nth-child(4n+2) .title {
  background: rgba(0, 201, 232, 0.82) !important; /* cyan */
}

.thumbnails .thumbnail:nth-child(4n+3) .title {
  background: rgba(157, 131, 255, 0.82) !important; /* violet */
}

.thumbnails .thumbnail:nth-child(4n+4) .title {
  background: rgba(219, 234, 54, 0.86) !important; /* lime */
  color: #000 !important;
}
/* ========================================
   PIXEL HOVER — CLEAN COLORED VERSION
   ======================================== */

@media (min-width: 769px) {

  /* program colors */
  .thumbnails .thumbnail:nth-child(4n+1) {
    --ps-pixel-color: #ff0065;
  }

  .thumbnails .thumbnail:nth-child(4n+2) {
    --ps-pixel-color: #00c9e8;
  }

  .thumbnails .thumbnail:nth-child(4n+3) {
    --ps-pixel-color: #9d83ff;
  }

  .thumbnails .thumbnail:nth-child(4n+4) {
    --ps-pixel-color: #dbea36;
  }


  /* reset ALL old dark overlay properties */
  .thumbnails .thumbnail > a::after {
    content: "";

    position: absolute;
    inset: 0;
    z-index: 7;
    pointer-events: none;

    opacity: 0;

    /* IMPORTANT: no dark background */
    background: var(--ps-pixel-color) !important;
    background-image: none !important;

    /* pixel sprite becomes a mask */
    -webkit-mask:
      url("https://thiloruck.com/wp-content/uploads/2022/04/pixel_b.png")
      0 0 / 75px auto repeat;

    mask:
      url("https://thiloruck.com/wp-content/uploads/2022/04/pixel_b.png")
      0 0 / 75px auto repeat;

    mix-blend-mode: normal;
  }


  /* hover */
  .thumbnails .thumbnail:hover > a::after {
    opacity: 0.72;

    animation:
      ps-colored-pixel-fall
      0.7s
      steps(8)
      forwards;
  }


  /* PHOTO STAYS COMPLETELY UNTOUCHED */

  .thumbnails .thumbnail:hover .thumb_image {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    animation: none !important;
  }


  /* TITLE APPEARS IMMEDIATELY */

  .thumbnails .thumbnail:hover .title {
    opacity: 1 !important;
    animation: none !important;
    transition: none !important;
    z-index: 9 !important;
  }

}


@keyframes ps-colored-pixel-fall {

  0% {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }

  100% {
    -webkit-mask-position: 0 240px;
    mask-position: 0 240px;
  }

}
/* ========================================
   HOMEPAGE — CLEAN THUMBNAIL TITLES
   ======================================== */

/* Pixel / Glitch komplett aus */
.thumbnails .thumbnail > a::after {
  display: none !important;
  content: none !important;
  animation: none !important;
}

.thumbnails .thumbnail:hover .thumb_image {
  animation: none !important;
  transform: none !important;
  filter: none !important;
  opacity: 1 !important;
}


/* TITEL */

.thumbnails .thumbnail .title,
.thumbnails .thumbnail .title span {
  font-family: "Space Grotesk", sans-serif !important;

  font-size: 17px !important;
  line-height: 1.08 !important;
  font-weight: 600 !important;

  letter-spacing: 0.03em !important;
  text-transform: uppercase;

  color: #fff;

  padding: 11px 15px 10px 15px;

  border: 0 !important;
}


/* sofort beim Hover */

.thumbnails .thumbnail:hover .title {
  opacity: 1 !important;
  animation: none !important;
  transition: none !important;
}


/* ========================================
   TITELFARBEN = PROGRAMMFARBEN
   ======================================== */

/* LIQUIDITY */
.thumbnails .thumbnail:nth-child(4n+1) .title {
  background: rgba(255, 0, 101, 0.88) !important;
}

/* SATURATE */
.thumbnails .thumbnail:nth-child(4n+2) .title {
  background: rgba(0, 201, 232, 0.88) !important;
}

/* ITERATION */
.thumbnails .thumbnail:nth-child(4n+3) .title {
  background: rgba(157, 131, 255, 0.88) !important;
}

/* VIRTUOSITY */
.thumbnails .thumbnail:nth-child(4n+4) .title {
  background: rgba(219, 234, 54, 0.90) !important;
  color: #111 !important;
}


/* MOBILE */
@media (max-width: 768px) {

  .thumbnails .thumbnail .title,
  .thumbnails .thumbnail .title span {
    font-size: 14px !important;
    line-height: 1.08 !important;
  }

}
/* ========================================
   HOMEPAGE — COLOR BANDS UP TO HEADER
   ======================================== */

@media (min-width: 769px) {

  /* navigation area gets the exact same 4 bands */
  .ps-band-nav {
    background:
      linear-gradient(
        to right,

        #efd3df 0,
        #efd3df calc(25% + 9px),

        #d2edf2 calc(25% + 9px),
        #d2edf2 50%,

        #ddd6f0 50%,
        #ddd6f0 calc(75% - 9px),

        #e7edbd calc(75% - 9px),
        #e7edbd 100%
      ) !important;
  }

}
/* ========================================
   HOMEPAGE — CONTINUOUS COLOR FIELD
   + KEEP LOGO WHITE
   ======================================== */


/* PONY SAYS logo must stay white even on active homepage */

[data-predefined-style="true"] h1 a.active,
[data-predefined-style="true"] h1 a,
[data-predefined-style="true"] h1 a:visited {
  opacity: 1 !important;
  color: #fff !important;
}


/* exact 4-band background */

.ps-band-nav {
  position: relative;

  background:
    linear-gradient(
      to right,

      #efd3df 0,
      #efd3df calc(25% + 9px),

      #d2edf2 calc(25% + 9px),
      #d2edf2 50%,

      #ddd6f0 50%,
      #ddd6f0 calc(75% - 9px),

      #e7edbd calc(75% - 9px),
      #e7edbd 100%
    ) !important;
}


/* fill the white gap ABOVE the navigation */

.ps-band-nav::before {
  content: "";
  position: absolute;

  left: 0;
  right: 0;
  bottom: 100%;

  height: 2rem;

  background:
    linear-gradient(
      to right,

      #efd3df 0,
      #efd3df calc(25% + 9px),

      #d2edf2 calc(25% + 9px),
      #d2edf2 50%,

      #ddd6f0 50%,
      #ddd6f0 calc(75% - 9px),

      #e7edbd calc(75% - 9px),
      #e7edbd 100%
    );

  pointer-events: none;
}


/* fill the white gap BELOW the navigation */

.ps-band-nav::after {
  content: "";
  position: absolute;

  left: 0;
  right: 0;
  top: 100%;

  height: 3rem;

  background:
    linear-gradient(
      to right,

      #efd3df 0,
      #efd3df calc(25% + 9px),

      #d2edf2 calc(25% + 9px),
      #d2edf2 50%,

      #ddd6f0 50%,
      #ddd6f0 calc(75% - 9px),

      #e7edbd calc(75% - 9px),
      #e7edbd 100%
    );

  pointer-events: none;
}


/* keep nav content above extension */

.ps-band-nav-group {
  position: relative;
  z-index: 2;
}
/* ========================================
   HOMEPAGE — NAV FINAL
   stronger colors + remove white seam
   ======================================== */


/* tiny overlap kills the white seam */

.ps-band-nav {
  margin-bottom: -3px !important;
  position: relative;
  z-index: 3;
}


/* stronger / more saturated navigation colors */

.ps-band-nav-group:nth-child(1) {
  background: #efb6d1 !important;   /* magenta */
}

.ps-band-nav-group:nth-child(2) {
  background: #afe2ed !important;   /* cyan */
}

.ps-band-nav-group:nth-child(3) {
  background: #c9bced !important;   /* violet */
}

.ps-band-nav-group:nth-child(4) {
  background: #e0e88e !important;   /* acid lime */
}


/* keep the thumbnail bands softer */
.thumbnails_width {
  position: relative;
  z-index: 1;
}
/* ========================================
   HOMEPAGE — CLEAN NAV / GRID TRANSITION
   ======================================== */

/* alte zusätzliche Farbebenen abschalten */

.ps-band-nav {
  background: none !important;
  margin-top: 0 !important;
  margin-bottom: -3px !important;
}

.ps-band-nav::before,
.ps-band-nav::after {
  display: none !important;
  content: none !important;
}


/* NAV — stronger program colours */

.ps-band-nav-group:nth-child(1) {
  background: #efb6d1 !important;
}

.ps-band-nav-group:nth-child(2) {
  background: #afe2ed !important;
}

.ps-band-nav-group:nth-child(3) {
  background: #c9bced !important;
}

.ps-band-nav-group:nth-child(4) {
  background: #e0e88e !important;
}


/* make nav a little taller so it feels intentional */

.ps-band-nav-group {
  min-height: 125px !important;
}


/* GRID remains the softer pastel version */

.thumbnails_width {
  margin-top: 0 !important;
}
/* ========================================
   DATES — FESTIVAL NAMES AS SCAN ANCHORS
   ======================================== */

.ps-festival {
  font-size: 24px !important;
  line-height: 1.08 !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em !important;
}

/* saturated text color matching each pastel row */

.ps-date-row:nth-of-type(4n+1) .ps-festival {
  color: #d60063 !important; /* magenta */
}

.ps-date-row:nth-of-type(4n+2) .ps-festival {
  color: #008eaa !important; /* cyan */
}

.ps-date-row:nth-of-type(4n+3) .ps-festival {
  color: #7657d8 !important; /* violet */
}

.ps-date-row:nth-of-type(4n+4) .ps-festival {
  color: #7c8700 !important; /* lime */
}

/* project stays black and secondary */

.ps-project {
  color: #111 !important;
  font-size: 19px !important;
  line-height: 1.16 !important;
  font-weight: 600 !important;
}

/* works / composers stay quieter */

.ps-people {
  color: #111 !important;
  font-size: 16px !important;
  line-height: 1.22 !important;
  font-weight: 400 !important;
}

/* venue remains small */

.ps-venue {
  color: #111 !important;
  font-size: 15px !important;
  line-height: 1.2 !important;
  font-weight: 400 !important;
}

@media (max-width: 768px) {

  .ps-festival {
    font-size: 21px !important;
  }

  .ps-project {
    font-size: 18px !important;
  }

  .ps-people {
    font-size: 15px !important;
  }

}
/* VIRTUOSITY / LIME — stronger festival text */

.ps-date-row:nth-of-type(4n+4) .ps-festival {
  color: #4f5900 !important;
}
/* ========================================
   HOMEPAGE — BLACK SURROUND AROUND NAV
   ======================================== */

@media (min-width: 769px) {

  .ps-band-nav {
    position: relative;
    isolation: isolate;
  }

  .ps-band-nav::before {
    content: "";
    position: absolute;

    top: -18px;
    bottom: -18px;

    left: 50%;
    width: 100vw;
    transform: translateX(-50%);

    background: #000;

    z-index: -1;
    pointer-events: none;
  }

}
/* ========================================
   HOMEPAGE — BLACK NAV BACKGROUND
   ======================================== */

@media (min-width: 769px) {

  .ps-band-nav {
    background: #000 !important;

    /* black space above + below the colored blocks */
    padding-top: 18px !important;
    padding-bottom: 18px !important;

    /* stretch black beyond Cargo content width */
    box-shadow: 0 0 0 100vmax #000;
    clip-path: inset(0 -100vmax);

    margin-top: -18px !important;
    margin-bottom: 18px !important;
  }

  /* colored blocks stay colored */
  .ps-band-nav-group:nth-child(1) {
    background: #efb6d1 !important;
  }

  .ps-band-nav-group:nth-child(2) {
    background: #afe2ed !important;
  }

  .ps-band-nav-group:nth-child(3) {
    background: #c9bced !important;
  }

  .ps-band-nav-group:nth-child(4) {
    background: #e0e88e !important;
  }

}
/* BLACK GAP BETWEEN NAV AND GRID */

.ps-band-nav {
  margin-bottom: 0 !important;
}

.thumbnails_width {
  margin-top: 0 !important;
}

div[thumbnails] {
  position: relative;
}

div[thumbnails]::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 100%;
  width: 100vw;
  height: 80px;
  transform: translateX(-50%);
  background: #000;
  pointer-events: none;
  z-index: -1;
}
/* ========================================
   PONY SAYS — ABOUT
   ======================================== */

.ps-about {
  width: 100%;
  font-family: "Space Grotesk", sans-serif;
  color: #111;
}


/* LIVE HERO STRIP */

.ps-about-hero {
  width: 100%;
  height: 160px;
  overflow: hidden;
  background: #000;
  margin: 0 0 36px 0;
}

.ps-about-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  margin: 0 !important;
}


/* TEXT */

.ps-about-text {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  padding: 42px 38px 46px 38px;
}

.ps-about-text p {
  max-width: 980px;
  margin: 0 0 24px 0;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 21px;
  line-height: 1.32;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.ps-about-text .ps-about-lead {
  font-size: 27px;
  line-height: 1.22;
  font-weight: 600;
  max-width: 1080px;
}

.ps-about-text strong {
  font-weight: 700;
}


/* B/W PORTRAIT — ALWAYS FULL IMAGE */

.ps-about-portrait {
  width: 100%;
  margin: 26px 0 0 0;
  overflow: visible;
  background: #fff;
}

.ps-about-portrait img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center center;
  margin: 0 !important;
}


/* MOBILE */

@media (max-width: 768px) {

  .ps-about-hero {
    height: 90px;
    margin-bottom: 22px;
  }

  .ps-about-text {
    padding: 26px 18px 30px 18px;
  }

  .ps-about-text p {
    font-size: 17px;
    line-height: 1.35;
    margin-bottom: 20px;
  }

  .ps-about-text .ps-about-lead {
    font-size: 21px;
    line-height: 1.25;
  }

  .ps-about-portrait {
    margin-top: 14px;
  }
}
/* ========================================
   PONY SAYS — MEDIA
   ======================================== */

.ps-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;

  width: 100%;
  box-sizing: border-box;
  padding: 28px;

  font-family: "Space Grotesk", sans-serif;
}


/* VIDEO CARD */

.ps-media-card {
  --media-color: #ff0065;

  min-width: 0;
  overflow: hidden;

  background: #000;
}


/* VIDEO */

.ps-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;

  overflow: hidden;
  background: #000;
}

.ps-video iframe {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  border: 0;
}


/* CAPTION */

.ps-media-caption {
  box-sizing: border-box;

  min-height: 102px;
  padding: 18px 20px 20px 20px;

  background: var(--media-color);
  color: #111;
}

.ps-media-title {
  margin-bottom: 6px;

  font-family: "Space Grotesk", sans-serif !important;
  font-size: 21px;
  line-height: 1.05;
  font-weight: 700;

  letter-spacing: 0.025em;
}

.ps-media-detail {
  font-family: "Space Grotesk", sans-serif !important;
  font-size: 17px;
  line-height: 1.22;
  font-weight: 500;
}

.ps-media-detail em {
  font-style: italic;
}


/* COLORS */

.media-magenta {
  --media-color: #efb6d1;
}

.media-cyan {
  --media-color: #afe2ed;
}

.media-violet {
  --media-color: #c9bced;
}

.media-lime {
  --media-color: #e0e88e;
}


/* MOBILE */

@media (max-width: 768px) {

  .ps-media {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 18px;
  }

  .ps-media-caption {
    min-height: 0;
    padding: 15px 16px 17px 16px;
  }

  .ps-media-title {
    font-size: 19px;
  }

  .ps-media-detail {
    font-size: 15px;
  }
}