/* ============================================================
   Joe Ray — front-end styles (CSS-driven; no inline styles)
   Clean gallery aesthetic on a white ground so the art pops.
   ============================================================ */

html { scroll-behavior: smooth; }

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Remove default gaps between top-level layout blocks (no seams) */
.wp-site-blocks > * { margin-block-start: 0; margin-block-end: 0; }
.wp-block-post-content > .wp-block-group { margin-block-start: 0; margin-block-end: 0; }

/* ---------------- Header / Nav ---------------- */
.jr-header {
	padding-top: 1.4rem;
	padding-bottom: 1.4rem;
	border-bottom: 1px solid rgba(255,255,255,0.12);
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: saturate(140%) blur(6px);
	/* Full purple header bar with the menu reversed out in white (matches original joeray.com) */
	background-color: var(--wp--preset--color--purple) !important;
}
.jr-header-inner { gap: 1rem; }

.wp-block-site-title a {
	text-decoration: none;
	color: #ffffff;
	letter-spacing: 0.01em;
	transition: color 0.2s ease;
}
.wp-block-site-title a:hover { color: var(--wp--preset--color--tangerine); }

/* Header logo size — single source of truth (edit width here, not inline).
   Targets the actual rendered logo <img>, so it always applies. */
.jr-logo img.custom-logo,
.wp-block-site-logo img.custom-logo {
	width: 260px;
	max-width: 60vw;   /* never overflow the header on small screens */
	height: auto;
}
@media (max-width: 600px) {
	.jr-logo img.custom-logo,
	.wp-block-site-logo img.custom-logo { width: 200px; }
}

/* Nav links */
.jr-nav,
header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.10em;
}
header .wp-block-navigation .wp-block-navigation__container { gap: 1.5rem; }
.jr-header .wp-block-navigation a,
.jr-header .wp-block-navigation .wp-block-navigation-item__content,
.jr-header .wp-block-navigation .wp-block-navigation-submenu__toggle,
.jr-header .wp-block-navigation-item__label { color: #ffffff !important; }
.jr-header .wp-block-navigation a:hover,
.jr-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.jr-header .wp-block-navigation .current-menu-item a { color: var(--wp--preset--color--tangerine) !important; }
/* Submenu (art series dropdown) */
header .wp-block-navigation .wp-block-navigation-submenu__toggle { color: inherit; }
.jr-header .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--purple) !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
	border-radius: 4px;
	padding: 0.4rem 0;
	box-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
/* dropdown items: white text (reversed) on the purple panel */
.jr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content { color: #ffffff !important; }
.jr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--tangerine) !important; }

/* ---------------- Hero (MetaSlider background + centered text overlay) ----------------
   Text sits over artwork images with a dark scrim, so hero copy stays light. */
.jr-hero-ms {
	position: relative;
	overflow: hidden;
	padding: 0 !important;
}
/* the MetaSlider sits as the background layer */
.jr-hero-ms .metaslider { position: relative; z-index: 0; }
.jr-hero-ms .metaslider img { width: 100%; height: auto; display: block; }
/* dark scrim for legibility, painted over the slider */
.jr-hero-ms::after {
	content: "";
	position: absolute; inset: 0; z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(ellipse at center, rgba(18,12,15,0.58) 0%, rgba(18,12,15,0.82) 100%),
		linear-gradient(to bottom, rgba(18,12,15,0.35) 0%, rgba(18,12,15,0.2) 45%, rgba(18,12,15,0.65) 100%);
}
/* centered text overlay, positioned on top of the slider */
.jr-hero-overlay {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) var(--wp--preset--spacing--70);
}
.jr-hero-overlay > * { max-width: 820px; }
.jr-hero-overlay::before {
	content: "";
	position: absolute; left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	width: 70%; height: 80%;
	z-index: -1;
	background: radial-gradient(ellipse at center, rgba(18,12,15,0.5) 0%, rgba(18,12,15,0) 72%);
}
/* Hide MetaSlider's nav arrows + paging dots on the homepage hero (client request 2026-07-26) */
.jr-hero-ms .flex-direction-nav,
.jr-hero-ms .flex-control-nav,
.jr-hero-ms .flex-control-paging,
.metaslider .flex-direction-nav,
.metaslider .flex-control-nav,
.metaslider .flex-control-paging { display: none !important; }

