/*
APS Project CSS File - Comprehensive Usage Documentation

This CSS file contains styles for the All Paintings Store (APS) Django project.
Each style rule has been documented with comments indicating:
- Which templates use the style
- The specific elements/components they style
- Usage context (header, navigation, search, forms, etc.)

Style Categories:
- Global/Layout: Basic page structure and reset styles
- Header/Navigation: Top bar, logo, search bar, navigation menu
- Search: Search results, filters, pagination
- Cards: Artwork/artist display cards with hover effects
- Forms: Contact forms, consultation forms, input styling
- Footer: Footer sections and copyright

Updated: 17 OCT 2025
*/






/* PLEASE DO NOT DO AGGRESSIVE RESET - Global reset styles - used across all pages and templates 

Over-aggressive reset: You wipe all styles, including useful defaults (e.g., form elements, accessibility outlines, link underlines).
Accessibility issues: Removing text-decoration globally makes links hard to identify for users relying on underlines.
Performance cost: * { ... } applies to every element, which can have a tiny performance hit on large pages.
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
	text-decoration: none;
}

*/






/* Body and main background color - used in base.html and all homepage templates */
body,
main {
	background: #EDE9DE;
}
p {
font-family: var(--font-body);
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
}
.text-op-80 {
color:#3E342A;
    opacity: 0.8;
}
.text-op-60 {
color:#3E342A;
    opacity: 0.6;
}
.text-op-0 {
color:#3E342A;
}
/* Top bar background color - used in base_artsdot_top_bar.html and base_allpaintingsstore_top_bar.html */
.container_content {
	background-color: #504943;
}

/* Top bar menu layout - used in base_artsdot_top_bar.html and base_allpaintingsstore_top_bar.html */
.topbar_menu {
    display: flex;
    gap: 30px;
    align-items: center;
}

/* Top bar container - used in base_artsdot_top_bar.html and base_allpaintingsstore_top_bar.html */
.top-bar {
	color: #fff;
	font-size: 14px;
	padding: 10px 0px;
}

/* Top bar links - used in base_artsdot_top_bar.html and base_allpaintingsstore_top_bar.html */
.top-bar a {
	color: #EDE9DE;
	text-decoration: none;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
}

/* Top right side container - used in base_artsdot_top_bar.html and base_allpaintingsstore_top_bar.html */
.topright_side {
    display: flex;
    gap: 24px;
    align-items: center;
}

.topright_side a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	color: #EDE9DE;

}

/* Header container background - used in base_artsdot_header.html and base_allpaintingsstore_header.html */
.header_container {
	background-color: #EDE9DE;
	position: relative;
	z-index: 1000;
	overflow: visible;
}

/* Main header layout - used in base_artsdot_header.html and base_allpaintingsstore_header.html */
.main-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding:20px 0;
}


/* Search bar container - used in base_wahooart_header.html, base_artsdot_header.html, base_allpaintingsstore_header.html */
.search-bar {
	width: 420px;
	position: relative;
	min-width: 420px;
}

/* Search bar input field - used in base_wahooart_header.html, base_artsdot_header.html, base_allpaintingsstore_header.html */
.search-bar input {
	border-radius: 0;
	padding: 5px 10px;
	margin: auto;
	background: #E4DDC7 !important;
	height: 48px;
	border: 1px solid #CCC3AE !important;
	outline: none !important;
	box-shadow: none !important;
	padding-left: 40px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 20px;
	color: #3E342A;
}

.search-bar input:focus  ,  
.search-bar input:autofill , 
.search-bar input:-webkit-autofill,
.search-bar input:-webkit-autofill:hover
{
	background-color: #FFFCF3 !important;
}


/* Search bar placeholder text - used in base_wahooart_header.html, base_artsdot_header.html, base_allpaintingsstore_header.html */
.search-bar input::placeholder {
	color: #3E342A66;
}

/* Search bar icon - used in base_wahooart_header.html, base_artsdot_header.html, base_allpaintingsstore_header.html */
.search-bar img {
	top: 15px;
	position: absolute;
	left: 14px;
}

/* Consultation link/button - used in base_wahooart_header.html, base_artsdot_header.html, base_allpaintingsstore_header.html, base_artsdot_top_bar.html, base_allpaintingsstore_top_bar.html */
.consultation {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	margin-right: 24px;
	color: #8a5723;
	font-weight: bold;
	text-decoration: none;
}

/* Icon group container - used in base_artsdot_header.html and base_allpaintingsstore_header.html */
.icon-group {
	display: flex;
	align-items: center;
	gap: 10px;
}

/* Navigation bar container - used in base_wahooart_header.html, base_artsdot_header.html, base_allpaintingsstore_header.html */
.navbar {
    background-color: #EDE9DE;
	padding:0;
	border-bottom: 1px solid #CCC2AE;
	border-top: 1px solid #CCC2AE;
	position: relative;
	z-index: 1001;
	overflow: visible;
}

/* Navigation menu list - used in base_wahooart_header_links.html and base_allpaintingsstore_header_links.html */
.nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    display: flex;
    gap: 30px;
    justify-content: space-between;
    width: 100%;
}

/* Navigation menu list items - used in base_wahooart_header_links.html and base_allpaintingsstore_header_links.html */
.nav-menu>li {
	position: relative;
	padding:20px 0;
}

/* Navigation menu links - used in base_wahooart_header_links.html and base_allpaintingsstore_header_links.html */
.nav-menu>li>a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #3E342A;
	text-decoration: none;
}

/* Dropdown show on hover - used in base_wahooart_header_links.html, base_allpaintingsstore_header_links.html, language_selector.html, country_selector.html, currency_selector.html */
.dropdown:hover .dropdown-content {
	display: block;
}

/* Nav dropdown: open only via JS (mouse stopped), not :hover - used in base_wahooart_header_links.html, base_allpaintingsstore_header_links.html */
.nav-menu .dropdown:hover .dropdown-content {
	display: none;
}
.nav-menu .dropdown.dropdown-open .dropdown-content {
	display: block;
}
.nav-menu .dropdown > a.nav-dropdown-toggle {
	cursor: pointer;
}
/* bridge gap between title and panel so pointer travel does not close the menu */
.nav-menu > li.dropdown::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 12px;
	pointer-events: none;
}

/* First menu item - extend clickable area to the right */
.nav-menu>li:first-child {
	padding-right: 51px;
	margin-right: -51px;
}

/* Last menu item - extend clickable area to the left */
 .nav-menu>li:last-child {
	padding-left: 51px;
	margin-left: -51px;
} 

/* Middle menu items - extend clickable area to both sides */
.nav-menu>li:not(:first-child):not(:last-child) {
	padding-left: 25px;
	padding-right: 25px;
	margin-left: -25px;
	margin-right: -25px;
}





/* Blur only while a nav mega-menu is open; fade in on open, snap off on close */
main {
	transition: opacity 0.2s ease-in-out;
}

/* Option 2: Dark overlay approach */
main.blurred {
	filter: blur(5px);
	opacity: 0.75;
	transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
}

/* Alternative: Even darker with multiple effects */
main.blurred.darker {
	filter: blur(4px) brightness(0.5);
	opacity: 0.75;
	transition: filter 0.2s ease-in-out, opacity 0.2s ease-in-out;
}
/* Dropdown underline on hover - used in base_wahooart_header_links.html and base_allpaintingsstore_header_links.html */
/* .dropdown:hover > a::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 1.5px;
    background-color: #3E342A;
    bottom: -21px;
    left: 0;
}
 */
/* Dropdown content container - used in base_wahooart_header_links.html, base_allpaintingsstore_header_links.html, language_selector.html, country_selector.html, currency_selector.html */
.dropdown-content.full-width {
    display: none;
    position: absolute;
    top: 60px;
    left: 0%;
    width: max-content;
    background-color: #EDE9DE;
    padding: 40px;
    z-index: 1002;
    transform: translateX(-45%);
    transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;
}


/* First dropdown positioning - used in base_wahooart_header_links.html and base_allpaintingsstore_header_links.html */
.dropdown:first-child .dropdown-content.full-width {
    left: 0;
    transform: translateX(0);
}

/* Last dropdown positioning - used in base_wahooart_header_links.html and base_allpaintingsstore_header_links.html */
.dropdown:last-child .dropdown-content.full-width {
    right: 0;
    left: auto;
    transform: translateX(0);
}

/* Dropdown inner container - used in base_wahooart_header_links.html and base_allpaintingsstore_header_links.html */
.dropdown-inner {
    display: flex;
    max-width: 1200px;
    gap: 40px;
    flex-wrap: wrap;
}

/* Dropdown column layout - used in base_wahooart_header_links.html and base_allpaintingsstore_header_links.html */
.column {
	display: flex;
	flex-direction: column;
	gap: 15px;
	min-width: 220px;
}

/* Dropdown column links - used in base_wahooart_header_links.html and base_allpaintingsstore_header_links.html */
.column a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: clamp(16px , 0.938vw , 18px);
	line-height: 15px;
	color: #3E342A;
	text-decoration: none;
}


/* Logo container positioning - used in base_artsdot_header.html and base_allpaintingsstore_header.html */


/* Main content area - used in base.html and all homepage templates */
main {
	min-height: calc(100vh - 665px);
}

/* Footer section container - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.footer_sec {
	background: #2E2823;
	padding-top: 60px;
	border-bottom: 1px solid #EDE9DE33;
}

/* Footer heading - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.ft_heading {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 25px;
	line-height: 36px;
	text-transform: capitalize;
	color: #EDE9DE;
}

/* Footer paragraph - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.ft_pera {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #EDE9DE;
	margin: 20px 0 40px;
}

/* Footer consultation button - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.consultation_btn {
	border: 1px solid #DE9C28;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #DE9C28;
	padding: 13px 20px;
	text-decoration: none;
}

/* Footer social icons container - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.social_icons {
	margin-top: 40px;
	display: flex;
	gap: 25px;
}

/* Footer links heading - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.links_heading {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	color: #EDE9DE;
	opacity: 0.5;
	margin-bottom: 20px;
}

/* Footer links list container - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.footer_list {
	padding: 0px;
}

/* Footer list items - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.footer_list li {
	margin-bottom: 5px;
}

/* Footer list links - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.footer_list a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 24px;
	color: #EDE9DE;
	text-decoration: none;
	opacity: 0.8;
}

/* Payment list container - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.paymentList {
	padding: 0;
	display: flex;
	gap: 5px;
	margin: 0;
}

/* Copyright section container - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.copyRight_sec {
	background: #2E2823;
	padding: 20px 0;
	display: flex;
}


/* Copyright section container - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.copyRight_sec , .copyRight_sec  a {
	font-size: 16px;
font-weight: 400;
	color: #EDE9DE;
}

/* Copyright right side container - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.rightSide {
	display: flex;
	align-items: center;
}

/* Copyright section text - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.copyRight_sec span {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	color: #EDE9DE;
	opacity: 0.8;
}

/* Copyright text styling - used in base_allpaintingsstore_footer.html and base_artsdot_footer.html */
.copyRight_text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	color: #EDE9DE;
	opacity: 0.6;
	margin-left: auto;
	text-align: right;
}

/* Search section container - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html, museums templates */
.search_sec {
	padding: 20px 160px;
}

/* Navigation list - used in various search and list templates */
ul.nav-list {
    display: flex;
    gap: 15px;
	position: relative;
z-index:9;
    align-items: center;
    padding: 0px;
    margin: 16px 0px 0px;
}

/* Navigation list items - used in various search and list templates */
ul.nav-list li {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0%;
	color: #3E342A;
}

/* Navigation list links - used in various search and list templates */
ul.nav-list a {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0%;
	color: #3E342A;
	text-decoration: none;
	opacity: 1;
	transition: color 0.25s ease, opacity 0.25s ease;
}

ul.nav-list a:hover {
	opacity: 0.65;
}

/* Main heading opacity - used in various search and list templates */
.main-heading {
	opacity: 0.6;
}

/* Search results header - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.search_results {
	padding: 30px 0px 20px;
	display: flex;
	justify-content: space-between;
}

/* Search results count text - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.Showing_text {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 20px;
	color: #3E342A;
}
.Showing_text .form-control {
    border: 1px solid #CCC3AE !important;
border-radius:0;
}

/* Sorting content text - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.sorting_content {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	color: #3E342A;
}
.gap-20 {
gap:20px;
}
.p-20 {
padding:20px;
}
/* Filter panel container - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.filter-panel {
	background-color: #E8E2CD;
	padding: 15px 0px;
	width: 100%;
	/* max-width: 340px; */
	font-size: 14px;
	border: 1px solid #DCD3BF;
}

.filter-title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 25px;
	padding: 0 15px;
}

.filter-title span {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 21px;
	color: #3E342A;
	display: flex;
	gap: 5px;
}

.filter-title a {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	text-decoration: none;
	color: #875D2A;
	text-align: right;
}

.badge-filter {
	background: #D5CBA9;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	color: #3E342A;
	margin: 5px 10px 5px 0px;
	padding: 3px 8px;

}

.badge_list {
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
	margin: 0px;
	padding: 0 15px;
	border-bottom: 1px solid #DCD3BF;
	padding-bottom: 15px;
}

.form-check {
	margin-bottom: 0.3rem;
}

.color-box {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-right: 5px;
	border: 1px solid #aaa;
	vertical-align: middle;
}

.tag-btn {
	background-color: #e1d7b3;
	border: none;
	margin: 2px;
	padding: 4px 8px;
	font-size: 12px;
	border-radius: 3px;
}

.accordion-item {
	background-color: #E8E2CD !important;
	border-bottom: 1px solid #DCD3BF !important;
}

button.accordion-button {
	background: #E8E2CD !important;
	border-radius: 0px !important;
	box-shadow: none !important;
}

.accordion-header,
button.accordion-button {
	margin-bottom: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 2%;
	text-transform: uppercase;
	color: #3E342A !important;
	text-transform: uppercase !important;
}

.accordion-button:not(.collapsed) {
	color: #3E342A !important;
}

/*.accordion-button:not(.collapsed)::after {*/
/*	background-image: url('../img/carret2.svg') !important;*/
/*}*/

/*.accordion-button::after {*/
/*	background-image: url('../img/carret.svg') !important;*/
/*	background-size: auto !important;*/
/*}*/
.accordion-button::after {
    background-size: 74%;
    /*margin-top: 4px/*/
}
.accordion-button:not(.collapsed)::after {
    /*margin-right: 4px;*/
}
.artist_input {
	background: #EDE9DE !important;
	border: 1px solid #DCD3BF !important;
	outline: none !important;
	box-shadow: none !important;
	border-radius: 0px;
	height: 45px !important;
	padding: 12px !important;
	margin-bottom: 20px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	color: #3E342A;
	width: 100%;
}

.artist_input::placeholder {
	color: #3E342A66;
}

.accordion-body {
	padding: 0px 20px 20px !important;
}

.form-check input {
	width: 24px !important;
	height: 24px !important;
	border: 1px solid #877F76 !important;
	background-color: #E8E2CD !important;
	outline: none !important;
padding:0;
	box-shadow: none !important;
}

.form-check input:checked {
	background-color: #3E342A !important;
	border-color: #3E342A !important;
}

.form-check input[type=checkbox] {
	border-radius: 0px !important;
}
.form-check input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E8E2CD'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'/%3E%3C/svg%3E") !important;
    background-size: 100% !important; 
}

.search_sec .form-check {
    margin-bottom: 16px;
    color: #3E342A;
    font-family: var(--font-body);
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    line-height: 100%;
    display: flex;
    letter-spacing: 0%;
    align-items: center;
    gap: 12px;
}
.search_sec .form-check .form-check-input {
 flex-shrink:0;
}

.search_sec .form-check .form-check-label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 30px;
	color: #3E342A;
	display: flex;
	justify-content: space-between;
}

.search_sec .form-check .form-check-label p {
	margin: 0px;
}

#dateSlider,
#priceSlider {
	margin-top: 20px;
}

.noUi-horizontal {
	height: 5px !important;
}

.noUi-target {
	background: #CBC4AA !important;
	border-radius: 4px;
	border: none !important;
	box-shadow: none !important;
}

.noUi-connect {
	background: #3E342A !important;
}

.noUi-horizontal .noUi-handle {
	width: 18px !important;
	height: 18px !important;
	right: -4px !important;
	top: -7px !important;
	border-radius: 50%;
	background: #3E342A;
	box-shadow: none;
	border: none;
}
.error-404 .e_card_form {
   max-width: 100% !important;
}
.noUi-handle:after {
	display: none !important;
}

.noUi-handle:before {
	height: 8px !important;
	width: 8px !important;
	background: #E8E7E6 !important;
	left: 5px !important;
	top: 5px !important;
	border-radius: 50%;
}

ul.colors_list,
.colorPlatte,
.compatibility_list {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	padding: 0;
}

.colors_list li,
.colorPlatte li,
.compatibility_list li {
	padding: 5px 8px;
	background: #E8E2CD;
	border: 1px solid #CAC0AC;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 24px;
	color: #3E342A;
	cursor: pointer;
}

.colors_list li.active,
.colorPlatte li.active,
.compatibility_list li.active {
	background-color: #E4DBBB;
	border: 1px solid #3E342A
}

.colors_list li input,
.compatibility_list li input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
}
/* 
.accordion-item:last-of-type {
	border-bottom: none !important;
}
 */

.reproduction_image_detail .accordion-item {
    border-radius: 0;
    border: 1px solid #DCD3BF;
}
.reproduction_image_detail .accordion-item  button.accordion-button {
    font-family: var(--font-body);
    font-weight: 500;
    font-style: Medium;
    font-size: 19px;
    leading-trim: NONE;
    line-height: 24px;
    letter-spacing: 0%;
    text-transform: capitalize;
    color: #3E342A;
}
/* .search_sec .col-md-4 {
	max-width: 23%;
} */

.search_sec .col-md-8 {
	flex: 0 0 auto;
}

/* Search card section container - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.searchCard_sec {
	padding-left: 15px;
	padding-bottom: 100px;
}

/* Search card column layout - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.searchCard_sec .col-md-4 {
	padding: 0px;
	max-width: 33.33333333%;
}

/* Search card container - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.search_card {
	border-bottom: 1px solid #DCD3BF;
	border-right: 1px solid #DCD3BF;
}

/* .search_card:first-child{
    border-left: 1px solid #DCD3BF;
    
} */

