/**
 * Design Lab v1.14 — Soft Paper footer, mobile preview strip (local only).
 */

body.design-lab-v1 {
	--dl-primary-bg: #ffffff;
	--dl-secondary-bg: #faf9f6;
	--dl-tertiary-bg: #f9e7b9;
	--dl-text: #3a3b3c;
	--dl-text-warm: #e5dfd3;
	--dl-bronze: #9c5a42;
	--dl-bronze-light: #c48a70;
}

/* Primary background — most of the site stays white */
body.design-lab-v1,
body.design-lab-v1 .main-content,
body.design-lab-v1 .single-portfolio-container,
body.design-lab-v1 .portfolio-museum,
body.design-lab-v1 .blog-container,
body.design-lab-v1 .pf-gallery-container,
body.design-lab-v1 .museum-bio-cv-shell,
body.design-lab-v1 .press-kit-center-shell,
body.design-lab-v1 .post .post-link .main-post-content,
body.design-lab-v1.museum-editorial-page .main-content .the-content {
	background-color: var(--dl-primary-bg);
	color: var(--dl-text);
}

body.design-lab-v1 h1,
body.design-lab-v1 h2,
body.design-lab-v1 h3,
body.design-lab-v1 h4,
body.design-lab-v1 h5,
body.design-lab-v1 h6,
body.design-lab-v1 .portfolio-museum-hero__title,
body.design-lab-v1 .museum-bio-cv__title,
body.design-lab-v1 .press-kit-center__title {
	color: var(--dl-text);
}

body.design-lab-v1 .the-content,
body.design-lab-v1 .museum-bio-cv,
body.design-lab-v1 .museum-bio-cv__lede,
body.design-lab-v1 .press-kit-center,
body.design-lab-v1 .portfolio-museum-hero__medium,
body.design-lab-v1 .portfolio-museum-hero__year {
	color: var(--dl-text);
}

/* Graphite — content titles and metadata (never bronze) */
body.design-lab-v1 .post-title,
body.design-lab-v1 .post .post-link .main-post-content .content-align .post-title,
body.design-lab-v1 .single-post .main-content h1,
body.design-lab-v1 .post-title-no-bg,
body.design-lab-v1 .portfolio-item .project-link .thumb-container .thumb-overlay .project-info-wrap .project-title,
body.design-lab-v1 .portfolio-museum__nav-title,
body.design-lab-v1 .portfolio-museum__nav-link,
body.design-lab-v1 .search-post-title a,
body.design-lab-v1 .post-time,
body.design-lab-v1.single-post .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span ~ span {
	color: var(--dl-text);
}

/* Secondary — Soft Paper (footer signature only) */
body.design-lab-v1 .footer,
body.design-lab-v1 .museum-footer-authority {
	background-color: var(--dl-secondary-bg);
	color: var(--dl-text);
}

body.design-lab-v1 .museum-footer-authority {
	border-top-color: rgba(58, 59, 60, 0.14);
}

/* Tertiary — French Butter (subtle UI emphasis, not page backgrounds) */
body.design-lab-v1 .no-touch .portfolio-item .project-link:hover .thumb-overlay,
body.design-lab-v1 .no-touch .post .post-link:hover .main-post-content {
	background-color: var(--dl-tertiary-bg);
}

body.design-lab-v1 .filter-container .portfolio-filter li.active a,
body.design-lab-v1 .filter-container .portfolio-filter li.active a:hover {
	background-color: var(--dl-tertiary-bg);
	color: var(--dl-text);
}

/* Overlay menu — quiet dark style (no LemonChiffon / French Butter active fill) */
body.design-lab-v1 .shifter-navigation {
	background: rgba(34, 34, 34, 0.9);
}

body.design-lab-v1 .shifter-navigation .menu li a {
	color: #9e9e9e;
	background-color: transparent;
}

body.design-lab-v1 .shifter-navigation .menu li a:hover {
	color: #fff;
	background-color: transparent;
}

body.design-lab-v1 .shifter-navigation .menu li.current-menu-item > a,
body.design-lab-v1 .shifter-navigation .menu li.current_page_item > a,
body.design-lab-v1 .shifter-navigation .menu li .sub-menu .current-menu-item > a {
	background-color: transparent;
	color: #fff;
	opacity: 1;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.35);
	text-underline-offset: 0.2em;
}

