/* ==========================================================================
   Silverspell — base layout
   Rebuilt from the Cargo site. Font sizes are in rem; the root font size
   scales with the window (see the inline script in each page's <head>).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
	font-size: 69.12%; /* overwritten on load by the scaling script */
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	min-height: 100vh;
	background-color: rgb(246, 249, 251);
	color: #000;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
iframe { border: 0; }
bodycopy { display: block; }
header-font { display: inline; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: normal; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Page scaffolding --------------------------------------------------- */

.main_container { min-height: 100vh; width: 100%; overflow: hidden; position: relative; }
.content_container { width: 100%; position: relative; }
.page_container { position: relative; width: 100%; }
.container {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	max-width: 100%;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
	position: relative;
	z-index: 2;
}
.container_width { width: 90%; }
.mobile .container_width { width: 100%; }
.content { flex: 1 0 auto; max-width: 100%; }
.content_padding { padding: 3rem; }
.mobile .content_padding { padding-left: 1rem !important; padding-right: 1rem !important; }
.mobile .pinned_top [local-style="30073959"] .content_padding { padding-top: 0.6rem !important; padding-bottom: 0 !important; }
.mobile .pinned_top [local-style="30073959"] .page_content { height: 7.1rem; overflow: hidden; }
.mobile .pinned_top [local-style="30073959"] img { width: 15% !important; }
.page { overflow-wrap: break-word; }
.page_content::after { content: ""; display: table; clear: both; }

/* Pinned header/footer */
.pinned { position: relative; width: 100%; z-index: 4; }
.mobile .exclude_mobile,
html:not(.mobile) .exclude_desktop { display: none !important; }

/* --- Column grid (Cargo "grid-row" / "grid-col") ------------------------ */

[grid-row] { display: flex; flex-wrap: wrap; align-items: flex-start; }
[grid-col="x12"] { width: 100%; }
[grid-col="x11"] { width: 50%; }
[grid-col="x10"] { width: 33.33%; }
[grid-col="x9"]  { width: 25%; }
[grid-col="x8"]  { width: 20%; }
[grid-col="1"]  { width: 8.3333%; }
[grid-col="2"]  { width: 16.6667%; }
[grid-col="3"]  { width: 25%; }
[grid-col="4"]  { width: 33.3333%; }
[grid-col="5"]  { width: 41.6667%; }
[grid-col="6"]  { width: 50%; }
[grid-col="7"]  { width: 58.3333%; }
[grid-col="8"]  { width: 66.6667%; }
[grid-col="9"]  { width: 75%; }
[grid-col="10"] { width: 83.3333%; }
[grid-col="11"] { width: 91.6667%; }
[grid-col="12"] { width: 100%; }
.mobile [grid-responsive] [grid-col] { width: 100%; flex: 0 0 auto; }

[grid-pad="0"]    { padding: 0; }
[grid-pad="0.5"]  { padding: 0.25rem; }
[grid-pad="1"]    { padding: 0.5rem; }
[grid-pad="1.25"] { padding: 0.625rem; }
[grid-pad="1.5"]  { padding: 0.75rem; }
[grid-pad="1.75"] { padding: 0.875rem; }
[grid-pad="2"]    { padding: 1rem; }
[grid-pad="2.5"]  { padding: 1.25rem; }
[grid-pad="3"]    { padding: 1.5rem; }
[grid-pad="4"]    { padding: 2rem; }
[grid-pad="5"]    { padding: 2.5rem; }
[grid-pad="6"]    { padding: 3rem; }

[grid-gutter="0"]   { margin: 0; }
[grid-gutter="1"]   { margin: -0.5rem; }
[grid-gutter="2.5"] { margin: -1.25rem; }
[grid-gutter="3"]   { margin: -1.5rem; }
[grid-gutter="3.5"] { margin: -1.75rem; }
[grid-gutter="4"]   { margin: -2rem; }
[grid-gutter="5"]   { margin: -2.5rem; }
[grid-gutter="6"]   { margin: -3rem; }

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

.gallery { margin: 0 0 1.4rem; }
.gallery img { display: block; width: 100%; height: auto; margin: 0 !important; }
.gallery a { display: block; border: 0 !important; padding: 0 !important; }

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr));
	gap: var(--gap, 0.5rem);
	align-items: start;
}

.gallery-columns { display: flex; gap: var(--gap, 1rem); align-items: flex-start; }
.gallery-columns > .col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap, 1rem); }

.gallery-justify { display: flex; flex-direction: column; gap: var(--gap, 0.5rem); }
.gallery-justify > .row { display: flex; gap: var(--gap, 0.5rem); }
.gallery-justify > .row > * { flex: var(--ar) 1 0; min-width: 0; }

.mobile .gallery { --gap: var(--mgap, 0.25rem) !important; }
.mobile .gallery-grid { grid-template-columns: repeat(var(--mcols, 2), minmax(0, 1fr)); }


/* --- Responsive video embeds ------------------------------------------- */

.video-embed { position: relative; padding-top: 56.25%; }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --- Backdrops ---------------------------------------------------------- */