/* Search card row border - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.searchCard_sec .row {
	border-left: 1px solid #DCD3BF;
}

/* Search card top border for first row - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.searchCard_sec .col-md-4:nth-child(-n+3) .search_card {
	border-top: 1px solid #DCD3BF;
}

/* Search card padding and positioning - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.search_card {
	padding: 25px 15px;
	position: relative;
}

/* Search card image container - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.search_img {
	width: 250px;
	height: 285px;
	margin: auto;
	overflow: hidden;
	position: relative;
}

/* Search card body container - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.searchCard_body {
	width: 250px;
	margin: auto;
	margin-top: 30px;
	height: 65px;
}

/* Search card image styling - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.search_img img {
    width: 100%;
    height: 100%;
    max-height: 500px;
    object-fit: cover;
    display: block;
    margin: auto;
    text-align: center;
    object-position: center;
}
.museums-100 .search_img img {
    width: 100%;
    height: 125px;
    max-height: 150px;
    object-fit: cover;
    display: block;
    margin: auto;
    text-align: center;
    object-position: center;
}
/* Art artist information container - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.art-artist {
	display: flex;
	justify-content: space-between;
}

/* Art artist name heading - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.art-artist h2 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 13px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #B23333;
}

/* Art artist name link - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.art-artist h2 a{
	color: #B23333;
	text-decoration: none;
}

/* Art artist additional info - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.art-artist span {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	letter-spacing: 0%;
	text-align: center;
	opacity: 0.5;
	color: #3E342A;
}

/* Art artist additional info link - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.art-artist span a {
	color: #3E342A;
	text-decoration: none;
}

/* Art title styling - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.art-title {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 20px;
	letter-spacing: 0%;
	color: #3E342A;
}

/* Art title link - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.art-title a{
	color: #3E342A;
	text-decoration: none;
}
/* Hover visible overlay on search cards - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.hover_visible {
	width: 250px;
	margin: auto;
	margin-top: 15px;
	/* height: 86px; */
	position: absolute;
	background: #E8E2CD;
	width: 100%;
	left: 0;
	z-index: 99999;
	padding: 0px 18px 25px;
	border-bottom: 1px solid #DCD3BF;
	transition: all 2s ease;
}
.circle-icon , .user-menu-wrapper {
width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #E4DDC7;
    border-radius: 50%;
}
.user-menu-wrapper .aps-user-initial {
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 600;
	line-height: 1;
	color: inherit;
	user-select: none;
	letter-spacing: -0.02em;
}
.user-menu-wrapper .aps-user-initial--compact {
	font-size: 15px;
}
.user-menu-wrapper > a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
/* Header auth: cookie-driven guest vs logged-in icon (do not rely on Bootstrap .d-none; Bootstrap may load async via preload) */
#aps-user-auth-widget .aps-header-auth--hidden {
	display: none !important;
}
#aps-user-auth-widget .aps-user-icon--auth:not(.aps-header-auth--hidden) {
	display: block !important;
}
#aps-user-auth-widget .aps-user-initial-overlay:not(.aps-header-auth--hidden) {
	display: block !important;
}
/* Hover visible overlay paragraph - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.hover_visible p {
	font-family: var(--font-body);
	font-weight: 500;
	font-style: italic;
	font-size: 15px;
	line-height: 24px;
	color: #3E342A;
	margin-bottom: 40px;
	opacity: 0.5;
}

/* Hover visible overlay paragraph links - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.hover_visible p a{
	color: #3E342A;
    text-decoration: none;
}

/* Add to cart button - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.addToCart,
.added {
	background: #875D2A;
	width: 200px;
	display: block;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #EDE9DE;
	text-decoration: none;
	padding: 10px 35px;
}

/* Card bottom container - used in core/fts_search.html, artworks/artwork_list.html, artists/artist_list.html, articles/article_list.html */
.card_bottom {
	display: flex;
	gap: 10px;
	align-items: center;
}

.fav_group {
	border: 1px solid #875D2A;
	padding: 7px 10px;
}

.fav_group.active {
	background: #E4DBBB;
}

.hover_visible {
	display: none;
}

.search_card:hover {
	background: #E8E2CD;
/* 	cursor: pointer; */
	/* border-left: 1px solid #DCD3BF; */
}

.search_card:hover .hover_visible {
	display: block;
	transition: all 2s ease;
}

.showMOre {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 24px;
	letter-spacing: 0%;
	text-transform: uppercase;
	color: #875D2A;
	text-align: center;
	margin-top: 25px;
	cursor: pointer;
}
@media (min-width: 992px) {
.mobile_menu_toggle {
display:none;
}
}



.elevated_interiors_section {
	padding-top: 50px;
}

.curator_section .container,
.visual_guids_section .container {
	width: auto;
	max-width: 100%;
	padding: 0px 160px;
}

.visual_guide_photo_gallery .overlay_img {
	background: #27221D99;
}

.card_content {
	width: 100%;
	max-width: 250px;
	margin: auto;
}










/* full_width_hero_banner_with_background_image - Hero Banner Section
 * 
 * A reusable hero banner section used across multiple page types throughout the site:
 * - User authentication pages (login, signup, password reset, email management)
 * - Top 100 listing pages (artists, artworks, museums, articles)
 * - Service pages (art consultation, art appraisal)
 * - Success/thank you pages (order confirmation, newsletter subscription, consultation requests)
 * 
 * Provides a consistent 500px high, full-width banner with centered background image.
 * The default background (top100.jpg) is often overridden inline per page with specific images.
 * The name "full_width_hero_banner_with_background_image" is historical but the class serves as a general-purpose hero banner.
 */
 


.full_width_hero_banner_with_background_image {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	color: #fff;
	font-family: var(--font-title);
	letter-spacing: 0.4px;
	padding:0;
	text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4), -2px -2px 5px rgba(0, 0, 0, 0.2);
}
@media (min-width: 1820px) {
.full_width_hero_banner_with_background_image {
  
    height: 700px; 
}
}
  
  /* Background image layer with zoom animation DEFAULT IMAGE */
  .full_width_hero_banner_with_background_image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url('/static/images/hero_banner.jpg') center center / cover no-repeat;
	animation: slowZoomScale 30s ease-in-out infinite;
	z-index: 0;
  }
   
  /* Background image layer with zoom animation */
  .full_width_hero_banner_with_background_image_login::after {
	background: url('/static/images/users/hero_banner_login.jpg') center center / cover no-repeat;
  }

  
  /* Background image layer with zoom animation */
  .full_width_hero_banner_with_background_image_art_consultation::after {
	background: url('/static/images/orders/art_consultation_header.jpg') center center / cover no-repeat;
  }

   
  /* Background image layer with zoom animation */
  .full_width_hero_banner_with_background_image_top100::after {
	background: url('/static/images/hero_banner.jpg') center center / cover no-repeat;
  }

   


  
/* 💎 Golden gradient overlay that shimmers dynamically */
.full_width_hero_banner_with_background_image::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
	  120deg,
	  rgba(255, 215, 0, 0.25) 0%,
	  rgba(255, 255, 255, 0.08) 25%,
	  rgba(0, 0, 0, 0.2) 50%,
	  rgba(255, 215, 0, 0.25) 100%
	);
	background-size: 200% 200%;
	animation: goldenShimmer 8s linear infinite; /* ✅ faster & visible shimmer */
	mix-blend-mode: overlay;
	opacity: 0.5;
	z-index: 1;
	pointer-events: none;
  }
  /* 🌫️ Visible slow zoom using transform scale to maintain aspect ratio */
  @keyframes slowZoomScale {
	0%   { transform: scale(1); }
	25%  { transform: scale(1.02); }
	50%  { transform: scale(1.04); }
	75%  { transform: scale(1.02); }
	100% { transform: scale(1); }
  }
  
  /* ✨ Visible shimmering motion */
  @keyframes goldenShimmer {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
  }
  







  
  /* Background image layer with zoom animation */
  .full_width_hero_banner_with_video::after {
	background: none;
  }

.full_width_hero_banner_with_video {
    position: relative;
  overflow: hidden;
  }
/* Make the video fill the entire section */
.full_width_hero_banner_with_video video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	object-fit: cover;      /* ensures the video fills the section */
	transform: translate(-50%, -50%);
	z-index: 0;
	filter: brightness(0.575); /* darken slightly for text readability */
  }
  
  /* Ensure text and content are above the video */
  .full_width_hero_banner_with_video .container {
	position: relative;
	z-index: 1;
  }
  
  /* Optional: add a subtle dark overlay for readability */
  .full_width_hero_banner_with_video::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 1;
  }























.consultation_content h6 {
	font-family: var(--font-title-accent);
	font-size: 4vh;
	font-weight: 400;
	line-height: 130%;
	color: #E8E5DC;
	text-align: center;
	position: relative;
	z-index:9;
}

.consultation_content h1 {
	font-family: var(--font-title);
	font-size: 8vh;
	line-height: 100%;
	font-weight: 400;
	color: #E8E5DC;
	text-align: center;
	position: relative;
z-index:9;
}

.consultation_content p {
	margin: 33px 85px;
	font-size: 14px;
	line-height: 24px;
	color: #E8E5DC;
	text-align: center;
	position: relative;
z-index:9;
}

.consultation_container {
	width: 100%;
	height: 100%;
}

.consultation_container ul.nav-list li,
.consultation_container ul.nav-list li a {
	color: #EDE9DE;
}

.consultation_bottom {
	background: #2E2823;
	padding: 60px 160px;
	position: relative;
	z-index: 999;
}

.consultation_bottom .row {
	align-items: anchor-center;
}

.consultation_bottom p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	color: #E8E5DC;
}

p.consultation_text {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 0%;
	text-align: right;
	color: #EDE9DE;
	opacity: 0.7;
	margin: 0px 0 0 175px;
}

.process_section {
	padding: 100px 160px;
}

.process_section .col-md-1 {
	padding: 0px;
	width: 2.33%;
	position: relative;
}

span.line {
	display: block;
	width: 1px;
	height: 100%;
	background: #3E342A;
	margin: auto;
}

img.step_icon {
	position: absolute;
	left: 0px;
	top: 0;
	width: 100%;
}

.step-header {
	padding-left: 20px;
	margin-bottom: 80px;
}

.step-content p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 15px;
	line-height: 23px;
	color: #3E342A;
}

.step .step-image {
	width: 360px;
	height: 270px;
	/* object-fit: cover; */
	margin: auto;
	display: block;
}

.step-content {
	padding-bottom: 80px;
	width: 600px;
}

.step-title {
	background: #3E342A;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 13px;
	line-height: 20px;
	letter-spacing: 4%;
	text-transform: uppercase;
	color: #EDE9DE;
	width: 75px;
	height: 28px;
	z-index: 99999;
	position: relative;
	text-align: center;
	line-height: 28px;
}

.step-heading {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 25px;
	line-height: 36px;
	color: #3E342A;
	margin: 20px 0px;
}

.step-number-box {
	background: #E4DDC7;
	border: 1px solid #CCC2AE;
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	text-align: center;
	color: #875D2A;
	margin-right: 15px;
	display: block;
	min-width: 40px;
}

.list-inline-item {
	display: flex;
	margin-bottom: 10px;
}

.step li {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #3E342A;
	margin-bottom: 10px;
}

ul.step_list {
	/* list-style-type: disclosure-closed; */
	padding-left: 20px;
}

ul.step_list li {
	list-style-type: square;
	/* padding-left: 15px; */
}



.step-header small {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 16px;
	line-height: 26px;
	text-transform: uppercase;
	color: #875D2A;
	margin-bottom: 5px;
	display: block;
}

.step-header h4 {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 26px;
	line-height: 31px;
	color: #3E342A;
}

.step-content p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 28px;
	color: #3E342A;
}

.contactfull_width_hero_banner_with_background_image {
	padding: 0px 0px;
	background: #E4DDC7;
	position: relative;
}

.contactfull_width_hero_banner_with_background_image .row {
	padding: 0;
	width: 100%;
}

.consultant_right {
	padding: 0px 100px 0px 160px;
	height: 645px;
	background: url('/static/images/orders/background-dark-wall.jpg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	display: flex;
	align-items: center;
	position: relative;
	flex-direction: column;
	justify-content: center;
}

.consultant_right .overlay_img {
	position: absolute;
	width: 100%;
	height: 100%;
	background: #5049434d;
	top: 0;
	left: 0;
	opacity: 0.8;
}

.consultant_right h1 {
	position: relative;
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 55px;
	line-height: 60px;
	text-transform: capitalize;
	color: #EDE9DE;
	z-index: 9999;
}

.consultant_right p {
	position: relative;
	z-index: 9999;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 26px;
	color: #EDE9DE;
	margin: 25px 0px;
}

.consultant_content {
	display: flex;
	position: relative;
	z-index: 999;
	gap: 20px;
}

.consultant_content img {
	height: 20px;
}

.consultant_content h6 {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 25px;
	line-height: 20px;
	color: #EDE9DE;
	margin-bottom: 5px;
}

.consultant_content span {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 19px;
	color: #EDE9DE;
	letter-spacing: 1px;
}

/* Contact form section container - used in orders/art_consultation.html */
.contactForm_sec {
	padding: 0px 60px 0 70px;
}

/* Form container heading - used in orders/art_consultation.html and users/profile_change_password.html */
.form-container h3 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 36px;
}
.contactForm_sec .image-preview {
    width: 100px;
    height: 100px;
}
.contactForm_sec .image-upload-box {
    width: 100px;
    height: 100px;
}

.manuall.box.input {
    width: 100% !important;
    height: 56px;
    background: #F7F2E1;
}

.manuall.box.input:focus {
    background: #F7F2E1 !important;
}

.manuall.box.input:-webkit-autofill,
.manuall.box.input:-webkit-autofill:hover,
.manuall.box.input:-webkit-autofill:focus,
.manuall.box.input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px #F7F2E1 inset !important;
    background: #F7F2E1 !important;
    -webkit-text-fill-color: #3E342A !important;
}


/* Form container paragraph - used in orders/art_consultation.html and users/profile_change_password.html */
.form-container p {
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	line-height: 20px;
	text-transform: uppercase;
	color: #3E342A;
	opacity: 0.6;
	margin: 0px;
	margin-left: -13px;
}

/* Form container heading span - used in orders/art_consultation.html and users/profile_change_password.html */
.form-container h3 span {
	font-family: var(--font-title);
	font-weight: 400;
	font-size: 17px;
	line-height: 20px;
	letter-spacing: 0%;
	text-transform: capitalize;
	color: #3E342A;
	opacity: 1;
	margin-right: 13px;
}

/* Form step container (hidden by default) - used in orders/art_consultation.html and users/profile_change_password.html */
.form-step {
	display: none;
}

/* Active form step container (visible) - used in orders/art_consultation.html and users/profile_change_password.html */
.form-step.active {
	display: block;
}


.step-light {
	color: #333;
}

/* .form-container .row .col-md-6 {
    padding-right: 10px !important;
} */

/* Form navigation buttons - used in orders/art_consultation.html and users/profile_change_password.html */
.btn-next,
.btn-prev {
	min-width: 100px;
}

/* Form floating label background - used in orders/art_consultation.html and users/profile_change_password.html */
.form-floating>.form-control-plaintext~label::after,
.form-floating>.form-control:focus~label::after,
.form-floating>.form-control:not(:placeholder-shown)~label::after,
.form-floating>.form-select~label::after {
	position: absolute;
	inset: 1rem 0.375rem;
	z-index: -1;
	height: 1.5em;
	content: "";
	background-color: #F7F2E1;
	border-radius: var(--bs-border-radius);
}

/* Form container input fields - used in orders/art_consultation.html and users/profile_change_password.html */
.form-container input {
	background: #F7F2E1 !important;
	border: none !important;
	border-radius: 0px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-transform: uppercase;
	color: #3E342A !important;
	box-shadow: none !important;
}

/* Form floating labels - used in orders/art_consultation.html and users/profile_change_password.html */
.form-floating>label {
    color: #3E342A !important;
    text-transform: uppercase;
    font-size: 13px;
    left: -1px;
    top: -2px;
    font-weight: 500;
}

/* Previous button styling - used in orders/art_consultation.html and users/profile_change_password.html */
.btn-prev {
	width: 200px;
	height: 50px;
	background: transparent !important;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #835e2c !important;
	border: 1px solid #835e2c ! IMPORTANT;
}

.floating_footer {
	display: flex;
	justify-content: end;
	gap: 12px;
	margin-top: 42px;
	padding: 0px;
	position: absolute;
	width: 100%;
	right: 94px;
	bottom: 54px;
}

.upload_img_form label {
	font-size: 14px;
	text-transform: uppercase;
	font-weight: 500;
	color: #3E342A;
	line-height: 20px;
	margin-bottom: 10px;
}

/* Next button styling - used in orders/art_consultation.html and users/profile_change_password.html */
.btn-next {
	width: 200px;
	height: 50px;
	background: #875D2A !important;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-transform: uppercase;
	color: #EDE9DE !important;
	border: 1px solid #835e2c ! IMPORTANT;
}

.custom-dropdown {
	width: 100%;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #f5f1df;
	font-family: sans-serif;
	position: relative;
}

.custom-dropdown .dropdown-header {
	display: flex;
	justify-content: space-between;
	padding: 12px 11px;
	cursor: pointer;
	background: #f5f1df;
	font-weight: bold;
	background: #F7F2E1 !important;
	border: none !important;
	border-radius: 0px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 32px;
	text-transform: uppercase;
	color: #3E342A !important;
	box-shadow: none !important;
	height: 56px;
}

.custom-dropdown .arrow-icon img {
	transition: transform 0.3s ease;
}

.custom-dropdown .dropdown-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	border-top: 1px solid #ddd;
	position: absolute;
	z-index: 9;
	background: #f6f2e1;
	width: 100%;
}

.custom-dropdown .dropdown-list li {
	padding: 9px 11px;
	border-bottom: 1px solid #ddd;
	cursor: pointer;
	font-size: 14px;
	font-weight: 400;
	color: #3E342A;
}

.custom-dropdown .dropdown-list li:hover {
	background: #F3ECD5;
}

.custom-dropdown.open span.arrow-icon {
	transform: rotate(180deg);
}

/* Arrow rotate when open */
.custom-dropdown .custom-dropdown.open .arrow-icon img {
	transform: rotate(180deg);
}

/******************* Small image upload Start Here ****************/
.image-upload-container {
	display: flex;
	gap: 10px;
	align-items: center;
}

.image-preview {
	max-width: 300px;
	height: 180px;
	overflow: hidden;
	position: relative;
}

.image-preview img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.form_produc .image-upload-box {
	width: 150px;
	height: 180px;
}
.image-upload-box {
	text-align: center;
	width: 54px;
	height: 54px;
	background: #F7F1E0;
	border: 1px dashed #877F76;
	display: flex;
	justify-content: center;
	align-items: center;
/* 	margin-bottom: 12px; */
}

.image-preview-list-box {
	display: none;
}

#image-preview-list {
	display: flex;
	gap: 12px;
}

.upload_img_form span {
	color: #B23333;
}

.loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	background: #0F1114B2;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.9;
}

.form-floating input {
	font-size: 13px;
	color: #3E342A;
	font-weight: 400;
}

