/* Joni McKim, Artist — a gallery wall. One stylesheet for the whole site.
   Palette: wall #1e191b · wall-lift #2a2326 · mat #efe7d8 · text #d9cfc0 · brass #c4a15a · plaster-light #e8dfcf */
:root {
  --wall: #1e191b;
  --wall-lift: #2a2326;
  --mat: #efe7d8;
  --text: #d9cfc0;
  --muted: #a89d8e;
  --brass: #c4a15a;
  --brass-hi: #e3c785;
  --brass-lo: #8a6c2f;
  --plaster: #e8dfcf;
  --ink: #2a2220;
  --gutter: 24px;
  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text); font: 400 1.0625rem/1.8 var(--sans);
  background-color: var(--wall);
  background-image:
    radial-gradient(1100px 620px at 50% -140px, rgba(227, 199, 133, .17), transparent 70%),
    radial-gradient(900px 500px at 100% 40%, rgba(120, 70, 90, .10), transparent 70%),
    radial-gradient(900px 500px at 0% 75%, rgba(90, 100, 120, .09), transparent 70%);
  background-repeat: no-repeat;
}
/* plaster grain over the whole wall */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 50; pointer-events: none;
  background-image: var(--grain); opacity: .075; mix-blend-mode: soft-light;
}
::selection { background: var(--brass); color: var(--wall); }
img { max-width: 100%; height: auto; }
a { color: var(--brass-hi); text-underline-offset: .22em; text-decoration-thickness: 1px; }
a:hover { color: #fff3d6; }
:focus-visible { outline: 2px solid var(--brass-hi); outline-offset: 3px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.12; margin: 1.7em 0 .5em; color: #f4ecdd; letter-spacing: .005em; }
h1 { font-size: clamp(2.4rem, 5vw, 3.6rem); }
h2 { font-size: clamp(2.2rem, 5vw, 3.5rem); }
h3 { font-size: clamp(1.7rem, 3vw, 2.2rem); }
h4 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); font-style: italic; color: var(--muted); font-weight: 400; line-height: 1.35; }
p { margin: 0 0 1.2em; }

.screen-reader-text, .skip-link:not(:focus) {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; padding: .6em 1em; background: var(--mat); color: var(--ink); }