.backdrop {
	position: absolute;
	top: 0; left: 0;
	width: 100%;
	height: 100%;
	max-height: 100vh;
	z-index: 1;
	pointer-events: none;
	overflow: hidden;
}
.backdrop-gradient { position: fixed; max-height: none; height: 100vh; z-index: 0; }
.backdrop-wallpaper img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	max-width: none;
	object-fit: cover;
}
.backdrop-wallpaper::after {
	content: "";
	position: absolute; inset: 0;
	background: var(--overlay);
}

/* --- Previous / next project arrows ------------------------------------ */

.project-nav {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 3.2rem;
	pointer-events: none;
	z-index: 5;
}
.project-nav a {
	pointer-events: auto;
	color: rgba(0, 0, 0, 0.4);
	display: block;
	padding: 1rem;
	margin: -1rem;
}
.project-nav a:hover { color: #0ca900; }
.project-nav svg { width: 2rem; height: 2rem; display: block; }
.mobile .project-nav,
.project-nav[hidden],
.site-menu [hidden] { display: none; }

/* --- Phone/tablet menu (matches Cargo's site menu) --------------------- */

.menu-button {
	display: none;
	position: fixed;
	top: 0.5rem;
	right: 0.6rem;
	z-index: 9;
	padding: 12px;
	margin: -6px;
	background: none;
	border: 0;
	color: rgba(0, 0, 0, 0.5);
	cursor: pointer;
	line-height: 1;
}
.menu-button svg { width: 24px; height: 24px; display: block; }
.menu-button:active { opacity: 0.7; }
.mobile .menu-button { display: block; }

.site-menu {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 30;
	flex-direction: column;
	justify-content: flex-start;
	padding: 20px;
	background: rgba(20, 20, 20, 0.95);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 0;
	text-align: left;
	overflow: hidden auto;
}
.site-menu.open { display: flex; }
html.menu-open, html.menu-open body { overflow: hidden; }
.site-menu div { display: block; }
.site-menu a,
.site-menu .set-title {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.75);
	text-decoration: none;
}
.site-menu .page-link a { text-transform: uppercase; }
.site-menu .set-title { font-weight: 700; }
.site-menu a:active { opacity: 0.7; }
.site-menu a.active { opacity: 0.4; }
.site-menu .break { height: 28px; }
.site-menu .indent { margin-left: 28px; }
.site-menu .close {
	position: absolute;
	top: 0;
	right: 10px;
	padding: 0;
	background: none;
	border: 0;
	font-family: inherit;
	font-size: 50px;
	line-height: 50px;
	font-weight: 200;
	color: rgba(255, 255, 255, 0.4);
	cursor: pointer;
	user-select: none;
}

/* --- Contact panel ------------------------------------------------------ */

