/**
 * JBC Templates CSS — exact match to jbc_editorial.html
 */

/* ── BODY GRADIENT ── */
body {
  background:
    radial-gradient(circle at 18% 4%, rgba(180,145,92,.13), transparent 32%),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.05), transparent 26%),
    var(--jbc-bg);
}

/* ── NAV ── */
.jbc-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px clamp(22px,4vw,70px);
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(243,238,230,.78);
  mix-blend-mode: difference;
}
.jbc-nav nav,
.jbc-nav__links { display:flex; gap: clamp(18px,3vw,42px); list-style:none; margin:0; padding:0; }
.jbc-nav__mark { font-family:var(--jbc-sans); font-size:18px; font-weight:700; letter-spacing:.06em; }
.jbc-nav__links a { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:rgba(243,238,230,.78); }

/* ── HERO ── */
.jbc-hero {
  min-height: 100svh;
  position: relative;
  display: flex; align-items: center;
  padding: clamp(90px,9vw,140px) clamp(22px,5vw,86px);
  overflow: hidden;
}
.jbc-hero__bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  will-change: transform;
}
.jbc-hero__vignette {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(13,12,10,.2)  0%,
    rgba(13,12,10,.05) 40%,
    rgba(13,12,10,.55) 78%,
    rgba(13,12,10,.96) 100%
  );
}
.jbc-hero__name {
  position: relative; z-index: 2;
  font-family: var(--jbc-sans);
  font-weight: 800; letter-spacing: 0; line-height: .9;
  width: 100%;
  will-change: transform,opacity,filter;
}
.jbc-hero__line-1,
.jbc-hero__line-2 {
  display: block;
  font-size: clamp(56px,10vw,160px);
  white-space: nowrap;
  color: var(--jbc-paper) !important;
  text-transform: none !important;
}
.jbc-amber { color: var(--jbc-amber); }
.jbc-hero__caption {
  position: relative; z-index: 2;
  display: block;
  margin: clamp(18px,2.5vh,32px) 0 0;
  max-width: 480px;
  color: rgba(243,238,230,.68);
  font-size: clamp(15px,1.3vw,20px);
  line-height: 1.6; font-weight: 300;
}
.jbc-hero__scroll-hint {
  position: absolute; z-index: 2;
  right: clamp(24px,5vw,86px); bottom: 42px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .18em;
  color: rgba(243,238,230,.44);
}

/* ── STATEMENT ── */
.jbc-statement {
  min-height: 72vh;
  display: grid; place-items: center;
  padding: 10vh clamp(24px,10vw,160px);
}
.jbc-eyebrow {
  margin: 0 0 22px;
  color: rgba(243,238,230,.48);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
}
.jbc-statement .jbc-headline {
  max-width: 1080px; margin: 0;
  font-size: clamp(48px,6.5vw,116px);
  line-height: .93; letter-spacing: 0; font-weight: 800;
  color: var(--jbc-paper) !important;
  text-transform: none !important;
}

/* ── MASONRY ── */
.jbc-masonry {
  width: min(1500px,100%); margin: 0 auto;
  padding: 8vh clamp(22px,4vw,70px) 18vh;
  display: grid;
  grid-template-columns: repeat(12,1fr);
  gap: clamp(14px,2.5vw,40px);
}
.jbc-card {
  position: relative; overflow: hidden;
  border: 1px solid var(--jbc-line);
  background: rgba(255,255,255,.03);
  will-change: transform,opacity;
}
.jbc-card img { transform:scale(1.08); will-change:transform; width:100%; height:100%; object-fit:cover; display:block; }
.jbc-card--large  { grid-column:1/8;  height:78vh; }
.jbc-card--small  { grid-column:9/13; height:42vh; min-height:300px; }
.jbc-card--medium { grid-column:2/6;  height:54vh; }
.jbc-card--tall   { grid-column:7/12; height:86vh; }
.jbc-card--wide   { grid-column:3/11; height:56vh; }
.jbc-card__caption {
  position: absolute; left:18px; bottom:16px;
  font-size: 11px; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(243,238,230,.65);
}

/* ── PULL QUOTE ── */
.jbc-quote {
  padding: 10vh clamp(24px,10vw,160px);
  border-top: 1px solid var(--jbc-line);
}
.jbc-quote blockquote {
  max-width: 1080px; margin: 0;
  font-family: var(--jbc-sans);
  font-size: clamp(28px,4vw,72px);
  line-height: 1.1; letter-spacing: 0; font-weight: 800;
  color: var(--jbc-paper);
}

/* ── BIO — exact match to working HTML ── */
.jbc-bio {
  min-height: 220vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(320px,42vw) 1fr;
  gap: clamp(32px,8vw,140px);
  padding: 10vh clamp(22px,6vw,100px);
  border-top: 1px solid var(--jbc-line);
}
.jbc-bio__visual {
  position: sticky; top: 12vh;
  height: 76vh; overflow: hidden;
  border: 1px solid var(--jbc-line);
  background: rgba(255,255,255,.04);
  align-self: start;
}
.jbc-bio__img {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1.4s var(--jbc-ease), transform 1.8s var(--jbc-ease);
}
.jbc-bio__img.active { opacity:1; transform:scale(1); }
.jbc-bio__img img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.jbc-bio__img-caption {
  position: absolute; bottom:20px; right:20px;
  font-size: 9px; letter-spacing:.2em; text-transform:uppercase;
  color: rgba(243,238,230,.35);
}
.jbc-bio__copy {
  padding: 20vh 0 40vh;
  max-width: 680px;
}
.jbc-bio__copy .jbc-headline {
  margin: 0 0 40px;
  font-size: clamp(48px,5.5vw,104px);
  line-height: .93; letter-spacing: 0; font-weight: 800;
  color: var(--jbc-paper) !important;
  text-transform: none !important;
}
.jbc-bio__content p {
  margin: 0 0 30px;
  color: rgba(243,238,230,.78);
  font-size: clamp(17px,1.6vw,22px);
  line-height: 1.8; font-weight: 300;
}
.jbc-bio__nav {
  display: flex; gap: 24px; flex-wrap: wrap;
  margin-top: 52px; padding-top: 40px;
  border-top: 1px solid var(--jbc-line);
}
.jbc-bio__nav a,
.jbc-bio__nav li,
.jbc-bio__nav li a {
  font-size: 11px; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(243,238,230,.42);
  list-style: none;
  transition: color .3s;
}
.jbc-bio__nav a:hover,
.jbc-bio__nav li a:hover { color: var(--jbc-amber); }
.jbc-bio__nav ul { display:flex; gap:24px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }

/* ── CLOSING ── */
.jbc-closing {
  min-height: 90vh; display:flex; flex-direction:column; justify-content:center;
  padding: 12vh clamp(24px,10vw,160px);
  border-top: 1px solid var(--jbc-line);
}
.jbc-closing .jbc-headline {
  max-width: 1080px; margin: 0;
  font-size: clamp(48px,6.5vw,116px);
  line-height: .93; letter-spacing: 0; font-weight: 800;
  color: var(--jbc-paper) !important;
  text-transform: none !important;
}
.jbc-closing em { font-style:normal; color:var(--jbc-amber); }

/* ── BUTTON ── */
.jbc-btn {
  width:fit-content; margin-top:44px;
  padding: 15px 26px;
  border: 1px solid rgba(243,238,230,.32);
  border-radius: 999px;
  font-size: 12px; letter-spacing:.14em; text-transform:uppercase;
  color: var(--jbc-paper); background: transparent;
  display: inline-block;
  transition: background .5s, color .5s;
}
.jbc-btn:hover { background: var(--jbc-paper); color: var(--jbc-bg); }

/* ── MARQUEE ── */
.jbc-marquee {
  padding: 26px 0; overflow:hidden;
  border-top: 1px solid var(--jbc-line);
  border-bottom: 1px solid var(--jbc-line);
}
.jbc-marquee__track { display:flex; animation: jbc-mq 45s linear infinite; width:max-content; }
.jbc-marquee__item {
  font-size:11px; font-weight:600;
  letter-spacing:.25em; text-transform:uppercase;
  color: rgba(243,238,230,.14);
  padding: 0 32px; flex-shrink:0;
}
.jbc-marquee__item b { color: var(--jbc-amber); font-weight:400; }

/* ── FOOTER ── */
.jbc-footer {
  display:flex; justify-content:space-between; gap:20px;
  padding: 36px clamp(22px,5vw,86px);
  border-top: none; /* white hairline removed 2026-05-21 */
  color: rgba(243,238,230,.52); font-size:13px;
}

/* ── ARTWORK ARCHIVE ── */
.jbc-artwork-header { padding: 18vh var(--jbc-gutter) 8vh; }
.jbc-filter-bar { display:flex; gap:12px; flex-wrap:wrap; padding: 0 var(--jbc-gutter) 6vh; }
.jbc-filter-btn {
  padding: 8px 20px; border: 1px solid var(--jbc-line);
  border-radius: 999px; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color: rgba(243,238,230,.5); background:transparent; cursor:pointer;
  transition: background .3s, color .3s, border-color .3s;
}
.jbc-filter-btn:hover, .jbc-filter-btn.active {
  background: var(--jbc-amber); border-color: var(--jbc-amber); color: var(--jbc-bg);
}
.jbc-artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px,1fr));
  gap: clamp(10px,1.5vw,20px);
  padding: 0 var(--jbc-gutter) 14vh;
}
.jbc-artwork-card {
  position:relative; overflow:hidden; aspect-ratio:3/4;
  background:rgba(255,255,255,.03); border:1px solid var(--jbc-line); cursor:pointer;
}
.jbc-artwork-card img { width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 6s; }
.jbc-artwork-card:hover img { transform:scale(1); }
.jbc-artwork-card__info {
  position:absolute; inset:auto 0 0;
  padding:20px;
  background:linear-gradient(to top,rgba(13,12,10,.85),transparent);
  transform:translateY(100%); transition:transform .6s;
}
.jbc-artwork-card:hover .jbc-artwork-card__info { transform:translateY(0); }
.jbc-artwork-card__title { font-size:14px; font-weight:600; color:var(--jbc-paper); margin:0 0 4px; }
.jbc-artwork-card__meta { font-size:11px; color:var(--jbc-amber); letter-spacing:.12em; text-transform:uppercase; }

