/*
Theme Name: JC Gallery C2
Theme URI: https://jcgalleryny.com
Author: JC Gallery
Description: The JC Gallery "C2 — Instrument Sans" design, built for WPBakery Page Builder. Artist pages are ordinary pages using the "Artist (C2)" template (sub-pages of Artists) with portrait, statement, biography, exhibitions and education; an Events page built from the artists' exhibition histories; and C2 elements for WPBakery (Hero, Image Marquee, Artist List, Artist Profile, Artist CV, Events, Page Title). Works without WPBakery too. Includes a demo-content importer under Tools.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jcg
*/

/* ------------------------------------------------------------------ Tokens */

:root {
	--jcg-ink: #0e0e0e;
	--jcg-bg: #ffffff;
	--jcg-soft: #f2f2f2;
	--jcg-muted: #6b6b6b;
	--jcg-accent: #db2e1e;
	--jcg-pad: 32px;
	--jcg-rule: 2px solid var(--jcg-ink);
	--jcg-hair: 1px solid var(--jcg-ink);
	--jcg-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--jcg-mono: 'DM Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

@supports (color: oklch(0 0 0)) {
	:root { --jcg-accent: oklch(0.58 0.21 30); }
}

@media (max-width: 600px) {
	:root { --jcg-pad: 20px; }
}

/* -------------------------------------------------------------------- Base */

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

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--jcg-bg);
	color: var(--jcg-ink);
	font-family: var(--jcg-sans);
	-webkit-font-smoothing: antialiased;
}

a { color: var(--jcg-ink); text-decoration: none; }
a:hover { color: var(--jcg-accent); }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--jcg-accent); outline-offset: 2px; }

img { display: block; max-width: 100%; height: auto; }

.screen-reader-text,
.jcg-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.jcg-skip:focus {
	z-index: 100;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	clip: auto;
	padding: 8px 12px;
	background: var(--jcg-ink);
	color: #fff;
}

.jcg-mono { font-family: var(--jcg-mono); font-size: 13px; text-transform: uppercase; }

/* ------------------------------------------------------------- Site frame */

.jcg-site { min-height: 100vh; display: flex; flex-direction: column; }
.jcg-main { flex: 1; }

.jcg-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--jcg-bg);
	border-bottom: var(--jcg-rule);
}
.admin-bar .jcg-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .jcg-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .jcg-header { top: 0; } }

.jcg-header__inner {
	padding: 10px var(--jcg-pad);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.jcg-logo { font-weight: 700; font-size: 19px; letter-spacing: -0.01em; text-transform: uppercase; }

.jcg-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	font-family: var(--jcg-mono);
	font-weight: 500;
	font-size: 15px;
	text-transform: uppercase;
}
.jcg-nav .current-menu-item > a,
.jcg-nav .current-menu-ancestor > a { color: var(--jcg-accent); }

.jcg-footer {
	border-top: var(--jcg-rule);
	padding: 24px var(--jcg-pad);
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	font-family: var(--jcg-mono);
	font-size: 13px;
	text-transform: uppercase;
}

/* ------------------------------------------------------------ Shared bits */

.jcg-display {
	margin: 0;
	font-weight: 700;
	font-stretch: 125%;
	font-size: clamp(34px, 5vw, 80px);
	line-height: 0.82;
	letter-spacing: -0.05em;
	text-transform: uppercase;
}

.jcg-pagehead {
	padding: 32px var(--jcg-pad) 24px;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	flex-wrap: wrap;
}

.jcg-sechead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 24px;
	font-family: var(--jcg-mono);
	font-weight: 500;
	font-size: 16px;
	text-transform: uppercase;
}

