/* style-v01.css
   Jed Ochmanek Studio
   Full replacement CSS
*/
:root {
  --menu-size: 21px;
  --body-size: 14px;
  --caption-size: 12px;
  --gutter: 54px;
  --menu-width: 260px;
  --content-left: 360px;
  --transition: .12s;
  --snap-speed: .62s;
  --black: rgba(0,0,0,1);
  --black-hover: rgba(0,0,0,.45);
  --white: rgba(255,255,255,1);
  --white-hover: rgba(255,255,255,.55);
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  color: var(--black);
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-weight: 200;
}
/* =========================================================
   GLOBAL MENU
========================================================= */
.jo-nav {
  position: fixed;
  top: 42px;
  left: var(--gutter);
  z-index: 1000;
  width: var(--menu-width);
  color: var(--black);
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
}
.jo-title,
.jo-nav a {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-decoration: none;
  font-family: inherit;
  font-size: var(--menu-size);
  line-height: normal;
  letter-spacing: normal;
  transition: color var(--transition) ease;
}
.jo-title {
  font-family: aktiv-grotesk, "Aktiv Grotesk", aktiv-grotesk-thin, "Aktiv Grotesk Thin", Arial, sans-serif;
  font-weight: 300;
}
.jo-nav a {
  font-weight: 200;
}
.jo-title:hover,
.jo-nav a:hover {
  color: var(--black-hover);
}
.jo-spacer {
  height: 1em;
}
.jo-search-row {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
}
.jo-search-row > a[data-search-open] {
  display: block;
  visibility: visible;
  opacity: 1;
  margin: 0;
  padding: 0;
}
body.is-search-open .jo-search-row > a[data-search-open] {
  display: block;
  visibility: hidden;
  opacity: 0;
}
.jo-search-form {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: auto;
  display: none;
  width: 100%;
  height: 1em;
  margin: 0;
  padding: 0;
  line-height: inherit;
}
body.is-search-open .jo-search-form {
  display: block;
}
.jo-search-input {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 1em;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--menu-size);
  font-weight: 200;
  line-height: 1;
  letter-spacing: normal;
  appearance: none;
  -webkit-appearance: none;
}
.jo-search-input::-webkit-search-decoration,
.jo-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.jo-search-input::placeholder {
  color: transparent;
  opacity: 0;
}
body.is-dark .jo-nav,
body.is-pr-dark .jo-nav {
  color: var(--white);
}
body.is-dark .jo-title:hover,
body.is-dark .jo-nav a:hover,
body.is-pr-dark .jo-title:hover,
body.is-pr-dark .jo-nav a:hover {
  color: var(--white-hover);
}
body.is-news-open .jo-nav,
body.is-cv-open .jo-nav {
  color: var(--black);
}
body.is-news-open .jo-title:hover,
body.is-news-open .jo-nav a:hover,
body.is-cv-open .jo-title:hover,
body.is-cv-open .jo-nav a:hover {
  color: var(--black-hover);
}
/* =========================================================
   MAIN WORK SNAP STAGE
========================================================= */
.jo-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  transform: translate3d(0, 0, 0);
  transition: transform var(--snap-speed) cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.jo-section {
  position: relative;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  background: #fff;
  color: var(--black);
}
.jo-section.jo-dark {
  background: #000;
  color: var(--white);
}
.jo-gallery {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.jo-slide {
  position: absolute;
  inset: 0;
  display: none;
}
.jo-slide.active {
  display: block;
}
.jo-slide img,
.jo-slide iframe {
  position: absolute;
  display: block;
  border: 0;
  pointer-events: none;
}
.jo-mode-full .jo-slide img,
.jo-mode-full .jo-slide iframe {
  top: 0;
  left: 0;
  width: 100vw;
  height: 100svh;
  object-fit: cover;
  object-position: center center;
}
.jo-mode-right .jo-slide img,
.jo-mode-right .jo-slide iframe,
.jo-slide.jo-fit-right img,
.jo-slide.jo-fit-right iframe,
.jo-mode-full .jo-slide.jo-fit-right img,
.jo-mode-full .jo-slide.jo-fit-right iframe,
.jo-mode-protected .jo-slide.jo-fit-right img,
.jo-mode-protected .jo-slide.jo-fit-right iframe {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: auto !important;
  height: 100svh !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: right top !important;
}
.jo-mode-protected .jo-slide img,
.jo-mode-protected .jo-slide iframe,
.jo-slide.jo-protect-left img,
.jo-slide.jo-protect-left iframe,
.jo-mode-full .jo-slide.jo-protect-left img,
.jo-mode-full .jo-slide.jo-protect-left iframe {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  width: calc(100vw - 320px) !important;
  height: 100svh !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center center !important;
}
.jo-slide.jo-fit-left img,
.jo-slide.jo-fit-left iframe,
.jo-mode-full .jo-slide.jo-fit-left img,
.jo-mode-full .jo-slide.jo-fit-left iframe,
.jo-mode-protected .jo-slide.jo-fit-left img,
.jo-mode-protected .jo-slide.jo-fit-left iframe {
  object-position: left center !important;
}
.jo-slide.jo-fit-top img,
.jo-slide.jo-fit-top iframe,
.jo-mode-full .jo-slide.jo-fit-top img,
.jo-mode-full .jo-slide.jo-fit-top iframe,
.jo-mode-protected .jo-slide.jo-fit-top img,
.jo-mode-protected .jo-slide.jo-fit-top iframe {
  object-position: center top !important;
}
/* =========================================================
   WORK TEXT
========================================================= */
.jo-meta {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: var(--menu-width);
  color: inherit;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
}
.jo-section-title {
  margin: 0;
  padding: 0;
  font-family: aktiv-grotesk, "Aktiv Grotesk", aktiv-grotesk-thin, "Aktiv Grotesk Thin", Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 300;
  font-style: normal;
}
.jo-meta-line,
.jo-document-link,
.jo-caption {
  margin: 0;
  padding: 0;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
}
.jo-document-links {
  margin-top: 1em;
}
.jo-document-link {
  display: block;
  color: var(--black-hover);          /* link: grey at rest */
  text-decoration: none;
  transition: color var(--transition) ease;
}
.jo-document-link:hover {
  color: var(--black);                /* link: black on hover */
}
.jo-dark .jo-document-link {
  color: var(--white-hover);
}
.jo-dark .jo-document-link:hover {
  color: var(--white);
}
.jo-caption {
  position: absolute;
  left: var(--gutter);
  bottom: 42px;
  z-index: 20;
  width: var(--menu-width);   /* stays inside the protected left zone */
  color: inherit;
}
.jo-caption em {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-style: italic;
  letter-spacing: normal;
}
@media (min-width: 901px) {
  body.is-slide-meta-white .jo-meta,
  body.is-slide-meta-white .jo-meta *,
  body.is-slide-meta-white .jo-caption,
  body.is-slide-meta-white .jo-caption *,
  body.is-slide-meta-white .jo-document-link {
    color: var(--white) !important;
  }
  body.is-slide-meta-white .jo-document-link:hover {
    color: var(--white-hover) !important;
  }
  body.is-slide-all-white .jo-nav,
  body.is-slide-all-white .jo-nav *,
  body.is-slide-all-white .jo-meta,
  body.is-slide-all-white .jo-meta *,
  body.is-slide-all-white .jo-caption,
  body.is-slide-all-white .jo-caption *,
  body.is-slide-all-white .jo-document-link {
    color: var(--white) !important;
  }
  body.is-slide-all-white .jo-title:hover,
  body.is-slide-all-white .jo-nav a:hover,
  body.is-slide-all-white .jo-document-link:hover {
    color: var(--white-hover) !important;
  }
}
/* =========================================================
   CURSOR ARROWS
========================================================= */
.jo-gallery.cursor-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M30 10 L16 24 L30 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 16 24, w-resize;
}
.jo-gallery.cursor-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 10 L32 24 L18 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 32 24, e-resize;
}
.jo-dark .jo-gallery.cursor-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M30 10 L16 24 L30 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 16 24, w-resize;
}
.jo-dark .jo-gallery.cursor-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 10 L32 24 L18 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 32 24, e-resize;
}
/* =========================================================
   NEWS PAGE
========================================================= */
.jo-news-page {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  overflow-y: auto;
  background: #fff;
  color: var(--black);
}
body.is-news-open .jo-news-page {
  display: block;
}
.jo-news-wrap {
  width: calc(100vw - var(--content-left) - var(--gutter));
  min-width: 0;
  max-width: none;
  margin-left: var(--content-left);
  margin-right: var(--gutter);
  padding-top: 42px;
  padding-bottom: 180px;
}
.jo-news-entry,
.jo-news-minor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  grid-template-areas: "text image";
  column-gap: var(--gutter);
  row-gap: 0;
  align-items: start;
  margin: 0 0 120px 0;
  padding: 0;
}
.jo-news-info {
  grid-area: text;
  align-self: start;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--black);
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
}
.jo-news-date {
  display: block;
  width: auto;
  margin: 0 0 1em 0;
  padding: 0;
  color: rgba(0,0,0,.45);
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
}
.jo-news-image-wrap,
.jo-news-slideshow {
  grid-area: image;
  align-self: start;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
}
.jo-news-image-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.jo-news-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - 84px);
  object-fit: contain;
  object-position: left top;
}
.jo-news-title,
.jo-news-meta,
.jo-news-body {
  margin: 0 0 1em 0;
  padding: 0;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
}
.jo-news-title {
  font-family: aktiv-grotesk, "Aktiv Grotesk", aktiv-grotesk-thin, "Aktiv Grotesk Thin", Arial, sans-serif;
  font-weight: 300;
}
.jo-news-info p:last-child,
.jo-news-body:last-child {
  margin-bottom: 0;
}
.jo-news-page a,
.jo-news-page a:link,
.jo-news-page a:visited {
  color: rgba(0,0,0,.45);
  text-decoration: none;
  border-bottom: 0;
  box-shadow: none;
  transition: color var(--transition) ease;
}
.jo-news-page a:hover {
  color: var(--black);
  text-decoration: none;
}
.jo-news-link {
  display: inline-block;
  margin-top: 1em;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(0,0,0,.45);
  text-decoration: none;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
  cursor: pointer;
  transition: color var(--transition) ease;
}
.jo-news-link:hover {
  color: var(--black);
}
.jo-news-separator {
  display: none;
  visibility: hidden;
  height: 0;
  margin: 0;
  padding: 0;
}
.jo-news-minor,
.jo-news-entry.no-image {
  grid-template-areas: "text .";
}
.jo-news-minor .jo-news-image-wrap,
.jo-news-entry.no-image .jo-news-image-wrap {
  display: none;
}
/* =========================================================
   PR VIEW
========================================================= */
body.is-pr-open .jo-stage {
  pointer-events: none;
}
.jo-pr {
  position: fixed;
  inset: 0;
  z-index: 700;
  display: none;
  overflow-y: auto;
  background: #fff;
  color: var(--black);
}
.jo-pr.open {
  display: block;
}
.jo-pr.jo-dark {
  background: #000;
  color: var(--white);
}
.jo-pr-back-zone {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  width: 320px;
  z-index: 750;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M30 10 L16 24 L30 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 16 24, w-resize;
}
.jo-pr.jo-dark .jo-pr-back-zone {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M30 10 L16 24 L30 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 16 24, w-resize;
}
body.is-pr-open .jo-nav {
  z-index: 1000;
}
body.is-pr-dark .jo-nav,
body.is-pr-dark .jo-pr.open,
body.is-pr-dark .jo-pr.open .jo-pr-text,
body.is-pr-dark .jo-pr.open .jo-pr-title,
body.is-pr-dark .jo-pr.open .jo-pr-text p {
  color: var(--white) !important;
}
/* =========================================================
   PR DOCUMENT LAYOUT
========================================================= */
.jo-pr-document {
  background: #fff;
  color: var(--black);
}
.jo-pr-document .jo-pr-document-wrap {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--gutter);
  align-items: start;
  width: calc(100vw - var(--content-left) - var(--gutter));
  min-width: 0;
  margin-left: var(--content-left);
  padding-top: 42px;
  padding-bottom: 180px;
}
.jo-pr-document .jo-pr-meta {
  position: fixed;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 760;
  width: var(--menu-width);
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
}
.jo-pr-document .jo-pr-meta p {
  margin: 0;
  padding: 0;
}
.jo-pr-document .jo-pr-meta .jo-section-title {
  margin: 0;
  padding: 0;
  font-family: aktiv-grotesk, "Aktiv Grotesk", aktiv-grotesk-thin, "Aktiv Grotesk Thin", Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 300;
}
.jo-pr-document .jo-pr-meta .jo-meta-line {
  margin: 0;
  padding: 0;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
}
.jo-pr-document .jo-pr-meta-spacer {
  height: 1em;
}
.jo-pr-document .jo-pr-meta .jo-pr-meta-reserve {
  visibility: hidden;
  pointer-events: none;
}
.jo-pr-document .jo-pr-text,
.jo-pr-document .jo-pr-text.jo-pr-wide {
  position: relative;
  z-index: 20;
  grid-column: 1;
  width: auto;
  max-width: none;
  margin-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  color: inherit;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
}
.jo-pr-document .jo-pr-text p {
  margin: 0 0 1em 0;
  padding: 0;
}
.jo-pr-document .jo-pr-text a {
  color: var(--black-hover);          /* link: grey at rest */
  text-decoration: none;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
  transition: color var(--transition) ease;
}
.jo-pr-document .jo-pr-text a:hover {
  color: var(--black);                /* link: black on hover */
}
.jo-pr-document.jo-dark .jo-pr-text a,
body.is-pr-dark .jo-pr-document .jo-pr-text a {
  color: var(--white-hover);
}
.jo-pr-document.jo-dark .jo-pr-text a:hover,
body.is-pr-dark .jo-pr-document .jo-pr-text a:hover {
  color: var(--white);
}
.jo-pr-document .jo-pr-image {
  position: relative;
  inset: auto;
  z-index: 20;
  grid-column: 2;
  width: 100%;
  margin: 0;
  pointer-events: none;
}
.jo-pr-document .jo-pr-image img,
.jo-pr-document .jo-pr-image iframe {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  max-height: calc(100svh - 84px);
  object-fit: contain;
  object-position: left top;
}
.jo-pr-document .jo-pr-image img + img {
  margin-top: var(--gutter);
}
.jo-pr-document .jo-pr-image figure {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.jo-pr-document .jo-pr-image figure + figure {
  margin-top: var(--gutter);
}
.jo-pr-document .jo-pr-image figure img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - 84px);
  object-fit: contain;
  object-position: left top;
}
.jo-pr-document .jo-pr-image figcaption {
  display: block;
  margin: 1em 0 0 0;
  padding: 0;
  color: rgba(0,0,0,.45);
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
  line-height: normal;
}
.jo-pr-document.jo-dark .jo-pr-image figcaption {
  color: rgba(255,255,255,.55);
}
.jo-pr-document.jo-pr-no-image .jo-pr-text,
.jo-pr-document.jo-pr-no-image .jo-pr-text.jo-pr-wide {
  grid-column: 1 / -1;
  max-width: 760px;
}
/* =========================================================
   INTERVIEW TEXT
========================================================= */
.jo-interview-title,
.jo-interview-question {
  margin: 0 0 1em 0;
  padding: 0;
  font-family: aktiv-grotesk, "Aktiv Grotesk", aktiv-grotesk-thin, "Aktiv Grotesk Thin", Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 300;
}
.jo-interview-intro {
  font-style: italic;
}
.jo-pr-mobile-back {
  display: none;
}
/* =========================================================
   CV PAGE
========================================================= */
.jo-cv-page {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  overflow-y: auto;
  background: #fff;
  color: var(--black);
}
body.is-cv-open .jo-cv-page {
  display: block;
}
.jo-cv-content {
  position: relative;
  z-index: 20;
  width: min(760px, calc(100vw - 420px));
  margin-left: var(--content-left);
  padding-top: 42px;
  padding-bottom: 180px;
  font-size: var(--body-size);
  font-weight: 200;
}
.jo-cv-block {
  margin-bottom: 1em;
}
.jo-cv-section {
  margin: 0 0 1em 0;
  font-family: aktiv-grotesk, "Aktiv Grotesk", aktiv-grotesk-thin, "Aktiv Grotesk Thin", Arial, sans-serif;
  font-weight: 300;
}
.jo-cv-row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  margin: 0;
}
.jo-cv-full {
  grid-column: 1 / -1;
}
.jo-cv em {
  font-style: italic;
}
/* =========================================================
   UTILITY SOCIAL
========================================================= */
.jo-utility-social {
  position: fixed;
  left: var(--gutter);
  bottom: 42px;
  z-index: 900;
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgba(0,0,0,.58);
}
.jo-utility-social a {
  display: block;
  width: 18px;
  height: 18px;
  color: inherit;
  text-decoration: none;
  transition: color var(--transition) ease;
}
.jo-utility-social a:hover {
  color: var(--black);
}
.jo-utility-social svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
/* =========================================================
   FONT LOCK
========================================================= */
.jo-nav,
.jo-nav *,
.jo-stage,
.jo-stage *,
.jo-news-page,
.jo-news-page *,
.jo-cv-page,
.jo-cv-page *,
.jo-pr,
.jo-pr * {
  letter-spacing: normal !important;
  word-spacing: normal !important;
  font-kerning: normal !important;
  font-synthesis: none !important;
}
/* =========================================================
   MOBILE / TABLET
========================================================= */
@media (max-width: 900px) {
  :root {
    --menu-size: 18px;
    --body-size: 14px;
    --gutter: 28px;
    --menu-width: calc(100vw - 56px);
    --content-left: 28px;
  }
  html,
  body {
    height: 100%;
    overflow: hidden;
    background: #fff;
    color: #000;
  }
  .jo-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 176px;
    padding: 30px var(--gutter) 0 var(--gutter);
    background: #fff;
    color: #000 !important;
    z-index: 1000;
  }
  .jo-title {
    font-size: var(--menu-size);
    color: #000 !important;            /* title is the black exception */
  }
  .jo-nav a {
    font-size: var(--menu-size);
    color: var(--black-hover) !important;   /* menu links grey, like desktop */
  }
  .jo-spacer {
    height: 1.2em;
  }
  .jo-stage {
    position: fixed;
    inset: 0;
    transition: transform .58s cubic-bezier(.22, .61, .36, 1);
  }
  .jo-section {
    width: 100vw;
    height: 100svh;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    background: #fff !important;
    color: #000 !important;
  }
  .jo-gallery {
    position: relative;
    order: 1;
    left: auto;
    right: auto;
    top: auto;
    width: 100vw;
    height: 47svh;
    margin-top: 176px;
    flex: 0 0 100%;
    background: #fff;
    overflow: hidden;
  }
  .jo-mode-right .jo-gallery,
  .jo-section.has-vertical-mobile .jo-gallery {
    height: 47svh;
  }
  .jo-slide,
  .jo-slide.active {
    position: absolute;
    inset: 0;
    display: block;
  }
  .jo-slide:not(.active) {
    display: none;
  }
  .jo-section .jo-slide img,
  .jo-section .jo-slide.jo-protect-left img,
  .jo-section .jo-slide.jo-fit-right img,
  .jo-section .jo-slide.jo-fit-left img,
  .jo-section .jo-slide.jo-fit-top img,
  .jo-section .jo-slide.jo-full-top img,
  .jo-section .jo-slide.jo-cover-bottom img {
    position: absolute !important;
    top: 0 !important;
    right: auto !important;
    bottom: auto !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }
  /* video fills the gallery box on mobile (cover, no letterbox) */
  .jo-mode-full .jo-slide iframe,
  .jo-mode-right .jo-slide iframe,
  .jo-mode-protected .jo-slide iframe {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 56.25vw !important;
    min-width: calc(47svh * 1.7778) !important;
    min-height: 47svh !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
  }
  .jo-mode-full .jo-slide.jo-video-yt iframe,
  .jo-mode-right .jo-slide.jo-video-yt iframe,
  .jo-mode-protected .jo-slide.jo-video-yt iframe {
    width: calc(100vw * 1.4) !important;
    height: calc(56.25vw * 1.4) !important;
    min-width: calc(47svh * 1.7778 * 1.4) !important;
    min-height: calc(47svh * 1.4) !important;
  }
  .jo-mode-full .jo-slide.jo-video-bl iframe,
  .jo-mode-right .jo-slide.jo-video-bl iframe,
  .jo-mode-protected .jo-slide.jo-video-bl iframe {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
  .jo-meta {
    position: relative;
    order: 2;
    flex: 1.4 1 0;
    min-width: 0;
    left: auto;
    top: auto;
    transform: none;
    width: auto;
    margin: 18px 10px 24px var(--gutter);
    color: #000 !important;
    font-size: var(--body-size);
  }
  .jo-mode-right .jo-meta,
  .jo-section.has-vertical-mobile .jo-meta {
    top: auto;
  }
  .jo-section-title,
  .jo-meta-line,
  .jo-document-link {
    font-size: var(--body-size);
    color: #000 !important;
  }
  .jo-caption {
    display: block;
    position: relative;
    order: 3;
    flex: 1 1 0;
    min-width: 0;
    left: auto;
    bottom: auto;
    width: auto;
    /* drop one line so the artwork caption begins beside the SECOND meta
       line (the exhibition title stands alone on the top line) */
    margin: calc(18px + 1.35em) var(--gutter) 24px 10px;
    color: #000;
    font-size: var(--caption-size);
  }
  /* captionless slides (e.g. Double LP, installation views): meta spans
     full width as a single column so long titles don't break mid-phrase */
  .jo-section.jo-no-cap .jo-meta {
    flex: 1 1 100%;
    margin: 18px var(--gutter) 24px var(--gutter);
  }
  .jo-section.jo-no-cap .jo-caption {
    display: none;
  }
  .jo-gallery.cursor-prev,
  .jo-gallery.cursor-next,
  .jo-dark .jo-gallery.cursor-prev,
  .jo-dark .jo-gallery.cursor-next {
    cursor: default;
  }
  .jo-news-page,
  .jo-cv-page {
    background: #fff !important;
    color: #000 !important;
  }
  .jo-news-wrap {
    width: calc(100vw - 56px);
    min-width: 0;
    margin-left: var(--gutter);
    margin-right: var(--gutter);
    padding-top: 200px;
    padding-bottom: 120px;
  }
  .jo-news-entry,
  .jo-news-minor,
  .jo-news-entry.no-image {
    display: block;
    margin: 0 0 72px 0;
    padding: 0;
  }
  .jo-news-date {
    margin: 0 0 1em 0;
  }
  .jo-news-title,
  .jo-news-meta,
  .jo-news-body {
    margin: 0 0 1em 0;
  }
  .jo-news-image-wrap,
  .jo-news-slideshow {
    width: 100%;
    margin: 2em 0 0 0;
    display: block;
  }
  .jo-news-image {
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
    object-position: center top;
  }
  .jo-pr {
    background: #fff !important;
    color: #000 !important;
  }
  .jo-pr-image {
    display: none;
  }
  .jo-pr-text,
  .jo-pr-text.jo-pr-wide {
    width: calc(100vw - 56px);
    margin-left: var(--gutter);
    padding-top: 200px;
    padding-bottom: 120px;
    color: #000 !important;
    font-size: var(--body-size);
  }
  .jo-pr-title {
    font-size: var(--body-size);
    color: #000 !important;
  }
  .jo-pr-document .jo-pr-document-wrap {
    display: flex;
    flex-direction: column;
    width: calc(100vw - 56px);
    min-width: 0;
    margin-left: var(--gutter);
    padding-top: 200px;
    padding-bottom: 120px;
  }
  .jo-pr-document .jo-pr-meta {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    order: 1;
    width: 100%;
    margin-bottom: 1em;        /* one empty paragraph before the first image */
  }
  .jo-pr-document .jo-pr-image {
    order: 2;
    display: block;
    width: 100%;
    margin-bottom: 1em;        /* uniform one-paragraph gap between images */
  }
  .jo-pr-document .jo-pr-text,
  .jo-pr-document .jo-pr-text.jo-pr-wide {
    order: 3;
    width: 100%;
    margin-left: 0;
    padding-top: 0;
  }
  .jo-pr-document .jo-pr-image img,
  .jo-pr-document .jo-pr-image iframe,
  .jo-pr-document .jo-pr-image figure img {
    width: 100%;
    height: auto;
    max-height: none;
  }
  .jo-pr-document .jo-pr-image figure + figure {
    margin-top: var(--gutter);
  }
  /* the desktop "reserve" (an invisible Press Release link that holds
     layout space) is dead weight on mobile — drop it so the gap under the
     back arrow stays one uniform paragraph. `body` prefix outranks the
     unscoped PR-META-HEIGHT-LOCK rule that forces it to display. */
  body .jo-pr-document .jo-pr-meta .jo-pr-meta-reserve {
    display: none !important;
  }
  /* interleaved figures inside the text on mobile */
  .jo-pr-document .jo-pr-text figure {
    display: block;
    width: 100%;
    margin: 1em 0;             /* uniform one-paragraph gap */
    padding: 0;
  }
  /* the first image sits right under the meta block, which already supplies
     its own one-paragraph margin-bottom — so don't double the gap */
  .jo-pr-document .jo-pr-text figure:first-child {
    margin-top: 0;
  }
  .jo-pr-document .jo-pr-text figure img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
  }
  .jo-pr-document .jo-pr-text figcaption {
    display: block;
    margin: 1em 0 0 0;
    padding: 0;
    text-align: left;
    color: var(--black);
    font-size: var(--caption-size);
    font-weight: 200;
    line-height: normal;
  }
  /* On mobile every PR sits on a white page, so dark shows must render
     their text/meta/back-arrow in BLACK — otherwise it's white-on-white
     and the press release (and its back arrow) vanish, e.g. Blindspot.
     These selectors outrank the desktop is-pr-dark white rules. */
  body.is-pr-dark .jo-nav,
  body.is-pr-dark .jo-pr.open,
  body.is-pr-dark .jo-pr.open .jo-pr-text,
  body.is-pr-dark .jo-pr.open .jo-pr-text p,
  body.is-pr-dark .jo-pr.open .jo-pr-title,
  body.is-pr-dark .jo-pr.open .jo-pr-meta,
  body.is-pr-dark .jo-pr.open .jo-pr-meta p,
  .jo-pr-document.jo-dark .jo-pr-text,
  .jo-pr-document.jo-dark .jo-pr-text p,
  .jo-pr-document.jo-dark .jo-pr-title,
  .jo-pr-document.jo-dark .jo-pr-meta,
  .jo-pr-document.jo-dark .jo-pr-meta p,
  .jo-pr-document.jo-dark .jo-pr-text figcaption {
    color: #000 !important;
  }
  .jo-pr-back-zone {
    display: none;
  }
  /* mobile back chevron after the date */
  .jo-pr-mobile-back {
    display: inline-block;
    margin-top: 1em;
    color: var(--black);
    text-decoration: none;
    font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
    font-size: 24px;
    line-height: 1;
  }
  .jo-pr-mobile-back:active {
    color: var(--black-hover);
  }
  .jo-pr-document.jo-dark .jo-pr-mobile-back,
  body.is-pr-dark .jo-pr.open .jo-pr-mobile-back {
    color: #000 !important;
  }
  /* news: image first, then text, with a slash between items */
  .jo-news-entry,
  .jo-news-minor,
  .jo-news-entry.no-image {
    display: flex;
    flex-direction: column;
    margin: 0 0 36px 0;
  }
  .jo-news-image-wrap,
  .jo-news-slideshow {
    order: 1;
    margin: 0 0 1.5em 0;
  }
  .jo-news-info {
    order: 2;
  }
  .jo-news-separator {
    display: block;
    visibility: visible;
    height: auto;
    margin: 0 0 36px 0;
    color: var(--black);
    font-size: 0;
    line-height: normal;
  }
  .jo-news-separator::after {
    content: "/";
    font-size: var(--body-size);
  }
  .jo-news-separator:last-child {
    display: none;
  }
  /* mobile uses swipe between shows, not tap zones */
  .jo-nav-vert {
    display: none !important;
  }
  /* the left back-zone was covering the page and blocking touch-scroll */
  .jo-utility-back {
    display: none !important;
  }
  /* contact icons flow at the end of News / CV, never overlap text.
     Only switch to flex when the page is actually open so the
     display:none default is preserved. */
  body.is-news-open .jo-news-page,
  body.is-cv-open .jo-cv-page {
    display: flex;
    flex-direction: column;
  }
  .jo-cv-content {
    width: calc(100vw - 56px);
    margin-left: var(--gutter);
    padding-top: 200px;
    padding-bottom: 120px;
    font-size: var(--body-size);
  }
  .jo-cv-row {
    grid-template-columns: 58px minmax(0, 1fr);
  }
}
/* =========================================================
   FINAL LOCKS
   Do not remove.
   Keeps title weight and document captions correct.
========================================================= */
.jo-title,
.jo-nav .jo-title,
body .jo-nav .jo-title {
  font-family: aktiv-grotesk, "Aktiv Grotesk", aktiv-grotesk-thin, "Aktiv Grotesk Thin", Arial, sans-serif !important;
  font-weight: 300 !important;
}
.jo-pr-document .jo-pr-image,
.jo-pr-document .jo-pr-image figure,
.jo-pr-document .jo-pr-image figcaption,
body .jo-pr-document .jo-pr-image figcaption {
  text-align: left !important;
}
.jo-pr-document .jo-pr-image figcaption,
body .jo-pr-document .jo-pr-image figcaption {
  display: block !important;
  width: 100% !important;
  margin: 1em 0 0 0 !important;
  padding: 0 !important;
  color: rgba(0,0,0,.45) !important;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif !important;
  font-size: var(--body-size) !important;
  font-weight: 200 !important;
  line-height: normal !important;
}
.jo-pr-document.jo-dark .jo-pr-image figcaption,
body .jo-pr-document.jo-dark .jo-pr-image figcaption {
  color: rgba(255,255,255,.55) !important;
}
/* =========================================================
   PR META HEIGHT LOCK
   Makes .jo-pr-meta visually identical to .jo-meta.
   The reserve block is the same height as the real links — just hidden.
   Do not remove.
========================================================= */
.jo-document-links,
.jo-pr-document .jo-pr-meta .jo-document-links,
.jo-pr-document .jo-pr-meta .jo-pr-meta-reserve {
  display: block !important;
  margin-top: 1em !important;
  padding: 0 !important;
  line-height: normal !important;
}
.jo-document-link,
.jo-pr-document .jo-pr-meta .jo-document-link,
.jo-pr-document .jo-pr-meta .jo-pr-meta-reserve .jo-document-link {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif !important;
  font-size: var(--body-size) !important;
  font-weight: 200 !important;
  line-height: normal !important;
}
.jo-pr-document .jo-pr-meta .jo-pr-meta-reserve {
  visibility: hidden !important;
  pointer-events: none !important;
}
/* =========================================================
   CAPTIONS — BLACK + SLIGHTLY SMALLER (site-wide)
   Overrides the gray document captions above. Loaded last so it wins.
========================================================= */
.jo-pr-document .jo-pr-image figcaption,
body .jo-pr-document .jo-pr-image figcaption {
  color: var(--black) !important;
  font-size: var(--caption-size) !important;
}
.jo-pr-document.jo-dark .jo-pr-image figcaption,
body .jo-pr-document.jo-dark .jo-pr-image figcaption {
  color: var(--white) !important;
}
/* =========================================================
   COVER-BOTTOM SLIDE
   Full-screen cover that crops from the top, preserving the
   bottom of the image.
========================================================= */
.jo-slide.jo-cover-bottom img,
.jo-mode-full .jo-slide.jo-cover-bottom img,
.jo-mode-protected .jo-slide.jo-cover-bottom img {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  width: 100vw !important;
  height: 100svh !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center bottom !important;
}
/* =========================================================
   IMAGE LIGHTBOX
   Click a document / news image to expand it full-frame.
   The frame clears the left menu zone and keeps matching
   top / right / bottom borders. Menu stays put and functional.
   Click anywhere on the image (X cursor) to close.
========================================================= */
.jo-pr-document .jo-pr-image img,
.jo-pr-document .jo-pr-image figure img {
  pointer-events: auto;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 14 L24 34 M14 24 L34 24' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-in;
}
.jo-pr-document.jo-dark .jo-pr-image img,
.jo-pr-document.jo-dark .jo-pr-image figure img {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 14 L24 34 M14 24 L34 24' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-in;
}
.jo-news-image-button {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 14 L24 34 M14 24 L34 24' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-in;
}
.jo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: none;
  background: transparent;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 10 L38 38 M38 10 L10 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-out;
}
body.is-lightbox-open .jo-lightbox {
  display: block;
}
.jo-lightbox::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
}
.jo-lightbox.jo-dark {
  background: transparent;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 10 L38 38 M38 10 L10 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-out;
}
.jo-lightbox.jo-dark::before {
  background: #000;
}
/* for document images, leave the left meta zone uncovered so the
   real (unmoving) title/venue/date shows through */