.jr-hero__eyebrow {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.32em;
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--wp--preset--color--gold);
	text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}
.jr-hero__title { text-shadow: 0 3px 24px rgba(0,0,0,0.55); }
.jr-hero__lede { text-shadow: 0 2px 14px rgba(0,0,0,0.6); }
.jr-hero__title {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	line-height: 0.98;
	letter-spacing: -0.01em;
	color: #ffffff;
}
.jr-hero__lede {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem);
	line-height: 1.4;
	max-width: 36ch;
	color: #ffffff;
}

/* Smaller separator dots between disciplines in the hero subtitle (client request) */
.jr-dot { font-size: 0.5em; vertical-align: 0.18em; opacity: 0.8; margin: 0 0.15em; }

/* Spanish accent flourish */
.jr-accent { color: var(--wp--preset--color--tangerine); }
.jr-accent-magenta { color: var(--wp--preset--color--magenta); }
.jr-accent-cobalt { color: var(--wp--preset--color--cobalt); }
.jr-accent-lime { color: var(--wp--preset--color--lime); }

/* ---------------- Section rhythm ---------------- */
.jr-section { padding-top: var(--wp--preset--spacing--70); padding-bottom: var(--wp--preset--spacing--70); }
.jr-section--tight { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }

.jr-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	text-transform: uppercase;
	letter-spacing: 0.28em;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--wp--preset--color--tangerine);
}

/* Page header band */
.jr-page-head {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--60);
	border-bottom: 3px solid var(--wp--preset--color--vermilion);
}
.jr-page-title { font-weight: 800; line-height: 1.05; }
.jr-post-date { color: rgba(22,16,19,0.55); font-size: 0.85rem; }

/* Series intro lede (the poetic artist-voice paragraphs) */
.jr-lede {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
}

/* ---------------- Series grid (home cards) ----------------
   Built with native core Image blocks (figure.jr-series-card) so a non-coder
   can edit them in the block editor. Styling lives here in CSS. */
.jr-series-grid { gap: 1rem; }
.jr-series-grid .wp-block-column { min-width: 0; }

.jr-series-card.wp-block-image {
	position: relative;
	overflow: hidden;
	border-radius: 4px;
	box-shadow: 0 6px 24px rgba(0,0,0,0.15);
	margin: 0;
}
.jr-series-card.wp-block-image a { display: block; text-decoration: none; }
.jr-series-card.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 320px;
	object-fit: cover;
	aspect-ratio: 1 / 1;
	background: var(--wp--preset--color--bone);
	transition: transform 0.5s ease;
}
.jr-series-card.wp-block-image:hover img { transform: scale(1.06); }
/* hover accent frame */
.jr-series-card.wp-block-image::after {
	content: "";
	position: absolute; inset: 0;
	border: 0 solid var(--wp--preset--color--vermilion);
	transition: border-width 0.2s ease;
	pointer-events: none;
}
.jr-series-card.wp-block-image:hover::after { border-width: 4px; }
/* the image caption becomes the series label overlaid on the image bottom */
.jr-series-card.wp-block-image figcaption.wp-element-caption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	margin: 0;
	padding: 2.4rem 1.3rem 1.1rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.6rem;
	letter-spacing: 0.01em;
	color: #fff;
	text-align: left;
	background: linear-gradient(to top, rgba(18,12,15,0.96) 0%, rgba(18,12,15,0.78) 35%, rgba(18,12,15,0.30) 70%, rgba(18,12,15,0) 100%);
	text-shadow: 0 2px 16px rgba(0,0,0,0.8);
}
.jr-series-card.wp-block-image figcaption.wp-element-caption::before {
	content: "";
	position: absolute;
	left: 1.3rem; bottom: 0.7rem;
	width: 2rem; height: 3px;
	background: var(--wp--preset--color--tangerine);
	opacity: 0.95;
}

/* ---------------- Gallery (artwork) ---------------- */
.jr-gallery img { border-radius: 2px; }
.wp-block-image img { max-width: 100%; height: auto; }
/* Blog posts: imported raw <img> tags carry fixed width/height attrs, which
   squish the aspect ratio. Force intrinsic ratio on every article image. */
