/* 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: D-DIN, Icons;
	padding: 0;
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.7;
	color: rgba(0, 0, 0, 0.85);
	    text-transform: uppercase;
	font-style: normal;
	font-weight: 400;
}

[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. Visible on load, then fades out together with the side arrows at
   the end of the shared intro (see the Custom HTML script's .is-hidden toggle) or immediately on
   the visitor's first downward scroll, whichever happens first — it never fades back in either
   way. Same opacity-only transition as the side arrows below. */
.opening-gallery-chevron {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translate(-50%, -50%);
	color: #000;
	pointer-events: none;
	user-select: none;
	opacity: 1;
	transition: opacity 0.2s ease;
}

.opening-gallery-chevron.is-hidden {
	opacity: 0;
}

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

/* Opening-gallery height guardrail. Cargo sizes the opening image from the page width alone, so
   on a large window a tall image can run past the bottom of the screen. The Custom HTML script
   publishes --opening-image-max-height (viewport height minus image top minus the room needed for
   the tick counter and chevron). Whichever of Cargo's own size and this limit is smaller wins;
   object-fit: contain scales the photo inside its box at its native ratio — never cropped, never
   stretched. Opening slideshow only; the lower thumbnail grid is a different gallery mode. */
.image-gallery[image-gallery="slideshow"] .gallery_card_image img,
.image-gallery[image-gallery="slideshow"] .gallery_card_image video {
	max-height: var(--opening-image-max-height, none) !important;
	object-fit: contain !important;
	object-position: center center !important;
}

/* 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;
}

/* Enlarged image viewer opened from the lower project gallery — more of the viewport for the
   photograph. Cargo sizes the image to fit inside this element's padding, so reducing the padding
   enlarges the image at its native aspect ratio (no cropping, no stretching).
   Was: padding 6rem on all sides. Now: top/bottom halved (3rem), sides reduced to 4.5rem.
   The px floors keep the viewer's own arrows and close button clear of the image.
   The lower-gallery-viewer class on <html> is set by the small script in Custom HTML, and only
   while the viewer was opened from a lower project-gallery thumbnail. */
html.lower-gallery-viewer .pswp.quick-view {
	padding: max(3rem, 24px) max(4.5rem, 56px);
}

/* Enlarged image viewer — Architecture Overview page ONLY, per direct instruction. Scoped by
   data-page-id (set by Cargo on <body>, confirmed live to be 37544457 for this page) rather than
   by gallery mode, because the Works index also uses the same "columns" gallery mode and must not
   be affected. .pswp.quick-view is itself a direct child of <body> (PhotoSwipe is appended at the
   body level, not nested inside the page content), so this selector reaches it.

   Desktop test: padding-top only, reduced from Cargo's native 6rem default (~93px at 1920x1080)
   to a fixed 54px (64px tried first, tightened further per direct instruction), so the photograph
   grows upward. padding-bottom/left/right are deliberately left as plain longhand omissions — they
   keep resolving from Cargo's native 6rem default, unchanged, preserving the existing lower
   breathing room and horizontal padding exactly. This is completely separate from the
   html.lower-gallery-viewer rule above (different page, different selector, never both match at
   once) — that project-page rule is untouched.

   Mobile is intentionally not addressed by this rule (no media query/.mobile guard) per direct
   instruction for this test. */
body[data-page-id="37544457"] .pswp.quick-view {
	padding-top: 54px;
}

/* Same scope, same instruction: caption 1.3rem -> 1.235rem (5% smaller). Position, margin, color,
   and font-family are untouched — only the base .quick-view-caption font-size rule elsewhere in
   this file still applies for every other page; this overrides it for Architecture Overview only. */
body[data-page-id="37544457"] .quick-view-caption {
	font-size: 1.235rem;
}



/* Homepage footer — small caption (bottom left) and copyright (bottom right), fixed over the homepage photograph.
   The elements are created by the "HOMEPAGE FOOTER" script in the Custom HTML and are visible only while Cargo's
   body.homepage class is present. Sizing follows the rebuilt site's footer: 10.5px at small widths growing to
   12.5px (clamp), line-height 1.3, regular Sabon, white. Left/right inset matches the site header's own side padding
   (2.8rem; 1rem on mobile). Sits above the grain overlay (9999) and below the header (99999). */
.home-footer {
	display: none;
}

body.homepage .home-footer {
	display: block;
}