.jo-lightbox.jo-lb-doc::before {
  left: var(--content-left);
}
.jo-lightbox-frame {
  position: absolute;
  top: 42px;
  right: var(--gutter);
  bottom: 42px;
  left: var(--content-left);
  z-index: 1;
  cursor: inherit;
}
.jo-lightbox-close {
  position: absolute;
  left: 25%;
  top: 25%;
  width: 50%;
  height: 50%;
  z-index: 2;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M16 16 L32 32 M32 16 L16 32' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-out;
}
.jo-lightbox.jo-dark .jo-lightbox-close {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M16 16 L32 32 M32 16 L16 32' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-out;
}
.jo-lightbox-frame img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: auto;
  border: 0;
  object-fit: contain;
  object-position: center center;
}
@media (max-width: 900px) {
  .jo-lightbox,
  body.is-lightbox-open .jo-lightbox {
    display: none !important;
  }
  .jo-pr-document .jo-pr-image img,
  .jo-pr-document .jo-pr-image figure img,
  .jo-news-image-button {
    cursor: default;
  }
}
/* =========================================================
   BATCH 2 — UNIFORM SQUARE CURSORS
   All glyphs occupy a 28px square (10..38) in a 48 canvas.
   prev/next/up/down point at their tip; + and X center.
========================================================= */
.jo-gallery.cursor-prev,
.jo-pr-image.cursor-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M31 10 L17 24 L31 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 17 24, w-resize;
}
.jo-gallery.cursor-next,
.jo-pr-image.cursor-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M17 10 L31 24 L17 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 31 24, e-resize;
}
.jo-dark .jo-gallery.cursor-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M31 10 L17 24 L31 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 17 24, w-resize;
}
.jo-dark .jo-gallery.cursor-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M17 10 L31 24 L17 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 31 24, e-resize;
}
.jo-gallery.cursor-sound {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M14 20 L20 20 L27 14 L27 34 L20 28 L14 28 Z' fill='none' stroke='black' stroke-width='1.05' stroke-linejoin='miter'/%3E%3Cpath d='M31 19 Q35 24 31 29' fill='none' stroke='black' stroke-width='1.05'/%3E%3C/svg%3E") 24 24, pointer;
}
.jo-dark .jo-gallery.cursor-sound {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M14 20 L20 20 L27 14 L27 34 L20 28 L14 28 Z' fill='none' stroke='white' stroke-width='1.05' stroke-linejoin='miter'/%3E%3Cpath d='M31 19 Q35 24 31 29' fill='none' stroke='white' stroke-width='1.05'/%3E%3C/svg%3E") 24 24, pointer;
}
.jo-pr-back-zone,
.jo-utility-back {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M31 10 L17 24 L31 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 17 24, w-resize;
}
.jo-pr.jo-dark .jo-pr-back-zone {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M31 10 L17 24 L31 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 17 24, w-resize;
}
.jo-pr-document .jo-pr-image img,
.jo-pr-document .jo-pr-image figure img {
  cursor: inherit;
}
.jo-pr-image.cursor-zoom,
.jo-news-image-button {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 10 L24 38 M10 24 L38 24' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-in;
}
.jo-pr-document.jo-dark .jo-pr-image.cursor-zoom {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M24 10 L24 38 M10 24 L38 24' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-in;
}
.jo-pr-document.jo-dark .jo-pr-image.cursor-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M31 10 L17 24 L31 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 17 24, w-resize;
}
.jo-pr-document.jo-dark .jo-pr-image.cursor-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M17 10 L31 24 L17 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 31 24, e-resize;
}
/* doc inline gallery: show one figure at a time */
.jo-pr-document .jo-pr-image.jo-doc-multi figure {
  display: none;
}
.jo-pr-document .jo-pr-image.jo-doc-multi figure.active {
  display: block;
}
.jo-lightbox-frame.cursor-close {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 10 L38 38 M38 10 L10 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-out;
}
.jo-lightbox.jo-dark .jo-lightbox-frame.cursor-close {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 10 L38 38 M38 10 L10 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square'/%3E%3C/svg%3E") 24 24, zoom-out;
}
.jo-lightbox-frame.cursor-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M31 10 L17 24 L31 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 17 24, w-resize;
}
.jo-lightbox-frame.cursor-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M17 10 L31 24 L17 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 31 24, e-resize;
}
.jo-lightbox.jo-dark .jo-lightbox-frame.cursor-prev {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M31 10 L17 24 L31 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 17 24, w-resize;
}
.jo-lightbox.jo-dark .jo-lightbox-frame.cursor-next {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M17 10 L31 24 L17 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 31 24, e-resize;
}
/* =========================================================
   BATCH 2 — HOMEPAGE UP / DOWN SNAP ZONES
========================================================= */
.jo-nav-vert {
  position: fixed;
  left: 0;
  right: 0;
  height: 84px;
  z-index: 850;
  background: transparent;
}
.jo-nav-up { top: 0; }
.jo-nav-down { bottom: 0; }
.jo-nav-up {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 31 L24 17 L38 31' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 24 17, n-resize;
}
.jo-nav-down {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 17 L24 31 L38 17' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 24 31, s-resize;
}
body.is-dark .jo-nav-up {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 31 L24 17 L38 31' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 24 17, n-resize;
}
body.is-dark .jo-nav-down {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M10 17 L24 31 L38 17' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 24 31, s-resize;
}
.jo-nav-vert.jo-hidden,
body.is-pr-open .jo-nav-vert,
body.is-news-open .jo-nav-vert,
body.is-cv-open .jo-nav-vert,
body.is-search-open .jo-nav-vert,
body.is-office-open .jo-nav-vert,
body.is-index-open .jo-nav-vert,
body.is-splash .jo-nav-vert,
body.is-lightbox-open .jo-nav-vert {
  display: none;
}
/* =========================================================
   BATCH 2 — NEWS / CV BACK ZONE
========================================================= */
.jo-utility-back {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 55%;
  width: 320px;
  z-index: 610;
  display: none;
  border: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}
