/* Loaded on V1/V2 homepages only. Shared metadata styles remain unmodified. */
.jf-project-viewer {
  --pv-ink: var(--cream, var(--bone, #f1eee8));
  --pv-accent: var(--accent, var(--volt, #ccc5b9));
  --pv-body: var(--body, var(--sans, system-ui, sans-serif));
  position: fixed; inset: 0; z-index: 2147483000;
  margin: 0; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  width: 100%; max-width: none; height: 100%; max-height: none;
  height: 100dvh; border: 0; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(6, 6, 8, .94); color: var(--pv-ink);
  font: 400 15px/1.5 var(--pv-body); text-align: left;
}
.jf-project-viewer:not([open]) { display: none; }
.jf-project-viewer[open] { display: flex; align-items: safe center; justify-content: center; }
.jf-project-viewer::backdrop { background: rgba(0, 0, 0, .75); }
.jf-project-viewer * { box-sizing: border-box; }
.jf-project-viewer [hidden] { display: none !important; }
.jf-project-viewer .jf-pv-panel { width: 100%; max-width: 1180px; margin: auto; background: #111114; border: 1px solid #353539; border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.jf-project-viewer .jf-pv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #353539; }
.jf-project-viewer .jf-pv-counter { margin: 0; font-size: 12px; overflow-wrap: anywhere; }
.jf-project-viewer .jf-pv-content { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, 1fr); }
.jf-project-viewer .jf-pv-media { min-width: 0; min-height: 180px; padding: 12px; display: flex; align-items: center; justify-content: center; background: #080809; touch-action: pan-y pinch-zoom; }
/* Native image ratio: no fixed aspect, cover crop, stretching or transform. */
.jf-project-viewer .jf-pv-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 72vh; max-height: 72dvh; object-fit: contain; }
.jf-project-viewer .jf-pv-media-message { margin: 0; padding: 24px 12px; text-align: center; max-width: 36ch; color: #cbc7c0; }
.jf-project-viewer .jf-pv-info { min-width: 0; padding: clamp(16px, 3vw, 28px); }
.jf-project-viewer h2 { color: var(--pv-ink); font: 400 clamp(22px, 3vw, 34px)/1.15 var(--serif, Georgia, serif); margin: 0 0 24px; overflow-wrap: anywhere; }
.jf-project-viewer .jf-project-details { --jf-detail-ink: var(--pv-ink); font-family: var(--pv-body); }
.jf-project-viewer .jf-project-details .jf-detail-note { font-family: var(--pv-body); }
.jf-project-viewer .jf-project-details a { color: var(--pv-accent); }
.jf-project-viewer .jf-pv-navigation { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.jf-project-viewer .jf-pv-button { appearance: none; flex-shrink: 0; min-height: 44px; padding: 8px 12px; border: 1px solid #59585e; border-radius: 4px; background: transparent; color: var(--pv-ink); font: inherit; cursor: pointer; text-transform: none; letter-spacing: normal; }
.jf-project-viewer .jf-pv-button:hover { border-color: var(--pv-accent); }
.jf-project-viewer .jf-pv-button:disabled { opacity: .4; cursor: default; }
.jf-project-viewer :focus-visible { outline: 2px solid var(--pv-accent); outline-offset: 3px; }
@media (max-width: 700px) {
  .jf-project-viewer .jf-pv-content { grid-template-columns: minmax(0, 1fr); }
  .jf-project-viewer .jf-pv-image { max-height: 52vh; max-height: 52dvh; }
  .jf-project-viewer .jf-project-details dl { grid-template-columns: minmax(0, 1fr); }
}

/* Buttons retain each skin's existing tile/grid geometry. No global reset. */
.jf-home-projects button.jf-project-trigger { appearance: none; display: block; width: 100%; min-width: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.jf-home-projects button.jf-project-trigger:not(.v2-motion-card):not(.v2-stills-card) { border: 0; }
.jf-home-projects .jf-project-trigger:focus-visible { outline: 3px solid var(--accent, var(--volt, #eee)); outline-offset: -4px; }
.jf-home-projects .jf-hero-wall,
.jf-home-projects .v2-hero-wall { pointer-events: auto; }
.jf-home-projects .jf-hero-vignette,
.jf-home-projects .jf-hero-bottom-fade,
.jf-home-projects .v2-hero-scrim,
.jf-home-projects .v2-hero-decal,
.jf-home-projects .jf-hero-content,
.jf-home-projects .v2-hero-head,
.jf-home-projects .v2-hero-farm { pointer-events: none; }
/* Foreground links stay above, and take precedence over, the wall buttons. */
.jf-home-projects .jf-hero-content a,
.jf-home-projects .jf-hero-content button,
.jf-home-projects .v2-hero-head a,
.jf-home-projects .v2-hero-head button,
.jf-home-projects .v2-hero-farm a,
.jf-home-projects .v2-hero-farm button { pointer-events: auto; }
.jf-home-projects .jf-hero-col:focus-within,
.jf-home-projects .v2-hero-col:focus-within,
.jf-home-projects.jf-project-viewer-open .jf-hero-col,
.jf-home-projects.jf-project-viewer-open .v2-hero-col { animation-play-state: paused; }