#toolset {
	display: none;
}

body {
	background-color: #0d0d0d;
	color: rgba(255,255,255,0.92);
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: .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 4em;
}

ol {
	list-style-type: decimal-leading-zero;
}

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

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

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

.gallery_image_caption {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.35);
	font-family: Diatype, Icons;
	font-style: normal;
	line-height: 1.3;	
}

/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 3.4rem;
	font-weight: 500;
	color: rgba(0, 0, 0, 0.85);
	font-family: "Diatype Variable", Icons;
	font-style: normal;
	line-height: 1.3;
	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: Stanley, Icons;
	font-style: normal;
	padding: 0;
	margin: 0;
	font-size: 3.2rem;
	line-height: 1;
	color: rgb(246, 235, 235);
	font-weight: 400;
}

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

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

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

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

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

/**
 * 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_right*/;
	margin-right: 0 /*!content_right*/;
	text-align: left /*!text_left*/;
}

[data-css-preset] body {
	background-color: transparent/*!body_bgcolor*/;
}

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

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

/**
 * 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: 1rem/*!thumbnails_padding*/;
}

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

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

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

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

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

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

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

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

/**
 * Site Menu Button
 */

[data-css-preset] #site_menu_button {
    color: rgba(0, 0, 0, 0.75);
    line-height: 1;
    font-size: 28px /*!site_menu_button*/;
    padding: 6px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
	right: 3rem /*!site_menu_button*/;
	top: 3rem /*!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
 */

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

#shop_button.text {
	font-family: "Monument Grotesk Mono", Icons;
	font-size: 1.6rem;
    padding: 0;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
}

#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-size: 1.4rem;
	line-height: 1.2;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
	font-style: normal;
	font-weight: 400;
}

.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.4rem;
    display: inline-block;
	width: 100%;
    border: 1px solid rgba(0,0,0,.2);
    background:  white url(https://static.cargo.site/assets/images/select-line-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 2.5rem .7rem 1rem;
	font-style: normal;
	font-weight: 400;
}

.shop_product .button {
	font-family: Diatype, Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, 0.7);
    color: rgba(255,255,255,1);
    flex: 0 0 50%;
    text-align: left;
    display: inline-block;
	line-height: 1.2;
    padding: .8rem 1rem;
	font-style: normal;
	font-weight: 400;
}

/*
 * 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: 94% /*!quick_view_height*/;
    width: 57% /*!quick_view_width*/;
}

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

[data-css-preset] .quick-view-background {
	background: #eee /*!quick_view_bgcolor*/;
}

.quick-view-caption {
	font-family: "Monument Grotesk Mono", Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 3.5rem 0;
    text-align: center;
    font-size: 1.3rem;
	font-style: normal;
	font-weight: 400;
    line-height: 1.3;
}

.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;
}

/** 
 * Image Gallery Navigation Arrows 
 */
 
.image-gallery-navigation .left-arrow,
.image-gallery-navigation .right-arrow {
    /* Change height/width together to scale */
    height: 36px;
    width: 36px;
}

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

.image-gallery-navigation .left-arrow .outer-color,
.image-gallery-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 3px;
}

/**
 * Wallpaper Backdrop Navigation Arrows 
 */

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

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

.wallpaper-navigation .left-arrow .outer-color,
.wallpaper-navigation .right-arrow .outer-color {
    stroke: rgba(0, 0, 0, 0.6);
    stroke-width: 3px;
}


/**
 * 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.4rem;
    line-height: 1.3;
	font-family: Diatype, 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;
}

html, body, [data-css-preset] body, [data-css-preset].mobile .page {
	background-color: rgb(13,13,13);
}


body.homepage .gallery_card_image img, body.homepage .gallery_card_image video {
  filter: grayscale(85%) brightness(0.95);
  transform: scale(1);
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1), filter 600ms;
}
body.homepage .gallery_card:hover .gallery_card_image img,
body.homepage .gallery_card:hover .gallery_card_image video {
  filter: grayscale(0%) brightness(1);
  transform: scale(1.035);
}
.gallery_image_caption {
  color: rgba(255, 255, 255, 0.45);
}
body.homepage .gallery_card:hover .gallery_image_caption {
  color: rgba(255, 255, 255, 0.85);
}


bodycopy a, .thumbnails .tags a, #site_menu .page-link a, #site_menu .set-link > a {
  background-image: linear-gradient(currentcolor, currentcolor);
  background-position: 0px 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size 250ms;
  padding-bottom: 1px;
}
bodycopy a:hover, .thumbnails .tags a:hover, #site_menu .page-link a:hover, #site_menu .set-link > a:hover {
  background-size: 100% 1px;
}


.background_gradient {
  background-image: none !important;
  background-color: rgb(13, 13, 13) !important;
}


/* A normal section in the page flow. Vertical scrolling passes straight
   through it untouched; only a clearly horizontal gesture moves the
   projects. The page ends at this section's bottom edge. */