.contact-panel {
	position: fixed;
	inset: 0;
	z-index: 40;
	visibility: hidden;
	transition: visibility 0.4s;
}
.contact-panel.open { visibility: visible; }
.contact-panel .scrim {
	position: absolute; inset: 0;
	background: rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 0.4s ease;
}
.contact-panel.open .scrim { opacity: 1; }
.contact-panel .sheet {
	position: absolute;
	top: 0; right: 0; bottom: 0;
	width: min(48rem, 100%);
	background: #1e1e1e;
	color: rgba(255, 255, 255, 0.85);
	padding: 6rem 4rem 4rem;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
	font-family: "Space Grotesk", sans-serif;
	font-weight: 300;
}
.mobile .contact-panel .sheet { padding: 6rem 2.4rem 3rem; }
.mobile .contact-panel h2 { font-size: 3.6rem !important; }
.contact-panel.open .sheet { transform: none; }
.contact-panel .close {
	position: absolute;
	top: 1.6rem; right: 2rem;
	background: none; border: 0;
	color: rgba(255, 255, 255, 0.5);
	font-size: 4rem; line-height: 1;
	cursor: pointer;
}
.contact-panel .close:hover { color: #fff; }
.contact-panel h2 {
	font-family: Newsreader, serif;
	font-weight: 300;
	font-size: 4.4rem;
	line-height: 1.05;
	color: #fff;
	margin-bottom: 1rem;
}
.contact-panel h2 b { color: #ef0065; font-weight: 500; }
.contact-panel p { font-size: 1.6rem; line-height: 1.4; margin: 0 0 3rem; color: rgba(255, 255, 255, 0.6); }
.contact-panel label {
	display: block;
	font-size: 1.2rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.5);
	margin: 0 0 0.6rem;
}
.contact-panel input,
.contact-panel textarea {
	display: block;
	width: 100%;
	margin: 0 0 2.2rem;
	padding: 1rem 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	color: #fff;
	font: inherit;
	font-size: 1.8rem;
	border-radius: 0;
	outline: none;
	transition: border-color 0.2s ease;
}
.contact-panel textarea { min-height: 12rem; resize: vertical; }
.contact-panel input:focus,
.contact-panel textarea:focus { border-bottom-color: #ef0065; }
.contact-panel button[type="submit"] {
	margin-top: 1rem;
	padding: 1.2rem 2.8rem;
	background: #ef0065;
	color: #fff;
	border: 0;
	border-radius: 999px;
	font: inherit;
	font-size: 1.5rem;
	font-weight: 500;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.2s ease;
}
.contact-panel button[type="submit"]:hover { background: #c80055; }
.contact-panel button[disabled] { opacity: 0.6; cursor: default; }
.contact-panel .form-status { margin-top: 2rem; font-size: 1.6rem; min-height: 2em; }
.contact-panel .hp { display: none; }
html.contact-open { overflow: hidden; }


/* ==========================================================================
   Silverspell — typography & theme
   Carried over from the Cargo stylesheet. Cargo-licensed fonts are swapped
   for free Google Fonts:
     Arizona Serif / Freight Big  ->  Newsreader
     Monument Grotesk Semi-Mono   ->  Space Grotesk
   ========================================================================== */

:root {
	--serif: Newsreader, Georgia, serif;
	--grotesk: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
	--nav: Syne, "Helvetica Neue", Arial, sans-serif;
	--mono: Courier, "Courier New", monospace;
	--pink: #ef0065;
	--green: #0ca900;
}

/* Body copy */
bodycopy {
	font-size: 1.8rem;
	color: rgba(0, 0, 0, 0.6);
	font-family: var(--grotesk);
	line-height: 1;
	font-style: normal;
	font-weight: 300;
}
bodycopy a {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	color: rgba(0, 0, 0, 0.6);
	text-decoration: none;
}
bodycopy a:hover { border-bottom-color: rgba(12, 169, 0, 0.6); color: var(--green); }
bodycopy a.image-link,
bodycopy a.image-link:hover,
bodycopy a:has(> img:only-child) { border-bottom: 0; padding-bottom: 0; }
a:active { opacity: 0.7; }

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

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

.content img {
	float: none;
	margin-bottom: 1.4rem;
	vertical-align: bottom;
}

/* Section labels */
h1 {
	font-family: var(--serif);
	font-style: normal;
	font-weight: 500;
	padding: 0;
	margin: 0;
	font-size: 1.3rem;
	line-height: 1.3;
	color: rgba(0, 0, 0, 0.85);
}
h1 a { color: rgba(0, 0, 0, 0.85); }

/* Statement text */
h2 {
	font-family: var(--serif);
	padding: 0;
	margin: 0;
	color: rgba(0, 0, 0, 0.7);
	font-size: 3rem;
	line-height: 1.7;
	letter-spacing: 0.04em;
	font-style: normal;
	font-weight: 300;
}
h2 a { color: rgba(0, 0, 0, 0.7); }
h2 b, h2 strong { font-weight: 500; }

/* Large display headline */
header-font {
	font-size: 5.8rem;
	color: rgba(128, 109, 126, 1);
	font-family: var(--serif);
	line-height: 1;
	font-style: normal;
	font-weight: 300;
	letter-spacing: -0.005em;
}
b header-font, header-font b { font-weight: 300; }

/* Navigation text */
small {
	display: inline-block;
	font-size: 1.2rem;
	line-height: 1.2;
	font-family: var(--nav);
	font-style: normal;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.6);
	letter-spacing: 0.03em;
}
small a { color: rgba(0, 0, 0, 0.6); }
small a:hover { color: var(--green); }
.page a.active { color: rgba(0, 0, 0, 0.4); }

.gallery_image_caption {
	margin-top: 0.8em;
	margin-bottom: 3rem;
	font-size: 1.2rem;
	line-height: 1.2;
	font-family: var(--mono);
	color: rgba(0, 0, 0, 0.6);
	letter-spacing: 0.03em;
	text-align: left;
}

@media screen and (max-width: 700px) {
	h2 { font-size: 5vw !important; }
	#hero, .hero {
		font-size: 20px !important;
		margin-left: -30px !important;
		margin-right: -30px !important;
	}
	header-font {
		font-size: 3.6rem !important;
		line-height: 0.9 !important;
	}
}

/* --- More projects (thumbnails of other projects in the same category) --- */

.more-projects {
	width: 90%;
	margin: 6rem auto 2rem;
	padding: 0 3rem;
}
.more-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.8rem;
}
.mobile .more-projects { width: 100%; padding: 0 1rem; margin-top: 4rem; }
.mobile .more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; }

/* show a random handful (site.js); before that, just the first six */
.more-projects:not([data-ready]) .more-card:nth-child(n+7),
.more-projects[data-ready] .more-card:not(.is-picked) { display: none; }

.more-card { position: relative; display: block; border: 0 !important; }
.more-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(0, 0, 0, 0.04); }
.more-image img { display: block; width: 100%; height: 100%; object-fit: cover; margin: 0 !important; }
.more-title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1.2rem 0.7rem;
	background: rgba(184, 12, 75, 0.9);
	color: #fff;
	font-family: var(--serif);
	font-size: 1.8rem;
	line-height: 1.3;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-align: center;
	opacity: 0;
	transition: opacity 0.15s ease;
}
.more-card:hover .more-title,
.more-card:focus-visible .more-title { opacity: 1; }
.mobile .more-title { display: none; }

/* Music video thumbnails are shown in black and white, as on the Cargo site */
.more-projects[data-category="music-videos"] .more-image img { filter: grayscale(1); }