/* Jackson Cheung Portfolio Viewer — v0.4
   Editorial serif-led interface, wider index, tighter chrome.
*/

.jc-source-gallery {
  display: none !important;
}

body.jc-portfolio-page .wp-block-post-title {
  display: none !important;
}

body.jc-portfolio-page main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.jc-portfolio,
.jc-portfolio * {
  box-sizing: border-box;
}

.jc-portfolio button,
.jc-portfolio a {
  -webkit-tap-highlight-color: transparent;
}

.jc-portfolio {
  --jc-edge-x: clamp(26px, 2.3vw, 38px);
  --jc-edge-y: clamp(22px, 2.2vw, 30px);
  --jc-serif: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
  --jc-sans: Arial, Helvetica, sans-serif;

  position: relative;
  width: 100vw;
  min-height: 100svh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: #fff;
  color: #111;
  overflow: hidden;
}

/* ---------- HEADER ---------- */

.jc-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--jc-edge-y) var(--jc-edge-x) 0;
  pointer-events: none;
}

.jc-brand,
.jc-nav,
.jc-header button,
.jc-header a {
  pointer-events: auto;
}

.jc-brand,
.jc-nav-link,
.jc-work-menu-link,
.jc-index-toggle {
  font-family: var(--jc-serif);
  font-size: 15px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}

.jc-brand {
  color: inherit;
  text-decoration: none;
}

.jc-nav {
  display: flex;
  align-items: flex-start;
  gap: clamp(32px, 3vw, 50px);
}

.jc-nav-link,
.jc-work-menu-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.jc-brand:hover,
.jc-nav-link:hover,
.jc-work-menu-link:hover,
.jc-index-toggle:hover {
  opacity: 0.58;
}

.jc-brand:focus-visible,
.jc-nav-link:focus-visible,
.jc-work-menu-link:focus-visible,
.jc-index-toggle:focus-visible,
.jc-grid-item:focus-visible,
.jc-neighbor:focus-visible,
.jc-zone:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.jc-work-wrap {
  position: relative;
}

.jc-work-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  min-width: 96px;
}

.jc-work-menu[hidden] {
  display: none !important;
}

.jc-work-menu-link {
  display: block;
  margin: 0 0 5px;
  opacity: 0.62;
}

.jc-work-menu-link.is-current {
  opacity: 1;
}

/* ---------- VIEWER ---------- */

.jc-stage {
  position: relative;
  width: 100%;
  height: 100svh;
  min-height: 600px;
}

.jc-current {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding:
    clamp(84px, 9vh, 112px)
    max(9vw, 112px)
    clamp(78px, 8vh, 100px);
  pointer-events: none;
}

.jc-portfolio .jc-current-image {
  display: block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 76vw !important;
  max-height: 74vh !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  flex: none !important;
  user-select: none;
}

/* ---------- EDGE PEEKS ---------- */

.jc-neighbor {
  position: absolute;
  top: 50%;
  z-index: 5;
  width: clamp(18px, 1.8vw, 28px);
  height: min(42vh, 420px);
  transform: translateY(-50%);
  border: 0;
  padding: 0;
  background: transparent;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.07;
  transition: opacity 120ms ease;
}

.jc-neighbor:hover {
  opacity: 0.16;
}

.jc-neighbor--prev {
  left: 0;
}

.jc-neighbor--next {
  right: 0;
}

.jc-portfolio .jc-neighbor-image {
  position: absolute;
  top: 50%;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  max-height: 42vh !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  transform: translateY(-50%);
}

.jc-neighbor--prev .jc-neighbor-image {
  right: 0;
}

.jc-neighbor--next .jc-neighbor-image {
  left: 0;
}

.jc-zone {
  position: absolute;
  top: 62px;
  bottom: 58px;
  z-index: 4;
  width: 30%;
  border: 0;
  padding: 0;
  background: transparent;
}

.jc-zone--left {
  left: 0;
  cursor: w-resize;
}

.jc-zone--right {
  right: 0;
  cursor: e-resize;
}

/* ---------- FOOTER ---------- */

.jc-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 0 var(--jc-edge-x) var(--jc-edge-y);
  pointer-events: none;
}

.jc-counter,
.jc-index-toggle {
  pointer-events: auto;
}