.loader::after {
	content: "";
	border: 3px solid #ccc;
	border-top: 3px solid #333;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

.showMainResulsImage p a {
    color: #ffffff;
}

.card-body-art ul.list-unstyled.card-body-art-content.mb-0 li.d-flex.align-items-center.mb-2 a img {
    height: 65px;
    min-height: 64px;
}

.art-curator {
	display: flex;
	gap: 40px;
}

.art-curator .signature-caption {
	text-align: left;
}

.art-curator .signature-caption h3 {
	display: block;
	margin-bottom: 10px;
	color: #875D2A;
	font-size: 33px;
	line-height: 100%;
}

.art-curator .signature-caption p {
	font-size: 36px;
	line-height: 19px;
	color: #3E342A;
	margin-left: 0px;
}

.art-curator .signature-caption .signature-text {
	font-size: 15px;
	width: 100%;
	margin: 31px 7px;
}

.thank_you img {
	width: 64px;
	height: 64px;
}

.thank_you h3 {
	display: block;
	font-family: var(--font-title);
	color: #3E342A;
	font-weight: 400;
	font-size: 34px;
	line-height: 40px;
	margin: 22px 0px 20px;
}

.thank_you p {
	text-transform: capitalize;
	font-size: 15px;
	font-weight: 400;
	line-height: 26px;
	margin-bottom: 22px;
}

.proceed_box {
	margin-top: 14px;
}

.proceed_radio_box {
	position: relative;
	margin-bottom: 8px;
}

.proceed_box input[type="radio"] {
	height: 18px;
	width: 18px;
	position: absolute;
	top: -3px;
	left: -12px;
	appearance: none;
	background: #e3dec7 !important;
	border-radius: 50%;
}

.proceed_box input[type="radio"]:after {
	background-color: #e7e3cd;
	border-radius: 25px;
	content: '';
	display: block;
	height: 18px;
	left: 0px;
	position: relative;
	top: 0px;
	width: 18px;
	border: 1px solid #877F76;
}

.proceed_box input[type="radio"]:checked:after {
	background-color: #3E342A;
	width: 12px;
	height: 12px;
	position: relative;
	top: 3px;
	left: 3px;
	outline: 1.5px solid #3E342A;
	outline-offset: 3px;
}

.proceed_radio_box label {
	margin-left: 29px;
	color: #3E342A;
	font-size: 16px;
}

.img_extention {
	color: #3E342A;
	font-size: 14px;
	font-weight: 400;
	font-style: italic;
	margin-bottom: 11px;
	display: none;
}


.response-method {
	font-family: sans-serif;
	background: #f4ecd8;
	padding: 20px;
	max-width: 500px;
	border-radius: 10px;
}

.response-method h3 {
	margin-bottom: 15px;
}

.response-method label {
	display: block;
	margin-bottom: 10px;
}

.video-consultation {
	margin-top: 22px;
	display: flex;
}

.calendar input[type="date"] {
	padding: 8px;
	font-size: 16px;
	margin-bottom: 20px;
}

.calendar {
	width: 92%;
}

.timeslots {
	width: 100%;
	border-left: 1px solid #3E342A1A;
	padding-left: 33px;
}

.timeslots h4 {
	font-size: 14px;
	color: #3E342A;
	font-weight: 500;
	line-height: 20px;
	margin-bottom: 14px;
	padding-top: 11px;
}

.sloat-btn {
	display: flex;
	gap: 10px;
}

.time-btn {
	padding: 8px 14px;
	background: unset;
	border: 1px solid #3E342A4D;
	cursor: pointer;
	transition: all 0.3s ease;
	width: 92px;
	height: 36px;
	line-height: 19px;
	margin-bottom: 10px;
	color: #3E342A;
	font-size: 14px;
}
.artworks-container {
    font-family: var(--font-body);
    margin: 20px auto;
    max-width: 1400px;
    padding: 20px;
    border: 1px solid #DCD3BF;
    background-color: #E8E2CD;
    border-radius: 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.time-btn:hover {
	background: #3E342A;
	color: #EDE9DE;
}
.card {
    border: 1px solid #DCD3BF;
    border-radius: 0;
    background-color: #E8E2CD;
    padding: 20px;
}

.btn-group {
	margin-top: 20px;
}

.btn-group button {
	padding: 10px 20px;
	border: none;
	background: #8c7a5f;
	color: #fff;
	cursor: pointer;
	border-radius: 5px;
	margin-right: 10px;
}

.btn-group button:hover {
	background: #a08c72;
}









/*********date picker css ***********/
/*.calendar input {*/
/*    visibility: hidden;*/
/*}*/
span.ui-datepicker-month {
	color: #3E342A;
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.ui-datepicker th {
	font-weight: 400;
	font-size: 14px;
	color: #3E342A99;
	line-height: 20px;
}

span.ui-datepicker-year {
	display: none;
}

.ui-widget.ui-widget-content {
	border: 0;
	margin-left: -4px;
}

.ui-widget-content {
	border: 0px;
	background: unset;
}

.ui-datepicker td span,
.ui-datepicker td a {
	text-align: center;
}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 0;
	background: unset;
	font-weight: 400;
	color: #3E342A;
	font-size: 14px;
}

.ui-widget-header {
	border: 0;
	background: unset;
}

a.ui-state-default {
	width: 32px;
	height: 32px;
	line-height: 26px;
}


.ui-datepicker .ui-datepicker-header {
	display: flex;
	justify-content: center;
	align-items: center;
}

.ui-datepicker .ui-datepicker-title {
	width: 20%;
}

.ui-datepicker .ui-datepicker-prev {
	left: 78px;
	top: 3px;
}

.ui-datepicker .ui-datepicker-next {
	right: 78px;
	top: 3px;
}

.ui-icon-circle-triangle-w {
	background-position: unset;
	transform: rotate(-90deg);
}

.ui-icon-circle-triangle-e {
	background-position: unset;
	transform: rotate(90deg);
}
/* Popup Container */



/*********date picker css ***********/
/******************* Small image upload End Here ****************/






/* Search Page */
.searchCard_sec .col-md-3 {
    padding: 0;
    border: 1px solid #DCD3BF;
    border-left: 0;
}
.custom_search .row .col-md-3,
.custom_search .row .col-md-4.col-12.col-lg-4.col-xl-3{
    border: 1px solid #DCD3BF;
}
.custom_search .search_card {
    border: 0;
    border-bottom: 1px solid #DCD3BF;
}
h3.search_subtitle {
	gap: 12px;
    text-align: center;
    padding: 20px 0;
    font-size: 20px;
    text-transform: uppercase;
    color: #aea399;
}
h3.search_subtitle a {
    gap: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
	font-size: 20px;
	color: #875D2A;
}
h3.search_subtitle a span {
    background: #E8E2CD;
    width: 32px;
    height: 32px;
    display: flex;
    border-radius: 100%;
    font-size: 14px;
    line-height: 20px;
    color: #875D2A;
    align-items: center;
    justify-content: center;
}
.custom_search .search_card .searchCard_body {
    height: 140px;
}
.custom_search .search_card .art-artist h2 {
    text-align: left;
    margin-bottom: 14px;
}
.custom_search .search_card .art-artist h2 a {
    max-width: 25ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    display: inline-block;
    font-size: 14px;
}
.custom_search .search_card .art-artist span {
    text-align: right;
    font-size: 16px;
}
.custom_search .art-title {
    font-size: 16px;
    line-height: 24px;
}
.custom_search .search_card .hover_visible p {
    font-style: normal;
    font-size: clamp(14px ,0.833vw ,16px );
    line-height: 24px;
    font-weight: 400;
}
.search_more {
    padding: 25px 15px;
}
.search_more a.btn-next {
    width: 100%;
    height: auto;
    display: inline-block;
    border: 1px solid #875D2A !important;
    background: transparent !important;
    color: #875D2A !important;
    padding: 15px;
    transition: 0.4s;
}
.custom_search .search_card .art-title a{
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sorting_content select.custom-select {
    background: url("/static/images/arrow-down.png") no-repeat right center;
    background-size: 12px;
}
.custom_search .cartbtn_group {
    width: 100%;
}
.custom_search .cartbtn_group a.addToCart {
    font-size: 16px;
    line-height: 20px;
	width:100%;
}
@media (min-width: 767px) and (max-width: 1200px) {
	.custom_search .search_card .searchCard_body {
    height: 120px;
}
.custom_search .search_card .art-artist h2 a {
    font-size: 10px;
/*     max-width: 12ch; */
}
.custom_search .search_card .art-artist span {
    font-size: 10px;
}
.custom_search .art-title {
    font-size: 15px;
    line-height: 22px;
}
h3.search_subtitle {
    font-size: 18px;
}
}


 


/**** SEARCH LISTS ***********/


.custom_search .search_card {
    border-bottom: 0  !important;
}
.custom_search .search_card .search_img,
.custom_search .search_card .searchCard_body {
    width: 100%;
    height: auto !important;
}
.custom_search .search_card .hover_visible {
    width: 100%;
}
.custom_search .search_card .card_content {
    width: 100%;
    height: auto !important;
    max-width: 100% !important;
}




























/**************GroupBy**************/
p.Showing_text1 {
    font-size: 24px;
    line-height: 40px;
}
p.Showing_text1 span {
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    color: #3E342A;
}
.sidebar_box {
    background: #E8E2CD;
    border: 1px solid #00000000;
    margin-bottom: 10px;
    transition: all 0.4s;
}
.sidebar_box:hover, .sidebar_box.active {
    border: 1px solid #3E342A;
}
h3.sidebar_box_title {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    color: #3E342A;
    margin-bottom: 15px;
}
h3.sidebar_box_title a {
    color: #3E342A;
}
ul.Sidebar_tags {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
ul.Sidebar_tags a,
ul.Sidebar_tags li button.catalog-nav-btn {
    padding: 5px;
    background: #D5CBA9;
    color: #3E342A;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

/* Edit-request example chips (e.g. photo_to_restyled_masterpiece): same look as Sidebar_tags, 20% smaller spacing and type */
ul.sidebar_tags_edit_request_examples {
    margin-top: calc(10px * 0.8);
    margin-bottom: calc(15px * 0.8);
    display: flex;
    flex-wrap: wrap;
    gap: calc(10px * 0.8);
    list-style: none;
    padding-left: 0;
}
ul.sidebar_tags_edit_request_examples li {
    margin: 0;
    list-style: none;
}
ul.sidebar_tags_edit_request_examples a.edit-request-example {
    padding: calc(5px * 0.8);
    background: #D5CBA9;
    color: #3E342A;
    font-size: calc(16px * 0.8);
    line-height: calc(24px * 0.8);
    font-weight: 400;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
}

p.sidebar_box_description {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #3E342A;
}
.showMainResuls {
	margin-bottom: 20px;
}
.showMainResulsTitle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}
.showMainResulsTitle h3 {
    display: flex;
    color: #3E342A;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    gap: 10px;
    margin: 0;
	align-items: center;
}
.showMainResulsTitle h3 span {
	display: flex;
	min-width: 32px;
	height: 32px;
	padding: 0 12px; /* horizontal padding for rectangle body */
	align-items: center;
	justify-content: center;
	border-radius: 9999px; /* ensures fully rounded ends */
	background: #E4DDC7;
	color: #875D2A;
	font-size: 14px;
	line-height: 20px;
	width: fit-content;
}
.showMainResulsTitle a,
.showMainResulsTitle button.catalog-nav-btn {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #875D2A;
}
.showMainResulsBox {
    background: #E4DDC7;
    min-height: 400px;
}
.showMainResulsImage {
    position: relative;
    height: 100%;
	min-height: 400px;
	overflow: hidden;
}
/* Slider card container — overflow:hidden clips zoom; position:relative anchors ::after veil on per-site hover effects */
.artist_slid_box {
    position: relative;
    overflow: hidden;
}
.showMainResulsImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.showMainResulsImage h3 {
    position: absolute;
    top: 20px;
    left: 20px;
    margin: 0;
    background: #3E342AB2;
    padding: 8px;
    color: #EDE9DE;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
}
.showMainResulsImage h3 a{

    color: #EDE9DE;

}
.showMainResulsImage p {
    font-weight: 400;
    font-style: Italic;
    font-size: 16px;
    line-height: 24px;
    color: #ffffff;
    margin: 0;
    position: absolute;
    bottom: 20px;
    left: 20px;
}
.showResultsItems .row.align-items-center {
	margin-bottom: 20px;
}
.showMainResulsBox .col-md-8.col-md-82 {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-right: 30px;
}
.showResultsItems img {
    max-width: 100%;
}
.showResultsItems h3 a, .showResultsItems h3 {
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    text-transform: uppercase;
    color: #B23333;
	margin:0;
}
.artwork_list_additional_values h3 {
    font-weight: 500;
    font-size: 14px;
    line-height: 130%;
    color: #3E342A;
    margin: 0;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.artwork_list_additional_values h3 a {
    color: #3E342A;
}
.showResultsItems h4, .showResultsItems p.article-keywords, .showResultsItems p {
    font-size: 14px;
    line-height: 14px;
    color: #3E342A;
    margin: 0;
    display: inline-block;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}
.showResultsItems h4 a, .showResultsItems p.article-keywords a, .showResultsItems p a {
    color: #3E342A;
}
.showResultsItems h4 button.catalog-nav-btn,
.showResultsItems p.article-keywords button.catalog-nav-btn,
.showResultsItems p.article-tone-style button.catalog-nav-btn,
.showResultsItems p button.catalog-nav-btn {
    color: #3E342A;
}
.slider-container {
    width: 100%;
    margin: auto;
    position: relative;
    margin-bottom: 20px;
}
input[type=range] {
	-webkit-appearance: none;
    width: 100%;
    height: 6px;
    background: #CCC2AE;
    border-radius: 0;
    outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
    height: 6px;
    background: #CCC2AE;
    border-radius: 0;
}
input[type=range]::-moz-range-track {
    height: 6px;
    background: #CCC2AE;
    border-radius: 0;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #875D2A;
    border-radius: 50%;
    cursor: pointer;
    margin-top: -5px;
    border: 0;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
input[type=range]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    background: #875D2A;
    border-radius: 50%;
    cursor: pointer;
    border: 0;
    box-shadow: 0 0 2px rgba(0,0,0,0.3);
}
.labels {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
    color: #555;
}
.numeric_slider_bar {
    width: 100%;
    margin-bottom: 20px;
}
.numeric_slider_bar .labels span a {
    color: #3E342A;
    text-decoration: none;
    font-weight: 500;
}
form.countrySearchForm {
    margin-bottom: 20px;
    width: 100%;
    position: relative;
}
form.countrySearchForm input[type="text"] {
    width: 100%;
    border: 1px solid #CCC3AE;
    background: #E4DDC7;
    padding: 10px 10px 10px 32px;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
}
form.countrySearchForm i.fa.fa-search {
    position: absolute;
    top: 12px;
    left: 10px;
    color: #3E342A;
}
.sortABC {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    line-height: 20px;
    font-weight: 400;
    color: #3E342A;
}
.sortABC a {
    color: #3E342A;
}
.sortABC span {
    opacity: 0.5;
    cursor: pointer;
}
.sortABC span.active {
    opacity: 1;
    position: relative;
}
.sortABC span.active:after {
    content: ".";
    position: absolute;
    bottom: -7px;
    left: 35%;
    font-weight: bold;
    font-size: 20px;
}
.sortABC span.disabled {
    opacity: 0.4;
    cursor: none;
}

.steps_count {
margin-bottom:8px;
}

@media (min-width: 768px) {
    .col-md-4.col-md-42 {
		width: 33.33333333% !important;
		max-width: 33.33333333% !important;
	}
	.col-md-8.col-md-82 {
		width: 66.66666667% !important;
	}
.popup-content {
padding:0 80px;
}
}
@media (max-width: 567px) {
.subscription-popup-custom .popup-content-modal-window-centered-positioning-active-state {
    max-width: 340px !important;
}
}

@media (max-width: 768px) {
.showResultsItems h3 a, .showResultsItems h3 {
    margin-top: 12px;
}
.showResultsItems img {
    width: 100%;
}
.nav-menu>li:last-child {
	padding-left: 0 !important;
	margin-left: 0 !important;
}
.subscription-popup-custom .popup-content-modal-window-centered-positioning-active-state {
    max-width: 440px !important;
}
}
@media (max-width: 991px) {
.dropdown-content.full-width {
    position: relative;
    top: 0;
    left: 0%;
    width: fit-content;
    padding: 16px;
    margin-top: 7px;
    z-index: 999;
    transform: translateX(0%);
}
}
@media (max-width: 992px) {
.popup-badge {

    display: none;

}
}
@media (max-width: 768px) {
.hover_visible p {
	
	margin-bottom: 24;
	opacity: 0.5;
}
.popup-body h3 {
    color: #EDE9DE !important;
    font-size: 36px !important;
    margin-bottom: 14px !important;
    line-height: 120% !important;
}
.popup-badge {

    display: none;

}
.btn-popup {
    border: 1px solid #F0B653 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    width: max-content !important;
    color: #F0B653 !important;
    padding: 10px 16px !important;

}

.gap-20 {
    gap: 12px;
}
.popup-content {
padding: 34px !important;
}
.popup-body {
    background-color: #504943 !important;
}
	.showMainResulsBox .col-md-8.col-md-82 {
    	width: 100% !important;
    	padding-left: 30px;
	}

.dropdown-inner {
    flex-direction: column;
    gap: 16px;

}
.dropdown-inner .column {
    border-right:0 !important;
    padding-right: 0px !important;
    min-width: fit-content;
}
.column a {
font-size: 13px;
}

.section-title-art {

    font-size: 28px !important;
    line-height: 130% !important;
 
}
.section-description-art {
    margin-bottom: 0px !important;
    font-size: 14px !important;
}
}
/**************GroupBy**************/








































/* ===========================================
   MODAL POPUP STYLING CLASSES - JAVASCRIPT INTEGRATION
   ===========================================

   These CSS classes replace inline styles previously applied by JavaScript functions.
   Used by showNewsletterPopup(), showArtSuggestionsPopup(), closeSubscriptionPopup(),
   and closeArtSuggestionsPopup() functions to add/remove modal styling dynamically.

   Classes follow 5-7 word naming convention for optimal semantic clarity:
   - popup-overlay-full-screen-background-blur-effect-active-state: Full-screen overlay with blur effect in active state (7 words)
   - popup-content-modal-window-centered-positioning-active-state: Modal content with centered positioning in active state (7 words)
   - popup-header-modal-section-styled-layout-active-state: Modal header section with styled layout in active state (7 words)
   - popup-body-modal-content-area-styled-active-state: Modal body content area styled in active state (7 words)
   - popup-form-input-field-modal-styled-formatting-active-state: Form input field with modal styled formatting active (7 words)
   - popup-submit-button-modal-styled-primary-appearance-active-state: Submit button modal styled primary appearance active (6 words)
   - popup-overlay-background-hidden-inactive-state: Popup overlay with hidden background in inactive state (7 words)
   - body-scroll-prevention-active-state: Body element with scroll prevention in active state (6 words)

   All classes use !important to ensure they override existing styles when applied.
   ========================================== */

/* Full-screen popup overlay with background blur effect active */
.popup-overlay-full-screen-background-blur-effect-active-state {
    display: block !important;
    z-index: 999999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px) !important;
    /* Fade-in (on open) duration is 1s */
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 1s ease !important;
    pointer-events: auto !important;
}

/* Popup content modal window with centered positioning active */
.popup-content-modal-window-centered-positioning-active-state {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: white !important;
    border-radius: 0px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    max-width: 500px !important;
    width: 100% !important;
/*     height: 618px !important; */
max-width:1117px !important;

    /* overflow-y: auto !important; */
    z-index: 1;
    padding: 0 !important;
}

/* Popup header modal section with styled layout active */
.popup-header-modal-section-styled-layout-active-state {
    padding: 20px 25px 15px !important;
    border-bottom: 1px solid #e9ecef !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Popup body modal content area styled active */
.popup-body-modal-content-area-styled-active-state {
}

/* Form input field modal styled formatting active state */
.popup-form-input-field-modal-styled-formatting-active-state {
    width: 100% !important;
    padding: 10px !important;
    margin-bottom: 15px !important;
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    font-size: 14px !important;
}

/* Submit button modal styled primary appearance active */
.popup-submit-button-modal-styled-primary-appearance-active-state {
    background-color: #E7C685 !important;
    color: #30271D !important;
    border: 1px solid #E7C685 !important;
    padding: 10px 20px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    width: 100% !important;
}

/* Popup overlay background hidden in inactive state */
.popup-overlay-background-hidden-inactive-state {
    /* Fade-out (on close) duration is 0.5s */
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.5s ease !important;
    pointer-events: none !important;
}

/* Body element scroll prevention in active state */
.body-scroll-prevention-active-state {
    overflow: hidden !important;
} 


.btn-popup {
    border: 1px solid #F0B653 !important;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    text-transform: uppercase;
    width: fit-content;
    color: #F0B653;
    padding: 13px 20px;
    display: flex;
    margin: auto;
    text-decoration: none;
    background-color: transparent !important;
    border-radius: 0 !important;
}
.popup-badge {
    height: 70px;
    position: absolute;
    top: -21px;
    width: 96px !important;
    left: 50%;
    transform: translateX(-50%);
}
/* popup style */

button.popup-close {
    position: absolute;
    top: 10px;
    right: 15px;
    background-color: transparent !important;
    border: none !important;
    color: #EDE9DE !important;
    width: auto !important;
    font-size: 30px;
    z-index: 10;
    cursor: pointer;
}

.popup-body h3{
    color: #EDE9DE !important;
    font-family: var(--font-title);
    font-weight: 400;
    font-style: Regular;
    font-size: 56px;
    margin-bottom: 24px;
    leading-trim: NONE;
    line-height: 56px;
    letter-spacing: 0%;
    text-align: center;
}

.popup-body {
    background-color: #504943 !important;
}

.popup-body .form-control {
    background-color: #F7F2E1 !important;
    border-radius: 0 !important;
    color: #3E342A !important;
}
.popup-body .form-control::placeholder {

    color: #3E342A !important;

}

.popup-body .pop-para {
    font-family: var(--font-body);
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
color:#EDE9DE;
    leading-trim: NONE;
    line-height: 24px;
    letter-spacing: 0%;
    text-align: center;
    
}

label.footer-label-custom {
    display: none;
}





















/* ===========================================
   TOP MENU HTML STYLING CLASSES : COUNTRY LANGUAGE CURRENCY SELECTOR
   ===========================================

   
   ========================================== */
   .top_dropdown_custom_dropdown_container_box {
	position: relative;
	display: inline-block;
  }



.top_dropdown_custom_dropdown_container_box.open .top_dropdown_menu_list_block {
    display: block;
}
 button.top_dropdown_toggle_button_main_style.open {
    background-color: #FFFCF3;
    color: #504943;
    border-radius: 7px 7px 0 0;
}
.side_nav .top_dropdown_toggle_button_main_style {
    color: #3e342a !important;
}
.top_dropdown_toggle_button_main_style {
    padding: 8px;
    font-size: 14px;
    background-color: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    letter-spacing: 0%;
    position: relative;
    display: flex;
    gap:8px;
    align-items: center;
    justify-content: space-between;
}

.top_dropdown_toggle_button_main_style::after {
    content: "\f078"; 
    font-family: "Font Awesome 5 Free"; 
    font-weight: 900; 
    transition: transform 0.3s ease;
}

.top_dropdown_toggle_button_main_style.open::after {
    transform: rotate(180deg);
}

.top_dropdown_menu_list_block {
    display: none;
    position: absolute;
    border-radius: 0 7px 7px 7px;
    background: #FFFCF3;
    /* border: 1px solid #ddd; */
    max-height: 250px;
    overflow-y: auto;
    z-index: 1000;
    list-style: none;
min-width: 170px;
    padding: 0;
    margin: 0;
    width:fit-content;
}
  
/*   .top_dropdown_item_list_element {
	border-bottom: 1px solid #eee;
  } */
  
.topright_side  .top_dropdown_item_button_clickable {
    display: block;
    width: 100%;
    padding: 5px 12px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font-body);
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    leading-trim: NONE;
    line-height: 32px;
    letter-spacing: 0%;
    color: #504943;
    display: flex;
    align-items: center;
    gap: 10px;
	
}

.top_dropdown_item_button_clickable img {
    width: 25px;
    height: 17px;
}
img.top_dropdown_flag_icon_image_style {
    border-radius: 3px;
}
  .top_dropdown_item_button_clickable:hover,
  .top_dropdown_item_active_selected_style {
	background: #EDE9DE;
  }
  




.profile_picture_top_header_initiales {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
	line-height: 44px;
	color: #3E342A;
	font-weight: 500;
	font-size: 19.43px;
}





/* =====================================================
   mouseover_effect_images — baseline hook for entity images
   Per-site CSS files define the actual visual effect.
   ===================================================== */
img.mouseover_effect_images {
    /* transition defined per-site */
}

/* =====================================================
   mouseover_effect_texts — baseline for opt-in text links
   (nav, footer, breadcrumb anchors; not image links or buttons)
   Per-site CSS may extend this with site-specific transitions.
   ===================================================== */
a.mouseover_effect_texts {
    transition: color 0.25s ease, opacity 0.25s ease;
}
a.mouseover_effect_texts:hover {
    opacity: 0.8;
}

.buy_page_main_artwork_image {
	width: 100%;
	height: auto;
	object-fit: contain;
	transition: opacity 0.25s ease;
	}
.artwork-image-frame-fade-out {
	opacity: 0;
	}
	
	
	
.form_produc2 .optional_add .option_text > div span.yellow_cont a {
    display: inline-block !important;
}	
.form_produc2 .optional_add .option_text > span span.yellow_cont a {
    display: inline-block !important;
} 

.optional_add .option_text > div span:last-child { 
    margin-left: auto;
    flex-shrink: 0; 
}

.custom_search .col-sm-12.col-md-6.col-lg-4.col-xl-3 {
    border: 1px solid #DCD3BF;
}


.artist-description-clamp {
    --line-height: 1.5;
    max-height: calc(4 * var(--line-height) * 1em);
    line-height: var(--line-height);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    transition: max-height 0.3s ease-in-out, -webkit-line-clamp 0.3s ease-in-out;
}

.card:hover .artist-description-clamp {
    max-height: 500px; 
    -webkit-line-clamp: unset;
    white-space: normal;
}










































.color-search-page .slider-container {
    background: #f1f1f1;
    padding: 30px 40px 50px;
    margin-bottom: 30px;
    border: 1px solid #e5e5e5;
  }
  .color-search-page .slider-container.disabled {
    opacity: 0.5;
  }
  .color-search-page .slider-container.disabled .noUi-target {
    opacity: 0.3;
    pointer-events: none;
  }
  .color-search-page .slider-container.disabled .slider-header label {
    pointer-events: none;
  }
  .color-search-page .slider-container.disabled small {
    pointer-events: none;
  }
  .color-search-page .slider-header {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
  }
  .color-search-page .slider-checkbox {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    cursor: pointer;
    pointer-events: auto;
    flex-shrink: 0;
  }
  .color-search-page .slider-header label {
    font-weight: 400;
    font-size: 1.4em;
    color: #1a1a1a;
    display: flex;
    justify-content: space-between;
    flex: 1;
    letter-spacing: 0.02em;
    margin: 0;
  }
  .color-search-page .slider-container small {
    color: #666;
    display: block;
    margin-bottom: 35px;
    font-size: 0.95em;
    font-style: italic;
    line-height: 1.4;
  }
  
  /* Slider Track Styles */
  .color-search-page .slider-container .noUi-target {
    border: none;
    height: 6px;
    border-radius: 0;
    box-shadow: none;
    background: #e0e0e0;
    border: 1px solid #e0e0e0;
    cursor: pointer;
  }

  /* Specific Gradients for each metric */
  .color-search-page #brightness-slider .noUi-connects { background: linear-gradient(to right, #000000, #ffffff); }
  .color-search-page #contrast-slider .noUi-connects { background: linear-gradient(to right, #808080, #000000 50%, #ffffff); }
  .color-search-page #harmony-slider .noUi-connects { background: linear-gradient(to right, #ff0000, #00ff00); } /* Dissonant to Harmonious */
  .color-search-page #variance-slider .noUi-connects { background: linear-gradient(to right, #cccccc, #ff00ff); } /* Low to High variance */
  .color-search-page #saturation-slider .noUi-connects { background: linear-gradient(to right, #808080, #ff0000); } /* Grayscale to Color */
  .color-search-page #luminance-slider .noUi-connects { background: linear-gradient(to right, #000000, #ffffff); }
  .color-search-page #intensity-slider .noUi-connects { background: linear-gradient(to right, #f0f0f0, #ff0000); }
  
  /* Hue Slider (Rainbow) */
  .color-search-page #color-hue-slider {
    height: 15px;
    background: linear-gradient(to right, 
      hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), 
      hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), 
      hsl(360, 100%, 50%)
    );
  }

  .color-search-page .slider-container .noUi-connect {
    background: transparent; /* Let container background show through */
  }

  /* Pips (Scale Markers) */
  .color-search-page .slider-container .noUi-pips {
    font-size: 11px;
    font-weight: 500;
    color: #999;
    margin-top: 8px;
  }
  .color-search-page .slider-container .noUi-marker {
    background: #d4af37;
    width: 1px;
  }
  
  .color-search-page .color-preview {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid #d4af37;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    margin: 25px auto 0;
  }
  .color-search-page #search-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .color-search-page #search-button {
    display: block;
    margin: 30px auto;
    max-width: 400px;
  }

