/* ==========================================================================
   Jeff Clark Artworks — theme styles
   Tokens and geometry from docs/design-handoff-README.md. Six colors, nothing else.
   No white, no black, no gradients, no shadows, no radius (except the circle), no animation.
   ========================================================================== */

:root {
  --bg: #1F1E24;
  --surface: #2A2931;
  --text: #D4D4D4;
  --heading: #C8C2DB;
  --accent: #B290C5;
  --link: #5191A8;
  --deco: #006593;

  --font-display: 'Jost', 'Futura', sans-serif;
  --font-body: 'Alegreya Sans', sans-serif;

  --pad-x: clamp(20px, 3cqw, 48px);
}

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

html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
}
#page { container-type: inline-size; width: 100%; }

a { color: var(--link); text-decoration: none; transition: color .15s; }
a:hover, a:focus-visible { color: var(--accent); }
a:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--deco); color: var(--heading); }

img { display: block; max-width: 100%; height: auto; }
p { text-wrap: pretty; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 500; color: var(--heading); margin: 0; }

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; padding: 8px 12px; background: var(--surface); color: var(--heading); }

/* Label style: nav, section labels, VIEW ALL WORK */
.jca-label {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--link);
}
.jca-label--rule { display: inline-block; padding-bottom: 6px; border-bottom: 1px solid var(--accent); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 14px 32px;
  padding: clamp(20px, 2.4cqw, 36px) var(--pad-x);
}
.site-header__brand {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(13px, 1.1cqw, 16px); letter-spacing: .28em;
  color: var(--heading); white-space: nowrap;
}
.site-header__brand:hover { color: var(--accent); }
.site-nav { display: flex; flex-wrap: wrap; gap: clamp(22px, 2.6cqw, 40px); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: contents; }
.site-nav a { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.site-nav .current-menu-item > a, .site-nav .current_page_parent > a, .site-nav a[aria-current] { color: var(--heading); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface);
  padding: 28px var(--pad-x);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 32px;
  font-size: 14px; line-height: 1.5; color: var(--text);
}
.site-footer__name { color: var(--heading); }
.site-footer__copy { margin-left: auto; }
@media (max-width: 759px) { .site-footer__copy { margin-left: 0; } }

/* --------------------------------------------------------------------------
   Homepage: collage
   -------------------------------------------------------------------------- */
.collage { position: relative; width: 100%; height: 58cqw; overflow-x: hidden; }
.collage__circle { position: absolute; left: 58cqw; top: 6cqw; width: 30cqw; height: 30cqw; border-radius: 50%; background: var(--deco); z-index: 0; }
.collage__frame { position: absolute; background: var(--surface); overflow: hidden; }
.collage__frame a, .collage__frame img { display: block; width: 100%; height: 100%; }
.collage__frame img { object-fit: cover; }

.collage__frame--1 { left: 3cqw;    top: 4cqw;  width: 15cqw; height: 22.5cqw; transform: rotate(-1.5deg); z-index: 1; }
.collage__frame--2 { left: 21cqw;   top: 9cqw;  width: 24cqw; height: 18cqw;   transform: rotate(1deg);    z-index: 1; }
.collage__frame--3 { left: 51cqw;   top: 3cqw;  width: 14cqw; height: 21cqw;   transform: rotate(1.2deg);  z-index: 1; }
.collage__frame--4 { left: 63.5cqw; top: 21cqw; width: 11cqw; height: 22cqw;   transform: rotate(-1deg);   z-index: 2; }
.collage__frame--5 { left: 80cqw;   top: 11cqw; width: 17cqw; height: 25.5cqw; transform: rotate(1.5deg);  z-index: 1; }
.collage__frame--6 { left: 37cqw;   top: 25cqw; width: 12cqw; height: 18cqw;   transform: rotate(-2deg);   z-index: 2; }
.collage__frame--7 { left: 9cqw;    top: 31cqw; width: 10cqw; height: 15cqw;   transform: rotate(2deg);    z-index: 2; }

.collage__headline {
  position: absolute; left: 2.4cqw; bottom: 1.2cqw; margin: 0; z-index: 3; pointer-events: none;
  font-family: var(--font-display); font-weight: 500;
  font-size: 16.5cqw; line-height: .8; letter-spacing: -.045em; white-space: nowrap;
  color: var(--heading);
}
.collage__headline span { color: var(--accent); }