.jc-counter {
  font-family: var(--jc-sans);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.045em;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.jc-index-toggle {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

/* ---------- INDEX ---------- */

.jc-index-grid {
  width: 100%;
  min-height: 100svh;
  padding:
    clamp(92px, 10vh, 118px)
    var(--jc-edge-x)
    clamp(96px, 10vh, 124px);

  columns: 4;
  column-gap: clamp(34px, 3vw, 54px);
  overflow-y: auto;
}

.jc-index-grid[hidden] {
  display: none !important;
}

.jc-grid-item {
  display: block;
  width: 100%;
  margin: 0 0 clamp(38px, 4.2vw, 66px);
  break-inside: avoid;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transition: opacity 120ms ease;
}

.jc-grid-item:hover {
  opacity: 0.7;
}

.jc-grid-item.is-active {
  opacity: 0.48;
}

.jc-portfolio .jc-grid-image {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

/* ---------- TABLET / MOBILE ---------- */

@media (max-width: 900px) {
  .jc-portfolio {
    --jc-edge-x: 18px;
    --jc-edge-y: 18px;
  }

  .jc-brand,
  .jc-nav-link,
  .jc-work-menu-link,
  .jc-index-toggle {
    font-size: 14px;
  }

  .jc-nav {
    gap: 24px;
  }

  .jc-stage {
    min-height: 0;
  }

  .jc-current {
    padding: 72px 5vw 68px;
  }

  .jc-portfolio .jc-current-image {
    max-width: 88vw !important;
    max-height: 74vh !important;
  }

  .jc-neighbor {
    display: none;
  }

  .jc-zone {
    top: 56px;
    bottom: 52px;
    width: 26%;
  }

  .jc-index-grid {
    columns: 2;
    column-gap: 18px;
    padding-top: 78px;
    padding-bottom: 78px;
  }

  .jc-grid-item {
    margin-bottom: 24px;
  }
}

@media (max-width: 520px) {
  .jc-nav {
    gap: 18px;
  }

  .jc-index-grid {
    column-gap: 12px;
  }

  .jc-grid-item {
    margin-bottom: 16px;
  }
}


/* ---------- v0.4.1: BUTTON-CHROME HOTFIX ----------
   Twenty Twenty-Five can apply global button backgrounds/borders/shadows.
   These navigation hit areas must remain visually invisible.
*/
.jc-portfolio .jc-neighbor,
.jc-portfolio .jc-zone,
.jc-portfolio .jc-grid-item {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline-offset: 0 !important;
}

.jc-portfolio .jc-neighbor::before,
.jc-portfolio .jc-neighbor::after,
.jc-portfolio .jc-zone::before,
.jc-portfolio .jc-zone::after {
  content: none !important;
  display: none !important;
}

/* Keep keyboard accessibility without restoring a rectangular button box. */
.jc-portfolio .jc-neighbor:focus,
.jc-portfolio .jc-neighbor:active,
.jc-portfolio .jc-zone:focus,
.jc-portfolio .jc-zone:active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* The image itself is the only visible content of the peek. */
.jc-portfolio .jc-neighbor-image {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}


/* ---------- v0.5: NUMBER CURSOR NAVIGATION ---------- */

/* The viewer no longer exposes neighboring images at the edges. */
.jc-portfolio .jc-neighbor {
  display: none !important;
}

/* Split the entire visual field into invisible previous / next hit areas. */
.jc-portfolio .jc-zone {
  top: 58px !important;
  bottom: 54px !important;
  width: 50% !important;

  appearance: none !important;
  -webkit-appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  cursor: none !important;
}

.jc-portfolio .jc-zone--left {
  left: 0 !important;
}

.jc-portfolio .jc-zone--right {
  right: 0 !important;
}

/* Hide the system pointer throughout the photographic viewing field. */
@media (hover: hover) and (pointer: fine) {
  .jc-portfolio .jc-stage {
    cursor: none;
  }

  .jc-gallery-cursor {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 40;
    pointer-events: none;
    opacity: 0;

    font-family: var(--jc-serif);
    font-size: 14px;
    line-height: 1;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #111;
    white-space: nowrap;

    transition: opacity 80ms linear;
    will-change: transform;
  }

  .jc-gallery-cursor.is-visible {
    opacity: 1;
  }
}

/* Touch devices keep their normal interaction; there is no fake cursor. */
@media (hover: none), (pointer: coarse) {
  .jc-gallery-cursor {
    display: none !important;
  }

  .jc-portfolio .jc-stage,
  .jc-portfolio .jc-zone {
    cursor: auto !important;
  }
}


/* ---------- v0.5.1: FULL-VIEWPORT CURSOR FIELD ---------- */

/*
 * Previous / next click zones span the full viewport width.
 * Only the header/footer bands are excluded.
 */
.jc-portfolio .jc-zone {
  position: fixed !important;
  top: 58px !important;
  bottom: 54px !important;
  z-index: 4 !important;
  width: 50vw !important;
  height: auto !important;
}

.jc-portfolio .jc-zone--left {
  left: 0 !important;
  right: auto !important;
}

.jc-portfolio .jc-zone--right {
  left: auto !important;
  right: 0 !important;
}

/*
 * Cursor coordinates are now viewport coordinates rather than stage
 * coordinates, so fixed positioning lets it travel edge-to-edge.
 */
@media (hover: hover) and (pointer: fine) {
  .jc-gallery-cursor {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 40 !important;
  }

  /* Hide the normal pointer across the entire central viewing band. */
  .jc-portfolio .jc-zone {
    cursor: none !important;
  }

  /* Restore ordinary pointers for real interface controls. */
  .jc-portfolio .jc-header,
  .jc-portfolio .jc-header *,
  .jc-portfolio .jc-footer,
  .jc-portfolio .jc-footer * {
    cursor: auto;
  }

  .jc-portfolio .jc-header button,
  .jc-portfolio .jc-header a,
  .jc-portfolio .jc-footer button,
  .jc-portfolio .jc-footer a {
    cursor: pointer;
  }
}


/* ==========================================================
   v0.7.0 — PROJECT VIEWER + PROJECT INDEX
   ========================================================== */

body.jc-project-viewer-page {
  background: #fff !important;
}

body.jc-project-viewer-page .wp-block-post-title,
body.jc-project-viewer-page header.wp-block-template-part,
body.jc-project-viewer-page footer.wp-block-template-part,
body.jc-project-viewer-page .wp-site-blocks > header,
body.jc-project-viewer-page .wp-site-blocks > footer {
  display: none !important;
}

body.jc-project-viewer-page main,
body.jc-project-viewer-page .wp-block-post-content {
  margin: 0 !important;
  padding: 0 !important;
}

body.jc-project-viewer-page .wp-block-post-content > .wp-block-shortcode {
  margin: 0 !important;
  max-width: none !important;
}

.jc-project-viewer,
.jc-project-viewer * {
  box-sizing: border-box;
}

.jc-project-viewer {
  --jc-edge-x: clamp(26px, 2.3vw, 38px);
  --jc-edge-y: clamp(22px, 2.2vw, 30px);
  --jc-serif: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
  --jc-sans: Arial, Helvetica, sans-serif;

  position: relative;
  width: 100vw;
  height: 100svh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background: #fff;
  color: #111;
}

/* Header stays consistent with Selected Works. */
.jc-project-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: var(--jc-edge-y) var(--jc-edge-x) 0;
  pointer-events: none;
}

.jc-project-header .jc-brand,
.jc-project-header .jc-nav,
.jc-project-header button,
.jc-project-header a,
.jc-project-header span {
  pointer-events: auto;
}

.jc-project-header .jc-brand,
.jc-project-header .jc-nav-link,
.jc-project-header .jc-work-menu-link {
  font-family: var(--jc-serif);
  font-size: 15px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}

.jc-project-header .jc-brand {
  color: inherit;
  text-decoration: none;
}

.jc-project-header .jc-nav {
  display: flex;
  gap: clamp(32px, 3vw, 50px);
  align-items: flex-start;
}

.jc-project-header .jc-nav-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.jc-project-header .jc-work-wrap {
  position: relative;
}

.jc-project-header .jc-work-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  min-width: 96px;
}

.jc-project-header .jc-work-menu[hidden] {
  display: none !important;
}

.jc-project-header .jc-work-menu-link {
  display: block;
  margin-bottom: 5px;
  opacity: 0.62;
}

.jc-project-header .jc-work-menu-link.is-current {
  opacity: 1;
}

/* Central immersive viewing field. */
.jc-project-stage {
  position: fixed;
  inset: 0;
  z-index: 10;
}

.jc-project-stage[hidden] {
  display: none !important;
}

.jc-project-image-frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(66px, 7vh, 86px) 15vw clamp(58px, 6vh, 78px);
  pointer-events: none;
}

.jc-project-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 72vw;
  max-height: 86vh;
  object-fit: contain;
  user-select: none;
}

/* Entire central screen is continuous previous / next territory. */
.jc-project-hit {
  position: fixed;
  top: 58px;
  bottom: 46px;
  z-index: 25;
  width: 50vw;
  background: transparent;
  cursor: none;
}

.jc-project-hit--left {
  left: 0;
}

.jc-project-hit--right {
  right: 0;
}

.jc-project-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;

  font-family: var(--jc-serif);
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
  white-space: nowrap;

  transition: opacity 70ms linear;
}

.jc-project-cursor.is-visible {
  opacity: 1;
}

/* Project identity sits at the left edge, mid-screen. */
.jc-project-meta {
  position: fixed;
  left: var(--jc-edge-x);
  top: 50%;
  z-index: 50;
  transform: translateY(-50%);

  width: 13vw;
  min-width: 135px;

  font-family: var(--jc-serif);
  font-size: 15px;
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.01em;

  pointer-events: none;
}

.jc-project-meta[hidden] {
  display: none !important;
}

.jc-project-meta-year,
.jc-project-meta-count {
  margin-top: 5px;
  font-size: 11px;
  line-height: 1;
}

.jc-project-meta-year {
  opacity: 0.62;
}

.jc-project-meta-count {
  font-family: var(--jc-sans);
  letter-spacing: 0.035em;
  margin-top: 10px;
}

/* Index / Close sit at the right edge, mid-screen. */
.jc-project-controls {
  position: fixed;
  right: var(--jc-edge-x);
  top: 50%;
  z-index: 60;
  transform: translateY(-50%);

  display: flex;
  gap: 20px;
  align-items: center;
}

.jc-project-controls[hidden] {
  display: none !important;
}

.jc-project-controls button {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  color: inherit;

  font-family: var(--jc-serif);
  font-size: 15px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;

  cursor: pointer;
}

/* ---------- PROJECT INDEX ----------
   Deliberately different from Selected's masonry index:
   two calm thumbnail rows, like an editorial contact sheet.
*/
.jc-project-index {
  position: fixed;
  inset: 0;
  z-index: 20;
  background: #fff;
}

.jc-project-index[hidden] {
  display: none !important;
}