.jr-article img { max-width: 100%; height: auto; }
/* Hover-caption overlay on blog images (mirrors the live site's scroll-over info) */
.jr-article figure.jr-hovercap { position: relative; display: block; max-width: 100%; margin: var(--wp--preset--spacing--40) auto; overflow: hidden; border-radius: 2px; }
.jr-article figure.jr-hovercap img { display: block; width: 100%; height: auto; }
.jr-article figure.jr-hovercap figcaption {
	position: absolute; inset: 0; margin: 0;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	text-align: center; padding: 1.25rem;
	color: #fff; background: rgba(20,18,19,0.72);
	font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; line-height: 1.55;
	opacity: 0; transition: opacity 0.3s ease;
}
.jr-article figure.jr-hovercap:hover figcaption,
.jr-article figure.jr-hovercap:focus-within figcaption { opacity: 1; }
.jr-article figure.jr-hovercap figcaption .jr-hovercap-title { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.15rem; margin-bottom: 0.35rem; }
figcaption,
.wp-element-caption {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	color: rgba(22,16,19,0.55);
	text-align: center;
	margin-top: 0.6rem;
	font-style: normal;
}
/* Gallery captions: legible chip regardless of artwork background */
.jr-gallery.wp-block-gallery figcaption,
.jr-gallery.wp-block-gallery .wp-element-caption {
	position: static;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-top: 0.7rem;
}
.jr-gallery.wp-block-gallery .wp-block-image {
	background: var(--wp--preset--color--bone);
	padding: 0.5rem 0.5rem 0.8rem;
	border-radius: 4px;
}

/* ---------------- No dark/black behind ANY images (client request 2026-07-26) ----------------
   Neutralize dark background COLORS only (never touch background-image, which is the artwork). */
.foogallery,
.foogallery .fg-item,
.foogallery .fg-item-inner,
.wp-block-gallery,
.wp-block-gallery figure,
figure.wp-block-image,
.jr-gallery,
.jr-gallery figure {
	background-color: transparent !important;
}

/* ---------------- Buttons ---------------- */
.wp-block-button__link { transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--ink);
	border: 2px solid var(--wp--preset--color--ink);
	background: transparent;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(22,16,19,0.06);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--ink);
}
/* Hero secondary CTA ("About Joe") — white button, red text, so it's readable on the dark hero (client request 2026-07-26) */
.jr-hero-overlay .wp-block-button.is-style-outline .wp-block-button__link {
	background: #ffffff;
	color: var(--wp--preset--color--vermilion);
	border: 2px solid #ffffff;
}
.jr-hero-overlay .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--vermilion);
	color: #ffffff;
	border-color: var(--wp--preset--color--vermilion);
}

/* ---------------- Pull quote / mantra ---------------- */
.jr-mantra {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(1.8rem, 1.2rem + 2.5vw, 3rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
}

/* ---------------- Stat / fact strip ---------------- */
.jr-fact { text-align: center; }
.jr-fact .jr-fact-num {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: clamp(2rem, 1.4rem + 2.5vw, 3.2rem);
	color: var(--wp--preset--color--tangerine);
	line-height: 1;
}
.jr-fact .jr-fact-label {
	font-size: 0.95rem;
	color: rgba(22,16,19,0.55);
	margin-top: 0.4rem;
}

/* ---------------- Article (blog/single) ---------------- */
.jr-article { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }
.jr-blog { padding-top: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--60); }