body.is-news-open .jo-utility-back,
body.is-cv-open .jo-utility-back {
  display: block;
}
.jo-utility-social a {
  cursor: pointer;
}
/* =========================================================
   BATCH 2 — FULL-SCREEN VIDEO COVER (desktop)
   Fills the viewport, no letterbox. .jo-video-bl pins the
   lower-left corner (crops from top/right only).
========================================================= */
@media (min-width: 901px) {
  .jo-slide iframe {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 100vw !important;
    height: 56.25vw !important;
    min-width: 177.78svh !important;
    min-height: 100svh !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    object-fit: cover !important;
  }
  .jo-slide.jo-video-bl iframe {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    transform: none !important;
  }
}
/* =========================================================
   BATCH 2 — SLIDE FADE (quick)
========================================================= */
@keyframes joFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.jo-slide.active {
  animation: joFade .18s ease both;
}
/* =========================================================
   BATCH 2 — SELECTION / DRAG FLASH FIX
========================================================= */
.jo-nav,
.jo-nav *,
.jo-stage,
.jo-stage *,
.jo-lightbox,
.jo-lightbox *,
.jo-nav-vert {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
.jo-slide img,
.jo-pr-image img,
.jo-news-image,
.jo-lightbox-frame img {
  -webkit-user-drag: none;
  user-select: none;
}
/* =========================================================
   BATCH 2 — NEWS DATES BLACK, SOCIAL ICONS, CV SPACING
========================================================= */
.jo-news-date {
  color: var(--black) !important;
}
.jo-utility-social {
  align-items: center;
  gap: 16px;
}
.jo-utility-social a {
  display: inline-flex !important;
  align-items: center;
  width: auto !important;
  height: auto !important;
}
/* PNG icons: identical height, mail naturally wider, grey until hover */
.jo-utility-social img {
  display: block !important;
  height: 20px !important;
  width: auto !important;
  max-height: 20px !important;
  opacity: 0.45;
  transition: opacity var(--transition) ease;
}
.jo-utility-social a:hover img {
  opacity: 1;
}
/* Subscribe: a menu item directly under CV, shown only on News / CV,
   identical formatting to the other menu links, behaves like Search */
.jo-subscribe-row {
  position: relative;
  display: none;
}
body.is-news-open .jo-subscribe-row,
body.is-cv-open .jo-subscribe-row {
  display: block;
}
.jo-subscribe-link {
  display: block;
  cursor: pointer;
}
.is-subscribe-open .jo-subscribe-link {
  visibility: hidden;
}
.jo-subscribe-form {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  display: none;
  height: 1em;
}
.is-subscribe-open .jo-subscribe-form {
  display: block;
}
.jo-subscribe-input {
  width: 100%;
  height: 1em;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: inherit;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--menu-size);
  font-weight: 200;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
}
.jo-subscribe-input::placeholder {
  color: transparent;
}
.jo-cv-block {
  margin-bottom: 2.5em;
}
/* =========================================================
   BATCH 2 — FONT-FLASH GUARD
   Text is hidden until Aktiv Grotesk is ready, so it never
   paints in faux-bold/italic fallback. JS removes the class
   on document.fonts.ready (with a timeout fallback).
========================================================= */
html.jo-fonts-loading .jo-nav,
html.jo-fonts-loading .jo-meta,
html.jo-fonts-loading .jo-caption,
html.jo-fonts-loading .jo-pr,
html.jo-fonts-loading .jo-news-page,
html.jo-fonts-loading .jo-cv-page {
  opacity: 0 !important;
}
.jo-nav,
.jo-meta,
.jo-caption {
  transition: opacity .25s ease;
}
/* =========================================================
   BATCH 2c — YOUTUBE CHROME CROP
   YouTube can't fully hide its title/branding via params, so
   the player is overscanned and the chrome is cropped off-screen.
========================================================= */
@media (min-width: 901px) {
  .jo-slide.jo-video-yt iframe {
    width: calc(100vw * 1.4) !important;
    height: calc(56.25vw * 1.4) !important;
    min-width: calc(177.78svh * 1.4) !important;
    min-height: calc(100svh * 1.4) !important;
  }
}
/* =========================================================
   BATCH 2c — LIGHTBOX META + CAPTION
   The open document's title/venue/date and the image's caption
   are carried into the expanded view so nothing goes missing.
========================================================= */
.jo-lightbox-meta {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: var(--menu-width);
  margin: 0;
  padding: 0;
  color: var(--black);
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
  pointer-events: none;
}
.jo-lightbox.jo-dark .jo-lightbox-meta {
  color: var(--white);
}
.jo-lightbox-meta p {
  margin: 0;
  padding: 0;
}
.jo-lightbox-meta .jo-section-title {
  font-family: aktiv-grotesk, "Aktiv Grotesk", aktiv-grotesk-thin, "Aktiv Grotesk Thin", Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 300;
}
.jo-lightbox-meta .jo-spacer {
  height: 1em;
}
.jo-lightbox-meta .jo-document-links {
  margin-top: 1em;
}
.jo-lightbox-meta .jo-document-link {
  display: block;
  margin: 0;
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--body-size);
  font-weight: 200;
  line-height: normal;
}
.jo-lightbox-meta .jo-pr-meta-reserve {
  visibility: hidden;
}
.jo-lightbox-caption {
  position: absolute;
  left: var(--content-left);
  right: var(--gutter);
  bottom: 42px;
  z-index: 3;
  margin: 0;
  padding: 0;
  text-align: left;
  color: var(--black);
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--caption-size);
  font-weight: 200;
  line-height: normal;
  pointer-events: none;
}
.jo-lightbox.jo-dark .jo-lightbox-caption {
  color: var(--white);
}
.jo-lightbox-caption:empty {
  display: none;
}
.jo-lightbox-caption em {
  font-style: italic;
}
/* =========================================================
   MOBILE CONTACT (last in file so it wins source order)
   Email/IG icons + Subscribe flow at the end of News / CV,
   never fixed, never overlapping the text.
========================================================= */
@media (max-width: 900px) {
  .jo-utility-social {
    position: static !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: auto !important;
    height: auto !important;
    order: 10;
    margin: 32px var(--gutter) 90px var(--gutter);
  }
}
/* =========================================================
   SPLASH (front page) — full-bleed heroes, < > to page,
   click the title to enter. Solid arrows, auto black/white.
========================================================= */
#joSplash {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  background: #fff;
}
body.is-splash #joSplash {
  display: block;
}
#joSplash .jo-splash-pane {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  display: none;
}
#joSplash .jo-splash-pane.active {
  display: block;
}
#joSplash .jo-splash-z {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 5;
}
#joSplash .jo-splash-z.l { left: 0; }
#joSplash .jo-splash-z.r { right: 0; }
/* solid arrows — dark over light images */
#joSplash .jo-splash-z.l {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M31 10 L17 24 L31 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 17 24, w-resize;
}
#joSplash .jo-splash-z.r {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M17 10 L31 24 L17 38' fill='none' stroke='black' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 31 24, e-resize;
}
/* white arrows over dark images */
#joSplash.jo-splash-dark .jo-splash-z.l {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M31 10 L17 24 L31 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 17 24, w-resize;
}
#joSplash.jo-splash-dark .jo-splash-z.r {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M17 10 L31 24 L17 38' fill='none' stroke='white' stroke-width='1.05' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") 31 24, e-resize;
}
#joSplash .jo-splash-title {
  position: fixed;
  top: 42px;
  left: var(--gutter);
  z-index: 10;
  margin: 0;
  padding: 0;
  color: var(--black);
  font-family: aktiv-grotesk, "Aktiv Grotesk", aktiv-grotesk-thin, "Aktiv Grotesk Thin", Arial, sans-serif;
  font-weight: 300;
  font-size: var(--menu-size);
  line-height: normal;
  text-decoration: none;
  cursor: pointer;
}
#joSplash.jo-splash-dark .jo-splash-title {
  color: var(--white);
}
/* =========================================================
   OFFICE PAGE — Contact / Instagram / Subscribe / Search,
   each row on the same baseline as its menu item.
   Type matches the menu (size + weight + grey).
========================================================= */
.jo-office-page {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  overflow-y: auto;
  background: #fff;
  color: var(--black);
}
body.is-office-open .jo-office-page {
  display: block;
}
.jo-office-content {
  position: absolute;
  left: var(--content-left);
  top: 42px;            /* JS aligns this to the Archive row */
  z-index: 20;
}
.jo-office-row,
.jo-office-row a,
.jo-office-field {
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--black-hover);     /* link grey at rest */
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--menu-size);
  font-weight: 200;
  line-height: normal;
  text-decoration: none;
  letter-spacing: normal;
  transition: color var(--transition) ease;
}
.jo-office-row a:hover {
  color: var(--black);
}
.jo-office-field {
  width: var(--menu-width);
  outline: 0;
  appearance: none;
  -webkit-appearance: none;
}
.jo-office-field:focus {
  color: var(--black);
}
.jo-office-field::placeholder {
  color: var(--black-hover);
  opacity: 1;
}
/* Subscribe: typing in the field reveals a grey light "Submit" on its own
   line BELOW the whole stack (after Search), evenly spaced like the search
   results — so a long address can never collide with it. It flips to
   "Thank you" on send. Left-aligned, same menu type as every other row. */