/* Header cart item count badge (shared-cache: value from CART_ITEMS_COUNT cookie) */
.aps-cart-icon-wrap {
    position: relative;
    display: inline-flex;
}
.aps-cart-count-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #c0392b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}



































  

/* =============================================================================
   Artist experience pages + Under the Light (moved from inline templates)
   Templates: artwork_under_the_light.html, artist_atlas/chronicle/genome/mood_room/timeline/spectral_index
   ============================================================================= */

/* --- UNDER THE LIGHT (utl-reading) --- */
/* ── Design tokens ── */
.utl-reading {
  --utl-canvas:#f4eee2; --utl-paper:#fbf7ee; --utl-linen:#ede5d2; --utl-gesso:#f9f4e8; --utl-shadow:#e6dec8;
  --utl-ink:#2a2438; --utl-ink-soft:#4a4358; --utl-ink-mute:#6c647a; --utl-ink-faint:#9a93a4; --utl-ink-vapor:#bdb6c3;
  --utl-monet:#6b8eb3; --utl-wisteria:#9a8bb8; --utl-plein:#d89a78; --utl-lichen:#8fa280; --utl-rose:#c8a2a2; --utl-ochre:#b78b4a;
  --utl-rule:#c7bea8; --utl-rule-soft:#ddd4be;
  --utl-f-display:'Italiana',serif; --utl-f-edit:'Cormorant Garamond',Garamond,serif;
  --utl-f-ui:'Manrope',-apple-system,sans-serif; --utl-f-mono:'DM Mono',ui-monospace,monospace;
}

/* ── Scoped to the .utl-reading wrapper so site globals are unaffected ── */
.utl-reading *{ box-sizing:border-box; }
.utl-reading{
  font-family:var(--utl-f-ui); color:var(--utl-ink);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  max-width:1380px; margin:0 auto; padding:clamp(32px,5vw,80px) clamp(20px,4vw,64px);
}

/* ── Breadcrumb ── */
.utl-breadcrumb{ margin-bottom:28px; }
.utl-breadcrumb .nav-list{ margin:0; flex-wrap:wrap; }

/* ── Entrance animations ── */
@keyframes utl-riseIn{ from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:translateY(0)} }
.utl-eyebrow,.utl-head,.utl-studio{ animation:utl-riseIn .7s cubic-bezier(.22,.61,.36,1) backwards; }
.utl-head{ animation-delay:.08s; }
.utl-studio{ animation-delay:.16s; }

.utl-eyebrow{
  font-family:var(--utl-f-ui); font-size:10px; font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:var(--utl-ochre); display:flex; align-items:center; gap:12px; margin-bottom:22px;
}
.utl-eyebrow::before{ content:""; width:34px; height:.5px; background:var(--utl-ochre); }

.utl-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:40px; flex-wrap:wrap; margin-bottom:clamp(36px,5vw,64px);
}
h1.utl-title{
  font-family:var(--utl-f-display); font-weight:400; font-size:clamp(36px,5vw,68px);
  line-height:.96; letter-spacing:-.005em; max-width:16ch; margin:0;
}
h1.utl-title em{ font-family:var(--utl-f-edit); font-style:italic; color:var(--utl-monet); font-size:.82em; }
.utl-lede{
  font-family:var(--utl-f-edit); font-size:19px; line-height:1.7;
  color:var(--utl-ink-soft); max-width:44ch; margin:0;
}
.utl-lede em{ color:var(--utl-ink); font-style:italic; }

/* ── Two-column studio layout ── */
.utl-studio{
  display:grid; grid-template-columns:1.32fr .68fr;
  gap:clamp(32px,4vw,64px); align-items:start;
}

/* ── Canvas / stage ── */
.utl-stage-wrap{ position:relative; }
.utl-plate-no{
  position:absolute; top:-11px; left:18px; z-index:6;
  background:var(--utl-ink); color:var(--utl-gesso); font-family:var(--utl-f-mono);
  font-size:9px; letter-spacing:.14em; text-transform:uppercase;
  padding:5px 10px; border-radius:2px;
}
.utl-stage{
  position:relative; background:var(--utl-shadow); padding:18px; border-radius:3px;
  box-shadow:0 30px 60px -20px rgba(42,36,56,.28); border:.5px solid var(--utl-rule);
  overflow:hidden; user-select:none; touch-action:none; cursor:grab;
}
.utl-stage.dragging{ cursor:grabbing; }
.utl-stage::after{
  content:""; position:absolute; inset:18px;
  outline:.5px solid var(--utl-rule-soft); outline-offset:-1px;
  pointer-events:none; z-index:7;
}
.utl-frame{ position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; background:#15121d; }
#utl-gl{ position:absolute; inset:0; width:100%; height:100%; display:block; }

.utl-grain{
  position:absolute; inset:0; z-index:8; pointer-events:none; opacity:.4; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* composition/grid overlay (stop 10) */
.utl-grid-ovl{ position:absolute; inset:0; z-index:8; pointer-events:none; opacity:0; transition:opacity .35s; }
.utl-grid-ovl .ln{ position:absolute; background:rgba(251,247,238,.5); box-shadow:0 0 0 .5px rgba(42,36,56,.2); }
.utl-grid-ovl .v{ width:1px; top:0; bottom:0; } .utl-grid-ovl .h{ height:1px; left:0; right:0; }
.utl-grid-ovl .gold{ background:rgba(216,154,120,.7); box-shadow:0 0 6px rgba(216,154,120,.5); }
.utl-grid-ovl .v1{ left:33.33%; } .utl-grid-ovl .v2{ left:66.66%; }
.utl-grid-ovl .h1{ top:33.33%; } .utl-grid-ovl .h2{ top:66.66%; }
.utl-grid-ovl .v3{ left:38.2%; } .utl-grid-ovl .h3{ top:38.2%; }
.utl-grid-ovl .node{
  position:absolute; width:10px; height:10px; border:1px solid var(--utl-plein);
  border-radius:50%; transform:translate(-50%,-50%); background:rgba(216,154,120,.2);
  animation:utl-pulse 2.4s ease-in-out infinite;
}
@keyframes utl-pulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:.7; }
  50%{ transform:translate(-50%,-50%) scale(1.5); opacity:1; }
}

/* ── Drag track / handle ── */
.utl-track{
  position:absolute; top:18px; bottom:18px; right:-2px; width:54px; z-index:10;
  display:flex; flex-direction:column; align-items:center; cursor:ns-resize;
}
.utl-rail{
  position:absolute; top:8px; bottom:8px; width:2px;
  background:rgba(251,247,238,.35); box-shadow:0 0 0 .5px rgba(42,36,56,.3);
}
.utl-rail::after{
  content:""; position:absolute; left:0; top:0; width:100%;
  background:var(--utl-plein); height:var(--fill,0%);
  box-shadow:0 0 8px rgba(216,154,120,.6); transition:height .08s linear;
}
.utl-handle{
  position:absolute; left:50%; transform:translate(-50%,-50%) scale(1); top:0;
  width:44px; height:44px; border-radius:50%; background:var(--utl-gesso);
  border:.5px solid var(--utl-rule); box-shadow:0 6px 18px -4px rgba(42,36,56,.5);
  display:grid; place-items:center; cursor:grab; outline:none;
  transition:box-shadow .25s ease, transform .2s cubic-bezier(.34,1.56,.64,1);
}
.utl-handle:hover{
  transform:translate(-50%,-50%) scale(1.08);
  box-shadow:0 0 0 5px rgba(216,154,120,.12), 0 8px 22px -4px rgba(42,36,56,.55);
}
.utl-handle:hover::before{ border-color:var(--utl-ochre); background:rgba(216,154,120,.22); }
.utl-handle:focus-visible{
  box-shadow:0 0 0 3px var(--utl-paper), 0 0 0 6px var(--utl-monet), 0 8px 22px -4px rgba(42,36,56,.55);
}
.utl-handle:active{ cursor:grabbing; transform:translate(-50%,-50%) scale(1.04); }
.utl-handle::before{
  content:""; width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--utl-plein); background:rgba(216,154,120,.12);
  transition:border-color .2s, background .2s;
}
.utl-handle .utl-car{
  position:absolute; font-family:var(--utl-f-mono); font-size:10px; font-weight:500;
  letter-spacing:.1em; color:var(--utl-ink-soft); top:-17px; white-space:nowrap;
  transition:color .2s;
}
.utl-stage.dragging .utl-handle{
  box-shadow:0 0 0 6px rgba(216,154,120,.18), 0 6px 18px -4px rgba(42,36,56,.5);
}
.utl-stage.dragging .utl-handle .utl-car{ color:var(--utl-ink); }

/* ── Caption / seal ── */
.utl-caption{
  margin-top:18px; font-family:var(--utl-f-edit); font-size:14px; font-style:italic;
  color:var(--utl-ink-mute); display:flex; justify-content:space-between; align-items:baseline; gap:16px;
}
.utl-caption b{ font-style:normal; font-family:var(--utl-f-display); font-size:18px; color:var(--utl-ink); }
.utl-hint{
  text-align:center; font-family:var(--utl-f-mono); font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--utl-ink-faint); margin-top:14px;
  animation:utl-hintPulse 2.8s ease-in-out infinite;
}
@keyframes utl-hintPulse{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }

/* ── Loading overlay ── */
.utl-loading{
  position:absolute; inset:18px; z-index:9; display:grid; place-items:center;
  background:#15121d; color:var(--utl-ink-vapor); font-family:var(--utl-f-mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase; transition:opacity .6s;
  animation:utl-loadShimmer 1.6s ease-in-out infinite;
}
@keyframes utl-loadShimmer{ 0%,100%{ opacity:.45; } 50%{ opacity:.9; } }
.utl-loading.gone{ opacity:0; pointer-events:none; animation:none; }

/* ── Side panel ── */
.utl-panel{
  background:var(--utl-paper); border:.5px solid var(--utl-rule); border-radius:3px;
  box-shadow:0 18px 50px -22px rgba(42,36,56,.2); overflow:hidden;
}
.utl-panel-top{ border-top:6px double rgba(216,154,120,.4); }
.utl-p-head{ padding:20px 22px 16px; border-bottom:.5px solid var(--utl-rule-soft); }
.utl-p-kick{
  font-family:var(--utl-f-mono); font-size:9px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--utl-ink-faint);
}
.utl-p-stage{
  font-family:var(--utl-f-display); font-size:26px; line-height:1.05;
  margin-top:6px; transition:opacity .25s;
}
.utl-p-stage em{ font-family:var(--utl-f-edit); font-style:italic; color:var(--utl-monet); }
.utl-p-sub{
  font-family:var(--utl-f-edit); font-size:14.5px; font-style:italic;
  color:var(--utl-ink-mute); margin-top:6px; line-height:1.5; min-height:62px; transition:opacity .25s;
}