/* Blog listing (post feed) — matches original joeray.com: title, meta (categories / author / date), excerpt, Read More */
.jr-post-list { margin-bottom: var(--wp--preset--spacing--60); padding-bottom: var(--wp--preset--spacing--50); border-bottom: 1px solid rgba(22,16,19,0.12); }
.jr-post-list:last-of-type { border-bottom: none; }
.jr-blog .wp-block-post-title { margin: 0 0 0.35rem; font-size: var(--wp--preset--font-size--x-large); line-height: 1.15; }
.jr-blog .wp-block-post-title a { color: var(--wp--preset--color--purple); text-decoration: none; }
.jr-blog .wp-block-post-title a:hover { color: var(--wp--preset--color--vermilion); }
.jr-post-meta { align-items: baseline; gap: 0.1rem 0.55rem !important; margin: 0 0 0.85rem; font-family: var(--wp--preset--font-family--body); font-size: 0.85rem; font-weight: 600; }
.jr-post-meta, .jr-post-meta a { color: var(--wp--preset--color--vermilion); text-decoration: none; }
.jr-post-meta a:hover { color: var(--wp--preset--color--tangerine); }
.jr-post-meta .wp-block-post-date { color: rgba(22,16,19,0.5); font-weight: 500; }
.jr-post-meta .wp-block-post-author { display: inline-flex !important; flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: 0.3rem; white-space: nowrap; }
.jr-post-meta .wp-block-post-author__byline,
.jr-post-meta .wp-block-post-author__name { display: inline; margin: 0; font-size: inherit; line-height: inherit; }
.jr-post-meta .wp-block-post-author__byline { margin-right: 0.32rem; }
.jr-post-meta .wp-block-post-author__avatar { display: none; }
.jr-post-meta > *:not(:first-child)::before { content: "\00b7"; margin-right: 0.55rem; color: rgba(22,16,19,0.35); font-weight: 400; }
.jr-blog .wp-block-post-excerpt { color: var(--wp--preset--color--ink); }
.jr-blog .wp-block-post-excerpt__more-text { margin-top: 0.5rem; }
.jr-blog .wp-block-post-excerpt__more-text a { color: var(--wp--preset--color--vermilion); font-weight: 700; text-decoration: none; }
.jr-blog .wp-block-post-excerpt__more-text a:hover { color: var(--wp--preset--color--tangerine); }
.jr-blog .jr-pagination { margin-top: var(--wp--preset--spacing--50); font-weight: 700; }
.jr-blog .jr-pagination a { color: var(--wp--preset--color--vermilion); text-decoration: none; }

/* ---------------- Footer ---------------- */
.jr-footer {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--60);
	border-top: 3px solid var(--wp--preset--color--vermilion);
}
.jr-footer-cta { font-weight: 800; }
.jr-footer-sub { color: rgba(22,16,19,0.6); max-width: 48ch; margin-left: auto; margin-right: auto; }
.jr-footer-rule { border: none; border-top: 1px solid rgba(22,16,19,0.14); width: 100%; margin-top: var(--wp--preset--spacing--50); margin-bottom: var(--wp--preset--spacing--40); }
.jr-footer-meta { color: rgba(22,16,19,0.6); letter-spacing: 0.04em; }

/* Footer menu links */
.jr-footer-nav {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	gap: 1.6rem;
	margin-bottom: var(--wp--preset--spacing--40);
}
.jr-footer-nav .wp-block-navigation-item a { color: var(--wp--preset--color--ink); text-decoration: none; }
.jr-footer-nav .wp-block-navigation-item a:hover { color: var(--wp--preset--color--tangerine); }

/* Footer social icons */
.jr-footer-social {
	gap: 0.7rem;
	margin-top: var(--wp--preset--spacing--30);
	margin-bottom: var(--wp--preset--spacing--40);
}
.jr-footer-social .wp-social-link {
	color: var(--wp--preset--color--ink);
	width: 2.1rem; height: 2.1rem;
	transition: transform 0.2s ease, color 0.2s ease;
}
.jr-footer-social .wp-social-link svg { width: 1.25rem; height: 1.25rem; }
.jr-footer-social .wp-social-link:hover {
	transform: translateY(-3px);
	color: var(--wp--preset--color--tangerine);
}

/* ---------------- FooGallery artwork captions + purchase CTA ----------------
   These render inside FooGallery's dark hover panel / lightbox, so keep them light. */
.jr-art-title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800;
	font-size: 1.15rem;
	color: #fff;
	margin-bottom: 0.25rem;
}
.jr-art-detail {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	color: var(--wp--preset--color--bone-dim);
	margin-bottom: 0.7rem;
}
/* award credit line (who the piece was made for) — smaller, muted */
.jr-art-credit {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-style: italic;
	color: var(--wp--preset--color--bone-dim);
	opacity: 0.9;
	margin-bottom: 0.2rem;
}
/* the Inquire-to-Purchase call to action button */
.jr-art-inquire {
	display: inline-block;
	background: var(--wp--preset--color--vermilion);
	color: #fff !important;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	text-decoration: none;
	padding: 0.55rem 1.1rem;
	border-radius: 2px;
	transition: background 0.2s ease;
}
.jr-art-inquire:hover { background: var(--wp--preset--color--tangerine); }
.jr-art-inquire { cursor: pointer; }
/* Inquire buttons are lifted out of the FooGallery lightbox anchor by JS
   (see joeray_gallery_inquire_js) and re-attached as a direct child of the
   gallery item, so they are genuinely clickable. Position over the bottom of
   the thumbnail and reveal on hover, matching the caption behaviour. */
