/* Layout engine: reproduces how Cargo lays out pages, columns, galleries and media.
   Site-specific styling (fonts, colours, text styles) lives in site.css. */

* { box-sizing: border-box; }
:focus { outline: 0; }
:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 2px; }

html {
	--mobile-scale: 1;
	--mobile-padding-offset: 1;
	font-size: var(--base-size, 12.96px);
	position: relative;
	touch-action: manipulation;
	scrollbar-color: rgba(255, 255, 255, 0.25) #1e1e1e;
}
html.mobile { font-size: calc(var(--base-size) * var(--mobile-scale)); }

html, body {
	min-height: var(--viewport-height, 100vh);
	margin: 0;
	padding: 0;
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: none;
	display: flex;
	flex-direction: column;
	width: 100%;
	position: relative;
}
body.no-scroll { overflow: hidden; }

.content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 100%;
	position: relative;
	flex-grow: 1;
}
.pages { width: 100%; flex: 1 0 auto; }
.anchor { position: relative; top: 0; height: 0; }

/* ---------------------------------------------------------------- pages */

.page {
	position: relative;
	isolation: isolate;
	display: flex;
	justify-content: center;
	flex-wrap: nowrap;
	flex-direction: row;
	max-width: 100%;
	width: 100%;
	flex: 0;
}
.mobile .page { flex-wrap: wrap; }

.page.pinned-top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	max-height: var(--viewport-height, 100vh);
	pointer-events: none;
}
.page.pinned-top .page-layout { pointer-events: none; max-height: var(--viewport-height, 100vh); }
/* The menu pins overlap each other, so only their links take clicks. */
.page.pinned-top bodycopy { pointer-events: none; }
.page.pinned-top bodycopy a { pointer-events: auto; }

.page-layout {
	flex-grow: 1;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	width: 0%;
}

.page-content {
	display: flex;
	flex-direction: row;
	height: 100%;
	align-items: flex-start;
	width: 100%;
	position: relative;
}

bodycopy {
	display: block;
	word-wrap: break-word;
	position: relative;
	max-width: 100%;
	width: 100%;
}

h1, h2, h3, h4, h5, h6 { contain: layout; }

/* ---------------------------------------------------------------- backdrops */

.backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.backdrop-contents {
	position: sticky;
	top: 0;
	width: 100%;
	height: 100%;
	max-height: 100vh;
	overflow: hidden;
}
.video-backdrop {
	background-color: #000;
	background-size: cover;
	background-position: center;
	container-type: size;
}
/* The frame has the film's own aspect ratio (--ratio) and covers the backdrop. The player
   inside is made taller than the frame so YouTube's letterbox bars and UI fall outside it. */
.video-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(100cqw, 100cqh * var(--ratio));
	aspect-ratio: var(--ratio);
	transform: translate(-50%, -50%);
	overflow: hidden;
	container-type: size;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
}
.video-backdrop.loaded .video-frame { opacity: 1; }
.video-frame iframe {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	height: max(100cqh + 400px, 100cqw * 9 / 16);
	transform: translateY(-50%);
	border: 0;
	pointer-events: none;
}

/* ---------------------------------------------------------------- columns */

column-set {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: stretch;
	justify-content: flex-start;
	width: 100%;
	position: relative;
	clear: both;
	contain: layout;
}
column-unit {
	display: block;
	position: relative;
	word-wrap: break-word;
	max-width: 100%;
	flex: 0 0 auto;
	width: calc(var(--span) / 12 * (100% + var(--gutter)) - var(--gutter));
}
column-unit:not(:last-child) { margin-right: var(--gutter); }
column-unit:last-child { flex-grow: 1; }

.mobile column-set { flex-direction: column; }
.mobile column-unit { width: 100%; margin-right: 0; }
.mobile column-unit:empty { display: none; }
.mobile column-unit:not(:last-child) { margin-bottom: calc(var(--gutter) * var(--mobile-padding-offset)); }

/* ---------------------------------------------------------------- galleries */

/* --gutter / --mobile-gutter come from each gallery's inline style; --gap is the one in use. */
gallery-grid,
gallery-columnized {
	--gap: var(--gutter);
	display: grid;
	grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
	gap: var(--gap);
	width: 100%;
	position: relative;
}
gallery-grid { align-items: start; }
.mobile gallery-grid,
.mobile gallery-columnized { --gap: calc(var(--mobile-gutter) * var(--mobile-padding-offset)); }

/* Space between consecutive blocks equals the gutter of the second block. */
:is(column-set, gallery-grid, gallery-columnized, media-item) + column-set {
	margin-top: var(--gutter);
}
:is(column-set, gallery-grid, gallery-columnized, media-item) + :is(gallery-grid, gallery-columnized) {
	margin-top: var(--gap);
}
.mobile :is(column-set, gallery-grid, gallery-columnized, media-item) + column-set {
	margin-top: calc(var(--gutter) * var(--mobile-padding-offset));
}

/* ---------------------------------------------------------------- media */

media-item {
	display: inline-flex;
	flex-direction: column;
	vertical-align: bottom;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
}
gallery-grid > media-item,
gallery-columnized > media-item { display: flex; }
media-item > a { display: block; width: 100%; }
media-item img {
	display: block;
	width: 100%;
	height: auto;
}
media-item.zoomable img { cursor: zoom-in; }
media-item .embed { width: 100%; position: relative; }
media-item .embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------- icons */

text-icon {
	aspect-ratio: 1;
	height: 1.2em;
	width: auto;
	contain: layout;
	margin-top: -1em;
	margin-bottom: -.25em;
	display: inline-block;
	vertical-align: baseline;
	position: relative;
}
text-icon svg {
	display: block;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	fill: currentColor;
}

/* ---------------------------------------------------------------- cursor follower */

#follower {
	width: 40px;
	height: 40px;
	position: absolute;
	margin: -18px 0 0 -18px;
	pointer-events: none;
	z-index: 9999;
}
#follower span {
	width: 100%;
	height: 100%;
	display: block;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	filter: blur(4px);
	backdrop-filter: blur(4px);
	mix-blend-mode: lighten;
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
	opacity: 0.8;
}
@media (hover: none), (pointer: coarse) {
	#follower { display: none; }
}

/* ---------------------------------------------------------------- image viewer */

.quick-view {
	position: fixed;
	inset: 0;
	z-index: 10000;
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	opacity: 0;
	transition: opacity 0.2s ease;
}
.quick-view.open { opacity: 1; }
.mobile .quick-view { padding: 10px; }
.quick-view img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	cursor: zoom-out;
	user-select: none;
}
.quick-view button {
	position: absolute;
	width: 30px;
	height: 30px;
	border: 0;
	border-radius: 50%;
	background: rgba(168, 168, 168, 0.6);
	color: rgba(0, 0, 0, 0.9);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.quick-view button:active { opacity: 0.7; }
.quick-view button svg { width: 16px; height: 16px; }
.quick-view .qv-close { top: 20px; right: 20px; }
.quick-view .qv-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.quick-view .qv-next { right: 20px; top: 50%; transform: translateY(-50%); }