/* ── Gauges ── */
.utl-gauges{
  padding:20px 22px; display:flex; flex-direction:column; gap:16px;
  border-bottom:.5px solid var(--utl-rule-soft);
}
.utl-g-row{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:7px; }
.utl-g-name{ font-family:var(--utl-f-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--utl-ink-mute); }
.utl-g-val{ font-family:var(--utl-f-display); font-size:21px; color:var(--utl-ink); }
.utl-g-val span{ font-family:var(--utl-f-ui); font-size:9px; letter-spacing:.16em; color:var(--utl-ink-faint); text-transform:uppercase; margin-left:3px; }
.utl-g-bar{ height:5px; background:var(--utl-shadow); border-radius:3px; overflow:hidden; box-shadow:inset 0 1px 2px rgba(42,36,56,.12); }
.utl-g-fill{ height:100%; width:0%; border-radius:3px; transition:width .12s linear; box-shadow:0 0 6px -1px currentColor; }
.utl-g1 .utl-g-fill{ background:linear-gradient(90deg,var(--utl-monet),var(--utl-plein)); }
.utl-g2 .utl-g-fill{ background:linear-gradient(90deg,var(--utl-ink-faint),#fff); }
.utl-g3 .utl-g-fill{ background:linear-gradient(90deg,var(--utl-lichen),var(--utl-ochre)); }
.utl-g4 .utl-g-fill{ background:linear-gradient(90deg,#9aa9bb,var(--utl-rose),var(--utl-plein)); }
.utl-g5 .utl-g-fill{ background:linear-gradient(90deg,var(--utl-wisteria),var(--utl-lichen)); }
.utl-g6 .utl-g-fill{ background:linear-gradient(90deg,var(--utl-ink-faint),var(--utl-monet),var(--utl-plein),var(--utl-ochre)); }
.utl-g-live{ font-family:var(--utl-f-mono); font-size:8px; letter-spacing:.1em; color:var(--utl-lichen); text-transform:uppercase; }

/* ── Medium / verdict ── */
.utl-medium{ padding:16px 22px; border-bottom:.5px solid var(--utl-rule-soft); }
.utl-medium .utl-p-kick{ margin-bottom:6px; }
.utl-medium p{ font-family:var(--utl-f-edit); font-size:15px; font-style:italic; color:var(--utl-ink-soft); line-height:1.55; }

.utl-verdict{ padding:22px; background:var(--utl-gesso); position:relative; }
.utl-verdict .utl-badge{
  display:inline-block; font-family:var(--utl-f-mono); font-size:9px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--utl-ochre); border:.5px solid var(--utl-rule);
  background:var(--utl-paper); padding:4px 9px; border-radius:30px; margin-bottom:14px;
}
.utl-verdict h3{ font-family:var(--utl-f-display); font-size:30px; line-height:1.04; margin-bottom:10px; }
.utl-verdict h3 em{ font-family:var(--utl-f-edit); font-style:italic; color:var(--utl-plein); }
.utl-verdict p{ font-family:var(--utl-f-edit); font-size:16px; line-height:1.6; color:var(--utl-ink-soft); }
.utl-verdict p em{ color:var(--utl-ink); font-style:italic; }
.utl-verdict .utl-labels{
  margin-top:16px; padding-top:14px; border-top:.5px solid var(--utl-rule-soft);
  display:flex; flex-wrap:wrap; gap:7px;
}
.utl-verdict .utl-lab{
  font-family:var(--utl-f-mono); font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--utl-ink-mute); border:.5px solid var(--utl-rule-soft); padding:4px 9px;
  border-radius:2px; background:var(--utl-paper);
  transition:transform .18s ease, border-color .18s ease, color .18s ease; cursor:default;
}
.utl-verdict .utl-lab:hover{ transform:translateY(-2px); border-color:var(--utl-plein); color:var(--utl-ink); }
.utl-verdict.utl-locked{ animation:utl-flash .6s ease; }
@keyframes utl-flash{ 0%{ background:rgba(216,154,120,.25); } 100%{ background:var(--utl-gesso); } }

/* ── Responsive ── */
@media(max-width:1100px){
  .utl-studio{ grid-template-columns:1fr; }
  .utl-stage-wrap{ max-width:520px; margin:0 auto; width:100%; }
}
@media(max-width:560px){
  .utl-head{ gap:20px; }
  .utl-gauges{ gap:13px; }
  .utl-track{ width:60px; }
  .utl-handle{ width:48px; height:48px; }
}
@media(prefers-reduced-motion: reduce){
  .utl-reading *,.utl-reading *::before,.utl-reading *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .utl-handle:hover{ transform:translate(-50%,-50%); }
  .utl-verdict .utl-lab:hover{ transform:none; }
}

/* --- ARTIST SUBJECT ATLAS (atlas-page) --- */
/* ── Atlas page custom properties ─────────────────────────────────────────── */
.atlas-page {
  --ink:#1C1A17; --ink-2:#3D3830; --ink-3:#7A7266;
  --sand:#F5F1E8; --sand-2:#EDE7D9; --sand-3:#DDD5C0;
  --gold:#8B6914; --gold-lt:#C49A2A; --gold-br:#E0BD52;
  --ivory:#FDFAF4;
  --night:#0E0F14; --night-2:#15171F; --night-3:#1D202B;
  --rule:rgba(28,26,23,.12); --rule-strong:rgba(28,26,23,.28);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ── Hero banner breadcrumb (matches timeline style) ─────────────────────── */
.atlas-page .consultation_content h1 {
  max-width:100%;
  overflow-wrap:break-word;
  text-align:center;
}
.atlas-page .full_width_hero_banner_with_background_image .consultation_content h1 a,
.atlas-page .full_width_hero_banner_with_background_image .consultation_content h1 a:hover,
.atlas-page .full_width_hero_banner_with_background_image .consultation_content h1 a:focus {
  color:inherit;
  text-decoration:none;
}

/* ── Artist hero ──────────────────────────────────────────────────────────── */
.atlas-page .artist-hero {
  background:var(--sand);
  border-bottom:1px solid var(--rule);
}
.atlas-page .artist-hero .hero-inner {
  max-width:1320px;
  margin:0 auto;
  padding:clamp(44px,5vw,72px) clamp(20px,4vw,56px);
  display:grid;
  grid-template-columns:340px 1fr;
  gap:clamp(32px,5vw,72px);
  align-items:center;
}
.atlas-page .portrait-frame {
  position:relative;
  padding:14px;
  background:linear-gradient(135deg,#c8ad7a,#8B6914 20%,#f0d87a 38%,#8B6914 56%,#c8ad7a 74%,#8B6914 92%);
  box-shadow:0 18px 50px rgba(28,26,23,.28);
}
.atlas-page .portrait-frame img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:sepia(.12) contrast(1.03);
  display:block;
}
.atlas-page .portrait-cap {
  margin-top:14px;
  text-align:center;
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.atlas-page .artist-kicker {
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}
.atlas-page .artist-kicker::before {
  content:'';
  width:30px;
  height:1px;
  background:var(--gold);
}
.atlas-page .artist-kicker span {
  font-size:9.5px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
}
.atlas-page .artist-name {
  font-family:var(--serif);
  font-size:clamp(40px,6vw,82px);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.01em;
  margin-bottom:14px;
}
.atlas-page .artist-name em { font-style:italic; color:var(--gold); }
.atlas-page .artist-meta {
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  margin-bottom:26px;
  font-size:12px;
  letter-spacing:.06em;
  color:var(--ink-3);
}
.atlas-page .artist-meta b { color:var(--ink-2); font-weight:500; }
.atlas-page .artist-bio { max-width:560px; }
.atlas-page .artist-bio p {
  font-size:15.5px;
  line-height:1.75;
  color:var(--ink-2);
  margin-bottom:14px;
}
.atlas-page .artist-stats {
  display:flex;
  gap:34px;
  margin-top:30px;
  border-top:1px solid var(--rule);
  padding-top:24px;
}
.atlas-page .stat-v {
  font-family:var(--serif);
  font-size:30px;
  font-weight:300;
  line-height:1;
}
.atlas-page .stat-l {
  font-size:10px;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:var(--ink-3);
  margin-top:5px;
}
@media(max-width:760px){
  .atlas-page .artist-hero .hero-inner { grid-template-columns:1fr; }
  .atlas-page .portrait-frame { max-width:300px; margin:0 auto; }
}

/* ── The Subject Atlas ────────────────────────────────────────────────────── */
.atlas-page .atlas-section {
  background:var(--night);
  color:var(--ivory);
  position:relative;
  overflow:hidden;
  padding:clamp(50px,7vw,90px) 0 clamp(40px,5vw,70px);
}
.atlas-page .atlas-section::before {
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 42%,rgba(196,154,42,.07),transparent 65%),
    radial-gradient(circle at 50% 50%,transparent 60%,rgba(0,0,0,.5) 100%);
  pointer-events:none;
}
.atlas-page .atlas-head {
  text-align:center;
  max-width:760px;
  margin:0 auto clamp(20px,3vw,34px);
  position:relative;
  z-index:2;
  padding:0 clamp(16px,3vw,40px);
}
.atlas-page .atlas-kicker {
  font-size:9.5px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--gold-lt);
  margin-bottom:14px;
}
.atlas-page .atlas-title {
  font-family:var(--serif);
  font-size:clamp(30px,4.6vw,58px);
  font-weight:300;
  line-height:1.05;
  margin-bottom:16px;
}
.atlas-page .atlas-title em { font-style:italic; color:var(--gold-lt); }
.atlas-page .atlas-sub {
  font-size:14.5px;
  line-height:1.7;
  color:rgba(253,250,244,.55);
  max-width:600px;
  margin:0 auto;
}

.atlas-page .atlas-stage {
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr 250px;
  gap:clamp(20px,3vw,40px);
  align-items:center;
  max-width:1180px;
  margin:0 auto;
  padding:0 clamp(16px,3vw,40px);
}
.atlas-page .atlas-canvas-wrap { position:relative; }
.atlas-page .atlas-svg { width:100%; height:auto; overflow:visible; display:block; }
.atlas-page .atlas-replay {
  position:absolute;
  top:6px; right:6px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.15);
  color:rgba(253,250,244,.7);
  font-size:9.5px;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:8px 13px;
  cursor:pointer;
  transition:.25s;
  z-index:5;
}
.atlas-page .atlas-replay:hover { border-color:var(--gold-lt); color:var(--ivory); }
.atlas-page .atlas-replay svg { width:12px; height:12px; }

/* SVG element styles */
.atlas-page .ring-circle { fill:none; stroke:rgba(196,154,42,.16); stroke-width:1; }
.atlas-page .ring-circle.major { stroke:rgba(196,154,42,.26); stroke-dasharray:2 5; }
.atlas-page .ring-label { fill:rgba(253,250,244,.4); font-family:var(--sans); font-size:9px; letter-spacing:.16em; text-transform:uppercase; }
.atlas-page .ring-label-sub { fill:rgba(196,154,42,.55); font-family:var(--sans); font-size:8px; letter-spacing:.1em; }
.atlas-page .spoke { stroke:rgba(196,154,42,.3); stroke-width:1; }
.atlas-page .spoke-label { font-family:var(--serif); font-style:italic; font-size:17px; fill:var(--gold-lt); }
.atlas-page .spoke-count { font-family:var(--sans); font-size:8.5px; letter-spacing:.16em; text-transform:uppercase; fill:rgba(253,250,244,.4); }
.atlas-page .spoke-grp { cursor:pointer; }
.atlas-page .spoke-grp:hover .spoke-label { fill:var(--gold-br); }
.atlas-page .spoke-grp:hover .spoke { stroke:rgba(196,154,42,.6); }

.atlas-page .ctx-line { fill:none; stroke-width:1; opacity:.5; stroke-linecap:round; transition:opacity .4s,stroke-width .3s; }
.atlas-page .ctx-line.hot { opacity:1; stroke-width:2; filter:drop-shadow(0 0 5px currentColor); }
.atlas-page .ctx-line.fade { opacity:.06; }

.atlas-page .node-img { transition:opacity .3s; }
.atlas-page .node-halo { fill:none; stroke:var(--gold-lt); stroke-width:0; opacity:0; transition:opacity .3s,stroke-width .3s; }
.atlas-page .node-ring { fill:none; stroke:rgba(232,210,140,.65); stroke-width:1.4; transition:stroke .3s,stroke-width .3s; }
.atlas-page .atlas-node { cursor:pointer; }
.atlas-page .atlas-node:hover .node-ring,.atlas-page .atlas-node.hot .node-ring { stroke:var(--gold-br); stroke-width:2.4; }
.atlas-page .atlas-node:hover .node-halo,.atlas-page .atlas-node.hot .node-halo { opacity:.9; stroke-width:6; }
.atlas-page .atlas-node.big .node-ring { stroke-width:1.8; }
.atlas-page .node-tip { opacity:0; pointer-events:none; transition:opacity .2s; }
.atlas-page .atlas-node:hover .node-tip { opacity:1; }
.atlas-page .node-tip rect { fill:rgba(10,10,12,.92); stroke:rgba(196,154,42,.4); stroke-width:1; }
.atlas-page .node-tip .tt { fill:var(--ivory); font-family:var(--serif); font-size:13px; }
.atlas-page .node-tip .td { fill:var(--gold-lt); font-family:var(--sans); font-size:9px; letter-spacing:.1em; }

.atlas-page .atlas-node.dim { opacity:.14; }
.atlas-page .spoke-grp.dim { opacity:.16; }
.atlas-page .atlas-node { transition:opacity .5s; }

.atlas-page .center-ring { fill:none; stroke:var(--gold-lt); }
.atlas-page .center-name { font-family:var(--serif); font-style:italic; font-size:15px; fill:var(--ivory); text-anchor:middle; }
.atlas-page .center-sub { font-family:var(--sans); font-size:8px; letter-spacing:.2em; text-transform:uppercase; fill:var(--gold-lt); text-anchor:middle; }
.atlas-page .center-grp { cursor:pointer; }
.atlas-page .star { fill:#fff; }

/* Load animation */
.atlas-page .atlas-svg .ring-circle { stroke-dashoffset:var(--len,0); transition:stroke-dashoffset 1.1s ease; }
.atlas-page .atlas-svg .spoke { stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset .9s ease; }
.atlas-page .atlas-svg .ctx-line { stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1s ease,opacity .4s,stroke-width .3s; }
.atlas-page .atlas-node { opacity:0; transform:scale(.2); transform-box:view-box; transition:opacity .5s ease,transform .55s cubic-bezier(.34,1.6,.6,1); }
.atlas-page .spoke-label-grp { opacity:0; transition:opacity .6s ease; }
.atlas-page .atlas-svg.play .ring-circle { stroke-dashoffset:0; }
.atlas-page .atlas-svg.play .spoke { stroke-dashoffset:0; }
.atlas-page .atlas-svg.play .ctx-line { stroke-dashoffset:0; }
.atlas-page .atlas-svg.play .atlas-node { opacity:1; transform:scale(1); }
.atlas-page .atlas-svg.play .spoke-label-grp { opacity:1; }
.atlas-page .atlas-node.dim { opacity:.14 !important; }

#atlas-rotor { transform-box:view-box; transform-origin:460px 460px; transition:transform .95s cubic-bezier(.5,.05,.2,1); }

/* Side rail */
.atlas-page .atlas-rail { display:flex; flex-direction:column; gap:22px; }
.atlas-page .rail-block-title {
  font-size:9px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(253,250,244,.4); margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.atlas-page .rail-block-title::after { content:''; flex:1; height:1px; background:rgba(255,255,255,.1); }
.atlas-page .topic-chips,.atlas-page .ctx-chips { display:flex; flex-direction:column; gap:6px; }
.atlas-page .chip {
  display:flex; align-items:center; gap:10px; width:100%;
  text-align:left; background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.09);
  color:rgba(253,250,244,.78);
  font-size:12px; padding:9px 12px; cursor:pointer; transition:.22s; letter-spacing:.02em;
}
.atlas-page .chip:hover { border-color:rgba(196,154,42,.5); background:rgba(196,154,42,.08); color:var(--ivory); }
.atlas-page .chip.active { border-color:var(--gold-lt); background:rgba(196,154,42,.16); color:var(--ivory); }
.atlas-page .chip-dot { width:9px; height:9px; border-radius:50%; flex-shrink:0; }
.atlas-page .chip-sq { width:14px; height:3px; border-radius:2px; flex-shrink:0; }
.atlas-page .chip-n { margin-left:auto; font-size:9px; letter-spacing:.1em; color:rgba(253,250,244,.4); }
.atlas-page .chip.active .chip-n { color:var(--gold-lt); }
.atlas-page .rail-reset {
  margin-top:2px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; border:1px solid rgba(255,255,255,.18);
  color:rgba(253,250,244,.6); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  padding:10px; cursor:pointer; transition:.25s; width:100%;
}
.atlas-page .rail-reset:hover { background:rgba(255,255,255,.06); color:var(--ivory); }

@media(max-width:920px){
  .atlas-page .atlas-stage { grid-template-columns:1fr; }
  .atlas-page .atlas-rail { flex-direction:row; flex-wrap:wrap; gap:24px; }
  .atlas-page .atlas-rail > div { flex:1; min-width:220px; }
}

/* Guide legend */
.atlas-page .atlas-guide {
  position:relative; z-index:2;
  max-width:900px; margin:clamp(30px,4vw,50px) auto 0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:24px; padding:0 clamp(16px,3vw,40px);
}
.atlas-page .guide-item { border-top:1px solid rgba(196,154,42,.3); padding-top:16px; }
.atlas-page .guide-item h4 { font-family:var(--serif); font-size:17px; font-weight:400; color:var(--gold-lt); margin-bottom:7px; }
.atlas-page .guide-item p { font-size:12.5px; line-height:1.6; color:rgba(253,250,244,.55); }
@media(max-width:760px){ .atlas-page .atlas-guide { grid-template-columns:1fr; gap:20px; } }

/* --- ARTIST CHRONICLE (chr-page) --- */
/* ── Chronicle page custom properties ─────────────────────────────────────── */
.chr-page {
  --ink:   #1C1A17;
  --ink-2: #3D3830;
  --ink-3: #7A7266;
  --sand:  #F5F1E8;
  --sand-2:#EDE7D9;
  --sand-3:#DDD5C0;
  --gold:  #8B6914;
  --gold-lt:#C49A2A;
  --gold-br:#E0BD52;
  --ivory: #FDFAF4;
  --night: #0E0F14;
  --night-2:#15171F;
  --night-3:#1D202B;
  --rule:  rgba(28,26,23,.12);
  --serif: "Cormorant Garamond",Georgia,serif;
  --sans:  "DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  font-family: var(--sans);
}

/* ── Hero banner overrides ────────────────────────────────────────────────── */
.chr-page .consultation_content h1 {
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: center;
}
.chr-page .full_width_hero_banner_with_background_image .consultation_content h1 a,
.chr-page .full_width_hero_banner_with_background_image .consultation_content h1 a:hover {
  color: inherit;
  text-decoration: none;
}

/* ── Artist hero card ─────────────────────────────────────────────────────── */
.chr-page .artist-hero {
  background: var(--sand);
  border-bottom: 1px solid var(--rule);
}
.chr-page .artist-hero .hero-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(44px,5vw,72px) clamp(20px,4vw,56px);
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(32px,5vw,72px);
  align-items: center;
}
.chr-page .portrait-frame {
  position: relative;
  padding: 14px;
  background: linear-gradient(135deg,#c8ad7a,#8B6914 20%,#f0d87a 38%,#8B6914 56%,#c8ad7a 74%,#8B6914 92%);
  box-shadow: 0 18px 50px rgba(28,26,23,.28);
}
.chr-page .portrait-frame img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  filter: sepia(.10) contrast(1.03);
  display: block;
}
.chr-page .portrait-cap {
  margin-top: 14px;
  text-align: center;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.chr-page .artist-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.chr-page .artist-kicker::before {
  content: '';
  width: 30px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}
.chr-page .artist-kicker span {
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.chr-page .artist-name {
  font-family: var(--serif);
  font-size: clamp(36px,5.5vw,72px);
  font-weight: 300;
  line-height: .98;
  letter-spacing: -.01em;
  margin-bottom: 14px;
  color: var(--ink);
}
.chr-page .artist-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin-bottom: 26px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.chr-page .artist-meta b { color: var(--ink-2); font-weight: 500; }
.chr-page .artist-bio { max-width: 560px; }
.chr-page .artist-bio p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
  margin-bottom: 14px;
}
.chr-page .artist-stats {
  display: flex;
  gap: 34px;
  margin-top: 30px;
  border-top: 1px solid var(--rule);
  padding-top: 24px;
}
.chr-page .stat-v {
  font-family: var(--serif);
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink);
}
.chr-page .stat-l {
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 5px;
}

/* ── Chronicle section container ─────────────────────────────────────────── */
.chr-page .chronicle-section {
  background: var(--night);
  color: var(--ivory);
  position: relative;
  overflow: hidden;
  padding: clamp(50px,7vw,90px) 0 0;
}
.chr-page .chronicle-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 40% at 30% 20%, rgba(196,154,42,.06), transparent 65%),
    radial-gradient(circle at 80% 80%, transparent 60%, rgba(0,0,0,.4) 100%);
  pointer-events: none;
}