.foogallery .fg-item.jr-has-inquire { position: relative; }
.foogallery .fg-item .jr-art-inquire {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 20;
	opacity: 0;
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 0.25s ease;
}
.foogallery .fg-item:hover .jr-art-inquire,
.foogallery .fg-item:focus-within .jr-art-inquire {
	opacity: 1;
	pointer-events: auto;
}
.jr-art-inquire.jr-art-sold {
	background: transparent;
	border: 1px solid var(--wp--preset--color--bone-dim);
	color: var(--wp--preset--color--bone-dim) !important;
	font-size: 0.7rem;
}
.jr-art-inquire.jr-art-sold:hover { border-color: var(--wp--preset--color--tangerine); color: var(--wp--preset--color--tangerine) !important; background: transparent; }
/* FooGallery caption box on hover — give it room for the CTA */
.foogallery .fg-caption .fg-caption-inner { padding: 1rem; }
.foogallery .fg-caption-desc { line-height: 1.4; }
/* FooGallery lightbox caption (PRO panel / free) sits on a dark overlay */
.fg-panel-info-inner, .fbx-info { color: var(--wp--preset--color--bone); }

/* Lightbox: always show the FULL artwork, scaled to fit the viewport, never oversized/cropped (client fix 2026-07-26) */
.fg-panel-media img,
.fg-media-content img,
.fg-panel .fg-image,
.fbx-image img {
	max-height: 74vh !important;
	max-width: 92vw !important;
	width: auto !important;
	height: auto !important;
	margin: 0 auto !important;
	object-fit: contain !important;
}

/* ---------------- Contact card + form ---------------- */
.jr-contact-card {
	background: var(--wp--preset--color--bone);
	border: 1px solid rgba(22,16,19,0.12);
	border-radius: 6px;
	padding: 2rem 2rem 2.2rem;
	margin-top: var(--wp--preset--spacing--40);
}
.wpcf7-form label {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	color: var(--wp--preset--color--ink);
	margin-bottom: 1rem;
}
.jr-form-name { display: flex; gap: 1rem; }
.jr-form-name label { flex: 1; }
@media (max-width: 520px) { .jr-form-name { flex-direction: column; gap: 0; } }

/* ---------------- Forms (Contact Form 7) ---------------- */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form textarea {
	width: 100%;
	padding: 0.8rem 0.9rem;
	background: #ffffff;
	border: 1px solid rgba(22,16,19,0.25);
	border-radius: 3px;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	box-sizing: border-box;
	margin-top: 0.35rem;
}
.wpcf7-form input::placeholder, .wpcf7-form textarea::placeholder { color: rgba(22,16,19,0.45); }
.wpcf7-form textarea { min-height: 150px; resize: vertical; }
.wpcf7-form input:focus, .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--tangerine);
}
.wpcf7-form .wpcf7-submit {
	background: var(--wp--preset--color--vermilion);
	color: #fff; border: none; border-radius: 2px;
	padding: 0.9rem 2rem; font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.08em; cursor: pointer;
}
.wpcf7-form .wpcf7-submit:hover { background: var(--wp--preset--color--tangerine); }

/* ---------------- Responsive ---------------- */
@media (max-width: 781px) {
	.jr-hero { min-height: 70vh; }
	.jr-series-card .jr-series-label { font-size: 1.2rem; }
}
@media (max-width: 600px) {
	.wp-block-buttons { justify-content: center; }
}

/* ---------------- Inquire-to-Purchase modal form ----------------
   Self-contained (theme-only) inquiry modal. Opens on the same page when an
   Inquire button is clicked, pre-filled with the artwork title. See
   joeray_inquiry_modal() / joeray_gallery_inquire_js() in functions.php. */
/* z-index must beat FooGallery's lightbox panel (.fg-panel = 999999) so the modal
   is visible when an Inquire button is clicked from inside the opened image. */