/* Warm taupe — light text on dark surfaces only */
body.design-lab-v1 #footer-bg-check.oy-dark-bg,
body.design-lab-v1 #footer-bg-check.oy-dark-bg a,
body.design-lab-v1 #header-bg-check.oy-dark-bg .header,
body.design-lab-v1 #header-bg-check.oy-dark-bg .shifter-navigation .menu li a {
	color: var(--dl-text-warm);
}

body.design-lab-v1 #footer-bg-check.oy-dark-bg .museum-footer-authority {
	background-color: transparent;
	color: var(--dl-text-warm);
}

/* Soft Clay Terracotta — approved navigation and authority elements (site-wide) */
body.design-lab-v1 .museum-footer-authority__list--social a,
body.design-lab-v1 .museum-footer-authority__list--social a .museum-footer-authority__icon-svg {
	color: var(--dl-bronze);
	opacity: 0.82;
	transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}

body.design-lab-v1 .museum-footer-authority__list--social a:hover,
body.design-lab-v1 .museum-footer-authority__list--social a:focus {
	opacity: 1;
	text-decoration: underline;
	text-decoration-color: rgba(156, 90, 66, 0.45);
	text-underline-offset: 0.15em;
	outline: none;
}

body.design-lab-v1 #footer-bg-check.oy-dark-bg .museum-footer-authority__list--social a,
body.design-lab-v1 #footer-bg-check.oy-dark-bg .museum-footer-authority__list--social a .museum-footer-authority__icon-svg {
	color: var(--dl-bronze);
}

body.design-lab-v1 .museum-lightbox__nav,
body.design-lab-v1 .museum-lightbox__close,
body.design-lab-v1 .museum-lightbox--minimal .museum-lightbox__close,
body.design-lab-v1 .museum-lightbox--minimal .museum-lightbox__zone {
	color: var(--dl-bronze);
	background: transparent;
	border: 0;
	box-shadow: none;
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	-webkit-appearance: none;
	appearance: none;
	user-select: none;
	touch-action: manipulation;
}

body.design-lab-v1 .museum-lightbox--minimal .museum-lightbox__zone:active,
body.design-lab-v1 .museum-lightbox--minimal .museum-lightbox__zone:focus {
	background: transparent !important;
	box-shadow: none !important;
	outline: none;
	top: 0;
}

body.design-lab-v1 .museum-lightbox--minimal .museum-lightbox__zone:focus-visible {
	outline: none;
}

@media (hover: hover) and (pointer: fine) {
	body.design-lab-v1 .museum-lightbox--minimal .museum-lightbox__zone:focus-visible {
		outline: 1px solid rgba(156, 90, 66, 0.35);
		outline-offset: -1px;
	}
}

body.design-lab-v1 .museum-lightbox__nav:hover,
body.design-lab-v1 .museum-lightbox__nav:focus,
body.design-lab-v1 .museum-lightbox__close:hover,
body.design-lab-v1 .museum-lightbox__close:focus,
body.design-lab-v1 .museum-lightbox--minimal .museum-lightbox__close:hover,
body.design-lab-v1 .museum-lightbox--minimal .museum-lightbox__close:focus {
	opacity: 1;
}

body.design-lab-v1 .portfolio-museum__nav-direction {
	color: var(--dl-bronze);
}

body.design-lab-v1 .portfolio-museum__nav-link:hover .portfolio-museum__nav-direction,
body.design-lab-v1 .portfolio-museum__nav-link:focus .portfolio-museum__nav-direction {
	opacity: 0.72;
}

/* Hamburger MENU lines only — shifter-handle, not oy-prev/oy-next sprite arrows */
body.design-lab-v1 #header-bg-check .header-buttons .shifter-handle.main-nav-buttons:after,
body.design-lab-v1 .header.headhesive .shifter-handle.main-nav-buttons:after {
	top: 50%;
	margin-top: -5px;
	right: 0;
	width: 15px;
	height: 2px;
	background: none !important;
	background-image: none !important;
	background-size: auto !important;
	background-color: var(--dl-bronze) !important;
	box-shadow: 0 4px 0 var(--dl-bronze), 0 8px 0 var(--dl-bronze);
}