/* ── Chronicle section header ─────────────────────────────────────────────── */
.chr-page .chr-head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(28px,4vw,48px);
  position: relative;
  z-index: 2;
  padding: 0 clamp(16px,3vw,40px);
}
.chr-page .chr-kicker {
  font-size: 9.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 14px;
}
.chr-page .chr-title {
  font-family: var(--serif);
  font-size: clamp(30px,4.6vw,56px);
  font-weight: 300;
  line-height: 1.05;
  margin-bottom: 16px;
  color: var(--ivory);
}
.chr-page .chr-title em { font-style: italic; color: var(--gold-lt); }
.chr-page .chr-sub {
  font-size: 14.5px;
  line-height: 1.75;
  color: rgba(253,250,244,.5);
  max-width: 580px;
  margin: 0 auto;
}

/* ── Scroll hint ─────────────────────────────────────────────────────────── */
.chr-page .scroll-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 11.5px;
  letter-spacing: .10em;
  color: rgba(253,250,244,.4);
  text-transform: uppercase;
  margin-bottom: 22px;
  position: relative;
  z-index: 2;
}

/* ── Ribbon scroll container ──────────────────────────────────────────────── */
.chr-page .ribbon-scroll {
  position: relative;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  user-select: none;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) #1D202B;
}
.chr-page .ribbon-scroll:active { cursor: grabbing; }
.chr-page .ribbon-scroll::-webkit-scrollbar { height: 6px; }
.chr-page .ribbon-scroll::-webkit-scrollbar-track { background: #1D202B; }
.chr-page .ribbon-scroll::-webkit-scrollbar-thumb {
  background: var(--gold);
  border-radius: 3px;
}

/* ── The ribbon itself (all layers share the same coordinate space) ─────── */
.chr-page #chr-ribbon {
  position: relative;
  /* width and height are set by JS */
}

/* ── Chapter bands layer ─────────────────────────────────────────────────── */
.chr-page .chapter-band {
  position: absolute;
  top: 0;
  /* left, width, height set by JS */
}
.chr-page .chapter-band + .chapter-band {
  border-left: 1px solid rgba(139,105,20,.25);
}

/* Chapter decorative labels (inside the band, below the axis) */
.chr-page .ch-year-span {
  position: absolute;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(28,26,23,.45);
  white-space: nowrap;
  /* top set by JS (just below movement band) */
  left: 16px;
}
.chr-page .ch-label {
  position: absolute;
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .06em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: calc(100% - 24px);
  color: var(--gold);
  /* top set by JS */
  left: 16px;
}
.chr-page .ch-context {
  position: absolute;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 200px;
  /* top set by JS */
  left: 16px;
}

/* ── Axis layer ──────────────────────────────────────────────────────────── */
.chr-page #chr-axis-line {
  position: absolute;
  height: 1px;
  background: var(--gold);
  z-index: 3;
  /* top, left, right set by JS */
}

/* ── Movement band ───────────────────────────────────────────────────────── */
.chr-page #chr-mov-band {
  position: absolute;
  z-index: 2;
  /* top, left, right, height set by JS */
  transition: clip-path .08s linear;
}

/* ── Axis ticks layer ────────────────────────────────────────────────────── */
.chr-page .axis-tick {
  position: absolute;
  width: 1px;
  background: rgba(196,154,42,.45);
  z-index: 4;
  /* left, top, height set by JS */
}
.chr-page .tick-lbl {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 5px;
  font-size: 10px;
  letter-spacing: .10em;
  color: rgba(253,250,244,.38);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ── Work pins layer ─────────────────────────────────────────────────────── */
.chr-page .work-pin {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
  z-index: 5;
  cursor: pointer;
}
.chr-page .work-pin.in {
  opacity: 1;
  transform: translateY(0);
}
.chr-page .work-pin img,
.chr-page .work-placeholder {
  display: block;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid rgba(224,189,82,.55);
  border-radius: 3px;
  background: #14110b;
  box-shadow: 0 6px 22px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.chr-page .work-placeholder { background: rgba(255,255,255,.05); }
.chr-page .work-pin--big img,
.chr-page .work-pin--big .work-placeholder {
  border-color: var(--gold-br);
  border-width: 3px;
  box-shadow: 0 10px 34px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.45);
}
/* Raise the hovered pin above its neighbours so its border + tooltip read clearly */
.chr-page .work-pin:hover { z-index: 30; }
.chr-page .work-pin:hover img,
.chr-page .work-pin:hover .work-placeholder {
  border-color: var(--gold-br);
  box-shadow: 0 12px 36px rgba(0,0,0,.75), 0 0 0 1px rgba(224,189,82,.4);
}

/* Connector line (thumbnail → axis point) */
.chr-page .work-connector {
  width: 1px;
  flex-shrink: 0;
  background: linear-gradient(to bottom, rgba(196,154,42,.6), rgba(196,154,42,.05));
}

/* Dot on the axis */
.chr-page .work-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold-lt);
  flex-shrink: 0;
  margin-top: -2px;
  box-shadow: 0 0 6px rgba(196,154,42,.7);
}
.chr-page .work-pin--big .work-dot {
  width: 8px;
  height: 8px;
  margin-top: -4px;
}

/* Tooltip */
.chr-page .work-tooltip {
  position: absolute;
  /* bottom set by JS above the thumbnail */
  left: 50%;
  transform: translateX(-50%);
  background: var(--night-2);
  border: 1px solid rgba(196,154,42,.3);
  border-radius: 6px;
  padding: 10px 14px;
  min-width: 148px;
  max-width: 220px;
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  z-index: 20;
  white-space: normal;
  box-shadow: 0 8px 28px rgba(0,0,0,.5);
}
.chr-page .work-tooltip strong {
  display: block;
  font-size: 12.5px;
  margin-bottom: 3px;
  color: var(--gold-br);
  line-height: 1.3;
}
.chr-page .work-tooltip .tip-year {
  display: block;
  font-size: 10.5px;
  color: rgba(253,250,244,.45);
  margin-bottom: 6px;
  letter-spacing: .06em;
}
.chr-page .tip-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.chr-page .tip-tags span {
  font-size: 10px;
  background: rgba(255,255,255,.08);
  padding: 2px 8px;
  border-radius: 10px;
  color: rgba(253,250,244,.65);
}
.chr-page .work-pin:hover .work-tooltip { opacity: 1; }

/* ── Legend strip (below the ribbon) ────────────────────────────────────── */
.chr-page .chr-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 28px;
  padding: clamp(16px,2vw,28px) clamp(20px,4vw,56px);
  border-top: 1px solid rgba(255,255,255,.07);
  background: var(--night);
  font-size: 11px;
  color: rgba(253,250,244,.4);
  letter-spacing: .07em;
  position: relative;
  z-index: 2;
}
.chr-page .legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chr-page .legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.chr-page .legend-line {
  width: 28px;
  height: 1px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ── Empty state ─────────────────────────────────────────────────────────── */
.chr-page .chr-empty {
  text-align: center;
  padding: clamp(60px,8vw,100px) 20px;
  color: rgba(253,250,244,.4);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 300;
}

/* ── Guide cards below the ribbon ────────────────────────────────────────── */
.chr-page .chr-guide {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 1px;
  background: rgba(255,255,255,.06);
  border-top: 1px solid rgba(255,255,255,.07);
  position: relative;
  z-index: 2;
}
.chr-page .guide-card {
  background: var(--night-2);
  padding: clamp(28px,3vw,44px) clamp(20px,3vw,40px);
}
.chr-page .guide-card h4 {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
  color: var(--gold-lt);
  margin-bottom: 10px;
}
.chr-page .guide-card p {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(253,250,244,.5);
}
@media(max-width:900px) {
  .chr-page .artist-hero .hero-inner { grid-template-columns: 1fr; }
  .chr-page .portrait-frame { max-width: 280px; margin: 0 auto; }
  .chr-page .chr-guide { grid-template-columns: 1fr; }
}
@media(max-width:560px) {
  /* Let the four stat blocks wrap onto two rows instead of overflowing. */
  .chr-page .artist-stats {
    flex-wrap: wrap;
    gap: 20px 28px;
  }
  .chr-page .artist-stats > div { flex: 0 0 calc(50% - 14px); }
}

/* --- ARTIST PALETTE GENOME (genome-wrap) --- */
/* ── Genome palette ────────────────────────────────────────────────────────── */
.genome-wrap {
  --gn-ink:        #1C1A17;
  --gn-ink-2:      #3D3830;
  --gn-ink-3:      #7A7266;
  --gn-sand:       #F5F1E8;
  --gn-sand-2:     #EDE7D9;
  --gn-sand-3:     #DDD5C0;
  --gn-gold:       #8B6914;
  --gn-gold-lt:    #C49A2A;
  --gn-ivory:      #FDFAF4;
  --gn-rule:       rgba(28,26,23,.12);
  --gn-rule-str:   rgba(28,26,23,.28);
  --gn-serif:      "Cormorant Garamond","EB Garamond",Georgia,serif;
  --gn-sans:       "DM Sans",-apple-system,BlinkMacSystemFont,sans-serif;
  --gn-max:        1380px;
  --gn-gap:        clamp(16px,2.5vw,32px);
}

/* ── Genome wrapper — scopes all rules so they don't bleed into base styles ── */
.genome-wrap {
  background: var(--gn-ivory);
  color: var(--gn-ink);
  font-family: var(--gn-sans);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.genome-wrap img { display: block; max-width: 100%; }
.genome-wrap a   { color: inherit; text-decoration: none; }

/* Breadcrumb row — lives inside .gn-artist-head (sand background) */
.gn-breadcrumb {
  background: transparent;
  padding-bottom: clamp(20px,3vw,32px);
}
.gn-breadcrumb .nav-list {
  margin-top: 0;
}

.gn-shell  { max-width: var(--gn-max); margin: 0 auto; padding: 0 clamp(20px,4vw,56px); }
.gn-serif  { font-family: var(--gn-serif); }

/* ── Scroll progress bar ─────────────────────────────────────────────────── */
.gn-scroll-bar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--gn-gold) 0%, var(--gn-gold-lt) 100%);
  z-index: 999; transition: width .08s linear;
  box-shadow: 0 0 8px rgba(196,154,42,.5);
  pointer-events: none;
}

/* ── Artist header ────────────────────────────────────────────────────────── */
.gn-artist-head {
  background: var(--gn-sand);
  border-top: 1px solid var(--gn-rule);
  border-bottom: 1px solid var(--gn-rule);
  padding: clamp(40px,6vw,72px) 0 clamp(36px,5vw,56px);
}
.gn-head-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(32px,5vw,72px);
  align-items: center;
}
.gn-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.gn-kicker span { font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gn-gold); font-weight: 500; }
.gn-kicker::before { content: ''; width: 28px; height: 1px; background: var(--gn-gold); }
.gn-artist-name {
  font-family: var(--gn-serif);
  font-size: clamp(40px,6vw,84px);
  font-weight: 300; line-height: .98;
  letter-spacing: -0.015em; color: var(--gn-ink);
  margin-bottom: 18px;
}
.gn-artist-name em { font-style: italic; color: var(--gn-gold); }
.gn-artist-name a:hover em { color: var(--gn-ink-2); }
.gn-intro-title a { text-decoration: none; }
.gn-intro-title a:hover em { color: var(--gn-ivory); }
.gn-card-img a { display: block; height: 100%; }
.gn-card-color a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gn-dates {
  font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--gn-ink-3); margin-bottom: 24px;
}
.gn-bio { font-size: 15px; line-height: 1.75; color: var(--gn-ink-2); max-width: 540px; margin-bottom: 30px; }
.gn-stats { display: flex; gap: 40px; border-top: 1px solid var(--gn-rule); padding-top: 24px; }
.gn-stat-val { font-family: var(--gn-serif); font-size: 30px; font-weight: 300; color: var(--gn-ink); line-height: 1; margin-bottom: 4px; }
.gn-stat-lab { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gn-ink-3); }
.gn-portrait {
  position: relative;
  padding: clamp(8px,1.4vw,16px);
  background: linear-gradient(135deg,#c8ad7a 0%,#8B6914 18%,#f0d87a 36%,#8B6914 54%,#c8ad7a 72%,#8B6914 90%);
  box-shadow: 0 0 0 1px rgba(200,173,122,.35),0 16px 50px rgba(0,0,0,.25);
  transition: transform .6s cubic-bezier(.22,.61,.36,1),box-shadow .6s;
  overflow: hidden;
}
.gn-portrait:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 0 0 1px rgba(200,173,122,.5),0 28px 70px rgba(0,0,0,.34); }
.gn-portrait-shine {
  position: relative;
  overflow: hidden;
}
.gn-portrait-shine::after {
  content:''; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(115deg,transparent 30%,rgba(255,255,255,.28) 48%,transparent 62%);
  transform: translateX(-120%); transition: transform .9s ease;
}
.gn-portrait:hover .gn-portrait-shine::after { transform: translateX(120%); }
.gn-portrait img { width:100%; height:auto; display:block; filter:contrast(1.04) saturate(1.04); transition: filter .6s; }
.gn-portrait:hover img { filter:contrast(1.07) saturate(1.1); }
.gn-portrait-cap {
  position:absolute; bottom:-28px; left:50%; transform:translateX(-50%);
  white-space:nowrap; font-size:9.5px; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gn-ink-3);
}

/* ── Genome intro / spectrum strip ─────────────────────────────────────────── */
.gn-spectrum-section {
  background: #0e0c09; color: var(--gn-ivory);
  padding: clamp(48px,6vw,80px) 0 clamp(60px,7vw,96px);
  position: relative; overflow: hidden;
}
.gn-spectrum-section::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(ellipse 60% 60% at 50% 0%,rgba(139,105,20,.18),transparent 65%);
}
.gn-intro-head { text-align:center; max-width:720px; margin:0 auto clamp(40px,5vw,60px); position:relative; z-index:2; }
.gn-intro-kicker { font-size:9.5px; letter-spacing:0.24em; text-transform:uppercase; color:var(--gn-gold-lt); margin-bottom:16px; }
.gn-intro-title {
  font-family: var(--gn-serif);
  font-size: clamp(30px,4.6vw,58px);
  font-weight:300; line-height:1.05; letter-spacing:-0.01em;
  margin-bottom:20px;
}
.gn-intro-title em { font-style:italic; color:var(--gn-gold-lt); }
.gn-intro-desc { font-size:14.5px; line-height:1.75; color:rgba(253,250,244,.62); max-width:600px; margin:0 auto; }

.gn-spectrum-wrap { position:relative; z-index:2; }
.gn-spectrum-strip {
  display:flex;
  height: clamp(180px,28vw,300px);
  width:100%;
  overflow:hidden;
  cursor:crosshair;
}
.gn-band {
  flex:1 1 auto; height:100%; position:relative;
  transform:translateY(105%);
  /* Collapse: ease-in — starts slow, accelerates to finish (2 s set by JS) */
  transition:transform .9s cubic-bezier(.22,.61,.36,1),
             flex-grow 2s cubic-bezier(.42,0,1,1),
             filter 2s cubic-bezier(.42,0,1,1),
             brightness 2s cubic-bezier(.42,0,1,1);
}
.gn-spectrum-strip.lit .gn-band { transform:translateY(0); }
/* JS adds/removes .hovered; inline transition-duration is set before toggle for asymmetry */
.gn-band.hovered { filter:brightness(1.18); flex-grow:4; z-index:3; }
.gn-band.active  { flex-grow:6; z-index:4; box-shadow:0 0 0 2px var(--gn-gold-lt) inset; }
.gn-band-tip {
  position:absolute; bottom:10px; left:50%;
  transform:translateX(-50%) translateY(6px);
  white-space:nowrap; font-size:9px; letter-spacing:0.1em;
  text-transform:uppercase; color:#fff;
  background:rgba(10,8,5,.78); padding:3px 8px;
  opacity:0; pointer-events:none;
  transition:opacity .15s ease-out, transform .15s ease-out;
  backdrop-filter:blur(4px);
}
.gn-band.hovered .gn-band-tip { opacity:1; transform:translateX(-50%) translateY(0); }
.gn-axis {
  display:flex; justify-content:space-between;
  margin-top:14px; font-size:9.5px; letter-spacing:0.16em;
  text-transform:uppercase; color:rgba(253,250,244,.4);
}
.gn-axis-note { text-align:center; margin-top:18px; font-size:12px; color:rgba(253,250,244,.45); font-style:italic; font-family:var(--gn-serif); }