.jcg-band {
	background: var(--jcg-ink);
	color: #fff;
	padding: 13px var(--jcg-pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.jcg-band__title {
	margin: 0;
	color: #fff;
	font-weight: 700;
	font-size: 40px;
	line-height: 0.88;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}
.jcg-band a,
.jcg-band__aside { color: #fff; font-family: var(--jcg-mono); font-weight: 500; font-size: 14px; text-transform: uppercase; }
.jcg-band a:hover { color: var(--jcg-accent); }

.jcg-empty { padding: 0 var(--jcg-pad) 96px; }

/* Shown only to editors when an artist element has no artist to show. */
.jcg-notice { margin: 16px var(--jcg-pad); padding: 12px 16px; border: 1px dashed var(--jcg-accent); font-family: var(--jcg-mono); font-size: 12px; text-transform: uppercase; }

/* -------------------------------------------------------------------- Home */

.jcg-hero { padding: 32px var(--jcg-pad) 0; }
.jcg-hero__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: 24px;
	align-items: end;
	padding: 32px 0;
}
.jcg-hero__intro { margin: 0; font-size: 22px; line-height: 1.35; max-width: 32ch; font-weight: 500; text-wrap: pretty; }
.jcg-hero__stats { text-align: right; }

.jcg-marquee { overflow: hidden; border-top: var(--jcg-rule); border-bottom: var(--jcg-rule); }
.jcg-marquee__track {
	display: flex;
	width: max-content;
	animation: jcgMarquee 60s linear infinite;
}
.jcg-marquee__track img {
	width: 20vw;
	min-width: 180px;
	max-width: none;
	height: auto;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	border-right: var(--jcg-rule);
	flex: none;
}
@keyframes jcgMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .jcg-marquee__track { animation: none; } }

.jcg-artists { padding: 80px var(--jcg-pad); }
.jcg-artists--page { padding-top: 24px; }
.jcg-artist-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	border-top: var(--jcg-rule);
	padding: 10px 0;
}
.jcg-artist-row__name {
	font-weight: 700;
	font-stretch: 112%;
	font-size: clamp(19px, calc(3vw - 3px), 41px);
	line-height: 1;
	letter-spacing: -0.04em;
	text-transform: uppercase;
}
.jcg-artist-row__num { font-family: var(--jcg-mono); font-size: 13px; white-space: nowrap; }

/* ------------------------------------------------------------ Artist page */

.jcg-anav { position: relative; border-bottom: var(--jcg-hair); }
.jcg-anav__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	padding: 12px var(--jcg-pad);
	font-family: var(--jcg-mono);
	font-size: 13px;
	text-transform: uppercase;
}
.jcg-anav__toggle {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	text-transform: inherit;
	color: inherit;
	cursor: pointer;
}
.jcg-anav__toggle:hover { color: var(--jcg-accent); }
.jcg-anav__pager { display: flex; gap: 20px; align-items: center; font-weight: 500; white-space: nowrap; }
.jcg-anav__drop {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 20;
	background: var(--jcg-bg);
	border-top: var(--jcg-hair);
	border-bottom: var(--jcg-rule);
	padding: 8px var(--jcg-pad) 24px;
	columns: 260px;
	column-gap: 32px;
}
.jcg-anav__drop[hidden] { display: none; }
.jcg-anav__item {
	display: flex;
	gap: 16px;
	align-items: baseline;
	padding: 12px 0;
	border-bottom: var(--jcg-hair);
	break-inside: avoid;
}
.jcg-anav__item.is-current { color: var(--jcg-accent); }
.jcg-anav__num { font-family: var(--jcg-mono); font-size: 12px; }
.jcg-anav__name { font-weight: 700; font-size: 22px; letter-spacing: -0.02em; text-transform: uppercase; }

.jcg-poster__row { display: flex; flex-wrap: wrap; }
.jcg-poster__media { flex: 1 1 340px; max-width: 100%; min-width: 0; display: flex; flex-direction: column; }
.jcg-poster__media img { width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; }
.jcg-poster__body { flex: 1.5 1 400px; max-width: 100%; padding: 32px var(--jcg-pad); align-self: center; }
.jcg-poster__statement {
	margin: 0 0 12px;
	max-width: 36ch;
	font-size: clamp(20px, 1.8vw, 26px);
	line-height: 1.3;
	font-weight: 500;
	letter-spacing: -0.01em;
	color: var(--jcg-accent);
	text-wrap: pretty;
}
.jcg-poster__about { font-family: var(--jcg-mono); font-weight: 500; font-size: 13px; text-transform: uppercase; margin-bottom: 16px; }
.jcg-poster__bio p { margin: 0 0 16px; font-size: 15px; line-height: 1.65; max-width: 62ch; }
.jcg-poster__facts > div { font-family: var(--jcg-mono); font-size: 13px; text-transform: uppercase; }
.jcg-poster__facts > div + div { margin-top: 6px; }
.jcg-poster__facts a { text-transform: none; }

.jcg-cv {
	padding: 56px var(--jcg-pad) 96px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: 48px;
}
.jcg-cv__title { margin: 0 0 16px; font-family: var(--jcg-mono); font-weight: 500; font-size: 18px; text-transform: uppercase; }
.jcg-cv__row { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 9px 0; border-top: var(--jcg-hair); font-size: 14px; }
.jcg-cv__row span:first-child { font-family: var(--jcg-mono); font-size: 12px; }

/* ---------------------------------------------------------------- Events */