@container (max-width: 759px) {
  .collage { height: 180cqw; }
  .collage__circle { left: 38cqw; top: 54cqw; width: 58cqw; height: 58cqw; }
  .collage__frame--1 { left: 5cqw;  top: 4cqw;   width: 42cqw; height: 63cqw; transform: rotate(-1.5deg); z-index: 1; }
  .collage__frame--3 { left: 55cqw; top: 14cqw;  width: 38cqw; height: 57cqw; transform: rotate(1.5deg);  z-index: 1; }
  .collage__frame--2 { left: 22cqw; top: 64cqw;  width: 52cqw; height: 39cqw; transform: rotate(1deg);    z-index: 2; }
  .collage__frame--4 { left: 6cqw;  top: 106cqw; width: 24cqw; height: 48cqw; transform: rotate(-1.5deg); z-index: 1; }
  .collage__frame--5 { left: 62cqw; top: 100cqw; width: 32cqw; height: 48cqw; transform: rotate(1.5deg);  z-index: 1; }
  .collage__frame--6 { left: 35cqw; top: 113cqw; width: 24cqw; height: 36cqw; transform: rotate(-1deg);   z-index: 2; }
  .collage__frame--7 { display: none; }
  .collage__headline { left: 4cqw; bottom: 3cqw; font-size: 30cqw; line-height: .82; white-space: normal; display: flex; flex-direction: column; }
}

/* --------------------------------------------------------------------------
   Homepage preview: hero (page-home-hero.php). One painting large, small ones beside it.
   -------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 68fr) minmax(0, 26fr); column-gap: 3cqw; align-items: start; padding: clamp(32px, 4cqw, 64px) var(--pad-x) 0; }
.hero--solo { grid-template-columns: minmax(0, 1fr); }
.hero__main { margin: 0; min-width: 0; }
.hero__main a { display: block; color: var(--text); }
.hero__img { width: 100%; background: var(--surface); }
.hero__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero__side { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); row-gap: 2cqw; align-self: stretch; min-width: 0; min-height: 0; padding-bottom: 76px; }
.hero__tile { position: relative; display: block; min-height: 0; background: var(--surface); overflow: hidden; }
.hero__tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__headline {
  grid-column: 1 / -1; margin: clamp(28px, 3cqw, 48px) 0 0; 
  font-family: var(--font-display); font-weight: 500;
  font-size: 11cqw; line-height: .8; letter-spacing: -.045em; white-space: nowrap;
  color: var(--heading);
}
.hero__headline span { color: var(--accent); }
.hero--solo .hero__headline { font-size: 14cqw; }

@container (max-width: 759px) {
  .hero { grid-template-columns: minmax(0, 1fr); row-gap: 20px; }
  .hero__side { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); column-gap: 12px; padding-bottom: 0; }
  .hero__tile { aspect-ratio: 3 / 4; }
  .hero__headline { font-size: 22cqw; white-space: normal; display: flex; flex-direction: column; line-height: .82; }
}

/* --------------------------------------------------------------------------
   Homepage: statement
   -------------------------------------------------------------------------- */
.statement { padding: clamp(80px, 10cqw, 160px) var(--pad-x) 0; }
.statement__col { max-width: 62ch; display: flex; flex-direction: column; gap: clamp(36px, 3.4cqw, 52px); }
.statement__bio { margin: 0; font-size: clamp(20px, 1.6cqw, 24px); line-height: 1.5; color: var(--text); }
.statement__list { display: flex; flex-direction: column; gap: clamp(28px, 2.6cqw, 40px); }
.statement__item { margin: 0; padding-top: 22px; border-top: 1px solid var(--deco); font-size: clamp(17px, 1.3cqw, 19px); line-height: 1.6; }
.statement__lead { color: var(--accent); }

/* --------------------------------------------------------------------------
   Homepage: featured row
   -------------------------------------------------------------------------- */
.featured { padding: clamp(96px, 11cqw, 176px) var(--pad-x) clamp(80px, 9cqw, 140px); }
.featured .jca-label { display: block; margin-bottom: clamp(28px, 2.6cqw, 40px); }
.featured__row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(40px, 3cqw, 48px) clamp(24px, 2.6cqw, 40px); }
.featured__item { margin: 0; flex-shrink: 1; min-width: 0; }
.featured__img { position: relative; width: 100%; background: var(--surface); }
.featured__img img { width: 100%; height: 100%; object-fit: cover; }
.featured__more { margin-top: clamp(48px, 4.4cqw, 64px); }
@container (max-width: 759px) { .featured__item { flex-basis: 100% !important; } }