/* ── Explode panel ─────────────────────────────────────────────────────────── */
.gn-explode {
  position:relative; z-index:2;
  margin-top:36px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(200,173,122,.22);
  display:grid; grid-template-columns:220px 1fr;
  min-height:0; max-height:0; overflow:hidden;
  opacity:0; transition:max-height .5s ease,opacity .4s ease,margin .4s;
}
.gn-explode.open { max-height:420px; opacity:1; }
.gn-explode-thumb { background:#000; overflow:hidden; }
.gn-explode-thumb img { width:100%; height:100%; object-fit:cover; min-height:220px; }
.gn-explode-body { padding:clamp(24px,3vw,40px); display:flex; flex-direction:column; }
.gn-explode-eyebrow { font-size:9.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gn-gold-lt); margin-bottom:10px; }
.gn-explode-title { font-family:var(--gn-serif); font-size:clamp(22px,2.6vw,32px); font-weight:400; line-height:1.15; margin-bottom:6px; }
.gn-explode-meta { font-size:12px; color:rgba(253,250,244,.5); letter-spacing:0.04em; margin-bottom:24px; }
.gn-swatches { display:flex; gap:0; flex-wrap:wrap; }
.gn-swatch {
  flex:1 1 0; min-width:120px;
  opacity:0; transform:translateY(16px);
  transition:opacity .5s,transform .5s;
}
.gn-explode.open .gn-swatch { opacity:1; transform:translateY(0); }
.gn-explode.open .gn-swatch:nth-child(1){ transition-delay:.08s; }
.gn-explode.open .gn-swatch:nth-child(2){ transition-delay:.16s; }
.gn-explode.open .gn-swatch:nth-child(3){ transition-delay:.24s; }
.gn-explode.open .gn-swatch:nth-child(4){ transition-delay:.32s; }
.gn-swatch-chip { height:84px; border:1px solid rgba(255,255,255,.12); }
.gn-swatch-label { font-size:11px; letter-spacing:0.06em; color:#fff; margin-top:10px; }

/* ── Hue wheel ─────────────────────────────────────────────────────────────── */
.gn-wheel-section { background:var(--gn-ivory); padding:clamp(60px,8vw,96px) 0; }
.gn-sec-head {
  display:flex; align-items:flex-end; justify-content:space-between;
  margin-bottom:clamp(36px,5vw,56px); gap:24px; flex-wrap:wrap;
}
.gn-sec-kicker { font-size:9.5px; letter-spacing:0.2em; text-transform:uppercase; color:var(--gn-gold); font-weight:500; margin-bottom:10px; }
.gn-sec-title {
  font-family:var(--gn-serif); font-size:clamp(28px,3.8vw,48px);
  font-weight:300; line-height:1.1; letter-spacing:-0.01em; color:var(--gn-ink);
}
.gn-sec-title em { font-style:italic; color:var(--gn-gold); }
.gn-sec-desc { font-size:14px; color:var(--gn-ink-3); max-width:480px; line-height:1.6; margin-top:12px; }

.gn-wheel-layout { display:grid; grid-template-columns:1fr 320px; gap:clamp(32px,5vw,64px); align-items:center; }
.gn-wheel-stage { position:relative; aspect-ratio:1; max-width:600px; width:100%; margin:0 auto; }
.gn-wheel-svg { width:100%; height:100%; overflow:visible; }
.gn-ring  { fill:none; stroke:var(--gn-rule); stroke-width:1; }
.gn-spoke { stroke:var(--gn-rule); stroke-width:1; }
.gn-cap   { font-family:var(--gn-sans); font-size:9px; letter-spacing:0.14em; text-transform:uppercase; fill:var(--gn-ink-3); }
.gn-ax-lab{ font-family:var(--gn-serif); font-size:12px; fill:var(--gn-ink-3); font-style:italic; }
.gn-dot {
  cursor:pointer;
  transition:r .25s,stroke-width .25s,opacity .3s;
  stroke:rgba(255,255,255,.6); stroke-width:1;
  opacity:0;
}
.gn-wheel-stage.in .gn-dot { opacity:1; }
.gn-dot:hover { stroke:var(--gn-ink); stroke-width:2; }
.gn-dot-tip {
  position:absolute; z-index:10; pointer-events:none;
  white-space:nowrap; font-size:10px; letter-spacing:0.08em;
  text-transform:uppercase; color:#fff;
  background:rgba(10,8,5,.88); padding:4px 10px;
  border:1px solid rgba(255,255,255,.12);
  opacity:0;
  transform:translate(-50%, calc(-100% - 6px));
  transition:opacity .15s ease-out, transform .15s ease-out;
  backdrop-filter:blur(4px);
}
.gn-dot-tip.visible {
  opacity:1;
  transform:translate(-50%, calc(-100% - 10px));
}

.gn-wheel-preview {
  background:var(--gn-sand); border:1px solid var(--gn-rule);
  padding:0; overflow:hidden; min-height:380px; display:flex; flex-direction:column;
  box-shadow: 0 12px 42px rgba(28,26,23,.14), 0 2px 10px rgba(28,26,23,.08);
}
.gn-wheel-preview-img { background:#0e0c09; aspect-ratio:4/5; overflow:hidden; position:relative; }
.gn-wheel-preview-img img { width:100%; height:100%; object-fit:cover; transition:opacity .35s; }
.gn-wheel-empty {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:28px; color:rgba(253,250,244,.45);
  font-family:var(--gn-serif); font-style:italic; font-size:15px; line-height:1.5;
}
.gn-wheel-preview-body { padding:20px 22px 24px; }
.gn-wp-title { font-family:var(--gn-serif); font-size:20px; font-weight:400; line-height:1.2; color:var(--gn-ink); margin-bottom:4px; }
.gn-wp-meta  { font-size:11.5px; color:var(--gn-ink-3); letter-spacing:0.04em; margin-bottom:14px; }
.gn-wp-hsl   { display:flex; gap:18px; border-top:1px solid var(--gn-rule); padding-top:14px; }
.gn-wp-hsl div span { display:block; }
.gn-wp-val   { font-family:var(--gn-serif); font-size:18px; color:var(--gn-gold); line-height:1; }
.gn-wp-lab   { font-size:9px; letter-spacing:0.12em; text-transform:uppercase; color:var(--gn-ink-3); margin-top:4px; }

/* ── Facts section ─────────────────────────────────────────────────────────── */
.gn-facts-section { background:var(--gn-sand-2); padding:clamp(56px,7vw,88px) 0; border-top:1px solid var(--gn-rule); }
.gn-facts-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,2vw,24px); }
.gn-fact-card {
  background:var(--gn-ivory); border:1px solid var(--gn-rule); padding:28px 24px;
  position:relative; transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s,border-color .4s;
}
.gn-fact-card::before { content:''; position:absolute; left:0; top:0; width:0; height:2px; background:var(--gn-gold); transition:width .45s cubic-bezier(.22,.61,.36,1); }
.gn-fact-card:hover { transform:translateY(-6px); box-shadow:0 14px 38px rgba(28,26,23,.12); border-color:var(--gn-rule-str); }
.gn-fact-card:hover::before { width:100%; }
.gn-fact-swatch { width:38px; height:38px; border:1px solid var(--gn-rule); margin-bottom:18px; transition:transform .4s cubic-bezier(.34,1.56,.64,1); }
.gn-fact-card:hover .gn-fact-swatch { transform:scale(1.18) rotate(-4deg); }
.gn-fact-val  { font-family:var(--gn-serif); font-size:38px; font-weight:300; color:var(--gn-ink); line-height:1; margin-bottom:6px; }
.gn-fact-val small { font-size:18px; color:var(--gn-gold); }
.gn-fact-lab  { font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--gn-ink-3); margin-bottom:10px; }
.gn-fact-desc { font-size:12.5px; line-height:1.55; color:var(--gn-ink-2); }

/* ── Gallery grid ──────────────────────────────────────────────────────────── */
.gn-gallery-section { background:var(--gn-ivory); padding:clamp(60px,8vw,96px) 0; }
.gn-gallery-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(16px,2.2vw,28px); perspective:1200px; }
.gn-card {
  background:#fff; border:1px solid var(--gn-rule); overflow:hidden; display:flex; flex-direction:column;
  transition:box-shadow .4s,transform .35s cubic-bezier(.22,.61,.36,1),border-color .4s;
  transform-style:preserve-3d;
}
.gn-card:hover { box-shadow:0 18px 46px rgba(28,26,23,.16); border-color:var(--gn-rule-str); }
.gn-card-img { background:#0e0c09; overflow:hidden; position:relative; aspect-ratio:4/5; }
.gn-card-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.22,.61,.36,1),filter .5s; filter:saturate(.92); }
.gn-card:hover .gn-card-img img { transform:scale(1.06); filter:saturate(1.05); }
.gn-palette-row { display:flex; height:6px; transition:height .35s ease; }
.gn-card:hover .gn-palette-row { height:12px; }
.gn-palette-row span { flex:1; transition:flex .35s ease; }
.gn-palette-row span:hover { flex:2.4; }
.gn-card-info { padding:18px 18px 22px; display:flex; flex-direction:column; flex:1; }
.gn-card-title { font-family:var(--gn-serif); font-size:18px; font-weight:400; line-height:1.2; color:var(--gn-ink); margin-bottom:4px; transition:color .3s; }
.gn-card:hover .gn-card-title { color:var(--gn-gold); }
.gn-card-year  { font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--gn-ink-3); margin-bottom:14px; }
.gn-card-color { font-size:10.5px; color:var(--gn-gold); letter-spacing:0.06em; margin-top:auto; display:flex; align-items:center; gap:8px; }
.gn-card-color i { width:12px; height:12px; border:1px solid var(--gn-rule); display:inline-block; flex-shrink:0; }

/* ── Reveal animations ─────────────────────────────────────────────────────── */
.gn-rev      { opacity:0; transform:translateY(28px); transition:opacity .8s ease,transform .8s cubic-bezier(.22,.61,.36,1); }
.gn-rev.in   { opacity:1; transform:none; }
.gn-rev-l    { opacity:0; transform:translateX(-36px); transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1); }
.gn-rev-l.in { opacity:1; transform:none; }
.gn-rev-r    { opacity:0; transform:translateX(36px);  transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1); }
.gn-rev-r.in { opacity:1; transform:none; }
.gn-rev-sc   { opacity:0; transform:scale(.94); transition:opacity .8s ease,transform .9s cubic-bezier(.22,.61,.36,1); }
.gn-rev-sc.in{ opacity:1; transform:none; }
.gn-stagger > * { opacity:0; transform:translateY(26px); transition:opacity .65s ease,transform .7s cubic-bezier(.22,.61,.36,1); }
.gn-stagger.in > * { opacity:1; transform:none; }
.gn-stagger.in > *:nth-child(1){ transition-delay:.05s } .gn-stagger.in > *:nth-child(2){ transition-delay:.12s }
.gn-stagger.in > *:nth-child(3){ transition-delay:.19s } .gn-stagger.in > *:nth-child(4){ transition-delay:.26s }
.gn-stagger.in > *:nth-child(5){ transition-delay:.33s } .gn-stagger.in > *:nth-child(6){ transition-delay:.40s }
.gn-stagger.in > *:nth-child(7){ transition-delay:.47s } .gn-stagger.in > *:nth-child(8){ transition-delay:.54s }

/* ── Responsive ─────────────────────────────────────────────────────────────  */
@media (max-width:1080px) {
  .gn-head-inner    { grid-template-columns:1fr; }
  .gn-portrait      { max-width:380px; }
  .gn-wheel-layout  { grid-template-columns:1fr; }
  .gn-wheel-preview { max-width:420px; margin:0 auto; }
  .gn-facts-grid    { grid-template-columns:repeat(2,1fr); }
  .gn-gallery-grid  { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px) {
  .gn-explode     { grid-template-columns:1fr; }
  .gn-swatch      { min-width:50%; }
  .gn-facts-grid  { grid-template-columns:1fr 1fr; }
  .gn-gallery-grid{ grid-template-columns:1fr; }
  .gn-stats       { gap:24px; }
}
@media (prefers-reduced-motion: reduce) {
  .gn-rev,.gn-rev-l,.gn-rev-r,.gn-rev-sc,.gn-stagger > * { transition:none !important; opacity:1 !important; transform:none !important; }
}

/* --- ARTIST MOOD ROOM (moom-room) --- */
/* ============================================================
   ARTIST MOOD ROOM — scoped to .moom-room wrapper
   Dark gallery that "breathes" with the selected emotional tone.
   All atmosphere effects target .moom-room so the base header
   and footer are unaffected.
============================================================ */

/* ---- Base tokens (warm Renaissance / sfumato palette) ---- */
.moom-room {
  --canvas:#1b1611;
  --paper:#f3ead9;
  --gesso:#f7efe0;
  --shadow:#2a221a;

  --ink:#221b14;
  --ink-soft:#4a3f30;
  --ink-mute:#6e6150;
  --ink-faint:#9a8c77;
  --ink-vapor:#c7bba6;

  --gold:#c79a4e;
  --umber:#7a5a3a;
  --sanguine:#b06a4f;
  --verdigris:#6f8a78;
  --azure:#5d7fa3;

  --rule:rgba(199,154,78,.34);
  --rule-soft:rgba(199,154,78,.18);

  --max-w:1380px;
  --gutter:clamp(20px,4vw,64px);

  /* ---- MOOD ENGINE defaults: "All / Sfumato" room ---- */
  --room-bg:#1b1611;
  --room-glow-a:rgba(199,154,78,.10);
  --room-glow-b:rgba(93,127,163,.06);
  --light-warm:rgba(199,154,78,.05);
  --tone-accent:#c79a4e;
  --contrast:1;
  --pace:1.4s;
  --drift:14s;
  --vignette:.55;
  --halo:24px;

  /* ---- Layout ---- */
  font-family:'Manrope',-apple-system,sans-serif;
  color:var(--ink-vapor);
  background:var(--room-bg);
  overflow-x:hidden;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  transition:background var(--pace) ease;
  position:relative;
  padding-bottom:230px;
  min-height:60vh;
}

/* Atmospheric glow layers — two radial lights that re-colour with the mood */
.moom-room::before {
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(60% 50% at 22% 16%, var(--room-glow-a) 0, transparent 62%),
    radial-gradient(55% 60% at 84% 80%, var(--room-glow-b) 0, transparent 60%),
    radial-gradient(40% 40% at 50% 50%, var(--light-warm) 0, transparent 70%);
  transition:background-image var(--pace) ease, opacity var(--pace) ease;
  animation:moomBreath calc(var(--drift) * .9) ease-in-out infinite alternate;
}
/* Vignette — edges of the room fall into shadow */
.moom-room::after {
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 42%, transparent 38%,
             rgba(0,0,0,calc(var(--vignette) * .9)) 100%);
  transition:background var(--pace) ease;
}
@keyframes moomBreath {
  from { opacity:.82; transform:scale(1) }
  to   { opacity:1;   transform:scale(1.04) }
}

.moom-wrap { position:relative; z-index:2 }

/* ============ BREADCRUMB ============ */
.moom-breadcrumb {
  position:relative;
  z-index:3;
  padding-top:12px;
  padding-bottom:4px;
}
.moom-breadcrumb .nav-list { margin-top:0 }
.moom-breadcrumb .nav-list li,
.moom-breadcrumb .nav-list a {
  color:var(--ink-vapor);
}
.moom-breadcrumb .nav-list a:hover {
  color:var(--gold);
  opacity:1;
}
.moom-breadcrumb .main-heading {
  color:var(--ink-faint);
  opacity:1;
}

/* ============ HERO / ROOM HEADER ============ */
.moom-hero { padding:clamp(48px,8vw,104px) 0 clamp(36px,5vw,64px); position:relative }
.moom-eyebrow {
  font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);display:flex;align-items:center;gap:14px;margin-bottom:30px
}
.moom-eyebrow::before { content:"";width:46px;height:.5px;background:var(--gold) }

.moom-hero h1 {
  font-family:'Italiana',serif;font-weight:400;color:var(--paper);
  font-size:clamp(56px,9vw,138px);line-height:.9;letter-spacing:-.01em
}
.moom-hero h1 em {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.62em;color:var(--gold);display:inline-block
}
.moom-hero .lede {
  font-family:'Cormorant Garamond',serif;font-size:clamp(18px,2vw,22px);
  color:var(--ink-vapor);max-width:560px;margin-top:30px;line-height:1.7
}
.moom-hero .lede em { color:var(--gold);font-style:italic }

.moom-hero-meta {
  display:flex;flex-wrap:wrap;gap:38px;margin-top:46px;
  padding-top:30px;border-top:.5px solid var(--rule)
}
.moom-hero-meta .m .v { font-family:'Italiana',serif;font-size:34px;color:var(--paper);line-height:1 }
.moom-hero-meta .m .l {
  font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:8px;font-weight:600
}

.moom-readout {
  display:inline-flex;align-items:center;gap:10px;margin-top:34px;
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-vapor);border:.5px solid var(--rule);padding:8px 14px;border-radius:30px;
  background:rgba(0,0,0,.2)
}
.moom-readout .swatch {
  width:11px;height:11px;border-radius:50%;background:var(--tone-accent);
  box-shadow:0 0 14px var(--tone-accent);transition:background var(--pace),box-shadow var(--pace)
}
.moom-readout b { color:var(--gold);font-weight:500 }

/* ============ SECTION HEADER ============ */
.moom-sec { padding:clamp(40px,6vw,92px) 0; position:relative }
.moom-sec-head {
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:30px;margin-bottom:46px;flex-wrap:wrap
}
.moom-sec-head .kick {
  font-size:10px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;
  color:var(--gold);margin-bottom:16px;display:flex;align-items:center;gap:12px
}
.moom-sec-head .kick::before { content:"";width:34px;height:.5px;background:var(--gold) }
.moom-sec-head h2 {
  font-family:'Italiana',serif;font-weight:400;color:var(--paper);
  font-size:clamp(34px,4.6vw,62px);line-height:1;letter-spacing:-.005em
}
.moom-sec-head h2 em { font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-size:.82em }
.moom-sec-head p {
  font-family:'Cormorant Garamond',serif;font-size:17px;color:var(--ink-vapor);
  max-width:420px;line-height:1.7
}

/* ============ GALLERY GRID — 6 per row ============ */
.moom-gallery {
  display:grid;
  gap:clamp(18px,2.5vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));
}
@media(min-width:960px) {
  .moom-gallery { grid-template-columns:repeat(6,1fr) }
}

/* ---- Artwork card ---- */
.moom-work {
  position:relative;border:.5px solid var(--rule);border-radius:3px;
  background:var(--gesso);
  box-shadow:0 36px 70px -28px rgba(0,0,0,.7), 0 0 var(--halo) -6px var(--tone-accent);
  transition:transform .7s cubic-bezier(.2,.7,.2,1),
             box-shadow var(--pace) ease,
             opacity .9s ease, filter var(--pace) ease;
  animation:moomFloat var(--drift) ease-in-out infinite alternate;
  will-change:transform;
}
.moom-work:nth-child(6n+1) { animation-delay:-2s }
.moom-work:nth-child(6n+2) { animation-delay:-5s;  animation-duration:calc(var(--drift) + 3s) }
.moom-work:nth-child(6n+3) { animation-delay:-8s;  animation-duration:calc(var(--drift) - 2s) }
.moom-work:nth-child(6n+4) { animation-delay:-11s; animation-duration:calc(var(--drift) + 1s) }
.moom-work:nth-child(6n+5) { animation-delay:-14s; animation-duration:calc(var(--drift) + 2s) }
.moom-work:nth-child(6n+6) { animation-delay:-17s; animation-duration:calc(var(--drift) - 1s) }
@keyframes moomFloat {
  from { transform:translateY(0) rotate(-.15deg) }
  to   { transform:translateY(-9px) rotate(.15deg) }
}
.moom-work:hover {
  transform:translateY(-14px) scale(1.012);
  box-shadow:0 50px 90px -30px rgba(0,0,0,.8), 0 0 calc(var(--halo) + 24px) -4px var(--tone-accent)
}
.moom-work.dim {
  opacity:.16;filter:grayscale(.55) brightness(.7);
  animation-play-state:paused;pointer-events:none
}

.moom-plate {
  position:absolute;top:0;left:0;z-index:3;
  background:var(--ink);color:var(--paper);
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  padding:5px 9px;border-bottom-right-radius:3px
}
.moom-seal {
  position:absolute;z-index:3;width:50px;height:50px;border-radius:50%;
  background:var(--tone-accent);color:#1b140c;
  display:grid;place-items:center;text-align:center;
  font-family:'Italiana',serif;font-size:14px;line-height:1;letter-spacing:.02em;
  transform:rotate(-8deg);right:14px;top:14px;
  box-shadow:0 6px 16px rgba(0,0,0,.4);transition:background var(--pace)
}

.moom-mat { padding:clamp(10px,1.2vw,16px);background:var(--gesso) }
.moom-frame {
  background:var(--shadow);outline:.5px solid var(--rule-soft);outline-offset:-1px;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  min-height:180px;max-height:55vh
}
.moom-frame img {
  width:100%;height:auto;max-height:55vh;object-fit:contain;display:block;
  transition:transform 1s ease, filter var(--pace) ease
}
.moom-work:hover .moom-frame img { transform:scale(1.02) }

.moom-body {
  padding:clamp(14px,1.4vw,20px);background:var(--gesso);border-top:.5px solid var(--rule-soft)
}
.moom-body .moom-artist-label {
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute)
}
.moom-body .moom-title {
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(16px,1.3vw,19px);
  color:var(--ink);margin-top:5px;line-height:1.25
}
.moom-body .moom-title span { color:var(--ink-faint);font-style:normal;font-size:.8em }