/* Hamburger on dark header / cover image — light terracotta for contrast */
body.design-lab-v1 #header-bg-check .header-buttons .shifter-handle.oy-dark-bg.main-nav-buttons:after,
body.design-lab-v1 #header-bg-check .header-buttons .shifter-handle.background--dark.main-nav-buttons:after,
body.design-lab-v1 .header.headhesive .shifter-handle.oy-dark-bg.main-nav-buttons:after,
body.design-lab-v1 .header.headhesive .shifter-handle.background--dark.main-nav-buttons:after {
	background-color: var(--dl-bronze-light) !important;
	box-shadow: 0 4px 0 var(--dl-bronze-light), 0 8px 0 var(--dl-bronze-light);
}

/* Mobile header — MENU/PREV/NEXT sit above wide textual logo (oy-logo z-index: 9) */
@media (max-width: 900px) {
	body.design-lab-v1 #header-bg-check .header .header-buttons {
		z-index: 10;
	}
}

/* News / Blog adjacent labels — single posts, index, category, tag, author, date archives */
body.design-lab-v1.single-post .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span:first-child,
body.design-lab-v1.blog .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.older-entries,
body.design-lab-v1.blog .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.newer-entries,
body.design-lab-v1.category .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.older-entries,
body.design-lab-v1.category .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.newer-entries,
body.design-lab-v1.tag .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.older-entries,
body.design-lab-v1.tag .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.newer-entries,
body.design-lab-v1.author .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.older-entries,
body.design-lab-v1.author .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.newer-entries,
body.design-lab-v1.date .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.older-entries,
body.design-lab-v1.date .adjacent-post-links .oy-adjacent-post .post-transition .oy-align span.newer-entries,
body.design-lab-v1 .blog-pager a {
	color: var(--dl-bronze);
}

body.design-lab-v1.single-post .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span:first-child,
body.design-lab-v1.single-post .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span:first-child,
body.design-lab-v1.blog .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.older-entries,
body.design-lab-v1.blog .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.older-entries,
body.design-lab-v1.blog .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.newer-entries,
body.design-lab-v1.blog .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.newer-entries,
body.design-lab-v1.category .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.older-entries,
body.design-lab-v1.category .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.older-entries,
body.design-lab-v1.category .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.newer-entries,
body.design-lab-v1.category .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.newer-entries,
body.design-lab-v1.tag .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.older-entries,
body.design-lab-v1.tag .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.older-entries,
body.design-lab-v1.tag .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.newer-entries,
body.design-lab-v1.tag .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.newer-entries,
body.design-lab-v1.author .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.older-entries,
body.design-lab-v1.author .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.older-entries,
body.design-lab-v1.author .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.newer-entries,
body.design-lab-v1.author .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.newer-entries,
body.design-lab-v1.date .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.older-entries,
body.design-lab-v1.date .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.older-entries,
body.design-lab-v1.date .adjacent-post-links .oy-adjacent-post:hover .post-transition .oy-align span.newer-entries,
body.design-lab-v1.date .adjacent-post-links .oy-adjacent-post:focus .post-transition .oy-align span.newer-entries,
body.design-lab-v1 .blog-pager a:hover,
body.design-lab-v1 .blog-pager a:focus {
	opacity: 0.72;
}

/* ------------------------------------------------------------------ */
/* Mobile preview strip — all portfolio project galleries */
/* Breakpoint: 900px (aligned with desktop Photo Roll handoff)         */
/* ------------------------------------------------------------------ */

