/* Content */
body {
    background-color: #fff;
    color: #e2e2e2;
}

body.homepage {
    padding-top: 0px !important;
    margin-top: 0px !important;
}

a:active {
	opacity: 0.7;
}

.page a.active {
	opacity: 1;
    border-bottom: 0.02em solid rgba(149, 149, 152, 1);
}

i,
em {
	font-style: italic;
}

b,
strong {
	font-weight: bolder;
}

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

sub {
	top: 0.3em;
}

sup {
	top: -0.4em;
}

s {
	text-decoration: line-through;
}

img {
	border: 0;
	padding: 0;
}

ul,
ol {
	margin: 0;
	padding: 0 0 0 1em;
}

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

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

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

.gallery_card_image {
	z-index: 99;
}

.gallery_image_caption {
    margin-top: 12px;
    margin-bottom: 1px;
    font-size: 12px;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
    font-family: Sabon, Icons;
    font-style: normal;
    line-height: 1;
    opacity: 1;
    z-index: 999;
    
    text-align:center;
}

/* Overview caption hover */
[data-page-id="4732993"] .gallery_image_caption,
[data-page-id="681164"] .gallery_image_caption {
	opacity: 0;
}

[data-page-id="4732993"] .gallery_card:hover .gallery_image_caption,
[data-page-id="681164"] .gallery_card:hover .gallery_image_caption {
	opacity: 1;
}

.mobile[data-page-id="4732993"] .gallery_image_caption, 
.mobile[data-page-id="681164"] .gallery_image_caption {
	display: none;
}


/**
 * Loading Animation
 */

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

/**
 * Editor styles
 */

[data-predefined-style="true"] bodycopy {
	font-size: 1.1rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 1);
	font-family: Sabon, Icons;
	font-style: normal;
	line-height: 1.4;
}

[data-predefined-style="true"] bodycopy a {
	color: rgb(0, 0, 0);
	padding-bottom: 0.1em;
	border-bottom: 0.0em solid rgba(124, 123, 123, 0.2);
	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: "Neue Haas Grotesk", Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.7;
	color: rgba(0, 0, 0, 0.85);
	    text-transform: uppercase;
}

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

[data-predefined-style="true"] h2 {
	font-family: Sabon, Icons;
	font-style: normal;
	font-weight: 400;
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.85);
	font-size: 2.1rem;
	line-height: 1.5;
	}

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

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

[data-predefined-style="true"] small {
	display: inline-block;
	font-size: 1rem;
	line-height: 1.5;
	font-family: Sabon, Icons;
	font-style: normal;
	font-weight: 400;
	color: rgb(0, 0, 0);
}

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

/**
 * Breakpoints
 */


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

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

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

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

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

[data-css-preset] .content_padding {
	padding-top: 2.6rem /*!main_margin*/;
	padding-bottom: 2.6rem /*!main_margin*/;
	padding-left: 2.6rem /*!main_margin*/;
	padding-right: 2.6rem /*!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: 90%/*!thumbnails_width*/;
}

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

[data-css-preset] [thumbnails-gutter] {
    margin: -5rem/*!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: 10px;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.85);
    font-family: Spectral, Icons;
    font-style: normal;
    line-height: 1;
    text-align: left;
}

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

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

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

/**
 * Thumbnail Hover
 */

/*.thumbnails .thumbnail > a {
	position: relative;
}

.thumbnails .thumbnail .title {
	background: rgba(0, 0, 0, .75);
	padding: 0.5rem 1.2rem 0.7rem 1.2rem;
	margin: 0rem;
	color: rgba(255, 255, 255, 1);
	align-content: center;
	display: flex;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 9;

	width: 100%;
	height: 100%;

	opacity: 0;
	transition: opacity .25s ease-out;
}

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

.thumbnails .thumbnail .title:hover {
    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: 15px;
    line-height: 1;
    background: rgba(33, 32, 46, 0);
    position: fixed;
	top: 3rem /*!site_menu_button*/;
    
    background: #fff;
    
    z-index: 999;
	right: 3rem /*!site_menu_button*/;
}

body.mobile #site_menu_button {
	margin: 0px;
    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: 36px;
    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-size: 2rem;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.85);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-style: normal;
    padding: 0;
    line-height: 1.2;
}

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


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

/*
 * Shop Product Widget
 */

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

.shop_product .price {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 2rem;
	line-height: 1;
	color: rgba(0, 0, 0, 0.85);
    display: block;
    margin-bottom: 1rem;
}

.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-arrows.svg) no-repeat right;
    margin-bottom: 1rem;
    line-height: 1.2;
    padding: .7rem 1rem;
}