.pag-gal {
	position: relative;
	width: 100vw;
	left: 50%;
	margin-left: -50vw;
	margin-top: 0;
	margin-bottom: 0;
	height: 44vh;
	min-height: 290px;
	overflow: hidden;
	touch-action: pan-y;
	-webkit-user-select: none;
	user-select: none;
}

.pag-gal__viewport {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	perspective: 1700px;
	perspective-origin: 50% 50%;
	cursor: grab;
}
.pag-gal.is-dragging .pag-gal__viewport { cursor: grabbing; }

.pag-gal__track {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

/* hit-testing: cards sit behind the track plane in 3D, so the track
   must not swallow clicks. Events still bubble up for dragging. */
.pag-gal__track { pointer-events: none; }
.pag-gal__item  { pointer-events: auto; }

/* iOS Safari draws a large play button over any video it has decided not to
   autoplay - muted background video in Low Power Mode is the usual case. On a
   decorative hero or a gallery card that reads as a broken player, so it is
   hidden for every video that does not deliberately carry controls. A blocked
   video then simply shows its first frame and the layout is untouched. */
video:not([controls])::-webkit-media-controls-start-playback-button,
video:not([controls])::-webkit-media-controls-play-button,
video:not([controls])::-webkit-media-controls-overlay-play-button,
video:not([controls])::-webkit-media-controls,
video:not([controls])::-webkit-media-controls-enclosure,
video:not([controls])::-webkit-media-controls-panel {
	display: none !important;
	-webkit-appearance: none !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

/* never expose native video chrome */
.pag-gal__item video::-webkit-media-controls,
.pag-gal__item video::-webkit-media-controls-enclosure,
.pag-gal__item video::-webkit-media-controls-panel { display: none !important; }

/* positioned entirely by script: each card is placed on an arc */
.pag-gal__item {
	touch-action: pan-y;
	position: absolute;
	top: 0; left: 0;
	transform-style: preserve-3d;
	backface-visibility: visible;
	will-change: transform, opacity;
}

/* the original Cargo card, re-hosted inside the strip */
.pag-gal__item .gallery_card {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	float: none !important;
	text-decoration: none !important;
}

.pag-gal__item .gallery_card_image {
	position: absolute !important;
	top: 0; right: 0; bottom: 0; left: 0;
	width: 100% !important;
	height: 100% !important;
	padding-bottom: 0 !important;
	overflow: hidden;
}

.pag-gal__item .gallery_card_image img,
.pag-gal__item .gallery_card_image video {
	position: absolute !important;
	top: 0; left: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	object-fit: cover;
	display: block;
	pointer-events: none;
	-webkit-user-drag: none;
	filter: grayscale(85%) brightness(0.95);
	transform: scale(1);
	transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1), filter 700ms ease;
}

.pag-gal__item:hover .gallery_card_image img,
.pag-gal__item:hover .gallery_card_image video {
	filter: grayscale(0%) brightness(1);
	transform: scale(1.035);
}

/* project name: hidden until hovered (desktop) or centred (touch) */
.pag-gal__item .gallery_image_caption {
	position: absolute !important;
	top: 100% !important;
	left: 0 !important;
	right: auto !important;
	width: max-content !important;
	max-width: 80vw;
	margin: 0 !important;
	padding-top: 0.9rem !important;
	white-space: nowrap;
	opacity: 0;
	transform: translateY(-0.4rem);
	transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
	            color 250ms ease;
	pointer-events: none;
}

.pag-gal__item:hover .gallery_image_caption {
	opacity: 1;
	transform: translateY(0);
	color: rgba(255,255,255,0.85);
}

/* touch devices have no hover: reveal whichever project is centred */
.pag-gal__item.is-near .gallery_image_caption {
	opacity: 1;
	transform: translateY(0);
	color: rgba(255,255,255,0.85);
}
.pag-gal__item.is-near .gallery_card_image img,
.pag-gal__item.is-near .gallery_card_image video {
	filter: grayscale(0%) brightness(1);
}

@media (hover: none) {
	.pag-gal__item.is-near .gallery_image_caption {
		opacity: 1;
		transform: translateY(0);
		color: rgba(255,255,255,0.85);
	}
	.pag-gal__item.is-near .gallery_card_image img,
	.pag-gal__item.is-near .gallery_card_image video {
		filter: grayscale(0%) brightness(1);
	}
}

/* the original stacked galleries, once absorbed into the strip */
.image-gallery.pag-consumed { display: none !important; }

/* Entrance hint: the ring settles in as it scrolls into view while the script
   gives it a small sideways shove, so the first thing the carousel does is
   move horizontally. Runs once per visit. */
.pag-gal {
	transition: opacity 640ms cubic-bezier(0.22, 1, 0.36, 1),
	            transform 640ms cubic-bezier(0.22, 1, 0.36, 1);
}
.pag-gal.is-entering {
	opacity: 0.72;
	transform: translateY(18px) scale(0.978);
}
@media (max-width: 800px) {
	.pag-gal.is-entering { opacity: 0.82; transform: translateY(12px) scale(0.988); }
}
@media (prefers-reduced-motion: reduce) {
	.pag-gal { transition: none; }
	.pag-gal.is-entering { opacity: 1; transform: none; }
}

@media (max-width: 800px) {
	.pag-gal {
		/* placeholder until the script sizes the stage from the cards */
		height: 48vh;
		min-height: 300px;
		/* the page spacer above reads as generous on a wide screen and
		   strands the ring halfway down a phone */
		margin-top: -64px;
	}
	.pag-gal__item .gallery_image_caption { padding-top: 0.7rem !important; }
}


/* This site keeps a text index in the left grid column, so the gallery
   stays inside its own column instead of breaking out to full-bleed. */
.pag-gal {
	width: 100%;
	left: 0;
	margin-left: 0;
}


/* ============================================================
   FOOTER — pill navigation
   No font-family is set anywhere, so the footer inherits
   Diatype Variable from the site automatically.
   ============================================================ */

.pag-footer{
  /* The pool of light is centred on the pill, and the pill’s middle is the
     footer’s top padding plus half its height. Kept as one value so the two
     cannot drift apart at a breakpoint. */
  --pag-pill-mid: 247px;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 220px 20px 64px;
  text-align: center;
}

/* A frosted surface can only blur what sits behind it, and the bottom of the
   page is flat #0D0D0D — a blur over flat colour renders as nothing. This lays
   down a barely-perceptible pool of light for the blur to catch.
   Delete this block if you would rather have it dead flat. */
.pag-footer::before{
  content: "";
  position: absolute;
  left: 50%;
  top: var(--pag-pill-mid);
  z-index: -1;
  width: min(560px, 92vw);
  height: 230px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(58% 58% at 50% 50%,
              rgba(255,255,255,.055), rgba(255,255,255,0) 72%);
}

.pag-pill{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;

  /* — GLASS (current) — */
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
}

.pag-pill a{
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 26px;
  border-radius: 999px;
  color: rgba(255,255,255,.88);
  font-size: 15px;
  line-height: 1;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background .35s ease, color .35s ease;
}

.pag-pill a:hover{
  background: rgba(255,255,255,.09);
  color: #fff;
  opacity: 1;
}

.pag-pill a:focus-visible{
  background: rgba(255,255,255,.09);
  color: #fff;
  outline: 1px solid rgba(255,255,255,.55);
  outline-offset: 2px;
}

.pag-pill-sep{
  width: 1px;
  height: 16px;
  background: rgba(255,255,255,.13);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .pag-pill{ background: rgba(255,255,255,.085); }
}

.pag-copy{
  margin: 0;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .16em;
  color: rgba(255,255,255,.40);
}

.pag-legal{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  font-size: 11px;
  letter-spacing: .05em;
  color: rgba(255,255,255,.24);
}

.pag-legal a{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 2px;
  color: inherit;
  text-decoration: none;
  transition: color .3s ease;
}

.pag-legal a:hover,
.pag-legal a:focus-visible{ color: rgba(255,255,255,.62); opacity: 1; }

/* Phones: the same footer, roughly 40% shorter and a good deal narrower.
   About and Contact keep a 36px tap target even though the oval shrinks. */
@media (max-width: 600px){
  .pag-footer{ padding: 96px 14px 24px; gap: 9px; --pag-pill-mid: 118px; }
  /* same proportions to the smaller pill as on the desktop */
  .pag-footer::before{ height: 186px; width: min(365px, 88vw); }
  .pag-pill{ padding: 3px; gap: 2px; }
  .pag-pill a{ min-height: 36px; padding: 0 13px; font-size: 12px; }
  .pag-pill-sep{ height: 12px; }
  .pag-copy{ font-size: 8.5px; letter-spacing: .11em; }
  .pag-legal{ font-size: 9px; gap: 6px; }
  .pag-legal a{ min-height: 20px; }
}

@media (prefers-reduced-motion: reduce){
  .pag-pill a, .pag-legal a{ transition: none; }
}

/* ---- ALTERNATIVE: HAIRLINE — almost no fill, just outline and blur ----
.pag-pill{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: none;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
}
*/

/* ---- ALTERNATIVE: LIFTED — more fill, soft ambient shadow ----
.pag-pill{
  background: rgba(255,255,255,.075);
  border: 1px solid rgba(255,255,255,.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14),
              0 18px 40px -18px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
          backdrop-filter: blur(20px) saturate(170%);
}
*/


/* ============================================================
   LEGAL PAGES — Imprint / Privacy Policy
   ============================================================ */

.pag-legalpage{
  max-width: 620px;
  margin: 0 auto;
  padding: 10vh 0 16vh;
  text-align: left;
}

.pag-legalpage h1{
  margin: 0 0 1.6em;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.pag-legalpage p{
  margin: 0 0 1.9em;
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0;
  color: rgba(255,255,255,.70);
}

.pag-legalpage b{
  font-weight: 500;
  color: rgba(255,255,255,.95);
}

.pag-legalpage a{
  color: rgba(255,255,255,.70);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pag-legalpage a:hover{ color: #fff; opacity: 1; }

@media (max-width: 600px){
  .pag-legalpage{ padding: 8vh 4vw 12vh; }
  .pag-legalpage h1{ font-size: 24px; }
}

/* the legal pages needed !important to beat Cargo's own link colour;
   the language switch is excluded so it can keep its own colour */
.pag-legalpage p a:not([data-pag-lang]),
.pag-legalpage a:not([data-pag-lang]){ color: rgba(255,255,255,.70) !important; opacity: 1 !important;
                                       text-decoration: underline !important; text-underline-offset: 3px; }
.pag-legalpage p a:not([data-pag-lang]):hover,
.pag-legalpage a:not([data-pag-lang]):hover{ color: #ffffff !important; }



/* ══════════════════════════════════════════════════════════════
   ABOUT - running text
   Set to the same type as the Imprint / Privacy Policy pages:
   15px on 1.7 leading, the same paragraph rhythm, and the page
   title brought down to the 30px those pages use.
   ══════════════════════════════════════════════════════════════ */

/* the page title, matched to .pag-legalpage h1 */
[data-predefined-style="true"] [local-style="28686365"] h1 {
	font-size: 30px;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.pag-about {
	font-size: 15px;       /* same as .pag-legalpage p */
	max-width: 33em;       /* about 65 characters, the comfortable measure */
}

.pag-about p {
	margin: 0 0 1.9em;
	font-size: inherit;
	line-height: 1.7;
	letter-spacing: normal;
	color: rgba(255,255,255,0.85);
}
.pag-about p:last-child { margin-bottom: 0; }

/* the name / year / city block, in the same size and weight as the rest */
.pag-about .pag-about__meta.pag-about__meta {
	margin: 0 0 1.9em;
	font-size: inherit;
	line-height: 1.7;
	letter-spacing: normal;
	font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   Language switch - shared by About, Imprint and Privacy Policy.
   Cargo's own [data-predefined-style] bodycopy a rule is more specific
   than a single class, which is why the inactive language was rendering
   in the light-page black. The doubled attribute selector outweighs it
   without resorting to !important, and works wherever the switch sits.
   ══════════════════════════════════════════════════════════════ */
.pag-about__lang,
.pag-lang {
	display: flex;
	align-items: baseline;
	gap: 0.45em;
	font-size: inherit;
	line-height: 1.7;
}

/* the "/" separator stays quiet between the two */
.pag-about p.pag-about__lang { margin: 0 0 2.6em; color: rgba(255,255,255,0.30); }
.pag-legalpage p.pag-lang    { margin: 0 0 2.6em; color: rgba(255,255,255,0.30); }

/* the language you can switch TO - the one live control on an
   otherwise monochrome page, so it has to read as clickable */
a[data-pag-lang][data-pag-lang] {
	color: #e9b44c;
	text-decoration: none;
	transition: color 0.3s ease;
}
a[data-pag-lang][data-pag-lang]:hover,
a[data-pag-lang][data-pag-lang]:focus-visible { color: #f7d08a; opacity: 1; }

/* the language you are already reading - no longer an action */
a[data-pag-lang][data-pag-lang].is-on { color: rgba(255,255,255,0.85); }
.pag-legalpage a[data-pag-lang][data-pag-lang].is-on { color: rgba(255,255,255,0.95); }

/* English first until the script decides, so nothing flashes twice */
[data-pag-text="de"] { display: none; }

@media (max-width: 800px) {
	.pag-about { max-width: none; }
	.pag-about .pag-about__meta { margin-bottom: 1.5em; }
	.pag-about p.pag-about__lang { margin-bottom: 2em; }
	.pag-legalpage p.pag-lang { margin-bottom: 2em; }
}

@media (max-width: 600px) {
	[data-predefined-style="true"] [local-style="28686365"] h1 { font-size: 24px; }
}


/* ═══════════════════════════════════════════════════════════════
   END OF A PROJECT — a quiet strip, both directions
   The project finishes first: a hairline that fades out at both edges,
   a long pause, and only then two small silent previews — the work
   before on the left, the work after on the right, matched on height
   so neither one crops. They stay far smaller than the film above them.
   Markup comes from the ring script in Custom HTML.
   ═══════════════════════════════════════════════════════════════ */

.pag-next{
  position: relative;
  isolation: isolate;
  padding: clamp(84px, 11vw, 180px) 0 clamp(56px, 6vw, 96px);
}

/* the ending: present in the middle, gone at the edges */
.pag-next__rule{
  height: 1px;
  width: 100%;
  margin: 0 0 clamp(52px, 6vw, 104px);
  background: linear-gradient(90deg,
    rgba(255,255,255,0),
    rgba(255,255,255,.16) 30%,
    rgba(255,255,255,.16) 70%,
    rgba(255,255,255,0));
}

/* the strip waits until the visitor has actually arrived */
.pag-next__in{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 7vw, 140px);
  align-items: start;
  padding: 0 clamp(20px, 4vw, 70px);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);
}
.pag-next.is-in .pag-next__in{ opacity: 1; transform: none; }

.pag-next__side{
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.pag-next__side.is-prev{ align-items: flex-start; text-align: left; }
.pag-next__side.is-next{ align-items: flex-end; text-align: right; }

.pag-next__label{
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.34);
  line-height: 1;
  transition: color .4s ease;
}
.pag-next__side.is-next .pag-next__label{ color: rgba(255,255,255,.46); }
.pag-next__side:hover .pag-next__label{ color: rgba(255,255,255,.7); }

.pag-next__arrow{
  display: inline-block;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.pag-next__side.is-prev:hover .pag-next__arrow{ transform: translateX(-4px); }
.pag-next__side.is-next:hover .pag-next__arrow{ transform: translateX(4px); }

.pag-next__title{
  margin: clamp(7px, .6vw, 12px) 0 clamp(13px, 1.1vw, 20px);
  font-size: clamp(14px, 1.05vw, 21px);
  line-height: 1.25;
  color: rgba(255,255,255,.62);
  transition: color .4s ease;
}
.pag-next__side.is-next .pag-next__title{ color: rgba(255,255,255,.78); }
.pag-next__side:hover .pag-next__title{ color: rgba(255,255,255,.92); }

/* matched on height, so a film and an upright photograph can sit next
   to each other without either of them being cut to fit */
.pag-next__frame{
  display: block;
  height: clamp(104px, 11.5vw, 186px);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  transition: transform .6s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
.pag-next__side.is-next .pag-next__frame{ height: clamp(112px, 12.6vw, 204px); }
.pag-next__frame.is-portrait{ aspect-ratio: 3 / 4; }

.pag-next__frame video,
.pag-next__frame img{
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .8;
  transition: opacity .5s ease;
}
.pag-next__side:hover .pag-next__frame video,
.pag-next__side:hover .pag-next__frame img{ opacity: 1; }
.pag-next__side.is-prev:hover .pag-next__frame{ transform: translateX(-5px); }
.pag-next__side.is-next:hover .pag-next__frame{ transform: translateX(5px); }

/* Phones: no pair, a sequence — previous first and held left, next
   after it and held right, a little larger, with the gap doing the
   separating. */
@media (max-width: 700px){
  .pag-next{ padding: clamp(56px, 14vw, 90px) 0 30px; }
  .pag-next__rule{ margin-bottom: clamp(34px, 9vw, 60px); }
  .pag-next__in{
    grid-template-columns: 1fr;
    gap: clamp(38px, 11vw, 66px);
    padding: 0 16px;
  }
  .pag-next__label{ font-size: 10px; letter-spacing: .18em; }
  .pag-next__title{ font-size: 15px; margin: 8px 0 11px; }
  .pag-next__side.is-next .pag-next__title{ font-size: 16px; }

  .pag-next__frame{
    height: auto;
    width: 80vw;
    max-width: 420px;
    aspect-ratio: 16 / 9;
  }
  .pag-next__side.is-next .pag-next__frame{
    height: auto;
    width: 87vw;
    max-width: 460px;
  }
  .pag-next__frame.is-portrait{ width: 58vw; max-width: 300px; }
  .pag-next__side.is-next .pag-next__frame.is-portrait{ width: 63vw; max-width: 330px; }
}

@media (prefers-reduced-motion: reduce){
  .pag-next__in{ opacity: 1; transform: none; transition: none; }
  .pag-next__frame,
  .pag-next__arrow{ transition: none; }
  .pag-next__side:hover .pag-next__frame,
  .pag-next__side:hover .pag-next__arrow{ transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE SWITCH ON PROJECT PAGES
   Same control as on About and Imprint — the shared .pag-lang rules
   do the layout and the gold/white colours. Only the size and the
   spacing are set here: a project page inherits a very large base
   size, and the site's own <small> is .44 of it, so the switch sits
   exactly on the meta line it follows.
   ═══════════════════════════════════════════════════════════════ */

.pag-project__lang{
  font-size: .44em;
  line-height: 1.7;
  color: rgba(255,255,255,.3);
  margin: .9em 0 1.5em;
}

@media (max-width: 700px){
  .pag-project__lang{ margin: .8em 0 1.2em; }
}

/* Cargo colours links inside a project page more strongly than it does on
   About, so the switch has to claim its two colours back here. */
.pag-project__lang a[data-pag-lang],
.pag-project__lang a[data-pag-lang]:link,
.pag-project__lang a[data-pag-lang]:visited{
  color: #E9B44C !important;
  text-decoration: none !important;
  opacity: 1 !important;
}
.pag-project__lang a[data-pag-lang]:hover,
.pag-project__lang a[data-pag-lang]:focus-visible{ color: #F7D08A !important; }
.pag-project__lang a[data-pag-lang].is-on,
.pag-project__lang a[data-pag-lang].is-on:link,
.pag-project__lang a[data-pag-lang].is-on:visited{ color: rgba(255,255,255,.85) !important; }


/* ═══════════════════════════════════════════════════════════════
   FILM EMBEDS ON PROJECT PAGES
   The film starts as its own silent loop at the width of the text
   column — the same loop the homepage ring uses — with one thin ring
   as the only control. A hairline and a quiet line below give it the
   footing of a caption. The platform's player only appears after the
   click, and then it fills exactly the same frame.
   ═══════════════════════════════════════════════════════════════ */

.pag-film{
  margin: clamp(18px, 1.6vw, 30px) 0 clamp(20px, 1.8vw, 34px);
  max-width: 100%;
}

.pag-film__stage{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #101010;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.pag-film__media,
.pag-film__player{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.pag-film__media{
  object-fit: cover;
  opacity: .90;
  transition: opacity .7s ease;
}
.pag-film__stage:hover .pag-film__media{ opacity: 1; }

/* the only control: a thin ring, always present so nobody has to
   discover it — on a phone there is no hover to reveal it with */
.pag-film__cue{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pag-film__ring{
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(52px, 4.4vw, 78px);
  height: clamp(52px, 4.4vw, 78px);
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.60);
  background: rgba(0,0,0,.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .45s ease, border-color .45s ease, transform .55s cubic-bezier(.2,.7,.2,1);
}
.pag-film__stage:hover .pag-film__ring,
.pag-film__stage:focus-visible .pag-film__ring{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.9);
  transform: scale(1.05);
}
.pag-film__tri{
  width: 0; height: 0;
  /* em would be measured against the page's very large base size and
     push the triangle far off centre; this is the optical nudge only */
  margin-left: clamp(2px, .18vw, 4px);
  border-left: clamp(11px, .95vw, 17px) solid rgba(255,255,255,.92);
  border-top: clamp(7px, .6vw, 11px) solid transparent;
  border-bottom: clamp(7px, .6vw, 11px) solid transparent;
}
.pag-film__stage.is-playing{ cursor: default; }

.pag-film__rule{
  height: 1px;
  background: rgba(255,255,255,.12);
  margin: clamp(12px, 1vw, 18px) 0 0;
}

.pag-film__meta{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 2em;
  margin: clamp(10px, .9vw, 16px) 0 0;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.30);
  line-height: 1.3;
}

/* Phones: the title would wrap into three lines next to the platform,
   so the line keeps only what is useful there */
@media (max-width: 700px){
  .pag-film__meta{ font-size: 10px; letter-spacing: .12em; }
  .pag-film__title{ display: none; }
  .pag-film__ring{ width: 52px; height: 52px; }
}

@media (prefers-reduced-motion: reduce){
  .pag-film__media{ transition: none; }
  .pag-film__ring{ transition: none; }
  .pag-film__stage:hover .pag-film__ring{ transform: none; }
}

/* The platform's original embed stays in the page for Cargo's sake, but
   it is emptied and never shown; a class does this, because Cargo clears
   inline styles when it re-renders a page. */
.pag-film__origin{ display: none !important; }

.pag-film__stage:focus-visible{
  outline: 1px solid rgba(255,255,255,.55);
  outline-offset: 3px;
}


/* ═══════════════════════════════════════════════════════════════
   WORDMARK, TOP LEFT
   The name as a small permanent way home. On a wide screen it sits in
   the empty margin left of the text column and stays while the page
   scrolls; below 700px there is no margin to sit in, so it runs with
   the content, above the project title, where it cannot cover anything.
   ═══════════════════════════════════════════════════════════════ */

.pag-mark{
  position: fixed;
  /* above the page title, whatever Cargo stacks underneath */
  z-index: 2000;
  /* iOS only keeps a fixed element truly pinned once it has a compositing
     layer of its own; without this it drifts along with the page while the
     finger is still on the screen and snaps back afterwards. */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  top: clamp(18px, 2.2vw, 34px);
  left: clamp(18px, 2.4vw, 40px);
  display: inline-block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
  color: rgba(255,255,255,.48) !important;
  text-decoration: none !important;
  transition: color .4s ease;
}
.pag-mark:hover,
.pag-mark:focus-visible{ color: rgba(255,255,255,.9) !important; }

/* Narrow screens keep it fixed as well - parked in the corner, not in the
   text column, where it would drift towards the middle of the page. */
/* On a phone the page starts hard against the top edge and the project
   title lands on the same line as the corner mark. The script marks the
   pages that need room - project pages, not About or the legal ones, and
   never the homepage - and they open a band above the content. Desktop is
   untouched: there the text column is indented and nothing collides. */
@media (max-width: 700px){
  .pag-mark-room body{ padding-top: 34px; }
}

@media (max-width: 700px){
  .pag-mark{
    top: 14px;
    left: 14px;
    font-size: 10px;
    letter-spacing: .13em;
  }
}

/* A few pages sit on a white ground; there the name has to turn dark or
   it disappears. The script measures what is actually painted under it. */
.pag-mark.is-on-light{ color: rgba(0,0,0,.55) !important; }
.pag-mark.is-on-light:hover,
.pag-mark.is-on-light:focus-visible{ color: rgba(0,0,0,.85) !important; }

/* On About and the legal pages the name is already the first line of the
   page, so the way back is only an arrow there — same size logic, same
   quiet colour, with the small movement the project navigation uses. */
.pag-mark.is-arrow{
  font-size: 17px;
  letter-spacing: 0;
  line-height: 1;
  transition: color .4s ease, transform .5s cubic-bezier(.2,.7,.2,1);
}
.pag-mark.is-arrow:hover,
.pag-mark.is-arrow:focus-visible{ transform: translateX(-3px) translateZ(0); }

@media (max-width: 700px){
  /* The glyph grows a little; the tap area grows a lot. Padding opens a
     44px target around it and the matching negative margin pulls the whole
     thing back into the corner, so nothing moves visually. */
  .pag-mark.is-arrow{
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 44px;
    min-height: 44px;
    padding: 11px 15px;
    margin: -11px -15px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   ABOUT, SET LIKE THE LEGAL PAGES
   Same column width, same centring, same top and bottom air, same
   rhythm under the heading. Only the text stays a shade brighter
   than Imprint and Privacy Policy, because this one is meant to be
   read rather than looked up.
   ═══════════════════════════════════════════════════════════════ */

.pag-about{
  max-width: 620px;
  margin: 0 auto;
  padding: 10vh 0 16vh;
  font-size: 15px;
  text-align: left;
}

.pag-about h1{
  margin: 0 0 1.6em;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -.01em;
}

/* The portrait sits in one of Cargo's own galleries, which sizes itself
   and places the picture inside that box - a margin on the image only
   pushed it out of its frame and left the text sitting on its edge. The
   air belongs around the gallery instead. */
.pag-about img{ margin: 0; }

.pag-about .image-gallery{ margin-top: 1.2em; }

/* Air under the picture. The gallery itself carries Cargo's aspect-ratio
   padding and its own margin would collapse out of the heading, so the
   breathing space is set on the block that holds it. */
.pag-about .pag-about__meta{ padding-bottom: 24px; }

@media (max-width: 600px){
  .pag-about{ padding: 8vh 4vw 12vh; }
  .pag-about h1,
  .pag-legalpage h1{ font-size: 24px; }

  /* "Datenschutzerklärung" is one very long word. At a fixed size it runs
     past the column on a narrow phone and the last letter drops onto a line
     of its own. Measured against the column instead, so the title always
     stays on one line - roughly fifteen columns of width per letter. */
  .pag-legalpage h1{ font-size: min(24px, calc((92vw - 32px) / 14.6)); }
}


/* ═══════════════════════════════════════════════════════════════
   ONE BLACK
   The site ground was a very dark grey (#0D0D0D), which reads as
   grey next to true black and turns visible wherever a page ends —
   macOS shows the document behind the page when you overscroll, and
   that document was still white. Both are black now, and the two
   placeholder fills behind a loading video follow.
   ═══════════════════════════════════════════════════════════════ */

html,
body{ background-color: #000 !important; }

/* Cargo paints its own full-window layers on top of the document, and one of
   them still carried the old dark grey. They all take the same black now, so
   the ground behind the carousel is the same on every screen size. */
/* Not .page_background: that layer sits in the overlay above the backdrop and
   is transparent on purpose - the homepage showreel plays behind it. Painting
   it black would cover the video and the name on top of it. */
.background_gradient,
.backdrop_background,
[data-css-preset] body,
[data-css-preset].mobile .page{ background-color: #000 !important; }

.pag-film__stage{ background: #000; }
.pag-next__frame{ background: #060606; }


/* ═══════════════════════════════════════════════════════════════
   A HAIRLINE ROUND EVERY PROJECT
   Against a black ground a dark frame simply dissolves into it. A thin
   white line drawn just inside each card keeps each project readable as its
   own object. It is drawn over the image rather than added to the box,
   so it changes nothing about the ring geometry, and it dims together
   with the card as the ring turns away.
   ═══════════════════════════════════════════════════════════════ */

.pag-gal__item .gallery_card::after{
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255,255,255,.55);
	pointer-events: none;
	/* above the image, which Cargo positions absolutely inside the card */
	z-index: 2;
}


/* ═══════════════════════════════════════════════════════════════
   THE WAY DOWN
   The three chevrons under the name were easy to miss: white on a
   blazing sky has no ground of its own, and a mark that does not move
   is read as decoration. So each one gets a soft dark halo - a shadow,
   not a box - and they run as a wave downwards. The script pairs this
   with a single demonstration: once per visit the page lifts far enough
   to show the top of the first project and settles back.
   ═══════════════════════════════════════════════════════════════ */

.pag-cue__chev{
	display: inline-block;
	text-shadow: 0 0 22px rgba(0,0,0,.82), 0 0 8px rgba(0,0,0,.66), 0 1px 2px rgba(0,0,0,.55);
	animation: pag-cue 1.9s cubic-bezier(.4,0,.2,1) infinite;
	transition: opacity .55s ease;
	will-change: transform, opacity;
}
.pag-cue__chev.is-2{ animation-delay: .19s; }
.pag-cue__chev.is-3{ animation-delay: .38s; }

@keyframes pag-cue{
	0%   { opacity: 0;   transform: translateY(-5px); }
	22%  { opacity: 1;   transform: translateY(0); }
	62%  { opacity: .22; transform: translateY(5px); }
	100% { opacity: 0;   transform: translateY(7px); }
}

/* once the visitor is on their way the hint has done its job */
.pag-scrolled .pag-cue__chev{ opacity: 0 !important; animation: none; }

@media (prefers-reduced-motion: reduce){
	.pag-cue__chev{ animation: none; opacity: 1; }
}


/* ─────────────────────────────────────────────────────────────────
   Namenszeile - die drei Disziplinen unter dem Namen auf der Start-
   seite. Am Rechner auf die Breite der ersten Namenszeile verteilt,
   auf dem Handy als dreizeiliger Credit-Block. Breite und Schrift
   kommen aus dem Custom HTML, beide werden am Namen selbst gemessen.
   Die Groesse haengt am Fliesstext, damit sie Cargos eigener
   Schriftskalierung folgt; der Schatten ist derselbe wie bei den
   Pfeilen, damit die Zeile auf jedem Videobild lesbar bleibt.
   ───────────────────────────────────────────────────────────────── */
.pag-tag{
	display: flex;
	justify-content: space-between;
	width: var(--pag-tagw, auto);
	min-width: min-content;   /* never let the words collide on a small screen */
	gap: 1.4em;
	max-width: 92vw;
	margin: 1.95em auto 0;
	font-family: var(--pag-tagff, inherit);
	font-size: max(9px, calc(var(--pag-tagfs, 1em) * .272));
	letter-spacing: .2em;
	line-height: 1.4;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	text-shadow: 0 0 1.1em rgba(0,0,0,.72),
	             0 0 .4em rgba(0,0,0,.55),
	             0 .06em .12em rgba(0,0,0,.5);
}
/* the trailing letter-space would hold the last word short of the edge */
.pag-tag span:last-child{ margin-right: -.2em; }

@media (max-width: 700px){
	/* Same line as on the desktop, only tighter: the words have to reach
	   across a much shorter name. The size itself is fitted in the Custom
	   HTML, where the name can actually be measured. */
	.pag-tag{
		margin-top: 1.6em;
		gap: .8em;
		letter-spacing: .12em;
	}
}


/* ─────────────────────────────────────────────────────────────────
   Textfarbe der Projektseiten. Cargo speichert die Schriftfarbe pro
   Seite, nicht pro Seitenart - eine neu aufgebaute Projektseite kommt
   deshalb mit der dunklen Grundfarbe zurueck und der Text verschwindet
   im schwarzen Hintergrund. Hier haengt die Farbe an der Seitenart:
   wo die Projektnavigation steht, ist es eine Projektseite.
   ───────────────────────────────────────────────────────────────── */
.pag-projectpage bodycopy{ color: rgba(255,255,255,.92); }
.pag-projectpage bodycopy small{ color: rgba(255,255,255,.6); }

/* Ein Seitenumbruch im Projekttext, den Cargo als Trennlinie speichert,
   traegt 30px Aussenabstand nach oben und unten und reisst den Titel von
   der Sprachumschaltung weg. Hier zaehlt er wie ein Zeilenumbruch, damit
   jede Projektseite denselben Kopfabstand hat. */
.pag-projectpage .page_content > hr{
	height: 0;
	border: 0;
	margin: 0;   /* der Abstand kommt aus dem Aussenabstand der Sprachzeile */
}