.jo-subscribe-submit {
  display: none;                   /* hidden until the field has text */
  width: auto;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
  color: var(--black-hover);       /* link grey at rest */
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--menu-size);
  font-weight: 200;
  line-height: normal;
  cursor: pointer;
  transition: color var(--transition) ease;
}
.jo-subscribe-row.is-typing ~ .jo-subscribe-submit {
  display: block;
}
.jo-subscribe-submit:hover {
  color: var(--black);
}
.jo-subscribe-submit.is-done,
.jo-subscribe-submit.is-done:hover {
  color: var(--black-hover);
  cursor: default;
}
@media (max-width: 900px) {
  .jo-office-page {
    background: #fff !important;
    color: #000 !important;
  }
  .jo-office-content {
    position: relative;
    left: auto;
    top: auto;
    margin-left: var(--gutter);
    padding-top: 200px;
  }
  .jo-office-field {
    width: calc(100vw - 56px);
  }
}
/* =========================================================
   FOLLOW-UP — remove email / Instagram logos everywhere,
   title is a clickable div, Office live search results.
========================================================= */
.jo-utility-social {
  display: none !important;
}
.jo-nav .jo-title {
  cursor: pointer;
}
.jo-office-results {
  /* sits directly under the Search line; native spacing only */
}
.jo-office-result {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--black-hover);          /* link grey at rest */
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--menu-size);
  font-weight: 200;
  line-height: normal;
  text-decoration: none;
  transition: color var(--transition) ease;
}
.jo-office-result:hover {
  color: var(--black);
}
/* =========================================================
   INTERACTABLE TEXT — grey at rest, black on hover, for every
   link. "Jed Ochmanek Studio" is the sole exception (solid at
   rest, grey on hover). Loaded last so it wins.
========================================================= */
.jo-nav a { color: var(--black-hover); }
.jo-nav a:hover { color: var(--black); }
.jo-title { color: var(--black); }
.jo-title:hover { color: var(--black-hover); }
/* dark sections */
body.is-dark .jo-nav a,
body.is-pr-dark .jo-nav a { color: var(--white-hover); }
body.is-dark .jo-nav a:hover,
body.is-pr-dark .jo-nav a:hover { color: var(--white); }
body.is-dark .jo-title,
body.is-pr-dark .jo-title { color: var(--white); }
body.is-dark .jo-title:hover,
body.is-pr-dark .jo-title:hover { color: var(--white-hover); }
/* News / CV overlays (light) */
body.is-news-open .jo-nav a,
body.is-cv-open .jo-nav a { color: var(--black-hover); }
body.is-news-open .jo-nav a:hover,
body.is-cv-open .jo-nav a:hover { color: var(--black); }
body.is-news-open .jo-title,
body.is-cv-open .jo-title { color: var(--black); }
body.is-news-open .jo-title:hover,
body.is-cv-open .jo-title:hover { color: var(--black-hover); }
/* =========================================================
   PR / INTERVIEW IMAGES — fixed inside the right border, one
   at a time, no scrolling. Text scrolls on the left. (Desktop)
========================================================= */
@media (min-width: 901px) {
  .jo-pr-document .jo-pr-document-wrap {
    display: block;
    width: calc(48vw - var(--content-left));
    margin-left: var(--content-left);
    margin-right: 0;
  }
  .jo-pr-document.jo-pr-no-image .jo-pr-document-wrap {
    width: calc(100vw - var(--content-left) - var(--gutter));
  }
  .jo-pr-document .jo-pr-text,
  .jo-pr-document .jo-pr-text.jo-pr-wide {
    width: 100%;
  }
  .jo-pr-document .jo-pr-image {
    position: fixed;
    top: 42px;
    bottom: 42px;
    left: 52vw;
    right: var(--gutter);
    width: auto;
    margin: 0;
    z-index: 720;
  }
  .jo-pr-document .jo-pr-image figure {
    margin: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;   /* top-aligned, like the text */
  }
  .jo-pr-document .jo-pr-image figure + figure { margin-top: 0; }
  .jo-pr-document .jo-pr-image.jo-doc-multi figure { display: none; }
  .jo-pr-document .jo-pr-image.jo-doc-multi figure.active { display: flex; }
  .jo-pr-document .jo-pr-image figure img {
    flex: 0 1 auto;
    width: 100%;
    height: auto;
    max-height: calc(100% - 2.4em);
    object-fit: contain;
    object-position: right top;   /* top right, like the text is top left */
  }
  .jo-pr-document .jo-pr-image figure figcaption {
    flex: 0 0 auto;
    margin-top: 1em;
  }
}
/* doc captions stay light (match body weight), never heavy */
.jo-pr-document .jo-pr-image figcaption,
body .jo-pr-document .jo-pr-image figcaption {
  font-weight: 200 !important;
}
/* =========================================================
   SOCKETED VIDEO — true aspect (640 × 432) full-bleed cover.
   jo-video-bl pins the lower-left corner, so the left edge
   is never cropped.
========================================================= */
@media (min-width: 901px) {
  .jo-slide.jo-video-socketed iframe {
    width: 100vw !important;
    height: 67.5vw !important;
    min-width: 148.15svh !important;
    min-height: 100svh !important;
  }
}
@media (max-width: 900px) {
  .jo-mode-full .jo-slide.jo-video-socketed iframe,
  .jo-mode-right .jo-slide.jo-video-socketed iframe,
  .jo-mode-protected .jo-slide.jo-video-socketed iframe {
    height: 67.5vw !important;
    min-width: calc(47svh * 1.4815) !important;
    min-height: 47svh !important;
  }
}
/* =========================================================
   ARCHIVE INDEX — a hamburger under CV (archive view only)
   toggles a list view: year + title in the Office format,
   the hovered show's first image on the right in the
   news-image format. The hamburger becomes an X when open.
========================================================= */
.jo-archive-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 15px;
  height: 15px;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--black-hover);
  cursor: pointer;
  transition: color var(--transition) ease;
}
.jo-archive-toggle:hover {
  color: var(--black);
}
.jo-archive-toggle i {
  display: block;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform var(--transition) ease, opacity var(--transition) ease;
}
body.is-dark .jo-archive-toggle { color: var(--white-hover); }
body.is-dark .jo-archive-toggle:hover { color: var(--white); }
body.is-index-open .jo-archive-toggle { color: var(--black-hover); }
body.is-index-open .jo-archive-toggle:hover { color: var(--black); }
body.is-index-open .jo-archive-toggle i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.is-index-open .jo-archive-toggle i:nth-child(2) { opacity: 0; }
body.is-index-open .jo-archive-toggle i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* hidden outside the archive universe — but it stays during PRs
   and interviews, which belong to the archive */