@media (max-width: 900px) {
	body.design-lab-v1.single-portfolio {
		--portfolio-preview-thumb-height: 60px;
		--portfolio-preview-thumb-width: 45px;
		--portfolio-preview-thumb-gap: 7px;
	}

	/* Hide theme duplicate Previous/Next Post block — portfolio-museum__nav is canonical */
	body.design-lab-v1.single-portfolio .main-content + .adjacent-post-links {
		display: none !important;
	}

	/* Filmstrip projects: one strip only — hide duplicate artwork grid */
	body.design-lab-v1.single-portfolio .portfolio-museum--filmstrip:has([data-filmstrip]) .portfolio-museum-artworks {
		display: none !important;
	}

	/* [data-filmstrip] photo-roll markup → preview strip */
	body.design-lab-v1.single-portfolio .portfolio-filmstrip {
		display: block;
		max-width: min(94vw, 100%);
		margin: 1.25rem auto 1.5rem;
		overflow: visible;
	}

	body.design-lab-v1.single-portfolio .portfolio-filmstrip__dock-wrap {
		overflow: visible;
		height: auto;
		padding: 0;
		margin: 0;
	}

	body.design-lab-v1.single-portfolio .portfolio-filmstrip__dock-scroller {
		overflow-x: auto;
		overflow-y: hidden;
		height: auto;
		padding: 0;
		margin: 0;
		-webkit-overflow-scrolling: touch;
	}

	body.design-lab-v1.single-portfolio .portfolio-filmstrip__dock {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		width: max-content;
		min-width: min(100%, max-content);
		gap: var(--portfolio-preview-thumb-gap);
		padding: 0.25rem 0 0.5rem;
	}

	body.design-lab-v1.single-portfolio .portfolio-filmstrip__thumb {
		flex: 0 0 auto;
		display: block;
		width: var(--portfolio-preview-thumb-width);
		height: var(--portfolio-preview-thumb-height);
		padding: 0;
		margin: 0;
		opacity: 1;
		transform: none;
		box-shadow: none !important;
		background: transparent;
		transition: none;
	}

	body.design-lab-v1.single-portfolio .portfolio-filmstrip__thumb.is-mini-hidden,
	body.design-lab-v1.single-portfolio .portfolio-filmstrip__thumb.is-mini-active {
		display: block;
		width: var(--portfolio-preview-thumb-width);
		height: var(--portfolio-preview-thumb-height);
		padding: 0;
		background: transparent;
		box-shadow: none !important;
	}

	body.design-lab-v1.single-portfolio .portfolio-filmstrip__thumb img {
		display: block;
		width: var(--portfolio-preview-thumb-width);
		height: var(--portfolio-preview-thumb-height);
		max-width: none;
		object-fit: cover;
		object-position: center center;
	}

	body.design-lab-v1.single-portfolio .portfolio-filmstrip__thumb:focus-visible {
		outline: 1px solid rgba(58, 59, 60, 0.35);
		outline-offset: 2px;
	}

	/* Artwork grid / carousel markup → preview strip (fallback when no filmstrip) */
	body.design-lab-v1.single-portfolio .portfolio-museum-artworks {
		max-width: min(94vw, 100%);
		margin: 1.25rem auto 1.5rem;
	}

	body.design-lab-v1.single-portfolio .portfolio-museum-artworks__grid {
		display: flex;
		flex-wrap: nowrap;
		align-items: center;
		gap: var(--portfolio-preview-thumb-gap);
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		grid-template-columns: unset;
		padding: 0.25rem 0 0.5rem;
	}

	body.design-lab-v1.single-portfolio .portfolio-museum-artworks__thumb {
		flex: 0 0 auto;
		display: block;
		width: var(--portfolio-preview-thumb-width);
		height: var(--portfolio-preview-thumb-height);
		opacity: 1;
		transform: none;
		box-shadow: none !important;
		background: transparent;
		transition: none;
	}

	body.design-lab-v1.single-portfolio .portfolio-museum-artworks__card {
		display: block;
		aspect-ratio: auto;
		width: 100%;
		height: 100%;
		overflow: hidden;
	}

	body.design-lab-v1.single-portfolio .portfolio-museum-artworks__thumb img {
		display: block;
		width: var(--portfolio-preview-thumb-width);
		height: var(--portfolio-preview-thumb-height);
		max-width: none;
		max-height: none !important;
		margin: 0 !important;
		object-fit: cover;
		object-position: center center;
	}

	body.design-lab-v1.single-portfolio .portfolio-museum-artworks__thumb.is-portrait img {
		object-fit: cover;
	}

	body.design-lab-v1.single-portfolio .portfolio-museum-artworks__thumb:focus-visible {
		outline: 1px solid rgba(58, 59, 60, 0.35);
		outline-offset: 2px;
	}

	/* Lightbox — page carries preview strip; no thumb dock inside overlay */
	body.design-lab-v1.single-portfolio .museum-lightbox__thumbs-wrap {
		display: none !important;
	}
}