.home-footer-caption,
.home-footer-credit {
	position: fixed;
	bottom: 1.5rem;
	z-index: 99998;
	margin: 0;
	font-family: Sabon, Icons;
	font-size: clamp(10.5px, calc(0.4vw + 5px), 12.5px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	white-space: nowrap;
	/* Never fake a style: the italic below must be Sabon's own italic face. */
	font-synthesis: none;
	pointer-events: none;
}

/* Bottom left — 100% white. */
.home-footer-caption {
	left: 2.8rem;
	color: rgba(255, 255, 255, 1);
}

/* The attribution after the "|": Sabon italic. */
.home-footer-caption em {
	font-style: italic;
	font-weight: 400;
}

/* Bottom right — white at 80% opacity. */
.home-footer-credit {
	right: 2.8rem;
	color: rgba(255, 255, 255, 1);
	opacity: 0.8;
}

/* Mobile: header-matching inset; the caption may wrap instead of running under the copyright line. */
.mobile .home-footer-caption {
	left: 1rem;
	white-space: normal;
	max-width: calc(100% - 2rem - 11em);
}

.mobile .home-footer-credit {
	right: 1rem;
}

/* Information-page footer — "Copyright Notice" link (bottom left) and © line (bottom right), fixed over the page.
   Separate from the homepage footer above. The elements are created by the "INFORMATION-PAGE FOOTER" script in the Custom
   HTML and are visible ONLY on the Information page, body[data-page-id="38611649"]; hidden everywhere else, and
   explicitly hidden on the homepage so the two footers can never appear together. Same type and insets as the
   homepage footer (Sabon, 10.5px -> 12.5px clamp, line-height 1.3, 2.8rem / 1rem on mobile), no background, no animation. */
.info-footer {
	display: none;
}

body[data-page-id="38611649"] .info-footer {
	display: block;
}

body.homepage .info-footer {
	display: none;
}

.info-footer-link,
.info-footer-credit {
	position: fixed;
	bottom: 1.5rem;
	z-index: 99998;
	margin: 0;
	font-family: Sabon, Icons;
	font-size: clamp(10.5px, calc(0.4vw + 5px), 12.5px);
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	letter-spacing: normal;
	text-align: left;
	white-space: nowrap;
	font-synthesis: none;
}

/* Bottom left — 100% white link; the same 80% white hover as the site's other white links. */
.info-footer-link {
	left: 2.8rem;
	color: rgba(255, 255, 255, 1);
	text-decoration: none;
	border-bottom: 0;
	padding: 0;
	display: inline-block;
}

.info-footer-link:hover {
	color: rgba(255, 255, 255, 0.8);
}

/* Bottom right — 62% white, as on the rebuilt site's Information page. Not clickable. */
.info-footer-credit {
	right: 2.8rem;
	color: rgba(255, 255, 255, 0.62);
	pointer-events: none;
}

/* Mobile: header-matching inset. */
.mobile .info-footer-link {
	left: 1rem;
}

.mobile .info-footer-credit {
	right: 1rem;
}

/* Copyright page close (×) — upper right. Created by the "COPYRIGHT PAGE" script in the Custom HTML and shown ONLY on the
   Copyright page, body[data-page-id="37192091"]. Same thin × glyph as the rebuilt site's close control, drawn in the page's
   own text colour (the same rgba(0,0,0,1) the page's bodycopy uses), lined up with the header's right padding (2.8rem;
   1rem on mobile). Plain text link behaviour: no background, no animation. */
.copyright-close {
	display: none;
}

body[data-page-id="37192091"] .copyright-close {
	display: flex;
}

.copyright-close {
	position: fixed;
	top: 0.8rem;
	/* 36px hit area around a 19px glyph: pull the glyph (not the box) onto the header's right inset. */
	right: calc(2.8rem - 8.5px);
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	z-index: 99998;
	color: rgba(0, 0, 0, 1);
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	text-decoration: none;
}

.copyright-close svg {
	display: block;
}

.mobile .copyright-close {
	right: calc(1rem - 8.5px);
}

/* Project / Architecture Overview ending — see the "PROJECT / ARCHITECTURE OVERVIEW ENDING" script in the Custom HTML. Desktop only
   (Cargo's body.mobile class is excluded in every rule, and the script also removes its classes there). The script tags the page's
   last horizontal rule, the trailing spacers after the last content block, and the direct-child Index link, and publishes
   --ending-min-height: the page height at which, at maximum scroll, the last rule sits 1cm below the header's text.
   - The page gets that minimum height (Cargo's own bottom padding is dropped, so the minimum height alone sets the ending).
   - The trailing <br>s / empty rows (only the ones after the last content block, tagged by the script) collapse.
   - Index anchors to the bottom of the page, centred, with the rebuilt site's visible bottom clearance: 24px at 1440px wide growing
     to 26px at 1920px (the --bottom-nav-margin-bottom fit), measured to the bottom of the glyphs; the 0.505em term is the space between
     the glyphs' bottom and the link's own box (line-box leading under the baseline plus the link's padding-bottom), measured. */
body:not(.mobile) .page.ending-page {
	position: relative;
	min-height: var(--ending-min-height, 0px) !important;
	align-items: flex-start !important; /* Cargo's .page centres its content vertically on project pages; without this the extra min-height is split above and below and pushes the opening gallery down */
}

body:not(.mobile) .page.ending-page bodycopy {
	padding-bottom: 0 !important;
}

body:not(.mobile) .ending-page .ending-spacer {
	display: none !important;
}

body:not(.mobile) .ending-page .ending-index {
	position: absolute;
	left: 50%;
	bottom: calc(clamp(24px, 0.4167vw + 18px, 26px) - 0.505em);
	transform: translateX(-50%);
	white-space: nowrap;
}

/* OPENING GALLERY — TRUE VIEWPORT CENTERING. Desktop only.
   The Custom HTML script "OPENING GALLERY — TRUE VIEWPORT CENTERING" publishes --opening-center-shift on the opening gallery and
   marks it with data-opening-centered. The shift is applied ONLY as a transform on the gallery's own .slick-list (the image stage)
   and its two invisible prev/next click zones, so:
   - the gallery element itself, the authored <br> spacing above it and everything after it do not move (no layout is changed);
   - the existing height cap, which measures the gallery element's top, keeps seeing the authored top and so cannot feed back
     into the image size. */
body:not(.mobile) .image-gallery[data-opening-centered] > .slick-list,
body:not(.mobile) .image-gallery[data-opening-centered] > .image-gallery-navigation {
	transform: translate3d(0, var(--opening-center-shift, 0px), 0);
}