.jc-project-index-grid {
  position: absolute;
  left: 7vw;
  right: 7vw;
  top: 50%;
  transform: translateY(-50%);

  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-auto-rows: 190px;
  gap: 28px 26px;
  align-items: center;
}

.jc-project-thumb {
  appearance: none;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  box-shadow: none;

  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;

  cursor: pointer;
  transition: opacity 100ms ease;
}

.jc-project-thumb img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

.jc-project-thumb:hover {
  opacity: 0.68;
}

.jc-project-thumb.is-active {
  opacity: 0.42;
}

/* ---------- CLOSE -> MINIMAL PROJECT LIST ---------- */
.jc-project-list {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #fff;

  padding: clamp(110px, 14vh, 160px) var(--jc-edge-x) 70px;
}

.jc-project-list[hidden] {
  display: none !important;
}

.jc-project-list-title {
  font-family: var(--jc-serif);
  font-size: 15px;
  line-height: 1;
  margin-bottom: 54px;
}

.jc-project-list-items {
  width: min(720px, 70vw);
}

.jc-project-list-item {
  appearance: none;
  border: 0;
  padding: 9px 0;
  margin: 0;
  background: transparent;
  color: inherit;

  display: grid;
  grid-template-columns: 48px 1fr 70px;
  width: 100%;
  text-align: left;

  font-family: var(--jc-serif);
  font-size: clamp(20px, 2vw, 30px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.015em;

  cursor: pointer;
}

.jc-project-list-item span:first-child,
.jc-project-list-item span:last-child {
  font-family: var(--jc-sans);
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: 0.04em;
}

.jc-project-list-item:hover {
  opacity: 0.58;
}

.jc-project-list-item.is-current {
  opacity: 0.72;
}

/* Quiet focus treatment. */
.jc-project-viewer button:focus-visible,
.jc-project-viewer a:focus-visible {
  outline: none;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@media (hover: none), (pointer: coarse) {
  .jc-project-cursor {
    display: none !important;
  }

  .jc-project-hit {
    cursor: auto;
  }
}

@media (max-width: 900px) {
  .jc-project-viewer {
    --jc-edge-x: 18px;
    --jc-edge-y: 18px;
  }

  .jc-project-header .jc-brand,
  .jc-project-header .jc-nav-link,
  .jc-project-header .jc-work-menu-link,
  .jc-project-meta,
  .jc-project-controls button {
    font-size: 14px;
  }

  .jc-project-header .jc-nav {
    gap: 24px;
  }

  .jc-project-image-frame {
    padding: 66px 5vw 72px;
  }

  .jc-project-image {
    max-width: 90vw;
    max-height: 78vh;
  }

  .jc-project-meta {
    left: 18px;
    top: auto;
    bottom: 20px;
    transform: none;
    width: 42vw;
    min-width: 0;
  }

  .jc-project-controls {
    right: 18px;
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .jc-project-hit {
    top: 56px;
    bottom: 64px;
  }

  .jc-project-index-grid {
    left: 18px;
    right: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 130px;
    gap: 18px 14px;
  }

  .jc-project-list {
    padding-left: 18px;
    padding-right: 18px;
  }

  .jc-project-list-items {
    width: 100%;
  }
}


/* ==========================================================
   v0.8.0 — PROJECT BROWSER / INDEX REFINEMENT
   ========================================================== */

/* Year is intentionally removed. */
.jc-project-meta-year {
  display: none !important;
}

/* Bigger project number/title; tiny image counter underneath. */
.jc-project-meta {
  width: 18vw !important;
  min-width: 205px !important;
}

.jc-project-meta-title {
  display: flex;
  align-items: baseline;
  gap: 11px;
}

.jc-project-meta-project-number {
  font-family: var(--jc-sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.jc-project-meta-project-title {
  font-family: var(--jc-serif);
  font-size: clamp(20px, 1.55vw, 26px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.018em;
}

.jc-project-meta-count {
  margin-top: 12px !important;
  margin-left: 0;
  font-size: 10px !important;
}

/* ---------- INDEX ----------
   Fixed editorial cells: equal gutters, two rows, no masonry behavior.
*/
.jc-project-index-grid {
  left: 5.5vw !important;
  right: 5.5vw !important;
  top: 50% !important;
  height: min(66vh, 610px) !important;
  transform: translateY(-50%) !important;

  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: unset !important;

  column-gap: clamp(20px, 1.6vw, 30px) !important;
  row-gap: clamp(24px, 2.2vw, 38px) !important;
  align-items: stretch !important;
}

.jc-project-thumb {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden;
}

.jc-project-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

/* ---------- CLOSE DESTINATION: VISUAL PROJECT BROWSER ---------- */
.jc-project-browser {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #fff;
}

.jc-project-browser[hidden] {
  display: none !important;
}

.jc-project-browser-stage {
  position: absolute;
  inset: 0;
}

.jc-project-browser-cover {
  position: absolute;
  inset: 0;
  margin: auto;

  width: min(62vw, 980px);
  height: min(82vh, 820px);

  display: grid;
  place-items: center;

  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;

  z-index: 20;
}

.jc-project-browser-image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.jc-project-browser-hit {
  position: fixed;
  top: 58px;
  bottom: 46px;
  width: 50vw;
  z-index: 15;
  cursor: none;
}

.jc-project-browser-hit--left {
  left: 0;
}

.jc-project-browser-hit--right {
  right: 0;
}

.jc-project-browser-meta {
  position: fixed;
  left: var(--jc-edge-x);
  top: 50%;
  z-index: 50;
  transform: translateY(-50%);

  display: flex;
  align-items: baseline;
  gap: 12px;

  pointer-events: none;
}

.jc-project-browser-number {
  font-family: var(--jc-sans);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.04em;
}

.jc-project-browser-title {
  font-family: var(--jc-serif);
  font-size: clamp(22px, 1.8vw, 30px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.018em;
}

.jc-project-browser-hint {
  position: fixed;
  right: var(--jc-edge-x);
  top: 50%;
  z-index: 50;
  transform: translateY(-50%);

  font-family: var(--jc-serif);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
}

.jc-project-browser-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  pointer-events: none;
  opacity: 0;

  font-family: var(--jc-serif);
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;

  transition: opacity 70ms linear;
}

.jc-project-browser-cursor.is-visible {
  opacity: 1;
}

/* Remove old text-list mode completely. */
.jc-project-list,
.jc-project-list-title,
.jc-project-list-items {
  display: none !important;
}

@media (max-width: 900px) {
  .jc-project-meta {
    width: 52vw !important;
    min-width: 0 !important;
  }

  .jc-project-meta-project-title {
    font-size: 18px;
  }

  .jc-project-index-grid {
    left: 18px !important;
    right: 18px !important;
    height: min(70vh, 620px) !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;

    column-gap: 14px !important;
    row-gap: 18px !important;
  }

  .jc-project-browser-cover {
    width: 86vw;
    height: 72vh;
  }

  .jc-project-browser-meta {
    left: 18px;
    top: auto;
    bottom: 20px;
    transform: none;
  }

  .jc-project-browser-title {
    font-size: 18px;
  }

  .jc-project-browser-hint {
    right: 18px;
    top: auto;
    bottom: 20px;
    transform: none;
    font-size: 14px;
  }

  .jc-project-browser-hit {
    top: 56px;
    bottom: 64px;
  }
}


/* ==========================================================
   v0.8.1 — PROJECT BROWSER INTERACTION HOTFIX
   ========================================================== */

/* The Projects browser owns wheel/trackpad gestures completely. */
body.jc-project-viewer-page {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

.jc-project-browser {
  overflow: hidden !important;
  overscroll-behavior: none !important;
}

/* Remove the old static Open Project label entirely. */
.jc-project-browser-hint {
  display: none !important;
}

/* Keep the real mouse pointer invisible over the cover;
   the custom cursor communicates the action instead. */
@media (hover: hover) and (pointer: fine) {
  .jc-project-browser-cover {
    cursor: none !important;
  }
}

/* "Open" becomes visibly actionable only while directly over the cover. */
.jc-project-browser-cursor.is-open {
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}


/* ==========================================================
   v0.9.0 — INFO PAGE
   ========================================================== */

body.jc-info-page {
  background: #fff !important;
}

body.jc-info-page .wp-block-post-title,
body.jc-info-page header.wp-block-template-part,
body.jc-info-page footer.wp-block-template-part,
body.jc-info-page .wp-site-blocks > header,
body.jc-info-page .wp-site-blocks > footer {
  display: none !important;
}

body.jc-info-page main,
body.jc-info-page .wp-block-post-content {
  margin: 0 !important;
  padding: 0 !important;
}

body.jc-info-page .wp-block-post-content > .wp-block-shortcode {
  margin: 0 !important;
  max-width: none !important;
}

.jc-info-shell,
.jc-info-shell * {
  box-sizing: border-box;
}

.jc-info-shell {
  --jc-edge-x: clamp(26px, 2.3vw, 38px);
  --jc-edge-y: clamp(22px, 2.2vw, 30px);
  --jc-serif: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
  --jc-sans: Arial, Helvetica, sans-serif;

  position: relative;
  width: 100vw;
  min-height: 100svh;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  background: #fff;
  color: #111;
  overflow: hidden;
}

/* Header mirrors Selected and Projects. */
.jc-info-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  padding: var(--jc-edge-y) var(--jc-edge-x) 0;
  pointer-events: none;
}

.jc-info-header .jc-brand,
.jc-info-header .jc-nav,
.jc-info-header button,
.jc-info-header a,
.jc-info-header span {
  pointer-events: auto;
}

.jc-info-header .jc-brand,
.jc-info-header .jc-nav-link,
.jc-info-header .jc-work-menu-link {
  font-family: var(--jc-serif);
  font-size: 15px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
}

.jc-info-header .jc-brand {
  color: inherit;
  text-decoration: none;
}

.jc-info-header .jc-nav {
  display: flex;
  gap: clamp(32px, 3vw, 50px);
  align-items: flex-start;
}

.jc-info-header .jc-nav-link {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.jc-info-header .jc-info-current {
  cursor: default;
}

.jc-info-header .jc-work-wrap {
  position: relative;
}

.jc-info-header .jc-work-menu {
  position: absolute;
  top: calc(100% + 7px);
  left: 0;
  min-width: 96px;
}

.jc-info-header .jc-work-menu[hidden] {
  display: none !important;
}

.jc-info-header .jc-work-menu-link {
  display: block;
  margin-bottom: 5px;
  opacity: 0.62;
}

/* Main composition: one authored text block + quiet practical details. */
.jc-info-content {
  position: relative;
  width: 100%;
  min-height: 100svh;
  padding: 0 var(--jc-edge-x);
}

.jc-info-kicker {
  position: absolute;
  left: var(--jc-edge-x);
  top: 22vh;

  font-family: var(--jc-sans);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.jc-info-bio {
  position: absolute;
  left: 18vw;
  top: 21vh;

  width: min(54vw, 820px);

  font-family: var(--jc-serif);
  font-size: clamp(28px, 3vw, 47px);
  line-height: 1.08;
  font-weight: 400;
  letter-spacing: -0.022em;
}

.jc-info-practical {
  position: absolute;
  left: 18vw;
  bottom: 11vh;

  display: grid;
  grid-template-columns: 130px minmax(210px, 330px) 180px;
  gap: clamp(28px, 4vw, 68px);
  align-items: start;
}

.jc-info-label {
  margin-bottom: 8px;

  font-family: var(--jc-sans);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.jc-info-value {
  font-family: var(--jc-serif);
  font-size: 15px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.jc-info-link {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

.jc-info-link:hover,
.jc-info-link:focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  outline: none;
}

.jc-info-note {
  position: absolute;
  right: var(--jc-edge-x);
  bottom: var(--jc-edge-y);

  font-family: var(--jc-serif);
  font-size: 13px;
  line-height: 1;
  font-weight: 400;
  letter-spacing: -0.01em;
}

@media (max-width: 900px) {
  .jc-info-shell {
    --jc-edge-x: 18px;
    --jc-edge-y: 18px;
    overflow-y: auto;
  }

  .jc-info-header .jc-brand,
  .jc-info-header .jc-nav-link,
  .jc-info-header .jc-work-menu-link {
    font-size: 14px;
  }

  .jc-info-header .jc-nav {
    gap: 24px;
  }

  .jc-info-content {
    min-height: auto;
    padding-top: 120px;
    padding-bottom: 100px;
  }

  .jc-info-kicker,
  .jc-info-bio,
  .jc-info-practical,
  .jc-info-note {
    position: relative;
    inset: auto;
  }

  .jc-info-kicker {
    margin-bottom: 24px;
  }

  .jc-info-bio {
    width: 92%;
    font-size: clamp(27px, 7vw, 40px);
  }

  .jc-info-practical {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 64px;
  }

  .jc-info-note {
    margin-top: 64px;
    font-size: 13px;
  }
}


/* ==========================================================
   v0.9.1 — INFO PAGE WORDPRESS CONSTRAINT HOTFIX
   ========================================================== */

/*
 * Twenty Twenty-Five's constrained layout can impose max-width/margins on
 * nested main/content elements. The Info page is an intentional full-viewport
 * editorial composition, so isolate it completely from those constraints.
 */
body.jc-info-page {
  overflow: hidden !important;
}

body.jc-info-page .jc-info-shell {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;

  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  overflow: hidden !important;
}

body.jc-info-page .jc-info-content {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-width: none !important;

  margin: 0 !important;
  padding: 0 !important;
}

/*
 * Recompose the desktop spread after removing WordPress's layout constraint.
 * Kicker remains quiet at the left; biography occupies the central editorial
 * field and never exceeds the viewport.
 */
body.jc-info-page .jc-info-kicker {
  left: 5vw !important;
  top: 20vh !important;
}

body.jc-info-page .jc-info-bio {
  left: 29vw !important;
  top: 19vh !important;

  width: min(58vw, 860px) !important;
  max-width: calc(100vw - 33vw) !important;

  font-size: clamp(27px, 2.7vw, 43px) !important;
  line-height: 1.08 !important;
}

body.jc-info-page .jc-info-practical {
  left: 29vw !important;
  right: 5vw !important;
  bottom: 11vh !important;

  grid-template-columns:
    minmax(115px, 0.75fr)
    minmax(220px, 1.45fr)
    minmax(145px, 0.8fr) !important;

  gap: clamp(34px, 5vw, 78px) !important;
}

body.jc-info-page .jc-info-note {
  right: 5vw !important;
  bottom: 3.2vh !important;
}

/* Tablet/mobile returns to normal document flow. */
@media (max-width: 900px) {
  body.jc-info-page {
    overflow-y: auto !important;
  }

  body.jc-info-page .jc-info-shell {
    position: relative !important;
    inset: auto !important;

    width: 100vw !important;
    height: auto !important;
    min-height: 100svh !important;

    overflow: visible !important;
  }

  body.jc-info-page .jc-info-content {
    position: relative !important;
    inset: auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 100svh !important;

    padding: 120px 18px 92px !important;
  }

  body.jc-info-page .jc-info-kicker,
  body.jc-info-page .jc-info-bio,
  body.jc-info-page .jc-info-practical,
  body.jc-info-page .jc-info-note {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    max-width: none !important;
  }

  body.jc-info-page .jc-info-kicker {
    margin-bottom: 24px !important;
  }

  body.jc-info-page .jc-info-bio {
    width: 94% !important;
    font-size: clamp(27px, 7vw, 40px) !important;
  }

  body.jc-info-page .jc-info-practical {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    margin-top: 64px !important;
  }

  body.jc-info-page .jc-info-note {
    margin-top: 64px !important;
  }
}


/* ==========================================================
   v0.10.0 — INFO PAGE: WHITE FIELD + MUTED INDIGO BAND
   ========================================================== */

body.jc-info-page {
  overflow: hidden !important;
}

/* Ensure the custom Info composition fully covers old WordPress theme chrome. */
body.jc-info-page .jc-info-shell {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;

  width: 100vw !important;
  height: 100svh !important;
  min-height: 100svh !important;

  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;

  background: #fff !important;
  color: #111 !important;
  overflow: hidden !important;
}

/* White navigation floats over the white upper field only. */
body.jc-info-page .jc-info-header {
  z-index: 10020 !important;
  color: #111 !important;
}

body.jc-info-page .jc-info-content {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;
}

/* Upper field: practical information only. */
body.jc-info-page .jc-info-upper {
  position: absolute;
  inset: 0 0 31vh 0;
  background: #fff;
}

body.jc-info-page .jc-info-practical {
  position: absolute !important;
  left: 27vw !important;
  right: 6vw !important;
  bottom: 8vh !important;

  display: grid !important;
  grid-template-columns:
    minmax(135px, 0.8fr)
    minmax(245px, 1.4fr)
    minmax(150px, 0.8fr) !important;
  gap: clamp(42px, 6vw, 92px) !important;

  align-items: start !important;
}

body.jc-info-page .jc-info-label {
  margin-bottom: 8px !important;

  font-family: var(--jc-sans) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.045em !important;
  text-transform: uppercase !important;
}

body.jc-info-page .jc-info-value {
  font-family: var(--jc-serif) !important;
  font-size: 15px !important;
  line-height: 1.15 !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em !important;
}

body.jc-info-page .jc-info-link {
  color: inherit !important;
  text-decoration: none !important;
}

body.jc-info-page .jc-info-link:hover,
body.jc-info-page .jc-info-link:focus-visible {
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
}

/* Bottom band: muted indigo/violet, used only on Info. */
body.jc-info-page .jc-info-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;

  height: 31vh;
  min-height: 230px;

  background: #312b46;
  color: #f4f1ec;
}

/* Biography is a compact editorial footer, not display typography. */
body.jc-info-page .jc-info-bio {
  position: absolute !important;
  left: var(--jc-edge-x) !important;
  right: var(--jc-edge-x) !important;
  top: auto !important;
  bottom: 3.8vh !important;

  width: auto !important;
  max-width: none !important;

  margin: 0 !important;

  font-family: var(--jc-serif) !important;
  font-size: clamp(16px, 1.45vw, 21px) !important;
  line-height: 1.18 !important;
  font-weight: 400 !important;
  letter-spacing: -0.012em !important;
}

/* Retire the previous Info composition pieces entirely. */
body.jc-info-page .jc-info-kicker,
body.jc-info-page .jc-info-note {
  display: none !important;
}

/* Keep navigation readable if the viewport is unusually short. */
@media (max-height: 720px) and (min-width: 901px) {
  body.jc-info-page .jc-info-upper {
    bottom: 34vh !important;
  }

  body.jc-info-page .jc-info-band {
    height: 34vh !important;
  }

  body.jc-info-page .jc-info-practical {
    bottom: 5vh !important;
  }

  body.jc-info-page .jc-info-bio {
    bottom: 3vh !important;
    font-size: 16px !important;
  }
}

@media (max-width: 900px) {
  body.jc-info-page {
    overflow-y: auto !important;
  }

  body.jc-info-page .jc-info-shell {
    position: relative !important;
    inset: auto !important;

    height: auto !important;
    min-height: 100svh !important;

    overflow: visible !important;
  }

  body.jc-info-page .jc-info-content {
    position: relative !important;
    inset: auto !important;

    height: auto !important;
    min-height: 100svh !important;
  }

  body.jc-info-page .jc-info-upper {
    position: relative !important;
    inset: auto !important;

    min-height: 62svh;
    padding: 120px 18px 70px !important;
  }

  body.jc-info-page .jc-info-practical {
    position: relative !important;
    inset: auto !important;

    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;

    margin: 0 !important;
  }

  body.jc-info-page .jc-info-band {
    position: relative !important;
    inset: auto !important;

    height: auto !important;
    min-height: 38svh !important;

    padding: 90px 18px 28px !important;
  }

  body.jc-info-page .jc-info-bio {
    position: relative !important;
    inset: auto !important;

    font-size: 18px !important;
    line-height: 1.22 !important;
  }
}


/* ==========================================================
   v0.11.0 — MOBILE / TABLET ART-DIRECTION PASS
   Desktop remains unchanged.
   ========================================================== */

/* ---------- SHARED TOUCH BEHAVIOUR ---------- */
@media (hover: none), (pointer: coarse) {
  .jc-gallery-cursor,
  .jc-project-cursor,
  .jc-project-browser-cursor {
    display: none !important;
  }

  .jc-zone,
  .jc-project-hit,
  .jc-project-browser-hit {
    cursor: auto !important;
  }

  /* Eliminate accidental theme tap treatments. */
  .jc-portfolio button,
  .jc-project-viewer button,
  .jc-info-shell button,
  .jc-portfolio a,
  .jc-project-viewer a,
  .jc-info-shell a {
    -webkit-tap-highlight-color: transparent !important;
  }
}

/* ==========================================================
   TABLET: 601–900px
   ========================================================== */
@media (min-width: 601px) and (max-width: 900px) {

  /* ---- Selected Works ---- */
  .jc-portfolio {
    --jc-edge-x: 22px !important;
    --jc-edge-y: 20px !important;
  }

  .jc-portfolio .jc-brand,
  .jc-portfolio .jc-nav-link,
  .jc-portfolio .jc-work-menu-link,
  .jc-portfolio .jc-index-toggle {
    font-size: 14px !important;
  }

  .jc-portfolio .jc-nav {
    gap: 28px !important;
  }

  .jc-portfolio .jc-current {
    padding:
      76px
      4.5vw
      68px !important;
  }

  .jc-portfolio .jc-current-image {
    max-width: 91vw !important;
    max-height: 78svh !important;
  }

  .jc-portfolio .jc-zone {
    top: 56px !important;
    bottom: 54px !important;
    width: 50vw !important;
  }

  /* Three columns gives tablet a more contact-sheet-like density. */
  .jc-portfolio .jc-index-grid {
    columns: 3 !important;
    column-gap: 18px !important;
    padding:
      82px
      22px
      78px !important;
  }

  .jc-portfolio .jc-grid-item {
    margin-bottom: 24px !important;
  }

  /* ---- Projects viewer ---- */
  .jc-project-viewer {
    --jc-edge-x: 22px !important;
    --jc-edge-y: 20px !important;
  }

  .jc-project-header .jc-brand,
  .jc-project-header .jc-nav-link,
  .jc-project-header .jc-work-menu-link,
  .jc-project-controls button {
    font-size: 14px !important;
  }

  .jc-project-header .jc-nav {
    gap: 28px !important;
  }

  .jc-project-image-frame {
    padding: 70px 5vw 82px !important;
  }

  .jc-project-image {
    max-width: 90vw !important;
    max-height: 76svh !important;
  }

  .jc-project-meta {
    left: 22px !important;
    bottom: 22px !important;
    top: auto !important;
    transform: none !important;

    width: 52vw !important;
    min-width: 0 !important;
  }

  .jc-project-meta-project-title {
    font-size: 18px !important;
  }

  .jc-project-controls {
    right: 22px !important;
    bottom: 22px !important;
    top: auto !important;
    transform: none !important;
  }

  .jc-project-hit {
    top: 56px !important;
    bottom: 68px !important;
    width: 50vw !important;
  }

  .jc-project-index-grid {
    left: 22px !important;
    right: 22px !important;
    height: min(72svh, 650px) !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(3, minmax(0, 1fr)) !important;

    column-gap: 16px !important;
    row-gap: 20px !important;
  }

  .jc-project-browser-cover {
    width: 82vw !important;
    height: 72svh !important;
  }

  .jc-project-browser-meta {
    left: 22px !important;
    bottom: 22px !important;
    top: auto !important;
    transform: none !important;
  }

  .jc-project-browser-title {
    font-size: 19px !important;
  }

  /* ---- Info ---- */
  body.jc-info-page .jc-info-upper {
    min-height: 58svh !important;
    padding:
      110px
      22px
      56px !important;
  }

  body.jc-info-page .jc-info-practical {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  body.jc-info-page .jc-info-band {
    min-height: 42svh !important;
    padding:
      72px
      22px
      26px !important;
  }

  body.jc-info-page .jc-info-bio {
    font-size: 19px !important;
    line-height: 1.2 !important;
  }
}

/* ==========================================================
   PHONE: <=600px
   ========================================================== */
@media (max-width: 600px) {

  /* ---------- GLOBAL MOBILE HEADER LANGUAGE ---------- */
  .jc-portfolio,
  .jc-project-viewer,
  .jc-info-shell {
    --jc-edge-x: 15px !important;
    --jc-edge-y: 16px !important;
  }

  .jc-portfolio .jc-brand,
  .jc-portfolio .jc-nav-link,
  .jc-portfolio .jc-work-menu-link,
  .jc-portfolio .jc-index-toggle,

  .jc-project-header .jc-brand,
  .jc-project-header .jc-nav-link,
  .jc-project-header .jc-work-menu-link,
  .jc-project-controls button,

  .jc-info-header .jc-brand,
  .jc-info-header .jc-nav-link,
  .jc-info-header .jc-work-menu-link {
    font-size: 13px !important;
  }

  .jc-portfolio .jc-nav,
  .jc-project-header .jc-nav,
  .jc-info-header .jc-nav {
    gap: 17px !important;
  }

  /* Do not collapse into a hamburger; preserve the desktop vocabulary. */
  .jc-brand {
    white-space: nowrap !important;
  }

  /* ---------- SELECTED WORKS ---------- */
  .jc-portfolio {
    height: 100svh !important;
    min-height: 100svh !important;
    overflow: hidden !important;
  }

  .jc-portfolio .jc-stage {
    height: 100svh !important;
    min-height: 0 !important;
  }

  .jc-portfolio .jc-current {
    padding:
      62px
      3.5vw
      58px !important;
  }

  .jc-portfolio .jc-current-image {
    max-width: 93vw !important;
    max-height: 80svh !important;
  }

  /* Whole image field stays swipe/tap navigation. */
  .jc-portfolio .jc-zone {
    top: 50px !important;
    bottom: 48px !important;
    width: 50vw !important;
  }

  .jc-portfolio .jc-footer {
    padding:
      0
      15px
      16px !important;
  }

  .jc-portfolio .jc-counter {
    font-size: 9px !important;
  }

  .jc-portfolio .jc-index-grid {
    columns: 2 !important;
    column-gap: 12px !important;

    padding:
      68px
      15px
      68px !important;
  }

  .jc-portfolio .jc-grid-item {
    margin-bottom: 16px !important;
  }

  /* ---------- PROJECT VIEWER ---------- */
  .jc-project-viewer {
    height: 100svh !important;
  }

  .jc-project-image-frame {
    padding:
      58px
      3vw
      82px !important;
  }

  .jc-project-image {
    max-width: 94vw !important;
    max-height: 75svh !important;
  }

  /* Metadata and controls form one quiet bottom information band. */
  .jc-project-meta {
    left: 15px !important;
    bottom: 17px !important;
    top: auto !important;
    transform: none !important;

    width: 55vw !important;
    min-width: 0 !important;
  }

  .jc-project-meta-title {
    gap: 8px !important;
  }

  .jc-project-meta-project-number {
    font-size: 9px !important;
  }

  .jc-project-meta-project-title {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .jc-project-meta-count {
    margin-top: 8px !important;
    font-size: 9px !important;
  }

  .jc-project-controls {
    right: 15px !important;
    bottom: 17px !important;
    top: auto !important;
    transform: none !important;

    gap: 15px !important;
  }

  .jc-project-controls button {
    font-size: 13px !important;
  }

  .jc-project-hit {
    top: 50px !important;
    bottom: 66px !important;
    width: 50vw !important;
  }

  /* Project Index: 3 × 4 fixed editorial cells. */
  .jc-project-index-grid {
    left: 15px !important;
    right: 15px !important;
    top: 50% !important;

    height: min(76svh, 650px) !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: repeat(4, minmax(0, 1fr)) !important;

    column-gap: 10px !important;
    row-gap: 14px !important;
  }

  /* Project browser is cover-first and swipe-first. */
  .jc-project-browser-cover {
    width: 91vw !important;
    height: 72svh !important;
  }

  .jc-project-browser-meta {
    left: 15px !important;
    bottom: 18px !important;
    top: auto !important;
    transform: none !important;

    gap: 8px !important;
  }

  .jc-project-browser-number {
    font-size: 9px !important;
  }

  .jc-project-browser-title {
    font-size: 17px !important;
  }

  .jc-project-browser-hit {
    top: 50px !important;
    bottom: 56px !important;
    width: 50vw !important;
  }

  /* ---------- INFO ---------- */
  body.jc-info-page {
    overflow-y: auto !important;
  }

  body.jc-info-page .jc-info-shell {
    min-height: 100svh !important;
  }

  body.jc-info-page .jc-info-upper {
    min-height: 56svh !important;

    padding:
      92px
      15px
      46px !important;
  }

  body.jc-info-page .jc-info-practical {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  body.jc-info-page .jc-info-label {
    font-size: 9px !important;
    margin-bottom: 6px !important;
  }

  body.jc-info-page .jc-info-value {
    font-size: 14px !important;
  }

  body.jc-info-page .jc-info-band {
    min-height: 44svh !important;

    padding:
      62px
      15px
      22px !important;
  }

  body.jc-info-page .jc-info-bio {
    font-size: 17px !important;
    line-height: 1.22 !important;
  }
}

/* Very narrow phones: preserve nav without wrapping. */
@media (max-width: 380px) {
  .jc-portfolio .jc-brand,
  .jc-project-header .jc-brand,
  .jc-info-header .jc-brand {
    font-size: 12px !important;
  }

  .jc-portfolio .jc-nav,
  .jc-project-header .jc-nav,
  .jc-info-header .jc-nav {
    gap: 13px !important;
  }

  .jc-portfolio .jc-nav-link,
  .jc-project-header .jc-nav-link,
  .jc-info-header .jc-nav-link {
    font-size: 12px !important;
  }

  .jc-project-meta-project-title {
    font-size: 15px !important;
  }
}


/* ==========================================================
   v0.11.1 — REMOVE TWENTY TWENTY-FIVE THEME CHROME
   ========================================================== */

/*
 * Our three custom pages provide their own complete header/footer/interface.
 * Hide every sibling of the WordPress main content inside wp-site-blocks.
 * This reliably removes the TT5 desktop/mobile site title, Contact/News nav,
 * navigation overlay button (= / hamburger), and theme footer.
 */
body.jc-portfolio-page .wp-site-blocks > *:not(main),
body.jc-project-viewer-page .wp-site-blocks > *:not(main),
body.jc-info-page .wp-site-blocks > *:not(main) {
  display: none !important;
}

/* Additional TT5 template-part variants, including nested wrapper markup. */
body.jc-portfolio-page .wp-block-template-part,
body.jc-project-viewer-page .wp-block-template-part,
body.jc-info-page .wp-block-template-part {
  display: none !important;
}

/* Remove any core navigation overlay controls that survive theme markup. */
body.jc-portfolio-page .wp-block-navigation__responsive-container-open,
body.jc-portfolio-page .wp-block-navigation__responsive-container,
body.jc-project-viewer-page .wp-block-navigation__responsive-container-open,
body.jc-project-viewer-page .wp-block-navigation__responsive-container,
body.jc-info-page .wp-block-navigation__responsive-container-open,
body.jc-info-page .wp-block-navigation__responsive-container {
  display: none !important;
}

/* Ensure WordPress's main container contributes no extra top spacing. */
body.jc-portfolio-page .wp-site-blocks > main,
body.jc-project-viewer-page .wp-site-blocks > main,
body.jc-info-page .wp-site-blocks > main {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
}

/* Hide page/site headings outside our custom interfaces. */
body.jc-portfolio-page .wp-block-post-title,
body.jc-portfolio-page .wp-block-site-title,
body.jc-project-viewer-page .wp-block-post-title,
body.jc-project-viewer-page .wp-block-site-title,
body.jc-info-page .wp-block-post-title,
body.jc-info-page .wp-block-site-title {
  display: none !important;
}


/* ==========================================================
   v0.12.1 — REAL PROJECT INDEX: AUTOMATIC FIXED ROWS
   ========================================================== */

/*
 * Real projects can contain more than the 12 staging images.
 * The contact sheet now grows by fixed rows instead of squeezing extra
 * images into a hard-coded 6 × 2 grid.
 */
.jc-project-index {
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

.jc-project-index-grid {
  position: relative !important;

  left: auto !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;

  width: 100% !important;
  height: auto !important;
  min-height: 100svh !important;

  margin: 0 !important;

  /*
   * Larger left margin deliberately clears the fixed project identity.
   * Right margin clears View / Close.
   */
  padding:
    clamp(94px, 11vh, 126px)
    8vw
    clamp(86px, 10vh, 118px)
    18vw !important;

  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: none !important;
  grid-auto-rows: clamp(130px, 20vh, 190px) !important;

  column-gap: clamp(20px, 1.55vw, 30px) !important;
  row-gap: clamp(22px, 2.1vw, 36px) !important;

  align-content: center !important;
  align-items: stretch !important;
}

.jc-project-thumb {
  width: 100% !important;
  height: 100% !important;

  min-width: 0 !important;
  min-height: 0 !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;
}

.jc-project-thumb img {
  display: block !important;

  width: 100% !important;
  height: 100% !important;

  max-width: 100% !important;
  max-height: 100% !important;

  object-fit: contain !important;
  object-position: center center !important;
}

/* Tablet: four fixed columns, automatic number of rows. */
@media (min-width: 601px) and (max-width: 900px) {
  .jc-project-index-grid {
    min-height: 100svh !important;

    padding:
      82px
      22px
      96px !important;

    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: clamp(125px, 18vh, 165px) !important;

    column-gap: 16px !important;
    row-gap: 20px !important;

    align-content: start !important;
  }
}

/* Phone: three fixed columns; larger projects simply scroll vertically. */
@media (max-width: 600px) {
  .jc-project-index-grid {
    min-height: 100svh !important;

    padding:
      68px
      15px
      92px !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    grid-template-rows: none !important;
    grid-auto-rows: clamp(112px, 17vh, 145px) !important;

    column-gap: 10px !important;
    row-gap: 14px !important;

    align-content: start !important;
  }
}


/* ==========================================================
   v0.15.0 — PROJECTS HIERARCHY + SUBTLE BROWSER MOTION
   ========================================================== */

/* Motion belongs only to the Projects browse level. */
.jc-project-browser-image,
.jc-project-browser-meta {
  will-change: transform, opacity;
}

.jc-project-browser.is-entering-forward .jc-project-browser-image {
  animation: jc-project-cover-forward 190ms cubic-bezier(.22,.61,.36,1) both;
}

.jc-project-browser.is-entering-backward .jc-project-browser-image {
  animation: jc-project-cover-backward 190ms cubic-bezier(.22,.61,.36,1) both;
}

.jc-project-browser.is-entering-forward .jc-project-browser-meta {
  animation: jc-project-meta-forward 210ms cubic-bezier(.22,.61,.36,1) both;
}

.jc-project-browser.is-entering-backward .jc-project-browser-meta {
  animation: jc-project-meta-backward 210ms cubic-bezier(.22,.61,.36,1) both;
}

@keyframes jc-project-cover-forward {
  from { opacity: .72; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes jc-project-cover-backward {
  from { opacity: .72; transform: translateX(-18px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes jc-project-meta-forward {
  from { opacity: .58; transform: translateY(-50%) translateX(10px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@keyframes jc-project-meta-backward {
  from { opacity: .58; transform: translateY(-50%) translateX(-10px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@media (max-width: 900px) {
  .jc-project-browser.is-entering-forward .jc-project-browser-meta {
    animation-name: jc-project-meta-mobile-forward;
  }

  .jc-project-browser.is-entering-backward .jc-project-browser-meta {
    animation-name: jc-project-meta-mobile-backward;
  }

  @keyframes jc-project-meta-mobile-forward {
    from { opacity: .58; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
  }

  @keyframes jc-project-meta-mobile-backward {
    from { opacity: .58; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .jc-project-browser-image,
  .jc-project-browser-meta {
    animation: none !important;
    transition: none !important;
  }
}


/* ==========================================================
   v0.16.0 — PROJECT DEPTH CUE + DELIBERATE SCROLLING
   ========================================================== */

/* ----------------------------------------------------------
   Unified left-side grammar
   Browse:
   01 / 03   Permission to Perform

   Inside:
   01 / 03   Permission to Perform
             01 / 18
   ---------------------------------------------------------- */

.jc-project-meta,
.jc-project-browser-meta {
  align-items: baseline !important;
}

.jc-project-meta-title,
.jc-project-browser-meta {
  gap: 12px !important;
}

.jc-project-meta-project-number,
.jc-project-browser-number {
  font-family: var(--jc-sans) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

.jc-project-meta-project-title,
.jc-project-browser-title {
  font-family: var(--jc-serif) !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.02 !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
}

.jc-project-meta-count {
  margin-top: 10px !important;
  padding-left: 0 !important;
  font-family: var(--jc-sans) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
}

/* ----------------------------------------------------------
   Inside-project cue: four faint crop/frame marks.
   No full border, no panel, no shadow.
   ---------------------------------------------------------- */

.jc-project-frame-marks {
  position: fixed;
  left: 17vw;
  right: 17vw;
  top: 8.5vh;
  bottom: 8.5vh;

  z-index: 18;
  pointer-events: none;

  opacity: 0.16;
}

.jc-frame-mark {
  position: absolute;
  width: 15px;
  height: 15px;
}

.jc-frame-mark::before,
.jc-frame-mark::after {
  content: "";
  position: absolute;
  background: #111;
}

.jc-frame-mark::before {
  width: 15px;
  height: 1px;
}

.jc-frame-mark::after {
  width: 1px;
  height: 15px;
}

/* top-left */
.jc-frame-mark--tl {
  left: 0;
  top: 0;
}
.jc-frame-mark--tl::before {
  left: 0;
  top: 0;
}
.jc-frame-mark--tl::after {
  left: 0;
  top: 0;
}

/* top-right */
.jc-frame-mark--tr {
  right: 0;
  top: 0;
}
.jc-frame-mark--tr::before {
  right: 0;
  top: 0;
}
.jc-frame-mark--tr::after {
  right: 0;
  top: 0;
}

/* bottom-left */
.jc-frame-mark--bl {
  left: 0;
  bottom: 0;
}
.jc-frame-mark--bl::before {
  left: 0;
  bottom: 0;
}
.jc-frame-mark--bl::after {
  left: 0;
  bottom: 0;
}

/* bottom-right */
.jc-frame-mark--br {
  right: 0;
  bottom: 0;
}
.jc-frame-mark--br::before {
  right: 0;
  bottom: 0;
}
.jc-frame-mark--br::after {
  right: 0;
  bottom: 0;
}

/* The Project Browser remains unframed. */
.jc-project-browser .jc-project-frame-marks {
  display: none !important;
}

/* Phone/tablet: smaller marks and inset so they don't compete with UI. */
@media (max-width: 900px) {
  .jc-project-meta-project-title,
  .jc-project-browser-title {
    font-size: 18px !important;
  }

  .jc-project-frame-marks {
    left: 4.5vw;
    right: 4.5vw;
    top: 72px;
    bottom: 78px;
    opacity: 0.13;
  }

  .jc-frame-mark,
  .jc-frame-mark::before {
    width: 11px;
  }

  .jc-frame-mark,
  .jc-frame-mark::after {
    height: 11px;
  }
}

@media (max-width: 600px) {
  .jc-project-meta-project-number,
  .jc-project-browser-number,
  .jc-project-meta-count {
    font-size: 9px !important;
  }

  .jc-project-meta-project-title,
  .jc-project-browser-title {
    font-size: 16px !important;
  }

  .jc-project-frame-marks {
    left: 3vw;
    right: 3vw;
    top: 60px;
    bottom: 72px;
    opacity: 0.11;
  }
}


/* ==========================================================
   v0.17.0 — PROJECT METADATA FINESSE
   ========================================================== */

/* Remove the v0.16 crop-mark experiment completely. */
.jc-project-frame-marks,
.jc-frame-mark {
  display: none !important;
}

/* ----------------------------------------------------------
   The project identity row occupies the EXACT same coordinates
   in Browser and Inside-Project states.
   ---------------------------------------------------------- */

@media (min-width: 901px) {
  .jc-project-browser-meta,
  .jc-project-meta {
    left: var(--jc-edge-x) !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;

    width: 20vw !important;
    min-width: 260px !important;

    margin: 0 !important;
  }

  /*
   * Browser is only one row, so center that row directly on 50vh.
   */
  .jc-project-browser-meta {
    transform: translateY(-50%) !important;
  }

  /*
   * Inside has a second line. Do NOT center the whole two-line block;
   * otherwise the title shifts upward. Anchor the container at 50vh and
   * center only the identity row itself.
   */
  .jc-project-meta {
    transform: none !important;
  }

  .jc-project-meta-title {
    transform: translateY(-50%) !important;
  }
}

/* Identical row typography and spacing in both levels. */
.jc-project-browser-meta,
.jc-project-meta-title {
  display: flex !important;
  align-items: baseline !important;
  gap: 12px !important;
}

.jc-project-browser-number,
.jc-project-meta-project-number {
  flex: 0 0 auto !important;

  font-family: var(--jc-sans) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;
  white-space: nowrap !important;
}

.jc-project-browser-title,
.jc-project-meta-project-title {
  font-family: var(--jc-serif) !important;
  font-size: clamp(22px, 1.8vw, 30px) !important;
  line-height: 1.02 !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
}

/* ----------------------------------------------------------
   Inside-project depth cue:
   indigo status dot + current-image count.
   This is the ONLY extra visual cue that appears after entering.
   ---------------------------------------------------------- */

.jc-project-meta-count {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;

  width: max-content !important;

  margin-top: 8px !important;
  margin-left: 0 !important;

  font-family: var(--jc-sans) !important;
  font-size: 10px !important;
  line-height: 1 !important;
  letter-spacing: 0.04em !important;

  color: #111 !important;
}

.jc-project-meta-count::before {
  content: "" !important;

  display: block !important;
  flex: 0 0 auto !important;

  width: 5px !important;
  height: 5px !important;

  border-radius: 50% !important;
  background: #312b46 !important;
}

/* ----------------------------------------------------------
   Tablet / phone:
   keep the same identity-row baseline between Browser and Inside.
   The count becomes an absolutely positioned second line so it
   does not push the title upward.
   ---------------------------------------------------------- */

@media (max-width: 900px) {
  .jc-project-browser-meta,
  .jc-project-meta {
    left: var(--jc-edge-x) !important;
    right: auto !important;
    top: auto !important;

    bottom: 34px !important;

    width: 56vw !important;
    min-width: 0 !important;

    margin: 0 !important;
    transform: none !important;
  }

  .jc-project-meta-title {
    transform: none !important;
  }

  .jc-project-meta {
    overflow: visible !important;
  }

  .jc-project-meta-count {
    position: absolute !important;
    left: 0 !important;
    top: calc(100% + 7px) !important;

    margin: 0 !important;
  }

  .jc-project-browser-title,
  .jc-project-meta-project-title {
    font-size: 18px !important;
  }
}

@media (max-width: 600px) {
  .jc-project-browser-meta,
  .jc-project-meta {
    bottom: 31px !important;
    width: 58vw !important;
  }

  .jc-project-browser-number,
  .jc-project-meta-project-number,
  .jc-project-meta-count {
    font-size: 9px !important;
  }

  .jc-project-browser-title,
  .jc-project-meta-project-title {
    font-size: 16px !important;
  }

  .jc-project-meta-count::before {
    width: 4px !important;
    height: 4px !important;
  }
}


/* ==========================================================
   v0.18.1 — HORIZONTAL DOCUMENT OVERFLOW HOTFIX
   ========================================================== */

/*
 * Full-viewport shells use 100vw. On desktop browsers with a vertical
 * scrollbar, 100vw can be a few pixels wider than the visible layout
 * viewport, creating an unwanted horizontal scrollbar.
 *
 * Portfolio navigation is JS-driven, so document-level horizontal scrolling
 * is never required.
 */
body.jc-portfolio-page,
body.jc-project-viewer-page,
body.jc-info-page {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

body.jc-portfolio-page .wp-site-blocks,
body.jc-project-viewer-page .wp-site-blocks,
body.jc-info-page .wp-site-blocks,
body.jc-portfolio-page main,
body.jc-project-viewer-page main,
body.jc-info-page main,
body.jc-portfolio-page .wp-block-post-content,
body.jc-project-viewer-page .wp-block-post-content,
body.jc-info-page .wp-block-post-content {
  overflow-x: hidden !important;
  max-width: 100% !important;
}

/* Prevent full-viewport shells from producing fractional-pixel spill. */
.jc-portfolio,
.jc-project-viewer,
.jc-info-shell {
  max-width: 100vw !important;
}