/* --------------------------------------------------------------------------
   Captions (catalog format, used everywhere)
   -------------------------------------------------------------------------- */
.jca-caption { margin-top: 16px; font-size: 14px; line-height: 1.6; color: var(--text); }
.jca-caption__title { font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--heading); }
a:hover .jca-caption__title { color: var(--accent); }

/* --------------------------------------------------------------------------
   Catalog pages (quiet)
   -------------------------------------------------------------------------- */
.catalog { padding: clamp(32px, 4cqw, 64px) var(--pad-x) clamp(80px, 9cqw, 140px); }
.catalog__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px 40px; margin-bottom: clamp(32px, 3.4cqw, 52px); }
.catalog__title { font-size: clamp(22px, 2.2cqw, 32px); letter-spacing: .06em; text-transform: uppercase; }
.catalog__desc { max-width: 62ch; margin: 12px 0 0; font-size: clamp(16px, 1.2cqw, 18px); line-height: 1.6; }
.catalog__filters { display: flex; flex-wrap: wrap; gap: 14px 28px; }
.catalog__filters a { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.catalog__filters a[aria-current] { color: var(--heading); border-bottom: 1px solid var(--accent); padding-bottom: 4px; }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 3.4cqw, 56px) clamp(24px, 2.6cqw, 40px); }
@container (max-width: 759px) { .grid { grid-template-columns: 1fr; } }
@container (min-width: 760px) and (max-width: 1023px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { margin: 0; }
.tile__img { background: var(--surface); }
.tile__img img { width: 100%; height: auto; }

.group { margin-top: clamp(56px, 5cqw, 80px); }
.group:first-child { margin-top: 0; }
.group__title { display: block; margin-bottom: clamp(20px, 2cqw, 28px); }

/* --------------------------------------------------------------------------
   Artwork detail
   -------------------------------------------------------------------------- */
.artwork { padding: clamp(24px, 3cqw, 48px) var(--pad-x) clamp(80px, 9cqw, 140px); }
.artwork__layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: clamp(32px, 4cqw, 72px); align-items: start; }
@container (max-width: 899px) { .artwork__layout { grid-template-columns: 1fr; } }
.artwork__img { background: var(--surface); }
.artwork__img img { width: 100%; height: auto; }
.artwork__meta { font-size: clamp(15px, 1.15cqw, 17px); line-height: 1.6; }
.artwork__artist { margin-bottom: 14px; }
.artwork__title { font-size: clamp(18px, 1.6cqw, 24px); letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.artwork__title span { font-family: var(--font-body); font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); }
.artwork__rows { margin: 20px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.artwork__price { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--deco); color: var(--heading); }
.artwork__inquire { margin-top: 24px; }
.artwork__desc { margin-top: 28px; max-width: 62ch; }
.artwork__section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--deco); }
.artwork__section .jca-label { display: block; margin-bottom: 10px; }
.artwork__section ul { margin: 0; padding: 0; list-style: none; }
.artwork__nav { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 4cqw, 64px); padding-top: 20px; border-top: 1px solid var(--deco); }
.artwork__nav a { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Plain pages (About, Commissions, Exhibitions, Contact)
   -------------------------------------------------------------------------- */
.page-plain { padding: clamp(32px, 4cqw, 64px) var(--pad-x) clamp(80px, 9cqw, 140px); }
.page-plain__layout { display: grid; grid-template-columns: minmax(0, 62ch) minmax(240px, 1fr); gap: clamp(40px, 5cqw, 96px); align-items: start; }
@container (max-width: 899px) { .page-plain__layout { grid-template-columns: 1fr; } }
.page-plain__title { font-size: clamp(22px, 2.2cqw, 32px); letter-spacing: .06em; text-transform: uppercase; margin-bottom: clamp(24px, 2.6cqw, 40px); }
.page-plain__content { font-size: clamp(17px, 1.3cqw, 19px); line-height: 1.6; max-width: 62ch; }
.page-plain__content > * + * { margin-top: 1.2em; }
.page-plain__content h2 { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--link); margin-top: 2em; }
.page-plain__content blockquote { margin: 1.6em 0; padding: 22px 0 0; border-top: 1px solid var(--deco); font-style: italic; }
.page-plain__aside img { width: 100%; height: auto; }
.page-plain__empty { padding-top: 22px; border-top: 1px solid var(--deco); }