.shop_product .button {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif, "Sans Serif", Icons;
	font-size: 1.4rem;
    background: rgba(0, 0, 0, .75);
    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: 6rem /*!quick_view_padding*/;
    padding-bottom: 6rem /*!quick_view_padding*/;
    padding-left: 6rem /*!quick_view_padding*/;
    padding-right: 6rem /*!quick_view_padding*/;
    height: 100% /*!quick_view_height*/;
    width: 100% /*!quick_view_width*/;
}

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


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

.quick-view-caption {
	font-family: Sabon, Icons;
    transition: 100ms opacity ease-in-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 2rem 0;
    text-align: center;
    font-size: 1.3rem;
}

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


/**
 * 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: #000;
    stroke-width: 1.5px;
}

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

.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: #000;
    stroke-width: 1.5px;
}

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

/** 
 * 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: 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 {
   /* 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: 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: 1px dashed rgba(0, 0, 0, 0.2);
}

.feed .content_container .page_container:last-child .page {
	border-bottom: 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, "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;
}

/* Custom */

body.homepage [local-style="309049"] a,
body.homepage [local-style="309049"] small,
body.homepage [local-style="309049"] small a {
	color: rgba(255,255,255,1);
}

body.homepage #site_menu {
    display: none;
}

/* Lightbox changes */

/*.quick-view-navigation .pswp__group .pswp__button svg .shape-outline {
    opacity: 0!important;
}

.quick-view-navigation .pswp__group .pswp__button svg .shape-shape {
    fill: rgba(150,150,150,.5)!important;
}*/

/*body .quick-view-navigation .pswp__group .pswp__button svg {
    width: 18px;
    height: 18px;
}

body .pswp__button {
    width: 24px;
    height: 24px;
}*/

/* lightbox button clickable */
.quick-view-navigation .pswp__group .pswp__button-next,
.quick-view-navigation .pswp__group .pswp__button-prev {
	width: 40%!important;
}

/* experimental zoom margin */
/*.pswp__scroll-wrap {
	transform:scale(.80);
}*/

/*.pswp img {
	padding: 3rem;
}*/

/*.pswp__img {
    transform: scale(0.95);
}*/

/* Auto-hiding nav */

.header {
    background: transparent;
    height: 3.7rem;
    position: fixed;
    top: 0;
    left: 0;
    /*transition: top 0.2s ease-in-out;*/
    width: 100%;
    z-index: 99999;
    padding: 0 2.8rem;
    
    opacity: 1;
    transition: opacity 0.2s ease-in-out;
}

.mobile .header {
    height: 2rem;
	padding: 0 1rem;
}

.mobile .architecture-link,
.mobile .diary-link,
.mobile .series-link,
.mobile .journal-link,
.mobile .info-link {
    display: none;
}

.mobile-header {
	display: none;
    
    padding: 16px 0 0 1rem;
    font-family: Sabon, Icons;
    font-size: 24px;
    
    top: 0;
    left: 0;

    height: 2rem;
}

.header .menu-link {
    display: none;
}

.mobile .menu-link {
    display: inline-block;
}

.nav-up {
    /*top: -3.7rem;*/
    opacity: 1;
}

.header a {
    display: inline-block;
	padding: .8rem 0rem 0rem;
    text-decoration: none ;
}

.logo {
    font-size: 1.6rem;
}

.architecture-link,
.diary-link,
.series-link,
.journal-link,
.info-link {
	
}


/* Auto-hide lightbox controls */
/*body .pswp__ui--idle {
	opacity: 0;
}*/

/* Fix for sub navs being under page content */
.pinned_top {
	z-index: 999;
}


/* Hover images on Journal */
.hover-title {
    display: inline;
    pointer-events: auto;
    cursor: pointer;
}

.hover-image {
    visibility: hidden;
}

body:not(.mobile) .hover-title:hover + .hover-image {
    visibility: visible;
    pointer-events: none;
}

.hover-image {
    display: flex;
    position: fixed;
    top: 50%;
    left: 62%;
    transform: translate(-50%, -50%);
    z-index: -1;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;

/* Change width and height to scale images */
    width:50vw;
    height: 80vh;
}

.hover-image img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-bottom: 0;
}


/* Backdrop arrows hidden, prev-next spaces */
.slick-arrow.slick-next,
.slick-arrow.slick-prev {
	width: 50%;
}

.slick-arrow.slick-next svg,
.slick-arrow.slick-prev svg {
	visibility: hidden;
}