.jcg-evfeat { display: flex; flex-wrap: wrap; border-top: var(--jcg-rule); }
.jcg-evfeat__media { flex: 1.4 1 420px; max-width: 100%; min-width: 0; display: block; }
.jcg-evfeat__media img { width: 100%; height: 100%; min-height: 380px; max-height: 70vh; object-fit: cover; }
.jcg-evfeat__body { flex: 1 1 320px; max-width: 100%; padding: 32px var(--jcg-pad); display: flex; flex-direction: column; justify-content: space-between; gap: 32px; }
.jcg-evfeat__kicker { font-family: var(--jcg-mono); font-weight: 500; font-size: 13px; text-transform: uppercase; color: var(--jcg-accent); }
.jcg-evfeat__text { display: flex; flex-direction: column; gap: 16px; }
.jcg-evfeat__title { font-size: clamp(24px, 2.4vw, 36px); font-weight: 700; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; text-wrap: pretty; }
.jcg-evfeat__place { font-size: 15px; }
@media (max-width: 600px) { .jcg-evfeat__media img { min-height: 260px; } }

.jcg-evyears { padding: 56px var(--jcg-pad) 96px; }
.jcg-evyear {
	display: grid;
	grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
	gap: 24px;
	border-top: var(--jcg-rule);
	padding-top: 12px;
	margin-bottom: 48px;
}
.jcg-evyear__y { font-weight: 700; font-size: 40px; line-height: 0.88; letter-spacing: -0.04em; }
.jcg-evrow {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr) auto 56px;
	align-items: center;
	gap: 20px;
	padding: 12px 0;
	border-bottom: var(--jcg-hair);
}
.jcg-evrow__month { font-family: var(--jcg-mono); font-size: 13px; }
.jcg-evrow__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jcg-evrow__title { font-weight: 700; font-size: 18px; letter-spacing: -0.01em; text-transform: uppercase; }
.jcg-evrow__place { font-size: 14px; color: #555; }
.jcg-evrow__artist { font-family: var(--jcg-mono); font-size: 12px; text-transform: uppercase; }
.jcg-evrow img { width: 56px; height: 56px; object-fit: cover; }
@media (max-width: 700px) {
	.jcg-evyear { grid-template-columns: 1fr; gap: 12px; }
	.jcg-evrow { grid-template-columns: 44px minmax(0, 1fr) 48px; gap: 12px; }
	.jcg-evrow__artist { display: none; }
	.jcg-evrow img { width: 48px; height: 48px; }
}

/* ------------------------------------------------- Ordinary pages & posts */

.jcg-prose { padding: 8px var(--jcg-pad) 96px; max-width: calc(72ch + 2 * var(--jcg-pad)); font-size: 16px; line-height: 1.65; }
.jcg-prose h2, .jcg-prose h3 { font-weight: 700; letter-spacing: -0.02em; text-transform: uppercase; line-height: 1.1; margin: 1.6em 0 0.6em; }
.jcg-prose a { text-decoration: underline; text-underline-offset: 3px; }
.jcg-prose img { margin: 24px 0; }
.jcg-prose input, .jcg-prose textarea, .jcg-prose select { font: inherit; padding: 10px 12px; border: var(--jcg-hair); border-radius: 0; width: 100%; max-width: 560px; }
.jcg-prose input[type="submit"], .jcg-prose button { width: auto; background: var(--jcg-ink); color: #fff; border: 0; padding: 12px 22px; font-weight: 700; text-transform: uppercase; cursor: pointer; }
.jcg-prose input[type="submit"]:hover, .jcg-prose button:hover { background: var(--jcg-accent); }

.jcg-listrow { display: grid; grid-template-columns: 140px 1fr; gap: 16px; padding: 14px 0; border-top: var(--jcg-hair); text-decoration: none !important; }
.jcg-listrow__title { font-weight: 700; text-transform: uppercase; }

.alignleft { float: left; margin: 0 24px 16px 0; }
.alignright { float: right; margin: 0 0 16px 24px; }
.aligncenter { margin-left: auto; margin-right: auto; }
.wp-caption-text, figcaption { font-family: var(--jcg-mono); font-size: 12px; text-transform: uppercase; margin-top: 8px; }

/* ------------------------------------------------------ WPBakery pages */

/* Top-level rows run edge to edge so C2 sections keep their own spacing and full-width rules. */
.jcg-builder > .vc_row,
.jcg-builder > .vc_section > .vc_row { margin-left: 0; margin-right: 0; }
.jcg-builder > .vc_row > .vc_column_container > .vc_column-inner,
.jcg-builder > .vc_section > .vc_row > .vc_column_container > .vc_column-inner { padding-left: 0; padding-right: 0; padding-top: 0; }
.jcg-builder .vc_column-inner > .wpb_wrapper > .wpb_text_column,
.jcg-builder .vc_column-inner > .wpb_wrapper > .wpb_content_element:not([class*="jcg-"]) { padding-left: var(--jcg-pad); padding-right: var(--jcg-pad); }
.jcg-builder .wpb_text_column { font-size: 16px; line-height: 1.65; }

/* Fallback wrapper used when WPBakery is not active. */
.jcg-row { display: block; }