/* ========================================================================
BRISTLECONE.CO – GLOBAL THEME & LAYOUT STYLESHEET
------------------------------------------------------------------------
2025-09-19 optimisation pass (Rev G, cleaned):
• Universal media tone via SVG duotone (fallback: var(--warm-filter))
• Strict brand/logo exemptions (no filter on logos/wordmarks)
• QC fixes: project-meta color; deduped customer-logos overrides
======================================================================= */
/* ------------------------------------------------------------------------
SECTION 01 : GLOBAL DESIGN TOKENS
---------------------------------------------------------------------------*/
:root
{
	--text:          #504B46;
	--text-light:    #69645F;
	--gray-3:        #9B9691;
	--gray-4:        #C8C3BE;
	--gray-5:        #DED9D3;
	--bg:            #F0EBE6;
	--font-body:     'Montserrat', sans-serif;
	--content-max:    700px;
	--content-gutter: 1.5rem;
	--content-gutter-top: clamp(
	var(--content-gutter),
	calc(24px + 0.0952380952 * (100vw - 600px)),
	40px
	);
	--safe-top:      env(safe-area-inset-top, 0);
	--safe-bottom:   env(safe-area-inset-bottom, 0);
	--nav-breakpoint: 900px;
	--logo-width:     250px;
	/* Fallback warm filter used if SVG filter can't be applied */
	--warm-filter: grayscale(100%) sepia(10%) brightness(95%);
}
/* ------------------------------------------------------------------------
SECTION 02 : BACKGROUND COLOUR LAYER
---------------------------------------------------------------------------*/
html
{
	background: var(--bg);
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}
body
{
	background: transparent;
	margin: 0;
	padding: 0;
}
/* ------------------------------------------------------------------------
SECTION 03 : GLOBAL RESET & BODY BASELINE
---------------------------------------------------------------------------*/
*
{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	color: var(--text);
}
body
{
	font-family: var(--font-body);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	line-height: 1.6;
	font-size: 14px;
}
body.menu-open
{
	overflow: hidden;
}
nav a
{
	text-transform: lowercase;
}
h1
{
	font-size: 22px;
	margin-bottom: 20px;
	font-weight: 600;
	text-transform: capitalize;
}
main.content h2
{
	text-transform: capitalize;
}
main.content h3
{
}
/* ------------------------------------------------------------------------
SECTION 03.5 : GLOBAL MEDIA DEFAULTS (img / picture > img / video)
- Default to SVG duotone; hover/focus restores original color
- Progressive fallback to var(--warm-filter) if URL filter is unsupported
- Use .no-bw or brand classes to opt out
---------------------------------------------------------------------------*/
main
{
	isolation: isolate;
}
/* keeps most blending scoped to main */
/* Fallback first (keeps tone if SVG is unavailable) */
:where(img, picture>img, video):not(.no-bw, .logo, .brand, .wordmark, .icon-logo)
{
	filter: var(--warm-filter);
	/* Preferred exact mapping (now inline, iOS-friendly) */
	filter: url(#duotone);
}
/* ------------------------------------------------------------------------
   Reveal animation for duotone-scoped images (site-wide)
   Excludes logos, brand images, and explicitly opted-out elements.
---------------------------------------------------------------------------*/
:where(img, picture>img, video):not(.no-bw, .logo, .brand, .wordmark, .icon-logo)
{
	opacity: 0;
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
/* When revealed */
.reveal-img,
.fade-in
{
	opacity: 1 !important;
	transform: none !important;
}
/* Keep hero/brand images fully visible and unaffected */
.hero img,
.intro-logo,
.icon-logo,
.wordmark,
.logo,
img.no-bw
{
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}
/* Customer logos use their own opacity management */
.customer-logos img
{
	opacity: 0.5 !important;
	transform: none !important;
	transition: opacity .3s !important;
}
/* Restore original color on hover/focus */
:where(img, picture > img, video):not(.no-bw, .logo, .brand, .wordmark, .icon-logo):is(:hover, :focus-visible)
{
	filter: none;
}
/* Brand/Logo hard exemptions: always full color */
:where(img.logo, img.brand, img.wordmark, img.icon-logo,
.no-bw img, img.no-bw, video.no-bw)
{
	filter: none !important;
}
/* Optional: force the fallback at runtime if needed (e.g., CORS issue).
Add `.no-svg-filter-fallback` to <html> or <body>. */
.no-svg-filter-fallback
:where(img, picture > img, video):not(.no-bw, .logo, .brand, .wordmark, .icon-logo)
{
	filter: var(--warm-filter) !important;
}
/* ------------------------------------------------------------------------
HOTFIX: Exempt homepage .intro (and its wordmark) + lean customer-logos
---------------------------------------------------------------------------*/
/* Keep .intro fully transparent and exclude its wordmark from effects */
.intro
{
	background: transparent !important;
	isolation: auto;
}
.intro::before
{
	content: none !important;
}
.intro .intro-logo
{
	filter: none !important;
	mix-blend-mode: normal !important;
}
/* Customer logos: inherit toning; subtle opacity hover */
.customer-logos img
{
	width: 150px;
}
.customer-logos img:is(:hover, :focus-visible)
{
	opacity: .8 !important;
}
/* ------------------------------------------------------------------------
SECTION 04 : SITE HEADER & PRIMARY NAVIGATION
---------------------------------------------------------------------------*/
header,
header.internal-header
{
	--header-pad: clamp(
	var(--content-gutter),
	calc(32px + (100vw - 764px) * 0.1186440678),
	60px
	);
	padding: var(--content-gutter-top) var(--header-pad) 0;
	width: 100%;
	display: flex;
	align-items: flex-start;
	margin-bottom: clamp(
	20px,
	calc(20px + (40 - 20) * ((100vw - 600px) / (768 - 600))),
	40px
	);
	position:relative;
	z-index:10;
}
header
{
	justify-content: flex-end;
}
header.internal-header
{
	justify-content: space-between;
	z-index:100;
}
.slideshow-hero header,
.slideshow-hero header.home-header
{
	position:absolute;
	top: 0;
	left:0;
	right:0;
	z-index:10;
	margin-bottom:0;
}
header.multiply
{
	mix-blend-mode: invert;
	position: absolute;
}
.compact-header header,
.compact-header header.internal-header
{
	margin-bottom: clamp(
	20px,
	calc(20px + (40 - 20) * ((100vw - 600px) / (768 - 600))),
	40px
	);
}
.icon-logo
{
	width: var(--logo-width);
	max-width: 250px;
	min-width: 200px;
	height: auto;
	transition: width .12s linear;
}
nav
{
	display: flex;
	gap: 30px;
}
nav a
{
	text-decoration: none;
	font-weight: 400;
}
nav a.active,
nav a:hover
{
	color: var(--gray-4);
}
.nav-toggle
{
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px;
	z-index: 110;
}
.nav-toggle span
{
	display: block;
	width: 24px;
	height: 2px;
	background: var(--text);
	transition: transform .3s, opacity .3s;
}
.nav-toggle.open span:nth-child(1)
{
	transform: translateY(6px) rotate(45deg);
}
.nav-toggle.open span:nth-child(2)
{
	opacity: 0;
}
.nav-toggle.open span:nth-child(3)
{
	transform: translateY(-6px) rotate(-45deg);
}
body.auto-menu .nav-toggle
{
	display: flex;
	flex-direction: column;
	gap: 4px;
}
/* Only neutralize blending when THIS header is both internal and multiply AND open */
header.internal-header.multiply.nav-open
{
	mix-blend-mode: normal !important;
}
/* Only hide/soften the logo when the menu is open AND this header has .multiply */
header.internal-header.multiply.nav-open .icon-logo,
/* covers .nav-open on the header */
body.menu-open header.internal-header.multiply .icon-logo
{
	/* covers body-wide open state */
	opacity: 0.05;
	filter: blur(6px);
	pointer-events: none;
	transition: opacity .2s ease;
}
/* ───────── CLEANED -- no gradient, glass handled later ───────── */
body.auto-menu nav.nav-menu
{
	position: absolute;
	top: var(--safe-top);
	left: 0;
	width: 100%;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	background: transparent;
	backdrop-filter: blur(6px);
	min-height: 100dvh;
	padding: 24px 0;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	pointer-events: none;
	border-top: 1px solid var(--gray-5);
	transition: max-height .3s ease, opacity .3s ease;
	z-index: 90;
}
body.auto-menu nav.nav-menu.open
{
	max-height: 100vh;
	opacity: 1;
	overflow: auto;
	pointer-events: auto;
}
/* ∞∞∞  NAV MENU – split layers (blur · wash · text)  ∞∞∞ */
body.auto-menu nav.nav-menu
{
	isolation:isolate;
}
body.auto-menu nav.nav-menu a
{
	mix-blend-mode:multiply;
}
body.auto-menu nav.nav-menu::before
{
	content:"";
	position:absolute;
	inset:0;
	z-index:-1;
	background:radial-gradient(
	circle at 50% 0%,
	var(--bg) 15%,
	rgba(240,235,230,0) 80%);
	opacity:0;
	transition:opacity .3s ease;
	pointer-events:none;
}
body.auto-menu nav.nav-menu.wash::before
{
	opacity:1;
}
/* ------------------------------------------------------------------------
SECTION 05 : HOME PAGE HERO (.intro)
---------------------------------------------------------------------------*/
.intro
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	display:flex;
	flex-direction:column;
	align-items:center;
	width:fit-content;
}
.intro-logo
{
	display:block;
	width:clamp(240px,40vw,400px);
	height:auto;
}
.intro .tagline
{
	margin-top:48px;
	font-size:16px;
	text-align:left;
	align-self:flex-start;
	padding-left:var(--tag-offset,0);
	opacity:0;
	visibility:hidden;
	transition:opacity 8s ease;
}
.intro-logo.visible,
.intro .tagline.visible
{
	opacity:1;
	visibility:visible;
}
/* ------------------------------------------------------------------------
SECTION 06 : HOME PAGE SCROLLABLE HERO (.slideshow-hero)
---------------------------------------------------------------------------*/
.slideshow-hero
{
	position:relative;
	width:100%;
	height:100dvh;
	z-index:0;
	display:block;
	margin: 0 0 40px 0;
	padding: 0;
	top: 0;
}
.slideshow-hero .intro
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	z-index:5;
}
/* ------------------------------------------------------------------------
SECTION 07 : MAIN CONTENT (About / Contact / etc.)
---------------------------------------------------------------------------*/
main.content
{
	width: min(calc(100vw - (var(--content-gutter) * 2)), var(--content-max));
	max-width: var(--content-max);
	margin: 0px auto 0;
}
}
/* Home page content: appears below the scrollable hero section */
main.content.home-content
{
	position:relative;
	z-index:1;
	padding-top:var(--content-gutter-top);
	padding-bottom:60px;
	background:var(--bg);
}
main.content.home-content h1
{
	/* inherits from global h1 rule */
}
main.content h2
{
	font-size: 16px;
	margin: 20px 0 10px;
	font-weight: 600;
}
main.content h3
{
	font-size: 18px;
	margin: 0 0 20px;
	font-weight: 600;
}
main.content h4
{
	font-size: 14px;
	margin: 0 0 20px;
	font-weight: 600;
}
main.content p
{
	font-size: 14px;
	margin-bottom: 20px;
	text-align: justify;
	text-align-last: left;
}
main.content p a
{
	color: var(--text);
	text-decoration: underline;
	transition: opacity 0.3s ease;
}
main.content p a:hover
{
	opacity: 0.7;
}
main.content b
{
	font-weight: 600;
}
ul.list
{
	padding-left: 2rem;
	margin: 20px 0 20px;
	text-align: justify;
}
ol.list
{
	padding-left: 2rem;
	margin: 20px 0 20px;
	text-align: justify;
}
ol.list li::marker
{
	font-weight: 700;
	content: counter(list-item) ".\2002";
}
ul li + li, ol li + li
{
	margin-top: 20px;
}
hr
{
	border: 0;
	border-top: 1px solid var(--gray-4);
	margin: 30px 0 30px;
}
.customer-logos
{
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 30px;
	margin-bottom: 20px;
	align-items: center;
	justify-content: center;
	padding: 0;
}
/* ------------------------------------------------------------------------
SECTION 07.1 : MAIN CONTENT (Images)
---------------------------------------------------------------------------*/
.image-flex
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--content-gutter);
	margin: auto;
	margin-bottom: 40px;
	padding: 0px var(--content-gutter) 0px;
	width: 80dvw;
	box-sizing: border-box;
}
.image-flex img
{
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-2);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 1s ease-out, transform 1s ease-out;
}
.image-flex img.fade-in
{
	opacity: 1;
	transform: none;
}
.feature-img
{
	display:block;
	width:100%;
	opacity: 0;
	transition: opacity 1s ease-out;
}
.feature-img.fade-in
{
	opacity: 1;
}
	height:auto;
}
/* Optional: vertical stacking on narrow viewports */
@media (max-width: 768px)
{
	.image-flex
	{
		flex-direction: column;
		width: 100dvw;
	}
	.image-flex img
	{
		width: 100%;
	}
}
/* ------------------------------------------------------------------------
SECTION 08 : SITE FOOTER
---------------------------------------------------------------------------*/
.site-footer
{
	position: relative;
	margin-top: auto;
	width: 100%;
}
.site-footer .footer-bar,
.site-footer .social-links,
.site-footer .footer-disclaimer
{
	pointer-events: auto;
}
.footer-bar
{
	position: relative;
	width: 100%;
	min-height: 90px;
	margin-top:40px;
}
.footer-disclaimer
{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(40px + var(--safe-bottom));
	font-size: 12px;
	color: var(--gray-3);
	font-weight: 400;
	padding: 0 0 4px;
	text-align: center;
}
.social-links
{
	position: absolute;
	right: 60px;
	bottom: calc(40px + var(--safe-bottom));
	display: flex;
	gap: 20px;
}
.social-links a
{
	font-size: 25px;
	transition: opacity .3s;
}
.social-links a:hover
{
	opacity: .6;
}
.footer-logo
{
	display: none !important;
}
/* ------------------------------------------------------------------------
SECTION 09 : MOBILE OPTIMISATIONS (≤ 600 px)
---------------------------------------------------------------------------*/
@media (max-width: 600px)
{
	header,
	header.internal-header
	{
		padding: var(--content-gutter) var(--content-gutter) 0;
	}
	.nav-toggle
	{
		display: flex;
		flex-direction: column;
		gap: 4px;
	}
	nav.nav-menu
	{
		position: absolute;
		top: var(--safe-top);
		left: 0;
		width: 100%;
		flex-direction: column;
		align-items: center;
		gap: 24px;
		background: transparent;
		backdrop-filter: blur(6px);
		min-height: 100dvh;
		padding: 24px 0;
		max-height: 0;
		opacity: 0;
		overflow: hidden;
		pointer-events: none;
		border-top: 1px solid var(--gray-5);
		transition: max-height .3s ease, opacity .3s ease;
		z-index: 100;
	}
	nav.nav-menu.open
	{
		max-height: 100vh;
		opacity: 1;
		overflow: auto;
		pointer-events: auto;
	}
	.intro-logo
	{
		width: clamp(150px, 70vw, 240px);
		transition: width .25s ease;
	}
	.intro .tagline
	{
		font-size: clamp(12px, 3.8vw, 16px);
		margin-top: clamp(24px, 6vw, 48px);
		transition: font-size .25s ease, margin-top .25s ease;
	}
	main.content
	{
		margin-top: 0px;
	}
	main.content h2
	{
		font-size: 18px;
	}
	main.content h3
	{
		font-size: 16px;
	}
	main.content p
	{
		font-size: 14px;
		text-align: left;
		text-align-last: left;
	}
	ul.list
	{
		text-align: left;
		text-align-last: left;
	}
	ol.list
	{
		text-align: left;
		text-align-last: left;
	}
	.footer-bar
	{
		position: static !important;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 var(--content-gutter) calc(20px + var(--safe-bottom));
		min-height: auto;
	}
	.footer-disclaimer
	{
		position: static !important;
		margin: 0 auto 0;
		max-width: 100%;
		padding: 0;
		text-align: center;
		font-size: 11px;
		line-height: 1.4;
		transform: none !important;
	}
	.social-links
	{
		position: static !important;
		display: flex;
		justify-content: center;
		gap: 24px;
		margin-bottom: 10px;
	}
	.icon-logo
	{
		width: 200px;
	}
	.tiles
	{
		flex-direction: column;
		align-items: center;
	}
	.tile--md
	{
		flex: 0 0 auto;
		width: min(90vw, 400px);
	}
	.image-flex
	{
		flex-direction: column;
		width: 100dvw;
	}
	.image-flex img
	{
		width: 100%;
		max-width: 100%;
		min-width: 100%;
	}
}
@media (max-height: 450px) and (orientation: landscape)
{
	.intro .tagline
	{
		font-size: 14px;
		margin-top: 8px;
	}
}
/* ------------------------------------------------------------------------
SECTION 10 : BACKGROUND SLIDESHOW
---------------------------------------------------------------------------*/
.slideshow-container,
.slideshow-overlay
{
	position: absolute;
	right: 0;
	left: 0;
	width: 100%;
	top: 0;
	height: 100%;
	z-index: -2;
	overflow: hidden;
}
.slideshow-overlay
{
	z-index: -1;
	pointer-events: none;
}
.slideshow-container img
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	opacity: 0;
	transition: opacity 2s ease-in-out;
}
.slideshow-container img.show
{
	opacity: .5;
}
.slideshow-overlay
{
	background: var(--bg);
	opacity: .85;
}
/* ------------------------------------------------------------------------
SECTION 10.5 : LIGHTBOX / GALLERY (global)
---------------------------------------------------------------------------*/
.lightbox-backdrop
{
	position: fixed;
	inset: 0;
	display: none;
	pointer-events: none;
	visibility: hidden;
	isolation: isolate;
	z-index: 9999;
	contain: layout paint style;
}
.lightbox-backdrop.open
{
	display: flex;
	pointer-events: auto;
	visibility: visible;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.72);
	--lb-caption-gap: clamp(64px, 9vh, 128px);
}
.lightbox-backdrop .lightbox-figure
{
	margin: 0;
	position: relative;
	max-width: 92vw;
	max-height: 92vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.lightbox-backdrop .lightbox-img
{
	max-width: 100%;
	max-height: max(40vh, calc(92vh - var(--lb-caption-gap)));
	object-fit: contain;
	border-radius: var(--radius-2, 8px);
	box-shadow: 0 10px 40px rgba(0,0,0,.5);
	transition: opacity .2s ease, transform .2s ease;
	cursor: pointer;
}
/* Lightbox: originals in full color */
.lightbox-backdrop :where(img, video),
.pswp img,
.glightbox-container img
{
	filter: none !important;
	mix-blend-mode: normal !important;
}
.lightbox-backdrop .lightbox-caption
{
	position: fixed;
	left: 50%;
	bottom: clamp(16px, 2.2vh, 32px);
	transform: translateX(-50%);
	color: #fff;
	opacity: .9;
	text-align: center;
	font: 400 .95rem/1.4 var(--font-body, system-ui);
	max-width: min(92vw, 900px);
}
.lightbox-backdrop .lightbox-close
{
	position: fixed;
	top: var(--content-gutter, 24px);
	right: var(--content-gutter, 24px);
	width: 44px;
	height: 44px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	background: rgba(0,0,0,.3);
	border: 1px solid rgba(255,255,255,.2);
	color: #fff;
	font-size: 32px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
}
.lightbox-backdrop .lightbox-arrow
{
	position: fixed;
	top: calc(var(--content-gutter,24px) + 64px);
	bottom: var(--content-gutter,24px);
	width: min(18vw, 140px);
	background: transparent;
	border: none;
	cursor: pointer;
	outline: 0;
	z-index: 1;
}
.lightbox-backdrop .lightbox-prev
{
	left: 0;
}
.lightbox-backdrop .lightbox-next
{
	right: 0;
}
.lightbox-backdrop .lightbox-arrow::before
{
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 20px;
	height: 20px;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	opacity: .9;
	transform: translate(-50%, -50%) rotate(135deg);
}
.lightbox-backdrop .lightbox-next::before
{
	transform: translate(-50%, -50%) rotate(-45deg);
}
.lightbox-backdrop .lightbox-counter
{
	position: fixed;
	top: var(--content-gutter,24px);
	left: 50%;
	transform: translateX(-50%);
	color: #fff;
	opacity: .85;
	font: 500 .9rem var(--font-body, system-ui);
	pointer-events: none;
	z-index: 4;
}
/* Fail-safe */
main .lightbox-figure
{
	display: block;
	max-height: none;
}
/* Focus styles */
:focus:not(:focus-visible)
{
	outline: none;
}
img[tabindex]:focus-visible,
a:focus-visible,
button:focus-visible
{
	outline: 2px solid rgba(80,75,70,.35);
	outline-offset: 2px;
}
@media (hover:hover)
{
	.lightbox-arrow:hover::before
	{
		opacity:1;
	}
	.lightbox-close:hover
	{
		background:rgba(255,255,255,.1);
	}
}
/* ------------------------------------------------------------------------
SECTION 11 – HIDE VERTICAL SCROLLBAR GLOBALLY
---------------------------------------------------------------------------*/
::-webkit-scrollbar
{
	display:none;
}
/* Chrome / Edge / Safari */
html
{
	scrollbar-width: none;
}
/* Firefox */
body
{
	-ms-overflow-style: none;
}
/* legacy IE / Edge */
/* ------------------------------------------------------------------------
SECTION 12 – PROJECTS CSS STYLE (kept minimal; removed old hero/tile)
---------------------------------------------------------------------------*/
:root
{
	--radius-2: 0px;
	--hero-height-desktop: 66vh;
}
.internal-header .nav-menu,
.internal-header .nav-menu a,
.internal-header .icon-logo
{
	mix-blend-mode:inherit
}
.nav-backdrop
{
	position:fixed;
	inset:0;
	height:100dvh;
	backdrop-filter:blur(6px);
	background:linear-gradient(180deg,var(--bg) 0%,transparent 100%);
	opacity:0;
	pointer-events:none;
	transition:opacity .3s;
	z-index:90;
	mix-blend-mode:normal;
}
.nav-backdrop.show
{
	opacity:.8;
}
.internal-header.nav-open .nav-menu
{
	mix-blend-mode:multiply;
	background:transparent;
}
.details-page main.content
{
	margin:0 auto;
}
.details-page main.content h1
{
	/* inherits from global h1 rule */
}
.details-page main.content h2
{
	font-size:16px;
	margin:20px 0 10px;
	font-weight:600;
	text-transform:capitalize;
}
.project-meta
{
	margin:0 0 2rem;
	font:.9rem/1.4 var(--font-body);
	color:var(--text-light);
}
.back-link
{
	text-align:center;
	margin:40px 0 20px;
}
.back-link a
{
	text-decoration:none;
	font-weight:600;
}
/* ------------------------------------------------------------------------
SECTION 13 – COMPONENTS (Heroes, Tiles, Media groups)
---------------------------------------------------------------------------*/
/* HERO */
.hero
{
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	border-radius: var(--radius-2, 0px);
}
.hero > img
{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hero::after
{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
	background: linear-gradient(0deg, var(--bg) 0%, transparent 25%);
	opacity: 0;
	transition: opacity .2s;
	pointer-events: none;
}
.hero:hover::after,
.hero:focus-within::after
{
	opacity: 1;
}
/* Caption */
.hero__caption
{
	position:absolute;
	bottom:1.5rem;
	left:50%;
	width:min(calc(100vw - (var(--content-gutter)*2)), var(--content-max, 700px));
	max-width:var(--content-max, 700px);
	transform:translate(-50%, 4px);
	z-index:1;
	color: var(--text);
	font: 600 .95rem/1.4 var(--font-body, 'Montserrat', system-ui);
	mix-blend-mode: multiply;
	opacity: 0;
	transition: opacity .4s, transform .5s;
}
.hero:hover .hero__caption,
.hero:focus-within .hero__caption
{
	opacity:1;
	transform:translate(-50%, 0);
}
/* Variants */
.hero--full-bleed
{
	width: 100vw;
	margin-left: calc(-50vw + 50%);
	height: var(--hero-height-desktop, 66vh);
	min-height: 300px;
	margin-bottom: 40px;
}
.hero--banner
{
	--hdr-pad: clamp(
	var(--content-gutter),
	calc(32px + (100vw - 764px) * 0.1186440678),
	60px
	);
	width: calc(100vw - 2 * var(--hdr-pad));
	height: clamp(300px, calc(300px + (100vw - 480px) * 0.3472222222), 400px);
	margin-left:  calc(50% - 50vw + var(--hdr-pad));
	margin-right: calc(50% - 50vw + var(--hdr-pad));
	margin-top: 0;
	margin-bottom: 40px;
}
.hero--banner::after
{
	opacity: 1;
}
/* TILES */
.tiles
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--content-gutter);
	width: 100dvw;
	margin: 0 auto;
	padding: 0 var(--content-gutter);
	box-sizing: border-box;
}
.tile
{
	position: relative;
	display: block;
	border-radius: var(--radius-2, 0px);
	text-decoration: none;
	color: inherit;
	overflow: hidden;
}
.tile--sm
{
	width: clamp(260px, 22vw, 320px);
	flex: 0 0 clamp(260px, 22vw, 320px);
}
.tile--md
{
	flex: 0 1 clamp(400px, 20vw, 480px);
	max-width: 480px;
}
.tile--landscape
{
	aspect-ratio: 3 / 2;
}
.tile--portrait
{
	aspect-ratio: 2 / 3;
}
.tile > img,
.tile__thumb > img
{
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}
.tile__thumb
{
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
	border-radius: var(--radius-2, 0px);
}
.tile__thumb > img
{
	position:absolute;
	inset:0;
}
/* Overlay caption */
.tile__caption
{
	position:absolute;
	bottom:1rem;
	left:1rem;
	right:1rem;
	z-index:1;
	font:600 .95rem/1.4 var(--font-body, 'Montserrat');
	letter-spacing:.2px;
	color: var(--text);
	mix-blend-mode: multiply;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity .4s ease, transform .4s ease;
}
.tile--overlay:hover .tile__caption,
.tile--overlay:focus-within .tile__caption
{
	opacity: 1;
	transform: translateY(0);
}
.tile--overlay::after
{
	content:"";
	position:absolute;
	inset:0;
	background: linear-gradient(0deg, var(--bg) 0%, transparent 25%);
	opacity: 0;
	transition: opacity .2s;
	pointer-events: none;
	z-index: 1;
}
.tile--overlay:hover::after,
.tile--overlay:focus-within::after
{
	opacity: 1;
}
.tile--overlay .tile__caption
{
	z-index: 2;
}
/* Halftone utility */
.tile--halftone > img,
.tile--halftone .tile__thumb > img,
.tile--halftone picture > img,
.tile--halftone video
{
	opacity: .5;
	transition: opacity .25s ease;
}
.tile--halftone:hover > img,
.tile--halftone:focus-within > img,
.tile--halftone:hover .tile__thumb > img,
.tile--halftone:focus-within .tile__thumb > img,
.tile--halftone:hover picture > img,
.tile--halftone:focus-within picture > img,
.tile--halftone:hover video,
.tile--halftone:focus-within video
{
	opacity: 1;
}
.tile__title
{
	font:600 1rem/1.3 var(--font-body, 'Montserrat');
	letter-spacing:.15px;
	margin-top:.35rem;
}
.tile__meta
{
	font:.85rem/1.4 var(--font-body, 'Montserrat');
	color: var(--text-light, #69645F);
}
/* MEDIA GROUP modifiers */
.image-flex
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--content-gutter);
	width: 80dvw;
	margin: auto;
	margin-bottom: 40px;
	padding: 0px var(--content-gutter) 0px;
	box-sizing: border-box;
}
.image-flex img
{
	flex: 1 1 0;
	min-width: 0;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: var(--radius-2);
}
.image-flex.outset
{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--outset-max, 1200px), calc(100vw - 2 * var(--content-gutter, 2rem)));
	margin: 2rem 0;
}
.image-flex.capped figure
{
	flex: 1 1 0;
	inline-size: min(100%, var(--frame-max-inline, 400px));
	block-size: clamp(220px, 30vw, var(--frame-block-max, 400px));
	overflow:hidden;
	border-radius: var(--radius-2, 0px);
}
.image-flex.capped figure img
{
	inline-size:100%;
	block-size:100%;
	object-fit:cover;
	object-position:center;
	display:block;
}
.image-flex.capped > img
{
	display:block;
	flex: 1 1 0;
	inline-size: min(100%, var(--frame-max-inline, 400px));
	block-size: clamp(220px, 30vw, var(--frame-block-max, 400px));
	border-radius: var(--radius-2, 0px);
	object-fit: cover;
	object-position: center;
}
.image-flex.fit figure
{
	block-size:auto;
	overflow:visible;
}
.image-flex.fit img
{
	width:100%;
	height:auto;
	object-fit:contain;
}
.image-flex.smart
{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--thumb-min, 280px), 1fr));
	grid-auto-flow: row dense;
	gap: var(--content-gutter, 2rem);
	align-items: stretch;
	justify-items: stretch;
	margin: 2rem 0;
}
.image-flex.smart.outset
{
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(var(--outset-max, 1200px), calc(100vw - 2 * var(--content-gutter, 2rem)));
	margin: 2rem 0;
}
.image-flex.smart.capped > img,
.image-flex.smart.capped figure
{
	display:block;
	inline-size: 100%;
	block-size: clamp(220px, 30vw, var(--frame-block-max, 400px));
	border-radius: var(--radius-2, 0px);
	overflow: hidden;
}
.image-flex.smart.capped img
{
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}
.image-flex.smart.fit > *
{
	block-size: auto;
	overflow: visible;
}
.image-flex.smart.fit img
{
	width: 100%;
	height: auto;
	object-fit: contain;
}
.image-flex.smart .span-2
{
	grid-column: span 2;
}
.image-flex.smart .span-3
{
	grid-column: span 3;
}
.image-flex.smart .span-all
{
	grid-column: 1 / -1;
}
.image-flex.cols-260
{
	--thumb-min: 260px;
}
.image-flex.cols-300
{
	--thumb-min: 300px;
}
.image-flex.cols-340
{
	--thumb-min: 340px;
}
.image-flex.cap-260
{
	--frame-block-max: 260px;
}
.image-flex.cap-320
{
	--frame-block-max: 320px;
}
.image-flex.cap-400
{
	--frame-block-max: 400px;
}
.image-flex.wide-480
{
	--frame-max-inline: 480px;
}
/* --- Expander (About page) --- */
.expander
{
	border-block: 0px solid var(--gray-4);
}
.expander > summary
{
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	list-style: none;
	cursor: pointer;
	font-weight: 500;
	margin-bottom:0px;
}
.expander > summary::-webkit-details-marker
{
	display: none;
}
.expander__label
{
	grid-column: 2;
	justify-self: center;
	line-height: 1.4;
}
.expander__label h4
{
	margin: 0;
	margin-bottom: 0;
	text-align: center;
	color: var(--text-light);
}
main.content .expander__label h4
{
	margin: 0;
	color: var(--text-light);
}
.expander__chev
{
	grid-column: 3;
	justify-self: end;
	font-size: .9rem;
	opacity: .7;
}
.expander[open] .expander__chev
{
	transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference)
{
	.expander__chev
	{
		transition: transform 200ms ease;
	}
}
.expander__panel
{
	padding-block: 10px 0 0 0;
	margin: 20px 0
}
.expander__panel .list
{
	margin-top: 10px;
}
.expander__cta
{
	display: flex;
	justify-content: center;
}
.expander__cta .btn-link
{
	text-decoration: underline;
	font-weight: 500;
}