/* ---------- header ---------- */
.site-header { position: relative; text-align: center; padding: 54px var(--gutter) 0; }
.site-title { margin: 0; font: 400 clamp(2.6rem, 7vw, 4.8rem)/1 var(--serif); letter-spacing: .035em; }
.site-title a { color: #f6eedf; text-decoration: none; }
.site-description { margin: .7rem 0 0; font: italic 400 clamp(1.15rem, 2.4vw, 1.4rem)/1.3 var(--serif); color: var(--brass); letter-spacing: .04em; }
.site-nav ul { list-style: none; margin: 34px 0 0; padding: 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(20px, 3.4vw, 46px); }
.site-nav a {
  position: relative; display: block; padding: 10px 2px 18px; color: var(--text); text-decoration: none;
  font: italic 400 1.28rem/1.2 var(--serif); letter-spacing: .02em;
}
.site-nav a::after {
  content: ""; position: absolute; left: 50%; bottom: 4px; width: 6px; height: 6px; background: var(--brass);
  transform: translateX(-50%) rotate(45deg) scale(0); transition: transform .25s ease;
}
.site-nav a:hover { color: #fff3d6; }
.site-nav a:hover::after, .site-nav a[aria-current="page"]::after { transform: translateX(-50%) rotate(45deg) scale(1); }
.site-nav a[aria-current="page"] { color: var(--brass-hi); }
/* gilt picture-rail under the header */
.site-header::after {
  content: ""; display: block; height: 1px; margin-top: 4px;
  background: linear-gradient(90deg, transparent, var(--brass-lo) 18%, var(--brass-hi) 50%, var(--brass-lo) 82%, transparent);
}
.nav-toggle { display: none; }

@media (max-width: 700px) {
  .site-header { padding-top: 38px; }
  .js .nav-toggle {
    display: inline-block; margin: 20px 0 6px; padding: .5em 1.8em; background: none; border: 1px solid var(--brass);
    color: var(--brass-hi); font: italic 400 1.2rem var(--serif); letter-spacing: .04em; cursor: pointer;
  }
  .js .site-nav ul { display: none; flex-direction: column; margin: 10px 0 8px; }
  .js .site-nav ul.is-open { display: flex; }
  .site-nav ul { margin-top: 16px; }
  .site-nav a { padding: 11px 2px; }
  .site-nav a::after { display: none; }
  .site-nav a[aria-current="page"] { color: var(--brass-hi); }
}

/* ---------- layout ---------- */
.site-main { min-height: 50vh; padding-bottom: 110px; overflow-x: clip; }
.entry-content > *:not(.alignfull) { width: min(calc(100% - 2 * var(--gutter)), 680px); margin-left: auto; margin-right: auto; }
.entry-content > .alignwide { width: min(calc(100% - 2 * var(--gutter)), 1120px); }
.entry-content > .alignfull { width: 100%; }
.entry-content > *:first-child { margin-top: 56px; }
.entry-content > .wp-block-group:first-child > :first-child { margin-top: 0; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }
.has-medium-font-size { font-size: 1.2rem; }

/* page titles (the screen-reader h1 becomes a visible title on text-led pages) */
.page-about .site-main > h1.screen-reader-text,
.page-giclee-prints-for-sale .site-main > h1.screen-reader-text {
  position: static !important; width: auto; height: auto; clip: auto; clip-path: none; overflow: visible; white-space: normal;
  margin: 64px auto 0; padding: 0 var(--gutter); text-align: center;
  font: 400 clamp(2.4rem, 6vw, 4rem)/1.1 var(--serif); color: #f6eedf;
}
.page-about .site-main > h1.screen-reader-text::after,
.page-giclee-prints-for-sale .site-main > h1.screen-reader-text::after {
  content: ""; display: block; width: 8px; height: 8px; margin: 26px auto 0; background: var(--brass); transform: rotate(45deg);
}
.page-about .entry-content > *:first-child,
.page-giclee-prints-for-sale .entry-content > *:first-child { margin-top: 44px; }

.page-about .entry-content > p:first-child::first-letter {
  float: left; font: 400 4.6rem/.8 var(--serif); color: var(--brass); padding: .08em .12em 0 0;
}
.pullquote {
  margin-top: 2.4em !important; margin-bottom: 2.4em;
  font: italic 400 clamp(1.6rem, 3.2vw, 2.15rem)/1.35 var(--serif); color: #f4ecdd; text-align: center;
  padding: 1.4em 0; border-top: 1px solid var(--brass-lo); border-bottom: 1px solid var(--brass-lo);
}

/* ---------- groups & the spotlit band ---------- */
.wp-block-group { margin-top: 1.6em; margin-bottom: 1.6em; }
.wp-block-group.alignfull { margin: 110px 0 -110px; padding: 84px var(--gutter); }
.wp-block-group.alignfull > * { max-width: 1100px; margin-left: auto; margin-right: auto; }
.wp-block-group.alignfull > :first-child { margin-top: 0; }
.has-secondary-background-color {
  position: relative; background-color: var(--plaster); color: var(--ink);
  background-image: radial-gradient(800px 320px at 50% 0, rgba(255, 255, 255, .55), transparent 70%);
  box-shadow: inset 0 1px 0 var(--brass), inset 0 -1px 0 var(--brass);
}
.has-secondary-background-color::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain); opacity: .22; mix-blend-mode: multiply;
}
.has-secondary-background-color > * { position: relative; }
.has-secondary-background-color h2, .has-secondary-background-color h3 { color: var(--ink); }
.has-secondary-background-color .has-tertiary-color { color: var(--ink); }
.has-secondary-background-color .wp-block-button__link { color: var(--ink); border-color: var(--ink); }
.has-secondary-background-color .wp-block-button__link:hover, .has-secondary-background-color .wp-block-button__link:focus { background: var(--ink); color: var(--plaster); }

/* ---------- framed art ---------- */
/* Every painting: off-white mat, thin gilt frame, soft shadow on the wall. */
.wp-block-image img, .wp-block-media-text__media img {
  display: block; background: var(--mat);
  border: clamp(8px, 1.3vw, 14px) solid var(--mat);
  box-shadow:
    0 0 0 2px var(--brass), 0 0 0 3px var(--brass-lo), 0 0 0 4px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(60, 40, 10, .28),
    0 3px 6px rgba(0, 0, 0, .45), 0 26px 50px -14px rgba(0, 0, 0, .75);
}
.wp-block-image { margin: 2.4em auto; }
.wp-block-image.aligncenter, .wp-block-image.alignwide { text-align: center; }
.wp-block-image > img, .wp-block-image > a > img { margin-left: auto; margin-right: auto; }
.wp-block-image figcaption, .wp-block-gallery figcaption {
  margin: 20px auto 0; max-width: 34ch; text-align: center; font: italic 400 1.08rem/1.35 var(--serif); color: var(--muted);
}