.thumbnails .thumbnail > a {
    position: relative;
}
.thumbnails .thumbnail img {
  transition: opacity 0.3s ease;
}

.thumbnails .thumbnail:hover img {
  opacity: 0.45; /* or use 0.6 if you want more fade */
}

/* Lower project gallery — uniform 5-column thumbnail grid, matching the rebuilt site.
   Scoped to Cargo's own "Justify" gallery mode ([image-gallery="justify"]), which is used ONLY by
   the lower gallery on individual project pages. Architecture Overview and the Works index use
   the "columns" mode, and opening galleries use "slideshow", so none of them can ever match. */
.image-gallery[image-gallery="justify"] {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr) !important;
	gap: 48px !important;
	padding: 0 !important;
}

/* Cargo sets each card's width as an inline per-image percentage for its own justified-row
   layout — override it so the grid's own equal columns are what size each cell instead. */
.image-gallery[image-gallery="justify"] .gallery_card {
	width: auto !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Cargo sets padding-bottom here as an inline per-image native-ratio percentage (the responsive
   aspect-ratio-box technique). Forcing it to 100% makes every cell a perfect square — identical
   territory for every photo regardless of its own orientation. */
.image-gallery[image-gallery="justify"] .gallery_card_image {
	padding-bottom: 100% !important;
	height: 0 !important;
	position: relative;
}

/* The image itself keeps its full native ratio and is centered/letterboxed inside the square
   cell — object-fit: contain guarantees no cropping and no stretching by definition. */
.image-gallery[image-gallery="justify"] .gallery_card_image img {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* Cargo's own existing "mobile" body class (confirmed present at narrow widths) — a simple,
   non-elaborate fallback rather than a new breakpoint system, matching the same 2-column
   fallback already used on the rebuilt site. */
body.mobile .image-gallery[image-gallery="justify"] {
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
}

/* Opening-gallery scroll chevron — independent of any pre-existing Cargo glyph, purely visual,
   does not affect layout flow. */
.opening-gallery-chevron {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	color: #000;
	pointer-events: none;
	user-select: none;
}

.opening-gallery-chevron svg {
	display: block;
}

/* Opening-gallery progress ticks — informational only, never interactive. Scales with the
   viewport: 8px/16px ticks at ≥2560px wide (the 32-inch reference), ~6px/12px on a 15-inch
   MacBook, down to 5px/10px on small screens. The active tick is always exactly 2× the
   inactive height. */
.opening-gallery-progress {
	--tick-height: clamp(5px, calc(0.18vw + 3.4px), 8px);
	--tick-gap: calc(var(--tick-height) * 0.75);
	--tick-width: 1px;
	--tick-color-inactive: #999;
	--tick-offset: clamp(16px, 1.1vw, 28px);
	position: absolute;
	left: 0;
	right: 0;
	width: max-content;
	margin: var(--tick-offset) auto 0;
	display: flex;
	align-items: flex-end;
	gap: var(--tick-gap);
	pointer-events: none !important;
}

@supports (height: round(nearest, 1px, 1px)) {
	.opening-gallery-progress {
		--tick-height: round(nearest, clamp(5px, calc(0.18vw + 3.4px), 8px), 1px);
		--tick-gap: round(nearest, calc(var(--tick-height) * 0.75), 1px);
	}
}

@media (min-resolution: 2dppx) and (max-width: 1919px), (-webkit-min-device-pixel-ratio: 2) and (max-width: 1919px) {
	.opening-gallery-progress {
		--tick-width: 0.5px;
	}
}

.opening-gallery-tick {
	width: var(--tick-width);
	height: var(--tick-height);
	background: var(--tick-color-inactive);
	pointer-events: none !important;
}

.opening-gallery-tick.opening-gallery-tick--active {
	height: calc(var(--tick-height) * 2);
	background: #000;
}


/* Opening-gallery hover/auto-hide navigation arrows — minimal geometric style matching the
   Astro site. Purely additive: does not replace, restyle, or hide Cargo's own native slideshow
   arrows, which are left completely alone. */
.opening-gallery-arrow {
	position: absolute;
	top: 0;
	left: 0;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	color: #000;
	opacity: 0;
	pointer-events: none !important;
	transition: opacity 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.opening-gallery-arrow.is-visible {
	opacity: 1;
	pointer-events: auto !important;
}

.opening-gallery-arrow svg {
	display: block;
}

.opening-gallery-arrow--prev svg {
	transform: rotate(90deg);
}

.opening-gallery-arrow--next svg {
	transform: rotate(-90deg);
}

.opening-gallery-arrow:focus {
	outline: none;
}

.opening-gallery-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
}