body.is-splash .jo-archive-toggle,
body.is-news-open .jo-archive-toggle,
body.is-cv-open .jo-archive-toggle,
body.is-office-open .jo-archive-toggle,
body.is-search-open .jo-archive-toggle {
  display: none;
}
@media (max-width: 900px) {
  /* mobile: hamburger sits top-right of the nav bar (taps are how you
     navigate between projects, since swipe is unreliable on iOS) */
  .jo-archive-toggle {
    display: flex !important;
    position: fixed;
    top: 34px;
    right: var(--gutter);
    margin-top: 0;
    width: 20px;
    height: 16px;
    color: #000 !important;
    z-index: 1001;
  }
  body.is-splash .jo-archive-toggle,
  body.is-news-open .jo-archive-toggle,
  body.is-cv-open .jo-archive-toggle,
  body.is-office-open .jo-archive-toggle,
  body.is-search-open .jo-archive-toggle,
  body.is-pr-open .jo-archive-toggle {
    display: none !important;
  }
}
.jo-index-page {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: none;
  overflow-y: auto;
  background: #fff;
  color: var(--black);
}
body.is-index-open .jo-index-page {
  display: block;
}
.jo-index-list {
  position: absolute;
  left: var(--content-left);
  right: calc(var(--gutter) * 2 + min(480px, 34vw));   /* never run under the image */
  top: 42px;               /* JS aligns this to the Archive row */
  z-index: 20;
  padding-bottom: 120px;
}
.jo-index-row {
  display: block;
  margin: 0 0 1em 0;       /* one blank return between entries */
  padding: 0;
  color: var(--black-hover);
  font-family: aktiv-grotesk-thin, "Aktiv Grotesk Thin", aktiv-grotesk, Arial, sans-serif;
  font-size: var(--menu-size);
  font-weight: 200;
  line-height: normal;
  text-decoration: none;
  transition: color var(--transition) ease;
}
.jo-index-row:hover {
  color: var(--black);
}
.jo-index-line {
  display: flex;           /* year column + title column, no negative offsets */
  align-items: baseline;
}
.jo-index-title {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}
.jo-index-venue {
  display: block;
  padding-left: 3.4em;     /* venue + extra title lines align under the title */
}
.jo-index-year {
  display: block;
  flex: 0 0 3.4em;         /* fixed year column; never shifts or clips */
}
.jo-index-image {
  position: fixed;
  top: 42px;               /* JS aligns */
  right: var(--gutter);
  width: min(480px, 34vw);
  z-index: 20;
  cursor: pointer;
}
.jo-index-image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100svh - 84px);
  object-fit: contain;
  object-position: left top;
}
/* =========================================================
   MOBILE — caption column starts at the venue line, not the
   exhibition-title line; splash title sits exactly where the
   nav title sits so it never jumps on entry.
========================================================= */
@media (max-width: 900px) {
  .jo-caption {
    margin-top: 55px;
  }
  #joSplash .jo-splash-title {
    top: 30px;
  }
  /* mobile index: full-width tappable list, no hover preview image */
  .jo-index-list {
    position: static;
    left: auto;
    right: auto;
    top: auto;
    margin: 0;
    width: 100%;
    padding: 190px var(--gutter) 90px var(--gutter);
  }
  .jo-index-image { display: none !important; }
  .jo-index-row { margin-bottom: 1.4em; color: #000; }
}