.jr-inq-modal { display: none; position: fixed; inset: 0; z-index: 2147483000; }
.jr-inq-modal.is-open { display: block; }
body.jr-modal-open { overflow: hidden; }
.jr-inq-backdrop {
	position: absolute; inset: 0;
	background: rgba(22, 16, 19, 0.72);
	backdrop-filter: blur(2px);
	animation: jrInqFade 0.2s ease;
}
.jr-inq-dialog {
	position: relative;
	max-width: 480px;
	width: calc(100% - 2.5rem);
	margin: 8vh auto 0;
	background: var(--wp--preset--color--bone);
	color: var(--wp--preset--color--ink);
	border-radius: 4px;
	box-shadow: 0 20px 60px rgba(0,0,0,0.45);
	padding: 2rem 1.9rem 1.9rem;
	animation: jrInqPop 0.22s ease;
	max-height: 84vh; overflow-y: auto;
}
@keyframes jrInqFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jrInqPop { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.jr-inq-x {
	position: absolute; top: 0.5rem; right: 0.7rem;
	background: none; border: 0; cursor: pointer;
	font-size: 1.9rem; line-height: 1; color: var(--wp--preset--color--ink);
	opacity: 0.55; transition: opacity 0.2s ease; padding: 0.2rem 0.4rem;
}
.jr-inq-x:hover { opacity: 1; }
.jr-inq-heading {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; font-size: 1.5rem;
	text-transform: uppercase; letter-spacing: 0.04em;
	margin: 0 0 0.35rem; color: var(--wp--preset--color--ink);
}
.jr-inq-regarding {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.9rem; margin: 0 0 1.2rem;
	color: var(--wp--preset--color--ink-soft);
}
.jr-inq-piece-label { font-weight: 700; color: var(--wp--preset--color--vermilion); }
.jr-inq-field { display: block; margin-bottom: 0.9rem; }
.jr-inq-field > span {
	display: block; font-family: var(--wp--preset--font-family--body);
	font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
	font-weight: 700; margin-bottom: 0.3rem; color: var(--wp--preset--color--ink-soft);
}
.jr-inq-field > span em { color: var(--wp--preset--color--vermilion); font-style: normal; }
.jr-inq-field input, .jr-inq-field textarea {
	width: 100%; box-sizing: border-box;
	font-family: var(--wp--preset--font-family--body); font-size: 0.95rem;
	padding: 0.6rem 0.7rem; border: 1px solid var(--wp--preset--color--bone-dim);
	border-radius: 3px; background: #fff; color: var(--wp--preset--color--ink);
}
.jr-inq-field input:focus, .jr-inq-field textarea:focus {
	outline: none; border-color: var(--wp--preset--color--vermilion);
	box-shadow: 0 0 0 2px rgba(230, 52, 32, 0.15);
}
.jr-inq-field textarea { resize: vertical; min-height: 3.2rem; }
.jr-inq-actions { margin-top: 0.4rem; }
.jr-inq-submit {
	display: inline-block; background: var(--wp--preset--color--vermilion);
	color: #fff; border: 0; cursor: pointer;
	font-family: var(--wp--preset--font-family--body); font-weight: 700;
	font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em;
	padding: 0.7rem 1.4rem; border-radius: 2px; transition: background 0.2s ease;
}
.jr-inq-submit:hover { background: var(--wp--preset--color--tangerine); }
.jr-inq-submit:disabled { opacity: 0.6; cursor: default; }
.jr-inq-status { font-size: 0.85rem; margin: 0.8rem 0 0; color: var(--wp--preset--color--ink-soft); min-height: 1em; }
.jr-inq-success-msg { font-size: 1rem; line-height: 1.5; margin: 0.5rem 0 1.3rem; color: var(--wp--preset--color--ink); }
/* Honeypot: visually hidden, off-screen, but present for bots. */
.jr-inq-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   About: Featured Videos + Patron & Collector Insights,
   and Exhibitions: Past Exhibitions  (added 2026-08-04)
   ============================================================ */
.jr-section-title {
	font-size: clamp(1.6rem, 3.5vw, 2.4rem);
	margin-bottom: var(--wp--preset--spacing--60, 2rem);
}

/* --- Featured Videos --- */
.jr-videos .jr-video { max-width: 820px; margin: 0 auto var(--wp--preset--spacing--70, 3rem); }
.jr-videos .jr-video:last-child { margin-bottom: 0; }
.jr-video-title { font-size: clamp(1.25rem, 2.4vw, 1.7rem); margin-bottom: .35rem; }
.jr-video-desc { max-width: 68ch; margin: 0 auto 1.1rem; opacity: .9; }
.jr-video-frame {
	position: relative; width: 100%; padding-top: 56.25%;
	border-radius: 6px; overflow: hidden;
	box-shadow: 0 10px 30px rgba(22,16,19,.18);
	background: #000;
}
.jr-video-frame iframe,
.jr-video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- Patron & Collector Insights --- */
.jr-insights .jr-testimonial {
	max-width: 720px; margin: 0 auto var(--wp--preset--spacing--60, 2rem);
	padding: 1.75rem 1.9rem;
	border: 1px solid rgba(22,16,19,.10);
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 6px 18px rgba(22,16,19,.06);
}
.jr-insights .jr-testimonial:last-child { margin-bottom: 0; }
.jr-stars { color: var(--wp--preset--color--vermilion, #d1462f); letter-spacing: 2px; margin: 0 0 .6rem; font-size: 1.05rem; }
.jr-quote { border: 0; margin: 0 0 .9rem; padding: 0; font-size: 1.05rem; }
.jr-quote p { font-style: italic; line-height: 1.6; }
.jr-cite { margin: 0; font-size: .95rem; line-height: 1.4; }
.jr-cite strong { font-style: normal; }

/* --- Past Exhibitions --- */
.jr-past-exhib .jr-exhib-item {
	max-width: 760px; margin: 0 auto;
	padding: 1.1rem 0;
	border-bottom: 1px solid rgba(22,16,19,.12);
	text-align: center;
}
.jr-past-exhib .jr-exhib-item:last-child { border-bottom: 0; }
.jr-exhib-when { margin: 0 0 .15rem; }
.jr-exhib-date {
	display: inline-block;
	font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--vermilion, #d1462f);
}
.jr-exhib-title { font-size: clamp(1.05rem, 2vw, 1.3rem); margin: 0 0 .2rem; }
.jr-exhib-venue { margin: 0; opacity: .82; font-size: .95rem; }

/* --- Events (dependency-free CPT: /events/<slug>/) --- */
.jr-event-article { padding-top: var(--wp--preset--spacing--60, 2rem); padding-bottom: var(--wp--preset--spacing--60, 2rem); }
.jr-event-meta {
	max-width: 760px; margin: 0 auto var(--wp--preset--spacing--50, 1.5rem);
	padding: .9rem 1.2rem;
	border: 1px solid rgba(22,16,19,.12);
	border-left: 4px solid var(--wp--preset--color--vermilion, #d1462f);
	border-radius: 6px;
	background: #fff;
}
.jr-event-meta p { margin: .15rem 0; font-size: 1rem; line-height: 1.5; }
.jr-event-when { font-weight: 700; }
.jr-event-where { opacity: .9; }
.jr-event-label {
	display: inline-block; min-width: 5.2rem;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 800; letter-spacing: .02em;
	color: var(--wp--preset--color--vermilion, #d1462f);
}
.jr-event-back { max-width: 760px; margin: var(--wp--preset--spacing--60, 2rem) auto 0; }
.jr-event-back a { text-decoration: none; font-weight: 600; }
.jr-event-back a:hover { text-decoration: underline; }

/* Events archive listing */
.jr-event-list .jr-event-item {
	max-width: 760px; margin: 0 auto;
	padding: 1.2rem 0;
	border-bottom: 1px solid rgba(22,16,19,.12);
	text-align: center;
}
.jr-event-list .jr-event-item:last-child { border-bottom: 0; }
.jr-event-item-title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 0 0 .3rem; }
.jr-event-item-title a { text-decoration: none; }
.jr-event-item-title a:hover { text-decoration: underline; }
.jr-event-item-meta { margin: 0; opacity: .85; font-size: .98rem; }

/* Event featured image (single-event) */
.jr-event-featimg { max-width: 560px; margin-left: auto; margin-right: auto; margin-bottom: var(--wp--preset--spacing--50, 1.5rem); }
.jr-event-featimg img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 8px 24px rgba(22,16,19,.14); display: block; }
/* Event thumbnail in the Exhibitions past-events list */
.jr-exhib-thumb { display: block; max-width: 220px; margin: 0 auto .7rem; }
.jr-exhib-thumb img { width: 100%; height: auto; border-radius: 4px; box-shadow: 0 6px 18px rgba(22,16,19,.12); }