.moom-tone-tags { display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 4px }
.moom-tag {
  font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);border:.5px solid var(--rule);padding:3px 7px;border-radius:30px;background:var(--paper)
}
.moom-tag.tone { color:#1b140c;background:var(--tone-accent);border-color:transparent;transition:background var(--pace) }

.moom-placement {
  display:flex;align-items:center;gap:9px;margin-top:12px;padding-top:12px;
  border-top:.5px solid var(--rule-soft);
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:var(--ink-mute)
}
.moom-placement svg { width:14px;height:14px;stroke:var(--umber);fill:none;stroke-width:1.3;flex-shrink:0 }
.moom-placement a {
  display:contents;color:inherit;text-decoration:none;
}
.moom-placement a:hover span { color:var(--gold);text-decoration:underline;text-underline-offset:2px }

/* ============ MANIFESTO BAND ============ */
.moom-manifesto {
  border-top:.5px solid var(--rule);border-bottom:.5px solid var(--rule);
  padding:clamp(46px,6vw,86px) 0;
  display:grid;grid-template-columns:auto 1fr auto;gap:60px;align-items:center
}
.moom-manifesto .side {
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)
}
.moom-manifesto .quote {
  font-family:'Italiana',serif;font-size:clamp(22px,3vw,42px);line-height:1.25;color:var(--paper)
}
.moom-manifesto .quote em {
  font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--azure)
}
.moom-manifesto .stats {
  display:flex;flex-direction:column;gap:24px;border-left:.5px solid var(--rule);padding-left:48px
}
.moom-manifesto .stats .v { font-family:'Italiana',serif;font-size:34px;color:var(--paper);line-height:1 }
.moom-manifesto .stats .l {
  font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);margin-top:6px
}

/* ============ ARTIST BIO ============ */
.moom-bio { display:grid;grid-template-columns:280px 1fr;gap:56px;align-items:start }
.moom-portrait {
  background:var(--gesso);padding:14px;border:.5px solid var(--rule);border-radius:3px;
  box-shadow:0 30px 60px -24px rgba(0,0,0,.7)
}
.moom-portrait img {
  width:100%;height:auto;display:block;outline:.5px solid var(--rule-soft);outline-offset:-1px
}
.moom-portrait .cap {
  font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;
  color:var(--ink-mute);text-align:center;margin-top:12px
}
.moom-bio h3 {
  font-family:'Italiana',serif;font-weight:400;color:var(--paper);
  font-size:clamp(36px,4.5vw,64px);line-height:.96
}
.moom-bio h3 em {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:.5em;color:var(--gold);display:block;margin-top:4px
}
.moom-vitals {
  display:flex;gap:26px;flex-wrap:wrap;margin:22px 0;padding:16px 0;
  border-top:.5px solid var(--rule);border-bottom:.5px solid var(--rule);
  font-family:'DM Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-faint)
}
.moom-bio p {
  font-family:'Cormorant Garamond',serif;font-size:18px;line-height:1.75;
  color:var(--ink-vapor);margin-bottom:16px;max-width:62ch
}
.moom-bio p em { color:var(--gold);font-style:italic }

/* ============ MOOD DOCK (fixed bottom bar) ============ */
.moom-dock {
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:linear-gradient(0deg, rgba(10,8,5,.97) 64%, rgba(10,8,5,0));
  padding:46px var(--gutter,32px) 34px;
  backdrop-filter:blur(4px);
}
.moom-dock-inner { max-width:1380px;margin:0 auto }
.moom-dock-label {
  text-align:center;font-size:11px;font-weight:600;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink-faint);margin-bottom:24px
}
.moom-dock-label em {
  font-family:'Cormorant Garamond',serif;font-style:italic;
  text-transform:none;letter-spacing:0;font-size:20px;color:var(--gold)
}
.moom-moods { display:flex;justify-content:center;gap:14px;flex-wrap:wrap }
.moom-btn {
  cursor:pointer;font:inherit;color:var(--ink-vapor);
  background:rgba(255,255,255,.03);border:.5px solid var(--rule);
  padding:18px 30px 16px;border-radius:38px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:all .4s ease;min-width:140px;
}
.moom-btn .name { font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase }
.moom-btn .it { font-family:'Cormorant Garamond',serif;font-style:italic;font-size:15px;color:var(--ink-faint) }
.moom-btn:hover { border-color:var(--ink-vapor);transform:translateY(-3px) }
.moom-btn.on {
  background:var(--gesso);color:var(--ink);border-color:transparent;
  box-shadow:0 0 30px -4px var(--tone-accent)
}
.moom-btn.on .it { color:var(--ink-mute) }
.moom-dotc { width:11px;height:11px;border-radius:50%;margin-bottom:3px }

/* ============ RESPONSIVE ============ */
@media(max-width:1100px) {
  .moom-bio { grid-template-columns:1fr;gap:32px }
  .moom-portrait { max-width:280px }
  .moom-manifesto { grid-template-columns:1fr;gap:34px }
  .moom-manifesto .side { writing-mode:horizontal-tb;transform:none }
  .moom-manifesto .stats {
    flex-direction:row;flex-wrap:wrap;border-left:none;padding-left:0;
    border-top:.5px solid var(--rule);padding-top:24px;gap:32px
  }
}
@media(max-width:760px) {
  .moom-room { padding-bottom:200px }
  .moom-gallery { grid-template-columns:repeat(2,1fr) }
  .moom-hero { padding-top:clamp(40px,10vw,72px) }
  .moom-hero h1 { font-size:clamp(46px,13vw,80px) }
  .moom-hero-meta { gap:20px 28px }
  .moom-sec-head { margin-bottom:34px }
  .moom-dock { padding:30px var(--gutter,20px) 24px }
  .moom-dock-label { margin-bottom:16px;font-size:10px }
  .moom-moods {
    flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;
    gap:10px;padding-bottom:8px;scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 18px),transparent)
  }
  .moom-moods::-webkit-scrollbar { height:0 }
  .moom-btn { flex-shrink:0;scroll-snap-align:center;min-width:122px;padding:14px 22px 12px }
}
@media(max-width:480px) {
  .moom-room { padding-bottom:184px }
  .moom-gallery { grid-template-columns:1fr }
  .moom-hero h1 { font-size:clamp(40px,14vw,60px);line-height:.94 }
  .moom-seal { width:42px;height:42px;font-size:7px;right:10px;top:10px }
  .moom-body .moom-title { font-size:17px }
}
@media(prefers-reduced-motion:reduce) {
  .moom-work { animation:none !important }
  .moom-room::before { animation:none !important }
}

/* --- ARTIST TIMELINE (tl-page) --- */


/* --- ARTIST SPECTRAL INDEX (spectral-page) --- */
/* ── Spectral Index custom properties ─────────────────────────────────────── */
/* Defined on :root so position:fixed children (#spec) can inherit them too  */
.spectral-page, #spec {
  --field:#0c1113;
  --field-2:#0a0e10;
  --grid-minor:rgba(120,150,160,0.055);
  --grid-major:rgba(150,180,190,0.13);
  --axis:rgba(190,215,220,0.32);
  --gold:#c9a24b;
  --gold-soft:#d9bd78;
  --gold-glow:rgba(201,162,75,0.55);
  --cyan:#7fb8c2;
  --cyan-soft:#a9d4db;
  --ink:#e8eef0;
  --ink-dim:#8fa1a6;
  --ink-faint:#566569;
  --panel:rgba(16,23,26,0.82);
  --panel-line:rgba(140,170,178,0.18);
  --metal:linear-gradient(145deg,#d8dde0,#7b868a 45%,#c2c9cc 70%,#5c656a);
  --chip-bg:rgba(255,255,255,0.07);
}
.spectral-page {
  --field:#0c1113;
  --field-2:#0a0e10;
}

/* ── Hero overrides ───────────────────────────────────────────────────────── */
.spectral-page .consultation_content h1 {
  max-width:100%;
  overflow-wrap:break-word;
  text-align:center;
}
.spectral-page .full_width_hero_banner_with_background_image .consultation_content h1 a,
.spectral-page .full_width_hero_banner_with_background_image .consultation_content h1 a:hover,
.spectral-page .full_width_hero_banner_with_background_image .consultation_content h1 a:focus {
  color:inherit;
  text-decoration:none;
}
.spectral-badge {
  display:inline-block;
  margin-top:.6rem;
  padding:.25rem .75rem;
  background:rgba(201,162,75,.2);
  border:1px solid rgba(201,162,75,.5);
  border-radius:3px;
  font-size:.82rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-family:"Space Mono",monospace;
  color:#d9bd78;
}

/* ── Lab section wrapper ──────────────────────────────────────────────────── */
.spectral-lab {
  background:var(--field-2);
  color:var(--ink);
  font-family:"Cormorant Garamond",serif;
  -webkit-font-smoothing:antialiased;
  padding:0 0 80px;
}

/* ── Eyebrow / intro header ───────────────────────────────────────────────── */
.lab-intro {
  text-align:center;
  padding:48px 24px 28px;
}
.lab-eyebrow {
  font-family:"Space Mono",monospace;
  font-size:11px;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--cyan);
  opacity:.85;
  margin-bottom:16px;
}
.lab-eyebrow::before,.lab-eyebrow::after{content:"·";margin:0 .7em;color:var(--gold)}
.lab-headline {
  font-family:"Playfair Display",serif;
  font-weight:600;
  font-size:clamp(22px,3.5vw,38px);
  letter-spacing:.01em;
  line-height:1.1;
  color:var(--ink);
}
.lab-sub {
  margin-top:12px;
  font-size:clamp(15px,1.8vw,18px);
  color:var(--ink-dim);
  font-style:italic;
  max-width:620px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.45;
}
.readout-strip {
  margin-top:18px;
  display:flex;
  gap:22px;
  justify-content:center;
  flex-wrap:wrap;
  font-family:"Space Mono",monospace;
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-faint);
}
.readout-strip b {color:var(--gold-soft);font-weight:700}

/* ── Layout: rail + plot ──────────────────────────────────────────────────── */
.lab-shell {
  display:flex;
  gap:0;
  max-width:1320px;
  margin:0 auto;
  padding:8px 24px 0;
  align-items:flex-start;
}

/* ── Filter rail ──────────────────────────────────────────────────────────── */
.spectral-rail {
  flex:0 0 232px;
  position:sticky;
  top:20px;
  background:var(--panel);
  border:1px solid var(--panel-line);
  border-radius:4px;
  backdrop-filter:blur(6px);
  padding:18px 16px 20px;
  box-shadow:0 0 0 1px rgba(0,0,0,.4),0 20px 50px -20px rgba(0,0,0,.8);
}
.rail-head {
  font-family:"Space Mono",monospace;
  font-size:10px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--cyan);
  border-bottom:1px solid var(--panel-line);
  padding-bottom:10px;
  margin-bottom:6px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.rail-head .dot {
  width:7px;height:7px;border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 8px var(--gold-glow);
  animation:pulse 2.6s infinite;
}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}
.rail-group {margin-top:18px}
.rail-group h4 {
  font-family:"Space Mono",monospace;
  font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--ink-faint);
  margin-bottom:10px;font-weight:400;
}
.chips {display:flex;flex-wrap:wrap;gap:7px}
.chip {
  font-family:"Space Mono",monospace;
  font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-dim);
  border:1px solid var(--panel-line);
  background:rgba(255,255,255,.012);
  padding:6px 10px;border-radius:3px;
  cursor:pointer;transition:all .25s ease;user-select:none;
}
.chip:hover{border-color:var(--cyan);color:var(--cyan-soft)}
.chip.active{
  background:rgba(201,162,75,.14);border-color:var(--gold);color:var(--gold-soft);
  box-shadow:0 0 12px -2px var(--gold-glow);
}
.rail-readout {
  margin-top:22px;padding-top:14px;
  border-top:1px solid var(--panel-line);
  font-family:"Space Mono",monospace;
  font-size:11px;letter-spacing:.1em;color:var(--ink-faint);
}
.rail-readout b{color:var(--gold-soft);font-weight:700}
.rail-reset {
  margin-top:14px;width:100%;
  font-family:"Space Mono",monospace;
  font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ink-faint);
  background:none;border:1px dashed var(--panel-line);
  padding:8px;border-radius:3px;
  cursor:pointer;transition:all .25s;
}
.rail-reset:hover{color:var(--cyan-soft);border-color:var(--cyan)}

/* ── Plot canvas ──────────────────────────────────────────────────────────── */
.plot-wrap {flex:1 1 auto;min-width:0;padding-left:26px}
.plot-frame {
  position:relative;width:100%;aspect-ratio:1/0.92;
  background:
    radial-gradient(ellipse 70% 60% at 50% 48%,rgba(40,58,64,.35),transparent 70%),
    radial-gradient(circle at 50% 50%,var(--field),var(--field-2) 78%);
  border:1px solid var(--panel-line);border-radius:4px;overflow:hidden;
  box-shadow:inset 0 0 120px -20px rgba(0,0,0,.85),0 24px 60px -28px rgba(0,0,0,.9);
}
.plot-frame::after {
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.014) 0 1px,transparent 1px 3px);
  mix-blend-mode:overlay;
}
.plot-frame::before {
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 160px 40px rgba(0,0,0,.55);
}
svg.plot {position:absolute;inset:0;width:100%;height:100%;display:block}

/* axis labels */
.axis-label {
  position:absolute;font-family:"Space Mono",monospace;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold-soft);
  opacity:.9;z-index:4;pointer-events:none;
}
.axis-x-left{left:14px;bottom:8px}
.axis-x-right{right:14px;bottom:8px}
.axis-y-top{top:10px;left:50%;transform:translateX(-50%)}
.axis-y-bot{bottom:30px;left:14px;writing-mode:vertical-rl;transform:rotate(180deg)}
.axis-title {
  position:absolute;font-family:"Space Mono",monospace;font-size:9.5px;
  letter-spacing:.34em;text-transform:uppercase;color:var(--cyan);opacity:.7;z-index:4;
}
.axis-title.x{bottom:8px;left:50%;transform:translateX(-50%)}
.axis-title.y{top:50%;left:6px;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg)}

/* thumbnails */
.pt {
  position:absolute;cursor:pointer;z-index:6;
  transform:translate(-50%,-50%) scale(.4);opacity:0;
  transition:opacity .5s ease,filter .35s ease;
  will-change:left,top,transform;
}
.pt .frame {
  width:44px;height:44px;border-radius:50%;overflow:hidden;position:relative;
  border:1.5px solid rgba(200,205,208,.55);
  background:#1a2225;
  box-shadow:0 0 0 1px rgba(0,0,0,.5),0 2px 8px -2px rgba(0,0,0,.8);
  transition:transform .3s cubic-bezier(.2,.9,.25,1),box-shadow .3s,border-color .3s,width .3s,height .3s;
}
.pt .frame::before {
  content:"";position:absolute;inset:0;border-radius:50%;padding:1.5px;
  background:var(--metal);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:.7;pointer-events:none;
}
.pt img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92);border-radius:50%}
.pt.settled{opacity:.78}
.pt:hover{z-index:40}
.pt:hover .frame {
  transform:scale(2.85);border-color:var(--gold);
  box-shadow:0 0 0 1.5px var(--gold),0 0 22px -2px var(--gold-glow),0 8px 24px -6px rgba(0,0,0,.9);
}
.pt:hover img{filter:saturate(1.05)}
.pt.ghost{opacity:.12;filter:grayscale(1) brightness(.7)}
.pt.ghost:hover .frame{transform:scale(1.6)}
.pt.bright{opacity:1}
.pt.bright .frame{border-color:rgba(217,189,120,.7)}

/* ── Spec hover card ──────────────────────────────────────────────────────── */
.spec {
  position:fixed;z-index:200;width:234px;pointer-events:none;
  background:rgba(12,18,21,0.97);
  border:1.5px solid rgba(201,162,75,0.7);
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(0,0,0,.7),
             0 0 18px -4px rgba(201,162,75,0.45),
             0 22px 50px -10px rgba(0,0,0,.95);
  opacity:0;transform:translateY(6px);transition:opacity .18s,transform .18s;
  overflow:hidden;
}
.spec.on{opacity:1;transform:translateY(0)}
.spec .tag {
  font-family:"Space Mono",monospace;font-size:8.5px;letter-spacing:.3em;
  text-transform:uppercase;color:#0c1113;background:var(--gold);
  padding:3px 8px;display:inline-block;font-weight:700;
}
.spec .body{padding:12px 14px 14px}
.spec .title {
  font-family:"Playfair Display",serif;font-size:16px;
  color:#b8c8cc;
  line-height:1.2;margin-bottom:3px;
}
.spec .date{font-family:"Space Mono",monospace;font-size:10px;color:var(--ink-faint);letter-spacing:.12em;margin-bottom:12px}
.spec .metrics{display:flex;gap:14px;margin-bottom:10px}
.spec .metric{flex:1}
.spec .metric .k{font-family:"Space Mono",monospace;font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:2px}
.spec .metric .v{font-family:"Space Mono",monospace;font-size:18px;color:var(--gold-soft);font-weight:700;line-height:1}
.spec .metric .vl{font-size:9px;color:var(--ink-dim);font-family:"Cormorant Garamond",serif;font-style:italic;letter-spacing:.02em;margin-top:2px}
.spec .rows-section{
  border-top:1px solid rgba(140,170,178,0.15);
  padding-top:9px;
  margin-top:4px;
}
.spec .row{
  font-family:"Space Mono",monospace;font-size:9px;letter-spacing:.06em;
  color:var(--cyan);margin-bottom:5px;
}
.spec .row span{
  display:block;
  color:var(--ink-dim);
  font-size:9px;letter-spacing:.03em;
  padding:2px 0 0 2px;
  line-height:1.4;
}
.spec .bar{height:2px;background:linear-gradient(90deg,var(--gold),rgba(201,162,75,0));margin-top:10px;opacity:.7}

/* ── Footnote ─────────────────────────────────────────────────────────────── */
.spectral-footnote {
  text-align:center;max-width:720px;margin:48px auto 0;padding:0 24px;
  color:var(--ink-dim);font-style:italic;font-size:17px;line-height:1.55;
}
.spectral-footnote .em{color:var(--gold-soft);font-style:normal}


/* ── Empty state ──────────────────────────────────────────────────────────── */
.spectral-empty {
  text-align:center;padding:80px 24px;color:var(--ink-dim);
  font-style:italic;font-size:18px;
}

@media(max-width:860px){
  .lab-shell{flex-direction:column;padding:8px 14px 0}
  .spectral-rail{position:static;width:100%;flex-basis:auto}
  .plot-wrap{padding-left:0;margin-top:20px;width:100%}
  .pt .frame{width:34px;height:34px;border-radius:50%}
}

/* Dynamic artist hero background — set --artist-hero-bg on .artist-hero-banner */
.artist-hero-banner::after {
  background: var(--artist-hero-bg) center center / cover no-repeat;
}
.artist-hero-banner .consultation_content h1,
.atlas-page .consultation_content h1,
.chr-page .consultation_content h1,
.tl-page .consultation_content h1,
.spectral-page .consultation_content h1 {
  max-width: 100%;
  overflow-wrap: break-word;
  text-align: center;
}
.artist-hero-banner .consultation_content h1 a,
.artist-hero-banner .consultation_content h1 a:hover,
.artist-hero-banner .consultation_content h1 a:focus,
.atlas-page .full_width_hero_banner_with_background_image .consultation_content h1 a,
.atlas-page .full_width_hero_banner_with_background_image .consultation_content h1 a:hover,
.atlas-page .full_width_hero_banner_with_background_image .consultation_content h1 a:focus,
.chr-page .full_width_hero_banner_with_background_image .consultation_content h1 a,
.chr-page .full_width_hero_banner_with_background_image .consultation_content h1 a:hover,
.tl-page .consultation_content h1 a,
.tl-page .consultation_content h1 a:hover,
.spectral-page .full_width_hero_banner_with_background_image .consultation_content h1 a,
.spectral-page .full_width_hero_banner_with_background_image .consultation_content h1 a:hover,
.spectral-page .full_width_hero_banner_with_background_image .consultation_content h1 a:focus {
  color: inherit;
  text-decoration: none;
}