.exhibitions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 28px; }
.exhibitions li { padding-top: 22px; border-top: 1px solid var(--deco); }

/* Ninja Forms: strip its chrome to the six tokens. */
.nf-form-cont { max-width: 62ch; }
.nf-form-cont .nf-form-fields-required { color: var(--text); opacity: .7; font-size: 13px; }
.nf-form-cont label { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--link); }
.nf-form-cont input[type="text"], .nf-form-cont input[type="email"], .nf-form-cont input[type="tel"], .nf-form-cont textarea, .nf-form-cont select {
  width: 100%; background: var(--surface); color: var(--text); border: 1px solid var(--deco); border-radius: 0; padding: 12px 14px;
  font-family: var(--font-body); font-size: 17px; line-height: 1.5;
}
.nf-form-cont input:focus, .nf-form-cont textarea:focus { outline: none; border-color: var(--accent); }
.nf-form-cont input[type="button"], .nf-form-cont input[type="submit"], .nf-form-cont button {
  background: transparent; color: var(--link); border: 0; border-bottom: 1px solid var(--accent); border-radius: 0; padding: 0 0 6px; cursor: pointer;
  font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase;
}
.nf-form-cont input[type="button"]:hover, .nf-form-cont button:hover { color: var(--accent); }
.nf-form-cont .nf-error-msg, .nf-form-cont .nf-error .nf-error-msg { color: var(--accent); }
.nf-form-cont .nf-response-msg { padding-top: 22px; border-top: 1px solid var(--deco); }

/* 404 */
.not-found { padding: clamp(80px, 10cqw, 160px) var(--pad-x); max-width: 62ch; }

/* --------------------------------------------------------------------------
   News (blog)
   -------------------------------------------------------------------------- */
.news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(40px, 4cqw, 64px); }
.news__item { padding-top: 22px; border-top: 1px solid var(--deco); display: grid; grid-template-columns: minmax(0, 62ch) minmax(200px, 1fr); gap: clamp(24px, 3cqw, 48px); align-items: start; }
@container (max-width: 899px) { .news__item { grid-template-columns: 1fr; } }
.news__date { display: block; margin-bottom: 10px; }
.news__title { font-size: clamp(18px, 1.6cqw, 24px); letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; }
.news__excerpt { margin: 12px 0 0; font-size: clamp(16px, 1.2cqw, 18px); line-height: 1.6; }
.news__more { display: inline-block; margin-top: 14px; }
.news__thumb img { width: 100%; height: auto; }
.post { padding: clamp(32px, 4cqw, 64px) var(--pad-x) clamp(80px, 9cqw, 140px); }
.post__head { max-width: 62ch; margin-bottom: clamp(24px, 2.6cqw, 40px); }
.post__title { font-size: clamp(22px, 2.2cqw, 32px); letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; margin-top: 10px; }
.post__hero { max-width: 62ch; margin-bottom: clamp(24px, 2.6cqw, 40px); }
.post__hero img { width: 100%; height: auto; }
.post__body { font-size: clamp(17px, 1.3cqw, 19px); line-height: 1.6; max-width: 62ch; }
.post__body > * + * { margin-top: 1.2em; }
.post__body h2 { font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--link); margin-top: 2em; }
.post__body h3 { font-size: clamp(17px, 1.4cqw, 20px); letter-spacing: .04em; margin-top: 1.6em; }
.post__body img, .post__body figure { max-width: 100%; margin-left: 0; margin-right: 0; }
.post__body figcaption { font-size: 14px; color: var(--text); margin-top: 10px; }
.post__body blockquote { margin: 1.6em 0; padding: 22px 0 0; border-top: 1px solid var(--deco); font-style: italic; }
.post__body a { border-bottom: 1px solid var(--accent); }
.post__nav { display: flex; justify-content: space-between; gap: 24px; margin-top: clamp(40px, 4cqw, 64px); padding-top: 20px; border-top: 1px solid var(--deco); max-width: 62ch; }
.post__nav a { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }
.pagination { margin-top: clamp(40px, 4cqw, 64px); display: flex; gap: 24px; }
.pagination a, .pagination span { font-family: var(--font-display); font-weight: 500; font-size: 12px; letter-spacing: .24em; text-transform: uppercase; }