/* lone picture inside text pages */
.entry-content > .wp-block-image img { margin: 0 auto; width: auto; max-width: min(100%, 540px); }

/* hero painting on the home page: lit from above */
.page-home .entry-content > .wp-block-image:first-child { position: relative; margin: 56px auto 24px; width: min(calc(100% - 2 * var(--gutter)), 880px); padding: 34px 0 6px; }
.page-home .entry-content > .wp-block-image:first-child::before {
  content: ""; position: absolute; left: 50%; top: -30px; width: 130%; height: 120%; transform: translateX(-50%); z-index: -1;
  background: radial-gradient(closest-side, rgba(240, 214, 150, .30), rgba(240, 214, 150, .08) 55%, transparent 75%);
  animation: lamp 1.8s ease-out both;
}
.page-home .entry-content > .wp-block-image:first-child img { width: min(100%, 760px); max-width: none; }
.page-home .entry-content > .wp-block-image:first-child figcaption { display: none; }
@keyframes lamp { from { opacity: 0; } to { opacity: 1; } }

/* galleries: a hang of unequal frames, labels beneath */
.wp-block-gallery { display: block; width: 100%; padding: 0 var(--gutter); margin: 3em 0; column-width: 250px; column-gap: 54px; }
.wp-block-gallery > figure.wp-block-image { display: block; break-inside: avoid; margin: 0 0 58px; padding: 0 5px; text-align: center; }
.wp-block-gallery > figure.wp-block-image > img, .wp-block-gallery > figure.wp-block-image > a > img { width: 100%; height: auto; }
.wp-block-gallery > figure.wp-block-image > a { display: block; }
.wp-block-gallery a[data-lightbox] { cursor: zoom-in; }
.wp-block-gallery a[data-lightbox] img { transition: transform .35s ease, box-shadow .35s ease; }
.wp-block-gallery a[data-lightbox]:hover img, .wp-block-gallery a[data-lightbox]:focus-visible img {
  transform: translateY(-4px);
  box-shadow:
    0 0 0 2px var(--brass-hi), 0 0 0 3px var(--brass-lo), 0 0 0 4px rgba(0, 0, 0, .55),
    inset 0 0 0 1px rgba(60, 40, 10, .28),
    0 0 40px 4px rgba(227, 199, 133, .22), 0 34px 60px -14px rgba(0, 0, 0, .8);
}

/* short rows (home, about, contact): same-height frames hung in a line */
.page-home .entry-content > .wp-block-gallery, .page-about .entry-content > .wp-block-gallery { width: min(calc(100% - 2 * var(--gutter)), 1000px); }
.page-home .wp-block-gallery, .page-about .wp-block-gallery, .page-contact .wp-block-gallery {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 44px 54px; column-width: auto;
}
.page-home .wp-block-gallery > figure.wp-block-image, .page-about .wp-block-gallery > figure.wp-block-image, .page-contact .wp-block-gallery > figure.wp-block-image {
  margin: 0; flex: 0 1 calc(var(--ar, .75) * 320px); width: calc(var(--ar, .75) * 320px); min-width: 0;
}