/* ── KEYFRAME ── */
@keyframes jbc-mq { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── MOBILE ── */
@media (max-width:860px) {
  .jbc-nav { padding:22px; }
  .jbc-nav__links { display:none; }
  .jbc-nav__burger { display:flex; }
  .jbc-hero {
    align-items: flex-end;
    padding: 0 22px 10vh;
    flex-direction: column;
    justify-content: flex-end;
  }
  .jbc-hero__line-1,
  .jbc-hero__line-2 {
    font-size: clamp(42px, 11.5vw, 72px);
    white-space: normal;
    word-break: keep-all;
  }
  .jbc-hero__name {
    line-height: .92;
    width: 100%;
    flex-shrink: 0;
  }
  .jbc-hero__caption {
    font-size: 15px;
    max-width: 100%;
  }
  .jbc-hero__scroll-hint {
    position: relative;
    right: auto; bottom: auto;
    margin-top: 24px;
    text-align: right;
    width: 100%;
  }
  .jbc-statement {
    min-height: 0;
    padding: 6vh clamp(22px,6vw,40px) 5vh;
  }
  .jbc-statement .jbc-headline {
    font-size: clamp(36px, 9vw, 72px);
  }
  .jbc-masonry {
    display: flex; flex-direction: column;
    padding-top: 5vh;
    padding-bottom: 8vh;
  }
  .jbc-card,.jbc-card--large,.jbc-card--small,.jbc-card--medium,.jbc-card--tall,.jbc-card--wide {
    width:100%; height:auto; min-height:0; aspect-ratio:4/5;
  }
  .jbc-card--wide { aspect-ratio:1.1/1; }
  .jbc-bio {
    display:block;
    min-height: auto;
    padding: 6vh clamp(22px,4vw,40px);
  }
  .jbc-bio__visual { position:relative; top:auto; height:70vw; margin-bottom:6vh; }
  .jbc-bio__copy { padding: 0 0 14vh; max-width:100%; }
  .jbc-artwork-grid { grid-template-columns:repeat(2,1fr); }
}

@media (max-width:480px) {
  .jbc-artwork-grid { grid-template-columns:1fr; }
}

/* ── PORTFOLIO ARCHIVE (Collections) ─────────────────────────────── */
.jbc-artwork-archive {
  background: #ffffff !important;
  color: #0d0c0a !important;
  padding-top: 64px; /* clear fixed nav — same as artwork detail pages */
}

.jbc-archive-header {
  padding: 14vh clamp(22px,5vw,86px) 6vh;
}
.jbc-archive-header .jbc-eyebrow {
  color: rgba(13,12,10,.45);
}
.jbc-archive-header .jbc-headline {
  color: #0d0c0a !important;
  font-size: clamp(48px,6.5vw,116px);
  font-weight: 800;
  letter-spacing: 0;
  line-height: .93;
  margin: 8px 0 0;
}

/* Filter bar */
.jbc-artwork-archive .jbc-filter-bar {
  padding: 0 clamp(22px,5vw,86px) 6vh;
  display: flex; gap: 10px; flex-wrap: wrap;
}
.jbc-artwork-archive .jbc-filter-btn {
  border: 1px solid rgba(13,12,10,.2);
  color: rgba(13,12,10,.55);
  background: transparent;
  border-radius: 0;
  padding: 8px 20px;
  font-size: 11px; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: pointer;
  transition: background .25s, color .25s, border-color .25s;
}
.jbc-artwork-archive .jbc-filter-btn:hover,
.jbc-artwork-archive .jbc-filter-btn.active {
  background: #0d0c0a;
  border-color: #0d0c0a;
  color: #f3eee6;
}

/* Empty-state card (legacy retained — no thumbnail fallback) */
.jbc-portfolio-card__img-wrap--empty {
  display: flex; align-items: center; justify-content: center;
  background: #e8e8e8;
}
.jbc-portfolio-card__img-wrap--empty span {
  font-size: 12px; color: #999; text-align: center; padding: 20px;
}

.jbc-archive-empty {
  padding: 8vh 0;
  color: rgba(13,12,10,.45) !important;
  font-size: 16px !important;
}

@media (max-width: 640px) {
  /* mobile column tuning lives in the masonry section below */
}

/* ═══════════════════════════════════════════════════════════════════
   JBC MUSEUM REFINEMENT LAYER
   Enhances artwork archive, detail pages, gallery, lightbox
   Non-destructive — appended to existing jbc-templates.css
   ═══════════════════════════════════════════════════════════════════ */

/* ── DESIGN TOKENS ────────────────────────────────────────────────── */
:root {
  --jbc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --jbc-ease-soft:   cubic-bezier(0.45, 0, 0.55, 1);
  --jbc-ink:         #111111;
  --jbc-mid:         #666666;
  --jbc-muted:       #999999;
  --jbc-rule:        #e4e4e4;
  --jbc-bg-warm:     #fafaf8;
  --jbc-overlay:     rgba(8,8,8,0.93);
  --jbc-gutter-sm:   clamp(16px, 4vw, 24px);
  --jbc-gutter-md:   clamp(32px, 5vw, 60px);
  --jbc-gutter-lg:   clamp(60px, 9vw, 120px);
}

/* ═══════════════════════════════════════════════════════════════════
   1. ARCHIVE PAGE — portfolio grid refinement
   ═══════════════════════════════════════════════════════════════════ */

/* Filter bar */
.jbc-artwork-archive .jbc-filter-bar {
  padding: var(--jbc-gutter-sm) var(--jbc-gutter-md);
  gap: 6px;
}

.jbc-artwork-archive .jbc-filter-btn {
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 8px 18px;
  border-radius: 0;
  border: 1px solid var(--jbc-rule);
  background: transparent;
  color: var(--jbc-mid);
  transition: all 220ms;
  cursor: pointer;
}

.jbc-artwork-archive .jbc-filter-btn:hover,
.jbc-artwork-archive .jbc-filter-btn.active {
  background: var(--jbc-ink);
  border-color: var(--jbc-ink);
  color: #fff;
}

/* ── TRUE MASONRY GRID ───────────────────────────────────────────── */

/* Outer wrapper — controls column count and gutter */
.jbc-portfolio-grid {
  /* CSS columns masonry — works immediately without JS */
  column-count: 3;
  column-gap: clamp(10px, 1.5vw, 20px);
  padding: 0 clamp(24px, 4vw, 48px) var(--jbc-gutter-lg);
}

/* Each card must break-inside avoid so it doesn't split across columns.
 * display:block (not inline-block) eliminates the inline-block whitespace
 * gap that opens between stacked cards in a column. */
.jbc-portfolio-card {
  display: block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin: 0 0 clamp(10px, 1.5vw, 20px);
  padding: 0;
  min-height: 0;
  aspect-ratio: auto;
}

/* Image link — NO forced aspect-ratio, images keep their natural proportions.
 * line-height:0 prevents an extra ~4px text baseline below the <img>. */
.jbc-portfolio-card__img-link {
  display: block;
  overflow: hidden;
  background: transparent; /* no gray placeholder box while the image loads */
  position: relative;
  aspect-ratio: unset !important;
  line-height: 0;
  font-size: 0;
}

.jbc-portfolio-card__img-wrap {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  font-size: 0;
}

.jbc-portfolio-card__img-wrap img,
.jbc-portfolio-card__img-wrap .jbc-portfolio-card__video {
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  display: block;
  margin: 0;
  vertical-align: top;
  transform: scale(1);
  transition: transform 500ms var(--jbc-ease-out),
              opacity 450ms ease-out;
}
/* Fade-in: each thumbnail starts at 0 opacity and lifts to 1 when its
   real bytes finish loading (class added via jbc-main.js). The wrapper's
   inline aspect-ratio reserves space so the masonry columns don't shift. */
.jbc-portfolio-card__img-wrap img { opacity: 0; }
.jbc-portfolio-card__img-wrap img.is-loaded,
.jbc-portfolio-card__img-wrap .jbc-portfolio-card__video { opacity: 1; }
/* Reduced motion: skip the fade — show immediately */
@media (prefers-reduced-motion: reduce) {
  .jbc-portfolio-card__img-wrap img { opacity: 1; }
}
/* When the wrapper has a known aspect-ratio (inline style from the template),
   make the image fill the reserved slot so LiteSpeed's 1×1 placeholder gif
   doesn't render at full width and stretch the layout. */
.jbc-portfolio-card__img-wrap[style*="aspect-ratio"] img {
  height: 100% !important;
  object-fit: cover;
}
.jbc-portfolio-card__video { object-fit: cover; background: transparent; }
/* Purchase link in the artwork sidebar metadata */
.jbc-ca-buy {
  display: inline-block;
  font-size: clamp(13px, 1vw, 15px);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--jbc-amber, #C8910A);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.2s;
}
.jbc-ca-buy:hover { opacity: 0.6; }

/* Canonical artwork video hero — explicit height so object-fit:contain
 * works; white background so letterbox/pillarbox blends with the page. */
.jbc-ca-img--video {
  display: block;
  width: 100%;
  height: calc(100vh - 64px);
  max-height: calc(100vh - 64px);
  max-width: 100%;
  object-fit: contain;
  background: #ffffff;
}
@media (max-width: 860px) {
  .jbc-ca-img--video { height: auto; max-height: 75vw; }
}

/* 3D viewers — both <model-viewer> and legacy iframe.
 * The image-panel is `display: flex; align-items: center` which centers
 * children instead of stretching them, AND <model-viewer> ships with a
 * shadow-DOM :host { width:300px; height:150px } baseline. We force the
 * panel into a positioning context and absolutely fill it with the viewer
 * edge-to-edge, on a black backdrop. */
.jbc-ca-image-panel {
  position: relative !important;
}
/* When the panel contains a 3D viewer: zero out all padding/margin and
 * leave the panel TRANSPARENT. Only the model-viewer's own canvas paints
 * black, so when the model is zoomed past its viewable area there's no
 * surrounding black frame — just the natural page beyond the canvas. */
.jbc-canonical-artwork .jbc-ca-image-panel:has(model-viewer.jbc-ca-img--3d),
.jbc-canonical-artwork .jbc-ca-image-panel:has(iframe.jbc-ca-img--3d-embed) {
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  min-height: calc(100vh - 64px) !important;
  align-items: stretch !important;
  overflow: hidden !important;
}
model-viewer.jbc-ca-img--3d,
iframe.jbc-ca-img--3d-embed {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: calc(100vh - 64px) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: #000 !important;
}
model-viewer.jbc-ca-img--3d {
  --poster-color: #000000;
  --progress-bar-color: var(--jbc-amber, #C8910A);
  --progress-bar-height: 2px;
}

@media (max-width: 860px) {
  model-viewer.jbc-ca-img--3d,
  iframe.jbc-ca-img--3d-embed {
    min-height: 90vw !important;
    height: 90vw !important;
  }
}

/* AR launch button (only visible on AR-capable devices) */
.jbc-ca-ar-button {
  position: absolute;
  bottom: 18px;
  right: 18px;
  padding: 11px 18px;
  font: 500 11px/1 var(--jbc-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: #0d0c0a;
  color: #f3eee6;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  z-index: 2;
}
.jbc-ca-ar-button:hover { background: var(--jbc-amber, #C8910A); color: #0d0c0a; }

.jbc-portfolio-card:hover .jbc-portfolio-card__img-wrap img {
  transform: scale(1.04);
}

/* Hover overlay */
.jbc-portfolio-card__img-link::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 300ms var(--jbc-ease-soft);
  pointer-events: none;
}

.jbc-portfolio-card:hover .jbc-portfolio-card__img-link::after {
  background: rgba(0,0,0,0.06);
}

/* Caption — kept tight so cards stack with no gap beyond the column gutter */
.jbc-portfolio-card__info {
  padding: 8px 0 0;
  line-height: 1.35;
}
/* Meta line (material · year) hidden — title only */
.jbc-portfolio-card__meta { display: none !important; }
/* Filter bar is removed in the template; hide any legacy markup too */
.jbc-filter-bar { display: none !important; }

.jbc-portfolio-card__collection {
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--jbc-muted, #999) !important;
  margin: 0 0 4px !important;
  line-height: 1 !important;
}

.jbc-portfolio-card__title {
  font-size: clamp(13px, 1.1vw, 15px) !important;
  font-weight: 400 !important;
  margin: 0 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

.jbc-portfolio-card__title a {
  color: var(--jbc-ink, #111) !important;
  text-decoration: none;
  transition: opacity 0.2s;
}

.jbc-portfolio-card__title a:hover {
  opacity: 0.55;
  color: var(--jbc-ink, #111) !important;
}

/* ── RESPONSIVE MASONRY ─── */
@media (max-width: 1024px) {
  .jbc-portfolio-grid {
    column-count: 2;
  }
}

@media (max-width: 600px) {
  /* Switch off CSS-columns masonry on mobile and use a real 2-col grid.
     column-count fills column-major and does NOT top-align the first row
     (the right image sat ~32px below the left). A grid with align-items:start
     makes every row's items share the same top line. */
  .jbc-portfolio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 10px;
    column-gap: 10px;
    padding: 0 14px clamp(60px, 15vw, 100px);
  }
  .jbc-portfolio-card {
    margin-bottom: 0; /* grid `gap` handles spacing now */
  }
  .jbc-portfolio-card__title {
    font-size: 12px !important;
  }
}

@media (max-width: 380px) {
  .jbc-portfolio-grid {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   2. INDIVIDUAL ARTWORK PAGE — refined layout
   ═══════════════════════════════════════════════════════════════════ */

/* Override: remove forced tiny max-height, give images proper space */
.page-template-page-art-collection .entry-content img,
.page-template-templatespage-art-collection-php .entry-content img,
.page-template-page-art-collection .alignnone,
.page-template-templatespage-art-collection-php .alignnone {
  max-height: none !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 0 auto !important;
  object-fit: contain !important;
}

/* Constrain image to viewport height with breathing room */
.page-template-page-art-collection .entry-content > p:first-of-type img,
.page-template-templatespage-art-collection-php .entry-content > p:first-of-type img {
  max-height: 72vh !important;
  width: auto !important;
  cursor: zoom-in;
  transition: opacity 500ms var(--jbc-ease-out);
}

/* Post summary — more generous spacing */
.page-template-page-art-collection .post-summary,
.page-template-templatespage-art-collection-php .post-summary {
  padding-top: clamp(88px, 12vw, 120px) !important;
  padding-bottom: clamp(40px, 6vw, 80px) !important;
}

/* Entry content wrapper — centered */
.page-template-page-art-collection .entry-content,
.page-template-templatespage-art-collection-php .entry-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* Parent series breadcrumb */
.page-template-page-art-collection .nav-menu-parent,
.page-template-templatespage-art-collection-php .nav-menu-parent {
  font-size: 11px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--jbc-muted, #999) !important;
  margin-bottom: 16px !important;
  display: block !important;
}

.page-template-page-art-collection .nav-menu-parent a,
.page-template-templatespage-art-collection-php .nav-menu-parent a {
  color: var(--jbc-muted, #999) !important;
  text-decoration: none;
  transition: color 0.2s;
}

.page-template-page-art-collection .nav-menu-parent a:hover,
.page-template-templatespage-art-collection-php .nav-menu-parent a:hover {
  color: var(--jbc-ink, #111) !important;
}

/* Prev/Next navigation */
.page-template-page-art-collection .nav-pages,
.page-template-templatespage-art-collection-php .nav-pages {
  display: flex;
  justify-content: space-between;
  width: 100%;
  font-size: 11px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 28px !important;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--jbc-rule);
}

.page-template-page-art-collection .nav-pages a,
.page-template-templatespage-art-collection-php .nav-pages a {
  color: var(--jbc-muted, #999) !important;
  text-decoration: none;
  transition: color 0.2s;
}

.page-template-page-art-collection .nav-pages a:hover,
.page-template-templatespage-art-collection-php .nav-pages a:hover {
  color: var(--jbc-ink, #111) !important;
}

/* Artwork title — editorial scale */
.page-template-page-art-collection .art-info,
.page-template-templatespage-art-collection-php .art-info {
  margin-top: var(--jbc-gutter-sm) !important;
  padding-top: 20px;
  border-top: 1px solid var(--jbc-rule);
  width: 100%;
}

.page-template-page-art-collection .art-info h1,
.page-template-templatespage-art-collection-php .art-info h1 {
  font-size: clamp(22px, 3.5vw, 42px) !important;
  font-weight: 300 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
  margin: 0 0 10px !important;
  text-transform: none !important;
  color: var(--jbc-ink, #111) !important;
}

.page-template-page-art-collection .art-info p,
.page-template-templatespage-art-collection-php .art-info p {
  font-size: clamp(13px, 1.4vw, 15px) !important;
  line-height: 1.7 !important;
  color: var(--jbc-mid, #666) !important;
  margin: 0 0 4px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. LIGHTBOX SYSTEM
   Premium fullscreen multi-image gallery viewer
   ═══════════════════════════════════════════════════════════════════ */

.jbc-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--jbc-overlay);
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms var(--jbc-ease-out);
  -webkit-overflow-scrolling: touch;
}

.jbc-lightbox.jbc-lb-open {
  opacity: 1;
  pointer-events: all;
}

/* ── Toolbar (counter + close) ── */
.jbc-lb-toolbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  /* Must sit above .jbc-lb-body and .jbc-lb-img-wrap */
  z-index: 20;
  flex-shrink: 0;
  /* Subtle gradient so X is always readable over any image colour */
  background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, transparent 100%);
}

.jbc-lb-counter {
  font-size: 12px;
  letter-spacing: 0.09em;
  color: rgba(255,255,255,0.42);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.jbc-lb-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  margin: -12px;
  /* Fully visible — white on dark overlay */
  color: rgba(255,255,255,0.85);
  transition: color 0.18s, opacity 0.18s;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
  /* Ensure it sits on top of everything */
  position: relative;
  z-index: 20;
  flex-shrink: 0;
}

.jbc-lb-close:hover { color: #fff; opacity: 1; }

.jbc-lb-close svg {
  width: 22px; height: 22px;
  display: block;
  stroke-width: 1.5;
}

/* ── Body wrapper (stage + optional meta panel) ── */
.jbc-lb-body {
  position: absolute;
  top: 58px;
  bottom: 120px;
  left: 0; right: 0;
}

/* ── Stage (image + arrows) ── */
.jbc-lb-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Single image at a time — fills stage */
.jbc-lb-img-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 72px;
}

.jbc-lb-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  /* opacity controlled by JS crossfade */
  -webkit-user-select: none;
  user-select: none;
  touch-action: pinch-zoom; /* allow native pinch-to-zoom */
  will-change: opacity;
}

/* ── Prev / Next arrows ── */
.jbc-lb-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 20px 18px;
  color: rgba(255,255,255,0.42);
  transition: color 0.18s, opacity 0.18s;
  z-index: 10;
  -webkit-tap-highlight-color: transparent;
  line-height: 0;
}

.jbc-lb-arrow:hover { color: rgba(255,255,255,0.92); }

.jbc-lb-arrow svg {
  width: 26px; height: 26px;
  display: block;
}

.jbc-lb-arrow--prev { left: 4px; }
.jbc-lb-arrow--next { right: 4px; }

/* ── Footer wrapper (caption + thumbs) ── */
.jbc-lb-footer {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 120px;
  display: flex;
  flex-direction: column;
}

/* ── Caption ── */
.jbc-lb-caption {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 80px;
  pointer-events: none;
}

.jbc-lb-caption__title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.78);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.jbc-lb-caption__meta {
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  letter-spacing: 0.05em;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ── Thumbnail strip ── */
.jbc-lb-thumbs {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 8px 20px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.jbc-lb-thumbs::-webkit-scrollbar { display: none; }

.jbc-lb-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
  opacity: 0.35;
  transition: opacity 0.2s;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.jbc-lb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.jbc-lb-thumb:hover { opacity: 0.7; }

.jbc-lb-thumb--active {
  opacity: 1 !important;
  outline: 1.5px solid rgba(255,255,255,0.55);
  outline-offset: 1px;
}

/* ── Mobile overrides ── */
@media (max-width: 768px) {
  .jbc-lb-stage {
    bottom: 108px;
  }

  .jbc-lb-img-wrap {
    padding: 12px 16px;
  }

  /* Arrows hidden on mobile — swipe handles navigation */
  .jbc-lb-arrow {
    display: none;
  }

  .jbc-lb-caption {
    bottom: 56px;
    height: 52px;
    padding: 0 16px;
  }

  .jbc-lb-thumbs {
    height: 56px;
    gap: 4px;
    padding: 6px 16px;
    justify-content: flex-start;
  }

  .jbc-lb-thumb {
    width: 40px;
    height: 40px;
  }

  .jbc-lb-counter {
    font-size: 11px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   4. SCROLL REVEAL — applied via JS
   ═══════════════════════════════════════════════════════════════════ */

.jbc-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 650ms var(--jbc-ease-out),
              transform 650ms var(--jbc-ease-out);
}

.jbc-reveal.jbc-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   5. IMAGE LOADING — skeleton + fade in
   ═══════════════════════════════════════════════════════════════════ */

.jbc-img-loading {
  background: linear-gradient(
    90deg,
    var(--jbc-bg-warm, #fafaf8) 25%,
    #ebebeb 50%,
    var(--jbc-bg-warm, #fafaf8) 75%
  );
  background-size: 200% 100%;
  animation: jbc-shimmer 1.6s infinite;
}

@keyframes jbc-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   7. BODY — prevent horizontal overflow + global top spacing
   ═══════════════════════════════════════════════════════════════════ */

body { overflow-x: hidden; }

/* Global minimum top margin so content never collides with fixed nav.
   Apply ONCE on the outer #primary only — `.site-main` is nested inside
   #primary on these pages, so listing both stacked the clearance to ~120px
   and pushed every page title far too low. The title block adds its own
   top padding on top of this single clearance. */
body:not(.jbc-homepage):not(.page-template-page-art-collection):not(.page-template-templatespage-art-collection-php) #primary {
  padding-top: max(60px, env(safe-area-inset-top));
}
/* Zero the inner main's top padding so it doesn't double the clearance. */
body:not(.jbc-homepage):not(.page-template-page-art-collection):not(.page-template-templatespage-art-collection-php) #primary > .site-main {
  padding-top: 0;
}

/* Prevent any image from breaking layout */
.entry-content img,
.jbc-portfolio-card img,
.jbc-artwork-card img {
  max-width: 100%;
  height: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   EXHIBITION MODE — collection page header + hint
   ═══════════════════════════════════════════════════════════════════ */

.jbc-collection-header {
  padding: clamp(90px, 14vw, 140px) var(--jbc-gutter-md) var(--jbc-gutter-md);
  max-width: 800px;
}

.jbc-collection-header__eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jbc-muted, #999);
  margin: 0 0 16px;
}

.jbc-collection-header__title {
  font-size: clamp(36px, 7vw, 80px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--jbc-ink, #111);
  margin: 0 0 20px;
}

.jbc-collection-header__desc {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  color: var(--jbc-mid, #666);
  margin: 0 0 16px;
}

.jbc-collection-header__count {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jbc-muted, #999);
  margin: 0;
}

.jbc-exhibition-hint {
  padding: 0 var(--jbc-gutter-md) 24px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jbc-muted, #999);
}

/* ═══════════════════════════════════════════════════════════════════
   EXHIBITION LIGHTBOX — additional styles on top of base lightbox CSS
   ═══════════════════════════════════════════════════════════════════ */

/* In exhibition mode the body splits into stage + meta panel */
.jbc-lightbox--exhibition .jbc-lb-body {
  display: flex;
  flex-direction: row;
}

.jbc-lightbox--exhibition .jbc-lb-stage {
  flex: 1;
}

/* Meta panel — artwork details alongside image */
.jbc-lb-meta-panel {
  display: none; /* hidden in standard lightbox mode */
}

.jbc-lightbox--exhibition .jbc-lb-meta-panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: clamp(220px, 24vw, 320px);
  flex-shrink: 0;
  padding: clamp(24px, 4vh, 48px) clamp(20px, 3vw, 40px);
  border-left: 1px solid rgba(255,255,255,0.07);
  gap: 8px;
}

.jbc-lb-meta-panel__series {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0;
}

.jbc-lb-meta-panel__title {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: rgba(255,255,255,0.92);
  margin: 0 0 4px;
}

.jbc-lb-meta-panel__medium {
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin: 0;
  line-height: 1.5;
}

.jbc-lb-meta-panel__year {
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

.jbc-lb-meta-panel__link {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  margin-top: 16px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  transition: color 0.2s, border-color 0.2s;
}

.jbc-lb-meta-panel__link:hover {
  color: rgba(255,255,255,0.9);
  border-bottom-color: rgba(255,255,255,0.4);
}

/* Footer hidden in exhibition mode — meta panel replaces caption */
.jbc-lightbox--exhibition .jbc-lb-footer {
  display: none;
}

/* Exhibition lightbox stage — full height minus toolbar */
.jbc-lightbox--exhibition .jbc-lb-body {
  position: absolute;
  top: 58px;
  bottom: 0;
  left: 0;
  right: 0;
}

.jbc-lightbox--exhibition .jbc-lb-stage {
  position: relative;
  top: auto; bottom: auto; left: auto; right: auto;
}

/* Mobile: stack meta below image */
@media (max-width: 768px) {
  .jbc-lightbox--exhibition .jbc-lb-body {
    flex-direction: column;
  }
  .jbc-lightbox--exhibition .jbc-lb-meta-panel {
    width: 100%;
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.07);
    padding: 16px 20px;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 16px;
    flex-shrink: 0;
  }
  .jbc-lightbox--exhibition .jbc-lb-meta-panel__title {
    font-size: 16px;
    flex: 0 0 100%;
  }
  .jbc-lightbox--exhibition .jbc-lb-meta-panel__medium,
  .jbc-lightbox--exhibition .jbc-lb-meta-panel__year {
    font-size: 12px;
  }
  .jbc-lightbox--exhibition .jbc-lb-meta-panel__link {
    flex: 0 0 100%;
    margin-top: 8px;
  }
  .jbc-lightbox--exhibition .jbc-lb-stage {
    flex: 1;
  }
  .jbc-lightbox--exhibition .jbc-lb-body {
    bottom: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   CANONICAL ARTWORK RECORD PAGE — side-by-side layout
   Image fills viewport height, info sidebar alongside it.
   ═══════════════════════════════════════════════════════════════════ */

/* Page container — white, no extra padding */
.jbc-canonical-artwork {
  background: #fff !important;
  min-height: 100vh;
}

/* ── Split layout: image | sidebar ─────────────────────────────────── */
.jbc-ca-layout {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /* Full viewport height minus fixed nav */
  min-height: calc(100vh - 64px);
  margin-top: 0;
}

/* Ensure the artwork page wrapper clears the fixed nav */
.jbc-canonical-artwork {
  padding-top: 64px;
}
.jbc-canonical-artwork #primary,
.jbc-canonical-artwork .content-area {
  padding-top: 0 !important;
}

/* ── Image panel — takes all remaining width ─────────────────────── */
.jbc-ca-image-panel {
  flex: 1;
  min-width: 0;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: zoom-in;
}

.jbc-ca-img {
  display: block;
  /* Fill the panel as much as possible without clipping */
  max-width: 100%;
  max-height: calc(100vh - 64px);
  width: auto;
  height: auto;
  object-fit: contain;
  /* Generous padding so image breathes at the edges */
  padding: clamp(24px, 3vw, 48px);
  box-sizing: border-box;
  transition: opacity 500ms;
}

/* ── Info sidebar — fixed width, scrollable if content overflows ── */
.jbc-ca-sidebar {
  /* Wider sidebar gives titles more room — fewer awkward wraps */
  width: clamp(280px, 24vw, 360px);
  flex-shrink: 0;
  border-left: 1px solid var(--jbc-rule, #e4e4e4);
  padding: clamp(32px, 4vh, 56px) clamp(28px, 3vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  max-height: calc(100vh - 64px);
  box-sizing: border-box;
  /* Container context so title can size relative to sidebar width */
  container-type: inline-size;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────── */
.jbc-ca-breadcrumb {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jbc-muted, #999);
  margin-bottom: 20px;
}

.jbc-ca-breadcrumb a {
  color: var(--jbc-muted, #999);
  text-decoration: none;
  transition: color 0.2s;
}

.jbc-ca-breadcrumb a:hover {
  color: var(--jbc-ink, #111);
}

/* ── Title ──────────────────────────────────────────────────────────── */
.jbc-ca-title {
  /* Base styles — font-size and word-break overridden in style.css
     via h1.jbc-ca-title to beat the global h1 !important rule */
  color: var(--jbc-ink, #111);
  margin: 0 0 28px;
  word-break: keep-all;
  overflow-wrap: break-word;
  hyphens: none;
  min-width: 0;
  max-width: 100%;
  width: 100%;
}

/* ── Metadata dl ────────────────────────────────────────────────────── */
.jbc-ca-dl {
  margin: 0 0 32px;
  border-top: 1px solid var(--jbc-rule, #e4e4e4);
}

.jbc-ca-dl__row {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--jbc-rule, #e4e4e4);
}

.jbc-ca-dl__row dt {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--jbc-muted, #999);
  padding-top: 1px;
}

.jbc-ca-dl__row dd {
  font-size: 13px;
  color: var(--jbc-ink, #111);
  line-height: 1.5;
  margin: 0;
}

.jbc-ca-dl__row dd a {
  color: var(--jbc-ink, #111);
  text-decoration: underline;
  text-decoration-color: var(--jbc-rule, #e4e4e4);
  transition: text-decoration-color 0.2s;
}

.jbc-ca-dl__row dd a:hover {
  text-decoration-color: var(--jbc-ink, #111);
}

/* Stacked dimension lines */
.jbc-ca-dl__dims {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.jbc-ca-dl__dims-in {
  font-size: 13px;
  color: var(--jbc-ink, #111);
}

.jbc-ca-dl__dims-cm {
  font-size: 13px;
  color: var(--jbc-ink, #111);  /* same black as inches line */
}

/* ── Prev/Next — each arrow fixed independently to true viewport edges ── */

/* Container: just a positioning context, no own dimensions */
.jbc-ca-prevnext {
  pointer-events: none;
  position: static;
}

/* Both arrows: fixed, full viewport height minus nav */
.jbc-ca-prevnext__link {
  position: fixed;
  top: 64px;
  bottom: 0;
  width: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  text-decoration: none;
  color: rgba(0,0,0,0.2);
  transition: color 0.22s ease, background 0.22s ease;
  background: transparent;
  z-index: 200;
}

.jbc-ca-prevnext__link:hover {
  color: rgba(0,0,0,0.7);
  background: rgba(0,0,0,0.025);
}

/* Hide text labels — arrows only */
.jbc-ca-prevnext__link span { display: none; }

/* Thin outlined chevron */
.jbc-ca-prevnext__link svg {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  stroke-width: 0.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Prev: flush left edge of viewport */
.jbc-ca-prevnext__link:not(.jbc-ca-prevnext__link--next) {
  left: 0;
  right: auto;
}

/* Next: flush RIGHT edge of viewport — true viewport, not image panel */
.jbc-ca-prevnext__link--next {
  right: 0;
  left: auto;
}

/* Safety net: never show an arrow without a valid href */
.jbc-ca-prevnext__link:not([href]) {
  display: none !important;
}

/* Mobile: horizontal bar at bottom */
@media (max-width: 768px) {
  .jbc-ca-prevnext__link {
    position: fixed;
    top: auto;
    bottom: 0;
    height: 56px;
    width: 50%;
    background: rgba(255,255,255,0.97);
    border-top: 1px solid var(--jbc-rule, #e4e4e4);
    color: rgba(0,0,0,0.35);
  }

  .jbc-ca-prevnext__link:not(.jbc-ca-prevnext__link--next) {
    left: 0;
    right: auto;
  }

  .jbc-ca-prevnext__link--next {
    right: 0;
    left: auto;
    border-left: 1px solid var(--jbc-rule, #e4e4e4);
  }

  .jbc-ca-prevnext__link svg {
    width: 28px;
    height: 28px;
    stroke-width: 1;
  }
}

/* ── Back to series ─────────────────────────────────────────────────── */
.jbc-ca-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jbc-muted, #999);
  text-decoration: none;
  transition: color 0.2s;
  margin-top: auto; /* push to bottom of sidebar */
  padding-top: 20px;
}

.jbc-ca-back svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.jbc-ca-back:hover {
  color: var(--jbc-ink, #111);
}

/* ── Detail images below the split (if any) ─────────────────────────── */
.jbc-ca-details {
  padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px);
  border-top: 1px solid var(--jbc-rule, #e4e4e4);
}

.jbc-ca-details__label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--jbc-muted, #999);
  margin: 0 0 20px;
}

.jbc-ca-details__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.jbc-ca-details__item {
  overflow: hidden;
  cursor: zoom-in;
  background: var(--jbc-bg-warm, #fafaf8);
}

.jbc-ca-details__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 450ms var(--jbc-ease-out, cubic-bezier(0.16,1,0.3,1)),
              opacity 400ms;
  opacity: 0;
}

.jbc-ca-details__item img.jbc-img-loaded { opacity: 1; }
.jbc-ca-details__item:hover img { transform: scale(1.03); }

/* ── MOBILE — stack image above info ────────────────────────────────── */
@media (max-width: 768px) {
  .jbc-ca-layout {
    flex-direction: column;
    min-height: auto;
    margin-top: 60px;
  }

  .jbc-ca-image-panel {
    /* On mobile: show the WHOLE artwork — no height cap, no clipping.
       Was min-height:50vw / max-height:75vw + the base overflow:hidden, which
       cut off the bottom of taller images. */
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .jbc-ca-img {
    /* Full image: fill the column width, natural height, no cap. !important
       beats .jbc-canonical-artwork .jbc-ca-img in style.css. */
    max-height: none !important;
    width: 100%;
    height: auto;
    padding: 16px;
  }

  .jbc-ca-sidebar {
    width: 100%;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--jbc-rule, #e4e4e4);
    padding: 24px 20px 32px;
  }

  .jbc-ca-title {
    /* Mobile: slightly larger since full width is available */
    font-size: clamp(18px, 5vw, 28px) !important;
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
  }

  .jbc-ca-details__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   COLLECTION PAGE CONTEXT
   Collection pages render white-bg with dark text everywhere
   (enforced by the white-bg inline style in functions.php).
   Re-declare the page CSS vars so var(--page-text) / var(--page-line) /
   var(--page-text-muted) resolve to the dark-on-white values instead
   of the root defaults (paper-on-near-black).
   ============================================================ */
.jbc-collection-page,
body.jbc-collection-page {
  --page-bg:         #ffffff;
  --page-text:       #0d0c0a;
  --page-text-muted: rgba(13,12,10,.55);
  --page-line:       rgba(13,12,10,.10);
  --page-accent:     var(--jbc-amber, #C8910A);
}

/* ============================================================
   COLLECTION LANDING — 5 variants
   Shared editorial hero/intro block above the artwork grid.
   Used by template-artwork-collections.php with partials in
   templates/parts/collection-hero-{a,b,c,d,e}.php
   ============================================================ */

/* Reset the global white-bg padding so the landing can manage its own */
.jbc-collection-page #main { padding: 0; }
.jbc-collection-page .jbc-coll-hero + .jbc-filter-bar,
.jbc-collection-page .jbc-coll-hero + .jbc-portfolio-grid {
  margin-top: clamp(48px, 7vw, 96px);
  transition: margin-top 600ms var(--jbc-ease-out);
}
/* When the hero is collapsed, drastically tighten the gap so the artwork
 * grid moves up the page and visitors can browse without scrolling far. */
.jbc-collection-page .jbc-coll-hero.is-collapsed + .jbc-filter-bar,
.jbc-collection-page .jbc-coll-hero.is-collapsed + .jbc-portfolio-grid {
  margin-top: 8px !important;
}
.jbc-coll-hero.is-collapsed {
  padding-bottom: 8px !important;
  padding-top: clamp(40px, 6vh, 80px) !important;
}

/* Shared landing-block typography & spacing */
.jbc-coll-hero {
  position: relative;
  color: var(--page-text, #0d0c0a);
}
.jbc-coll-hero__eyebrow {
  font-size: clamp(11px, 0.85vw, 13px);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--page-text-muted, rgba(13,12,10,.55));
  margin: 0 0 clamp(14px, 1.6vw, 22px);
}

/* Shared hero caption — quiet line below the hero image (variants A, E, F)
   or as an overlay row (variant B). Variant G uses its own __item figcaption. */
.jbc-coll-hero__caption {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-text-muted, rgba(13,12,10,.55));
  margin: 8px 4px 0;
  padding: 0;
}
.jbc-coll-hero--b__caption {
  color: var(--page-bg, #f6f3ef);
  opacity: .85;
  margin: 6px 0 0;
}
.jbc-coll-hero__title {
  font-size: clamp(40px, 6.5vw, 96px) !important;
  font-weight: 800 !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
  margin: 0 !important;
  color: inherit !important;
}
.jbc-coll-hero__statement {
  font-size: clamp(16px, 1.25vw, 19px);
  font-weight: 300;
  line-height: 1.75;
  color: var(--page-text, #0d0c0a);
  max-width: 60ch;
}
.jbc-coll-hero__statement p { margin: 0 0 1.2em; }
.jbc-coll-hero__statement p:last-child { margin-bottom: 0; }
.jbc-coll-hero__quote {
  font-family: var(--jbc-sans);
  font-size: clamp(20px, 2.1vw, 30px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.35;
  color: var(--page-text, #0d0c0a);
  max-width: 32ch;
  margin: 0;
  padding-left: clamp(16px, 1.4vw, 22px);
  border-left: 1px solid var(--page-accent, var(--jbc-amber));
}

/* ── Variant A — Editorial Split ───────────────────────────── */
.jbc-coll-hero--a {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: stretch;
  padding: clamp(72px, 10vh, 140px) var(--jbc-gutter, clamp(22px,5vw,86px))
           clamp(48px, 7vw, 96px);
  min-height: 78vh;
}
.jbc-coll-hero--a__media {
  position: relative;
  overflow: hidden;
  background: transparent;
}
.jbc-coll-hero--a .jbc-coll-hero__title {
  font-size: clamp(32px, 4.6vw, 64px) !important;
  line-height: 1.05 !important;
}
.jbc-coll-hero--a__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jbc-coll-hero--a__copy {
  display: flex;
  align-items: flex-start;
}
.jbc-coll-hero--a__copy-inner {
  position: sticky;
  top: clamp(96px, 12vh, 140px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 36px);
  padding-left: clamp(0px, 1vw, 16px);
}
.jbc-coll-hero--a .jbc-coll-hero__title { max-width: 14ch; }

@media (max-width: 860px) {
  .jbc-coll-hero--a {
    grid-template-columns: 1fr;
    /* Was clamp(120px,22vh,180px) — way too much space above the title. */
    padding-top: clamp(88px, 12vh, 110px);
    min-height: 0;
  }
  /* Title + subhead above the artwork (copy block leads with eyebrow+title),
     image below — matching the Artwork page. */
  .jbc-coll-hero--a__media {
    aspect-ratio: auto;
    height: auto;
    order: 1;
    margin-top: clamp(20px, 4vw, 32px);
  }
  /* Show the full artwork on mobile — no forced 4/5 crop. The desktop split
     deliberately fills its column via object-fit:cover; on a single-column
     phone layout the piece should read whole (e.g. Handy Series' 0.72 hero
     was losing ~10% top & bottom). */
  .jbc-coll-hero--a__media img { height: auto; object-fit: contain; }
  .jbc-coll-hero--a__copy-inner { position: static; top: auto; }
}

/* ── Variant B — Full-Bleed Atmospheric ────────────────────── */
/* Stage sizes to the image — no fixed height = no letterboxing below. */
.jbc-coll-hero--b__stage {
  position: relative;
  width: 100%;
  background: #0d0c0a;
  line-height: 0;
}
.jbc-coll-hero--b__media {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 64px);
  object-fit: contain;
  background: #0d0c0a;
}
.jbc-coll-hero--b__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,0) 65%, rgba(0,0,0,.25) 100%);
  pointer-events: none;
  z-index: 1;
}
/* Title overlay sits at TOP-LEFT of the image; eyebrow at BOTTOM-LEFT */
.jbc-coll-hero--b__overlay {
  position: absolute;
  left: var(--jbc-gutter, clamp(22px,5vw,86px));
  color: #f3eee6;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
  z-index: 2;
  line-height: 1.1;
}
.jbc-coll-hero--b__overlay--top {
  top: clamp(24px, 4vh, 56px);
  bottom: auto;
}
.jbc-coll-hero--b__overlay--bottom {
  bottom: clamp(24px, 4vh, 56px);
  top: auto;
}
.jbc-coll-hero--b__overlay .jbc-coll-hero__title {
  max-width: 14ch;
  font-size: clamp(36px, 5.5vw, 80px) !important;
  color: #f3eee6 !important;
  line-height: 1 !important;
  margin: 0 !important;
}
.jbc-coll-hero--b__overlay .jbc-coll-hero__eyebrow {
  color: rgba(243,238,230,.85);
  margin: 0 !important;
}
.jbc-coll-hero--b__intro {
  max-width: 920px;
  margin: 0 auto;
  padding: clamp(72px, 12vh, 140px) var(--jbc-gutter, clamp(22px,5vw,86px))
           clamp(24px, 4vw, 56px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 44px);
  transition: padding-bottom 600ms var(--jbc-ease-out),
              padding-top 600ms var(--jbc-ease-out);
}
.jbc-coll-hero--b__statement { max-width: 64ch; }

/* Variant B toggle — square, same pattern as G */
.jbc-coll-hero--b__toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  color: var(--page-text, #0d0c0a);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 250ms var(--jbc-ease-out), color 250ms var(--jbc-ease-out);
}
.jbc-coll-hero--b__toggle:hover {
  background: var(--page-text, #0d0c0a);
  color: var(--page-bg, #ffffff);
}
.jbc-coll-hero--b__toggle-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  transition: transform 250ms var(--jbc-ease-out);
}
.jbc-coll-hero--b__toggle[aria-expanded="false"] .jbc-coll-hero--b__toggle-icon { transform: rotate(45deg); }

.jbc-coll-hero--b__body {
  overflow: hidden;
  max-height: 6000px;
  opacity: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  transition: max-height 600ms var(--jbc-ease-out),
              opacity 350ms var(--jbc-ease-out);
}
.jbc-coll-hero--b.is-collapsed .jbc-coll-hero--b__body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.jbc-coll-hero--b.is-collapsed .jbc-coll-hero--b__intro {
  padding-bottom: clamp(16px, 2vw, 32px);
}

@media (max-width: 860px) {
  /* Mobile: the title + subhead sit ABOVE the image in black (matching the
     Artwork page), NOT overlaid on the photo. The stage becomes a plain
     vertical stack — eyebrow, then title, then the image — by turning it into
     a flex column and reordering its flow children. The old fixed
     `height: 92vh` is dropped so the stage hugs the image (no black
     letterbox). Desktop keeps the atmospheric overlay (rules above). */
  .jbc-coll-hero--b__stage {
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: var(--page-bg, #ffffff);
    line-height: 1.2;
    padding-top: clamp(88px, 12vh, 110px); /* clear the fixed nav */
  }
  .jbc-coll-hero--b__vignette { display: none; } /* no overlay = no scrim */
  .jbc-coll-hero--b__media { order: 3; }

  /* Both overlays become static, black, gutter-padded text blocks. */
  .jbc-coll-hero--b__overlay {
    position: static;
    inset: auto;
    left: auto;
    right: auto;
    text-shadow: none;
    padding: 0 var(--jbc-gutter, clamp(22px,5vw,86px));
  }
  .jbc-coll-hero--b__overlay--bottom { /* eyebrow + caption */
    order: 1;
    margin-bottom: clamp(10px, 2vw, 16px);
  }
  .jbc-coll-hero--b__overlay--top {    /* title */
    order: 2;
    margin-bottom: clamp(20px, 4vw, 30px);
  }
  .jbc-coll-hero--b__overlay .jbc-coll-hero__title {
    color: var(--page-text, #0d0c0a) !important;
    max-width: none;
  }
  .jbc-coll-hero--b__overlay--bottom .jbc-coll-hero__eyebrow,
  .jbc-coll-hero--b__overlay--bottom .jbc-coll-hero--b__caption {
    color: var(--page-text-muted, rgba(13,12,10,.55));
  }

  /* Tighten the gap above the Read/Hide button + statement: was
     clamp(72px,12vh,140px) — more than halved. */
  .jbc-coll-hero--b__intro {
    padding-top: clamp(28px, 6vw, 48px);
  }
}

/* ── Variant C — Typography-Forward (compact horizontal hero) ── */
.jbc-coll-hero--c {
  padding: clamp(96px, 12vh, 140px) var(--jbc-gutter, clamp(22px,5vw,86px))
           clamp(48px, 6vw, 80px);
  max-width: 1480px;
  margin: 0 auto;
}
.jbc-coll-hero--c__eyebrow { margin-bottom: clamp(20px, 2.4vw, 32px) !important; }

.jbc-coll-hero--c__row {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: end;
}
.jbc-coll-hero--c__title {
  font-size: clamp(48px, 7vw, 96px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.025em !important;
  max-width: 12ch;
  margin: 0 !important;
}
.jbc-coll-hero--c__statement {
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.7;
  max-width: 52ch;
  padding-bottom: clamp(6px, 1vw, 14px); /* sits flush with the title baseline */
}
.jbc-coll-hero--c__statement p {
  margin: 0 0 1.1em;
}
.jbc-coll-hero--c__statement p:last-child { margin-bottom: 0; }

.jbc-coll-hero--c__detail {
  margin: clamp(48px, 6vw, 96px) 0 0;
  max-width: 480px;
}
.jbc-coll-hero--c__detail img {
  width: 100%;
  height: auto;
  display: block;
}
.jbc-coll-hero--c__detail figcaption {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--page-text-muted, rgba(13,12,10,.55));
  margin-top: clamp(10px, 1vw, 14px);
}

@media (max-width: 860px) {
  .jbc-coll-hero--c__row {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
  }
  .jbc-coll-hero--c__title { max-width: 100%; }
  .jbc-coll-hero--c__statement { padding-bottom: 0; max-width: 100%; }
}

/* ── Variant D — Triptych ───────────────────────────────────── */
.jbc-coll-hero--d {
  padding: clamp(96px, 14vh, 160px) var(--jbc-gutter, clamp(22px,5vw,86px))
           clamp(64px, 9vw, 120px);
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 96px);
}
.jbc-coll-hero--d__tryptich {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: clamp(12px, 1.6vw, 28px);
  align-items: end;
}
.jbc-coll-hero--d__panel {
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,.04);
}
.jbc-coll-hero--d__panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jbc-coll-hero--d__panel--1 { aspect-ratio: 3/4; }
.jbc-coll-hero--d__panel--2 { aspect-ratio: 4/5; transform: translateY(-6%); }
.jbc-coll-hero--d__panel--3 { aspect-ratio: 4/5; }
.jbc-coll-hero--d__panel figcaption {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-text-muted, rgba(13,12,10,.55));
  padding: 8px 4px 0;
}
.jbc-coll-hero--d__quote {
  align-self: center;
  max-width: 36ch;
  margin: 0 auto;
  text-align: center;
  border-left: none;
  padding-left: 0;
  position: relative;
}
.jbc-coll-hero--d__quote::before,
.jbc-coll-hero--d__quote::after {
  content: "";
  display: block;
  width: clamp(32px, 4vw, 56px);
  height: 1px;
  background: var(--page-accent, var(--jbc-amber));
  margin: clamp(14px, 1.6vw, 22px) auto;
  opacity: 0.85;
}
.jbc-coll-hero--d__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
}
.jbc-coll-hero--d__copy .jbc-coll-hero__title { grid-column: 1; max-width: 14ch; }
.jbc-coll-hero--d__copy .jbc-coll-hero__eyebrow { grid-column: 1; }
.jbc-coll-hero--d__statement { grid-column: 2; }

@media (max-width: 860px) {
  .jbc-coll-hero--d__tryptich { grid-template-columns: 1fr; gap: 16px; }
  .jbc-coll-hero--d__panel--2 { transform: none; }
  .jbc-coll-hero--d__copy { grid-template-columns: 1fr; }
  .jbc-coll-hero--d__copy .jbc-coll-hero__title,
  .jbc-coll-hero--d__copy .jbc-coll-hero__eyebrow,
  .jbc-coll-hero--d__statement { grid-column: 1; }
}

/* ── Variant G — Stacked Column (images left, sticky text right) ─── */
.jbc-coll-hero--g {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: start;
  padding: clamp(96px, 14vh, 160px) var(--jbc-gutter, clamp(22px,5vw,86px))
           clamp(64px, 9vw, 120px);
  max-width: 1480px;
  margin: 0 auto;
  transition: padding-bottom 600ms var(--jbc-ease-out);
}
.jbc-coll-hero--g.is-collapsed {
  padding-bottom: clamp(16px, 2vw, 32px);
}
.jbc-coll-hero--g__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 1.8vw, 24px);
  min-width: 0;
}
.jbc-coll-hero--g__item {
  margin: 0;
  overflow: hidden;
}
.jbc-coll-hero--g__item img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.jbc-coll-hero--g__item figcaption {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--page-text-muted, rgba(13,12,10,.55));
  padding: 8px 4px 0;
}
.jbc-coll-hero--g__copy {
  position: relative;
  align-self: start;
}
.jbc-coll-hero--g__copy-inner {
  position: sticky;
  top: clamp(96px, 12vh, 140px);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 36px);
}
.jbc-coll-hero--g .jbc-coll-hero__title { max-width: 14ch; }
.jbc-coll-hero--g .jbc-coll-hero__statement { max-width: 56ch; }
.jbc-coll-hero--g .jbc-coll-hero__statement p {
  margin: 0 0 1.3em;
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.8;
}
.jbc-coll-hero--g .jbc-coll-hero__statement p:last-child { margin-bottom: 0; }

/* Toggle button — square, matches Variant F */
.jbc-coll-hero--g__toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  padding: 14px 22px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  color: var(--page-text, #0d0c0a);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 250ms var(--jbc-ease-out), color 250ms var(--jbc-ease-out);
}
.jbc-coll-hero--g__toggle:hover {
  background: var(--page-text, #0d0c0a);
  color: var(--page-bg, #ffffff);
}
.jbc-coll-hero--g__toggle-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  transition: transform 250ms var(--jbc-ease-out);
}
.jbc-coll-hero--g__toggle[aria-expanded="false"] .jbc-coll-hero--g__toggle-icon { transform: rotate(45deg); }

/* Body — expanded by default; .is-collapsed on the parent section hides it */
.jbc-coll-hero--g__body {
  overflow: hidden;
  max-height: 6000px; /* practical ceiling so the close transition runs */
  opacity: 1;
  transition: max-height 600ms var(--jbc-ease-out),
              opacity 350ms var(--jbc-ease-out),
              margin-top 600ms var(--jbc-ease-out);
}
.jbc-coll-hero--g.is-collapsed .jbc-coll-hero--g__body {
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  pointer-events: none;
}

/* Stack images — hide all but the first when the section is collapsed,
 * pulling the artwork grid up the page so visitors can reach it fast. */
.jbc-coll-hero--g__item {
  max-height: 4000px;
  opacity: 1;
  margin-bottom: 0;
  transition: max-height 600ms var(--jbc-ease-out),
              opacity 300ms var(--jbc-ease-out),
              margin-bottom 600ms var(--jbc-ease-out);
}
.jbc-coll-hero--g.is-collapsed .jbc-coll-hero--g__item:not(:first-child) {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

@media (max-width: 860px) {
  /* Mobile interleave (Surelo's layout): eyebrow → title → HERO image →
     show/hide toggle → statement → remaining images. The desktop two-column
     structure (images | sticky copy) keeps images and copy in separate
     containers, and `order` can't reorder across containers — so on mobile we
     flatten both with display:contents and place every piece directly in the
     section's single column. When collapsed, the body + non-hero images hide
     (existing is-collapsed rules), leaving the title + hero image. Desktop
     (rules above) is untouched. */
  .jbc-coll-hero--g {
    grid-template-columns: 1fr;
    gap: 0;
    padding-top: clamp(88px, 12vh, 110px); /* was 120–180px: too much */
  }
  .jbc-coll-hero--g__stack,
  .jbc-coll-hero--g__copy,
  .jbc-coll-hero--g__copy-inner { display: contents; }

  .jbc-coll-hero--g .jbc-coll-hero__eyebrow { order: 1; }
  .jbc-coll-hero--g .jbc-coll-hero__title   { order: 2; margin: 0 0 clamp(22px, 4vw, 30px) !important; }
  .jbc-coll-hero--g__item:first-child       { order: 3; margin: 0 0 clamp(24px, 5vw, 36px); }
  .jbc-coll-hero--g__toggle                 { order: 4; margin: 0 0 clamp(22px, 4vw, 30px); }
  .jbc-coll-hero--g__body                   { order: 5; margin: 0 0 clamp(24px, 5vw, 36px); }
  .jbc-coll-hero--g__item:not(:first-child) { order: 6; margin: 0 0 clamp(14px, 1.8vw, 24px); }

  /* No leftover gap when the statement is collapsed. */
  .jbc-coll-hero--g.is-collapsed .jbc-coll-hero--g__body { margin-bottom: 0; }
}

/* ── Variant F — Long-Form Editorial (hero images + collapsible body) ── */
.jbc-coll-hero--f {
  padding: clamp(96px, 14vh, 160px) var(--jbc-gutter, clamp(22px,5vw,86px))
           clamp(40px, 6vw, 80px);
  max-width: 1480px;
  margin: 0 auto;
  transition: padding-bottom 600ms var(--jbc-ease-out);
}
.jbc-coll-hero--f.is-collapsed {
  padding-bottom: clamp(16px, 2vw, 32px);
}

/* Hero images: wide hero up top, supporting images in an auto-fit row below */
.jbc-coll-hero--f__hero {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vw, 24px);
  margin-bottom: clamp(48px, 7vw, 96px);
}
.jbc-coll-hero--f__hero-wide {
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,.04);
}
.jbc-coll-hero--f__hero-wide img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
}
.jbc-coll-hero--f__hero-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(12px, 1.6vw, 24px);
}
.jbc-coll-hero--f__hero-row[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.jbc-coll-hero--f__hero-row[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.jbc-coll-hero--f__hero-row[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.jbc-coll-hero--f__hero-cell {
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,.04);
}
.jbc-coll-hero--f__hero-cell img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}

/* Title block — centred under the hero */
.jbc-coll-hero--f__head {
  max-width: 78ch;
  margin: 0 auto;
  text-align: center;
}
.jbc-coll-hero--f__title {
  max-width: 18ch;
  margin: 0 auto !important;
}
.jbc-coll-hero--f__head .jbc-coll-hero__eyebrow {
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.jbc-coll-hero--f__hook {
  margin: clamp(28px, 3.4vw, 44px) auto 0;
  max-width: 36ch;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.45;
  color: var(--page-text-muted, rgba(13,12,10,.55));
}

/* Toggle button — square, no rounding */
.jbc-coll-hero--f__toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: clamp(32px, 4vw, 56px) auto 0;
  padding: 14px 22px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  color: var(--page-text, #0d0c0a);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 250ms var(--jbc-ease-out), color 250ms var(--jbc-ease-out);
}
.jbc-coll-hero--f__toggle:hover {
  background: var(--page-text, #0d0c0a);
  color: var(--page-bg, #ffffff);
}
.jbc-coll-hero--f__toggle-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  transition: transform 250ms var(--jbc-ease-out);
}
/* Icon shows × when expanded, + when collapsed */
.jbc-coll-hero--f__toggle[aria-expanded="false"] .jbc-coll-hero--f__toggle-icon { transform: rotate(45deg); }

/* Body — expanded by default. .is-collapsed on the parent collapses it. */
.jbc-coll-hero--f__body {
  margin-top: clamp(48px, 7vw, 96px);
  overflow: hidden;
  max-height: 8000px;
  opacity: 1;
  transition: max-height 700ms var(--jbc-ease-out),
              opacity 400ms var(--jbc-ease-out),
              margin-top 600ms var(--jbc-ease-out);
}
.jbc-coll-hero--f.is-collapsed .jbc-coll-hero--f__body {
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  pointer-events: none;
}
.jbc-coll-hero--f__body-inner {
  max-width: 70ch;
  margin: 0 auto;
}
.jbc-coll-hero--f__body-inner p {
  margin: 0 0 1.4em;
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.85;
  color: var(--page-text, #0d0c0a);
}
.jbc-coll-hero--f__body-inner p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .jbc-coll-hero--f__head { text-align: left; }
  .jbc-coll-hero--f__title { margin-left: 0 !important; margin-right: 0 !important; }
  .jbc-coll-hero--f__hook { margin-left: 0; margin-right: 0; }
  .jbc-coll-hero--f__toggle { margin-left: 0; margin-right: 0; }
  .jbc-coll-hero--f__hero-row,
  .jbc-coll-hero--f__hero-row[data-count="2"],
  .jbc-coll-hero--f__hero-row[data-count="3"],
  .jbc-coll-hero--f__hero-row[data-count="4"] {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Variant E — Hero + Pair ───────────────────────────────── */
.jbc-coll-hero--e {
  padding: clamp(96px, 14vh, 160px) var(--jbc-gutter, clamp(22px,5vw,86px))
           clamp(64px, 9vw, 120px);
  max-width: 1480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.6vw, 40px);
}
.jbc-coll-hero--e__hero {
  margin: 0;
  overflow: hidden;
  background: rgba(0,0,0,.04);
}
.jbc-coll-hero--e__hero img {
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  display: block;
}
.jbc-coll-hero--e__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 1.6vw, 28px);
}
.jbc-coll-hero--e__pair-item {
  margin: 0;
  overflow: hidden;
  background: transparent;
  line-height: 0;
  font-size: 0;
}
.jbc-coll-hero--e__pair-item img {
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  display: block;
  vertical-align: top;
}
.jbc-coll-hero--e__copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
  gap: clamp(24px, 3vw, 56px);
  align-items: start;
  margin-top: clamp(24px, 3vw, 48px);
}
.jbc-coll-hero--e__copy .jbc-coll-hero__title,
.jbc-coll-hero--e__copy .jbc-coll-hero__eyebrow { grid-column: 1; }
.jbc-coll-hero--e__copy .jbc-coll-hero__title { max-width: 14ch; }
.jbc-coll-hero--e__toggle,
.jbc-coll-hero--e__body,
.jbc-coll-hero--e__statement,
.jbc-coll-hero--e__quote { grid-column: 2; }
.jbc-coll-hero--e__quote { margin-top: clamp(20px, 2.4vw, 36px); }

/* Variant E toggle — mirrors variant B */
.jbc-coll-hero--e__toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  color: var(--page-text, #0d0c0a);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  justify-self: start;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  transition: background 250ms var(--jbc-ease-out), color 250ms var(--jbc-ease-out);
}
.jbc-coll-hero--e__toggle:hover {
  background: var(--page-text, #0d0c0a);
  color: var(--page-bg, #ffffff);
}
.jbc-coll-hero--e__toggle-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  transition: transform 250ms var(--jbc-ease-out);
}
.jbc-coll-hero--e__toggle[aria-expanded="false"] .jbc-coll-hero--e__toggle-icon { transform: rotate(45deg); }

.jbc-coll-hero--e__body {
  overflow: hidden;
  max-height: 6000px;
  opacity: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.4vw, 32px);
  transition: max-height 600ms var(--jbc-ease-out),
              opacity 350ms var(--jbc-ease-out);
}
.jbc-coll-hero--e.is-collapsed .jbc-coll-hero--e__body {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
  margin-top: 0;
}
.jbc-coll-hero--e.is-collapsed .jbc-coll-hero--e__toggle { margin-bottom: 0; }

@media (max-width: 860px) {
  /* Was clamp(96px,14vh,160px) top — trim the excess space above the title. */
  .jbc-coll-hero--e { padding-top: clamp(88px, 12vh, 110px); }
  /* Title + subhead above the images (the section is already a flex column;
     just pull the copy block to the front), matching the Artwork page. */
  .jbc-coll-hero--e__copy { grid-template-columns: 1fr; order: -1; margin-top: 0; }
  .jbc-coll-hero--e__pair { grid-template-columns: 1fr; gap: 12px; }
  .jbc-coll-hero--e__copy .jbc-coll-hero__title,
  .jbc-coll-hero--e__copy .jbc-coll-hero__eyebrow,
  .jbc-coll-hero--e__toggle,
  .jbc-coll-hero--e__body,
  .jbc-coll-hero--e__statement,
  .jbc-coll-hero--e__quote { grid-column: 1; }
}

/* ── Shared toggle styles for variants A, C, D — matches variant G exactly ── */
.jbc-coll-hero--a__toggle,
.jbc-coll-hero--c__toggle,
.jbc-coll-hero--d__toggle {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  padding: 14px 22px;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  color: var(--page-text, #0d0c0a);
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 250ms var(--jbc-ease-out), color 250ms var(--jbc-ease-out);
}
.jbc-coll-hero--a__toggle:hover,
.jbc-coll-hero--c__toggle:hover,
.jbc-coll-hero--d__toggle:hover {
  background: var(--page-text, #0d0c0a);
  color: var(--page-bg, #ffffff);
}
.jbc-coll-hero--a__toggle-icon,
.jbc-coll-hero--c__toggle-icon,
.jbc-coll-hero--d__toggle-icon {
  display: inline-block;
  width: 1em;
  text-align: center;
  font-size: 18px;
  line-height: 1;
  transition: transform 250ms var(--jbc-ease-out);
}
.jbc-coll-hero--a__toggle[aria-expanded="false"] .jbc-coll-hero--a__toggle-icon,
.jbc-coll-hero--c__toggle[aria-expanded="false"] .jbc-coll-hero--c__toggle-icon,
.jbc-coll-hero--d__toggle[aria-expanded="false"] .jbc-coll-hero--d__toggle-icon {
  transform: rotate(45deg);
}

/* Body — expanded by default; .is-collapsed on the parent section hides it */
.jbc-coll-hero--a__body,
.jbc-coll-hero--c__body,
.jbc-coll-hero--d__body {
  overflow: hidden;
  max-height: 6000px;
  opacity: 1;
  transition: max-height 600ms var(--jbc-ease-out),
              opacity 350ms var(--jbc-ease-out),
              margin-top 600ms var(--jbc-ease-out);
}
.jbc-coll-hero--a.is-collapsed .jbc-coll-hero--a__body,
.jbc-coll-hero--c.is-collapsed .jbc-coll-hero--c__body,
.jbc-coll-hero--d.is-collapsed .jbc-coll-hero--d__body {
  max-height: 0;
  opacity: 0;
  margin-top: 0 !important;
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE TITLE POSITION — single source of truth (added 2026-05-31)
   Every titled page sits the same distance below the nav on mobile, matching
   collapsed-Surelo. Base AND .is-collapsed at equal value => no shift when the
   show/hide toggle is clicked (only content below changes). Loads after
   style.css so it also governs .jbc-page-title-block (Exhibitions etc.).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .jbc-coll-hero--a, .jbc-coll-hero--a.is-collapsed,
  .jbc-coll-hero--c, .jbc-coll-hero--c.is-collapsed,
  .jbc-coll-hero--d, .jbc-coll-hero--d.is-collapsed,
  .jbc-coll-hero--e, .jbc-coll-hero--e.is-collapsed,
  .jbc-coll-hero--f, .jbc-coll-hero--f.is-collapsed,
  .jbc-coll-hero--g, .jbc-coll-hero--g.is-collapsed,
  .jbc-page-title-block {
    padding-top: clamp(40px, 6vh, 80px) !important;
  }
  .jbc-coll-hero--b, .jbc-coll-hero--b.is-collapsed { padding-top: 0 !important; }
  .jbc-coll-hero--b__stage { padding-top: clamp(40px, 6vh, 80px) !important; }
}

/* ── PAGE-LEAVING: fade the WHOLE #primary subtree together ──
   When navigating away (class set in jbc-main.js), freeze every descendant
   transition/animation so nothing (thumbnail titles, late-loading images,
   scroll-reveals) lingers visible while #primary fades. Nav + logo are OUTSIDE
   #primary and are unaffected. */
html.jbc-leaving #primary * {
  transition: none !important;
  animation: none !important;
}
html.jbc-leaving #primary .jbc-portfolio-card__img-wrap img {
  opacity: 1 !important; /* dont let an unloaded thumb pop while fading out */
}