/* ---------- columns ---------- */
.wp-block-columns { display: flex; gap: 56px; margin-top: 3em; margin-bottom: 3em; }
.wp-block-column { flex: 1 1 0; min-width: 0; }
.wp-block-column[style*="flex-basis"] { flex-grow: 0; }
.wp-block-column > :first-child { margin-top: 0; }
.wp-block-column h3 { margin-top: 0; }
.wp-block-column h4 { margin-top: 0; font-style: normal; color: #f4ecdd; font-size: clamp(1.5rem, 2.6vw, 1.9rem); }
.page-home .wp-block-column p { color: var(--text); }
.feature-icon { height: 9px; margin: 0 0 20px; }
.feature-icon::before { content: ""; display: block; width: 8px; height: 8px; margin: 0 auto; background: var(--brass); transform: rotate(45deg); }
.feature-icon svg { display: none; }
.page-about .wp-block-column { padding-top: 22px; border-top: 1px solid var(--brass-lo); }
@media (max-width: 781px) {
  .wp-block-columns { flex-direction: column; gap: 34px; }
  .wp-block-column { flex-basis: auto !important; }
  .wp-block-column:empty { display: none; }
}

/* ---------- exhibits: a painting beside its wall label ---------- */
.wp-block-media-text {
  display: grid; align-items: center; gap: clamp(32px, 6vw, 84px); margin: 5.5em auto;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) !important; grid-template-areas: "media content";
}
.wp-block-media-text.has-media-on-the-right { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr) !important; grid-template-areas: "content media"; }
.wp-block-media-text__media { grid-area: media; margin: 0; padding: 6px; text-align: center; }
.wp-block-media-text__media img { width: 100%; max-width: 440px; height: auto; margin: 0 auto; }
.wp-block-media-text__content { grid-area: content; padding: 0; }
.wp-block-media-text__content > :first-child { margin-top: 0; }
.wp-block-media-text__content h3::before { content: ""; display: block; width: 46px; height: 1px; margin-bottom: 22px; background: var(--brass); }
.wp-block-media-text__content h3.has-text-align-right::before { margin-left: auto; }
.wp-block-media-text__content p { color: var(--text); }
@media (max-width: 700px) {
  .wp-block-media-text, .wp-block-media-text.has-media-on-the-right { grid-template-columns: 100% !important; grid-template-areas: "media" "content"; gap: 34px; margin: 4em auto; }
  .wp-block-media-text__content, .wp-block-media-text__content .has-text-align-right { text-align: center; }
  .wp-block-media-text__content h3::before, .wp-block-media-text__content h3.has-text-align-right::before { margin-left: auto; margin-right: auto; }
}

/* ---------- buttons ---------- */
.wp-block-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; margin-top: 2em; margin-bottom: 2em; }
.wp-block-button { margin: 1.6em 0; text-align: center; }
.wp-block-buttons .wp-block-button { margin: 0; }
.wp-block-button__link {
  display: inline-block; padding: .8em 2.4em; background: transparent; color: var(--brass-hi); border: 1px solid var(--brass);
  font: italic 500 1.25rem/1.2 var(--serif); letter-spacing: .04em; text-decoration: none; transition: background .25s, color .25s, box-shadow .25s;
}
.wp-block-button__link:hover, .wp-block-button__link:focus { background: var(--brass); color: var(--wall); box-shadow: 0 0 28px rgba(227, 199, 133, .3); }

/* ---------- footer ---------- */
.site-footer { padding: 34px var(--gutter) 40px; text-align: center; color: var(--muted); font: italic 400 1.05rem var(--serif); letter-spacing: .04em; border-top: 1px solid var(--brass-lo); }
.site-footer p { margin: 0; }
.site-footer .site-credit { margin-top: 14px; font: 400 .8rem/1 var(--serif); font-style: italic; letter-spacing: .03em; }
.site-credit a { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; opacity: .7; transition: opacity .2s ease, color .2s ease; }
.site-credit a:hover, .site-credit a:focus-visible { opacity: 1; color: var(--brass); }
.site-credit img { width: 44px; height: auto; display: block; }

/* ---------- lightbox ---------- */
body.lb-open { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(14, 11, 12, .95); }
.lb[hidden] { display: none; }
.lb-fig { margin: 0; max-width: 92vw; text-align: center; }
.lb-fig img { max-width: 90vw; max-height: 78vh; display: block; margin: 0 auto; border: 10px solid var(--mat); box-shadow: 0 0 0 2px var(--brass), 0 30px 80px rgba(0, 0, 0, .8); }
.lb-fig figcaption { margin: 22px auto 0; color: #e9dfcf; font: italic 400 1.2rem/1.4 var(--serif); max-width: 640px; max-height: 14vh; overflow: auto; }
.lb button { position: absolute; background: none; border: 0; color: var(--brass-hi); cursor: pointer; font: 300 3rem/1 var(--serif); padding: 12px 18px; opacity: .85; }
.lb button:hover, .lb button:focus-visible { opacity: 1; }
.lb-close { top: 6px; right: 8px; }
.lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 4px; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}