/* ------------------------------------------------------------------ */
/*  De Rrusie — minimal editorial site                                  */
/*  Two pages share this file: the intro (index.html) and the grid     */
/*  (works.html).                                                       */
/* ------------------------------------------------------------------ */

:root {
  --ink: #0a0a0a;
  --paper: #ffffff;
  --accent: #7a0e16;     /* deep red, like the logo */
  --frame: #0a0a0a;
  --frame-weight: 1px;
  --frame-inset: 22px;   /* distance of the frame from the screen edge */

  /* typography */
  --serif: "Times New Roman", "Times", serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --nav-size: 9.5px;
  --meta-size: 11px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
  border: 0;
  outline: none;
}
html {
  scroll-padding-top: calc(var(--frame-inset) + 72px);
}

a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------------------ */
/*  Logo — swaps black <-> red on hover                                 */
/* ------------------------------------------------------------------ */
.logo {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}
.logo-default { opacity: 1; transition: opacity .35s ease; }
.logo-hover {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .35s ease;
}
a:hover .logo-default { opacity: 0; }
a:hover .logo-hover   { opacity: 1; }

/* ------------------------------------------------------------------ */
/*  The frame — four thin black lines, each drawn from the centre out   */
/* ------------------------------------------------------------------ */
.frame {
  position: fixed;
  inset: var(--frame-inset);
  pointer-events: none;
  z-index: 5;
}
.frame-line {
  position: absolute;
  background: var(--frame);
  transform-origin: center;
}
.frame-top,
.frame-bottom {
  left: 0; right: 0;
  height: var(--frame-weight);
}
.frame-top    { top: 0; }
.frame-bottom { bottom: 0; }
.frame-left,
.frame-right {
  top: 0; bottom: 0;
  width: var(--frame-weight);
}
.frame-left  { left: 0; }
.frame-right { right: 0; }

/* INTRO PAGE: hidden, then scales out from the centre after 1.9s ----- */
.intro-page .frame-top,
.intro-page .frame-bottom { transform: scaleX(0); }
.intro-page .frame-left,
.intro-page .frame-right  { transform: scaleY(0); }

.intro-page .frame-line {
  transition: transform 1.1s cubic-bezier(.65,.05,.36,1);
  transition-delay: 1.9s;
}
.intro-page.frame-in .frame-top,
.intro-page.frame-in .frame-bottom { transform: scaleX(1); }
.intro-page.frame-in .frame-left,
.intro-page.frame-in .frame-right  { transform: scaleY(1); }

/* WORKS PAGE: the frame is just present, no animation                  */
.frame-static .frame-line { transform: none; }

/* ------------------------------------------------------------------ */
/*  Intro layout                                                        */
/* ------------------------------------------------------------------ */
.intro {
  min-height: 100vh;
  display: grid;
  place-items: center;
  position: relative;
}
.intro-logo {
  position: relative;
  display: block;
  width: 104px;        /* size of the small centred logo */
  cursor: pointer;
}
.intro-logo .logo-default,
.intro-logo .logo-hover { width: 100%; }

/* fade the logo in gently on first paint */
.intro-logo {
  opacity: 0;
  animation: fadeIn 1.2s ease .2s forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

/* ------------------------------------------------------------------ */
/*  Works page layout                                                   */
/* ------------------------------------------------------------------ */
.works-page {
  padding: calc(var(--frame-inset) + 84px) calc(var(--frame-inset) + 28px) calc(var(--frame-inset) + 36px);
}

.site-header {
  margin-bottom: 0;
}
.site-header--sticky {
  position: fixed;
  top: var(--frame-inset);
  left: var(--frame-inset);
  right: var(--frame-inset);
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin: 0;
  padding: 12px 28px 0;
  background: transparent;
  pointer-events: none;
}
.site-header--sticky > * {
  pointer-events: auto;
}
.header-logo {
  position: relative;
  display: block;
  width: 52px;
  flex-shrink: 0;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 6px;
  font-family: var(--sans);
  font-size: var(--nav-size);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.site-nav > a { position: relative; }
.site-nav > a:hover,
.site-nav > a[aria-current="page"] { color: var(--accent); }
@media (max-width: 720px) {
  .site-nav {
    gap: 10px;
    letter-spacing: .1em;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: min(68vw, 280px);
  }
}

/* Works dropdown */
.nav-works { position: relative; }
.nav-works-toggle {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  cursor: pointer;
}
.nav-works-toggle:hover,
.nav-works.is-open .nav-works-toggle { color: var(--accent); }
.nav-works-menu {
  list-style: none;
  margin: 0;
  padding: 10px 0 0;
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  min-width: 140px;
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.nav-works-menu a {
  display: block;
  padding: 5px 0;
  font-size: 9px;
  letter-spacing: .16em;
  white-space: nowrap;
}
.nav-works-menu a:hover { color: var(--accent); }
.nav-works:hover .nav-works-menu,
.nav-works.is-open .nav-works-menu,
.nav-works:focus-within .nav-works-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* section headings on the works page */
.works-section {
  max-width: 720px;
  margin: 0 auto 64px;
  scroll-margin-top: calc(var(--frame-inset) + 72px);
}
.works-section-title {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 28px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
}
.works-subsection-title {
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  margin: 40px 0 20px;
  color: #666;
  font-weight: normal;
}
.works-subsection-title:first-of-type { margin-top: 0; }

/* ------------------------------------------------------------------ */
/*  Editorial grid of works                                             */
/*  - mobile: one column                                                */
/*  - tablet: 2 columns                                                 */
/*  - desktop: 3 columns                                                */
/* ------------------------------------------------------------------ */
.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px 40px;
}
@media (min-width: 700px) {
  .works-grid { grid-template-columns: 1fr 1fr; }
}

.work { display: flex; flex-direction: column; }

/* Constellation: small painting left of type, clustered */
.works-page:not(.mode-carousel) .works-section .work {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 14px;
  align-items: end;
  position: relative;
}
.works-page:not(.mode-carousel) .works-section .work-image {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
  background: transparent;
}
.works-page:not(.mode-carousel) .work-thumb {
  grid-column: 1;
  width: 96px;
  height: auto;
  display: block;
  cursor: zoom-in;
  border: 0;
  outline: none;
  box-shadow: none;
  clip-path: inset(2px);
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}
.works-page:not(.mode-carousel) .works-section .work-meta {
  grid-column: 2;
  border-top: none;
}
.works-page:not(.mode-carousel) .works-section .work-headline,
.works-page:not(.mode-carousel) .works-section .work-num,
.works-page:not(.mode-carousel) .works-section .work-medium,
.works-page:not(.mode-carousel) .works-section .work-size,
.works-page:not(.mode-carousel) .works-section .work-place {
  border-color: transparent;
}
.works-page:not(.mode-carousel) .work--featured,
.works-page:not(.mode-carousel) .work--featured-compact,
.works-page:not(.mode-carousel) .work--chair {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.works-page:not(.mode-carousel) .work--featured .work-image,
.works-page:not(.mode-carousel) .work--featured.work--chair .work-image,
.works-page:not(.mode-carousel) .medita-group .work-image {
  min-height: 0;
  max-height: none;
  height: auto;
  background: transparent;
}
.works-page:not(.mode-carousel) .medita-group {
  gap: 28px 40px;
}
@media (min-width: 700px) {
  .works-page:not(.mode-carousel) .medita-group {
    grid-template-columns: 1fr 1fr;
    gap: 28px 40px;
  }
}

/* Medita trio: 4-I left, 1 center, 4-II right — equal image height */
.medita-group {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px 28px;
}
@media (min-width: 900px) {
  .medita-group {
    grid-template-columns: 1fr 1.12fr 1fr;
    align-items: end;
    gap: 32px 24px;
  }
}
.medita-group .work-image {
  height: clamp(260px, 34vw, 400px);
  align-items: flex-end;
  justify-content: center;
}
.medita-group .work-image img {
  width: auto;
  height: 100%;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* Jenma — large, standalone */
.work-featured {
  grid-column: 1 / -1;
  margin-top: 8px;
}
.work--featured {
  max-width: min(760px, 100%);
  margin: 0 auto;
}
.work--featured .work-image {
  min-height: clamp(340px, 48vw, 600px);
  align-items: center;
  justify-content: center;
  background: #f7f7f7;
}
.work--featured .work-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(340px, 48vw, 600px);
  object-fit: contain;
}

/* Last two paintings: own row, portrait pair */
.paintings-close {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 44px 28px;
}
@media (min-width: 720px) {
  .paintings-close { grid-template-columns: 1fr 1fr; }
}

/* Gesa — own row, smaller (24 x 16 cm pieces) */
.work-featured--compact {
  margin-top: 4px;
  margin-bottom: 4px;
}
.work--featured-compact {
  max-width: min(300px, 100%);
}
.work--featured.work--featured-compact .work-image {
  min-height: 0;
  background: transparent;
}
.work--featured-compact .work-image img {
  width: 100%;
  height: auto;
  max-height: none;
}

.work--chair {
  max-width: min(420px, 100%);
}
.work--featured.work--chair .work-image {
  min-height: 0;
  background: #f4f4f4;
}
.work--chair .work-image img {
  width: 100%;
  height: auto;
  max-height: none;
}
.chair-views {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px 18px;
}
@media (min-width: 900px) {
  .chair-views { grid-template-columns: repeat(4, 1fr); }
}
.chair-views .work-image {
  margin-bottom: 0;
  background: #f4f4f4;
}
.chair-views .work-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.work-image {
  width: 100%;
  margin-bottom: 10px;
  background: #f7f7f7;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border: none;
  padding: 0;
  cursor: zoom-in;
  font: inherit;
  color: inherit;
}
.work-image:hover { opacity: .92; }
.work-image:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.work-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  pointer-events: none;
  border: 0;
  outline: none;
  box-shadow: none;
  clip-path: inset(2px);
}

/* the numbered editorial caption block (like the art-book reference) */
.work-meta {
  font-family: var(--serif);
  font-size: var(--meta-size);
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
  border-top: 1px solid var(--ink);
}
.work-headline {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--ink);
}
.work-num {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  padding: 4px 8px;
  border-right: 1px solid var(--ink);
  font-weight: bold;
  font-size: 13px;
}
.work-titleblock {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 8px;
}
.work-title { font-weight: bold; font-size: 11.5px; letter-spacing: .08em; }
.work-year  { font-size: 10.5px; }
.work-medium,
.work-size,
.work-place {
  padding: 3px 8px;
  border-bottom: 1px solid var(--ink);
}

/* ------------------------------------------------------------------ */
/*  About section                                                       */
/* ------------------------------------------------------------------ */
.about-bg {
  position: fixed;
  inset: var(--frame-inset);
  width: calc(100% - var(--frame-inset) * 2);
  height: calc(100% - var(--frame-inset) * 2);
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
  pointer-events: none;
  background: #f2f0eb;
}
.about-page .about,
.about-page .site-footer {
  z-index: 2;
}
.about-page .about {
  position: relative;
  min-height: calc(100vh - var(--frame-inset) * 2 - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #f6f6f6;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .55);
}
.about-page .site-nav,
.about-page .nav-works-toggle {
  color: #f6f6f6;
}
.about-page .logo-default { filter: invert(1); }
.about-page .site-footer {
  color: rgba(255, 255, 255, .72);
}
.about {
  margin: 0 auto;
  max-width: 520px;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.55;
  letter-spacing: .01em;
}
.about h2 {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 20px;
  text-align: center;
}
.about p { margin: 0 0 .9em; }
.about p:last-of-type { margin-bottom: 0; }

.contact {
  margin: 0 auto;
  max-width: 420px;
  min-height: calc(100vh - var(--frame-inset) * 2 - 120px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 18px;
}
.contact-handle {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: lowercase;
}
.contact-handle:hover { color: var(--accent); }
.contact-email {
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: .04em;
}
.contact-email:hover { color: var(--accent); }

/* ------------------------------------------------------------------ */
/*  Press                                                               */
/* ------------------------------------------------------------------ */
.press {
  max-width: 640px;
  margin: 0 auto 48px;
}
.press-heading {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin: 0 0 28px;
  text-align: center;
}
.press-list {
  list-style: none;
  margin: 0 0 56px;
  padding: 0;
  border-top: 1px solid var(--ink);
}
.press-list a,
.press-list .press-row {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) 3.6em;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.press-list a:hover { color: var(--accent); }
.press-list .press-row { cursor: default; }
.press-pub,
.press-title,
.press-year {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.press-pub { font-weight: 600; }
.press-title { font-weight: 400; opacity: .72; }
.press-year {
  letter-spacing: .16em;
  text-align: right;
}
@media (max-width: 640px) {
  .press-list a,
  .press-list .press-row {
    grid-template-columns: minmax(0, 1fr) 3.6em;
    gap: 4px 12px;
  }
  .press-title {
    grid-column: 1 / -1;
    order: 3;
  }
}

.site-footer {
  position: fixed;
  right: calc(var(--frame-inset) + 28px);
  bottom: calc(var(--frame-inset) + 10px);
  margin: 0;
  z-index: 40;
  text-align: right;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #555;
  pointer-events: none;
}
.about-page .site-footer {
  margin-top: 0;
}

/* ------------------------------------------------------------------ */
/*  Lightbox — painting centered, fit first, then pan + zoom            */
/* ------------------------------------------------------------------ */
body.lightbox-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
  left: 0;
  right: 0;
}

body.lightbox-open > *:not(#lightbox) {
  visibility: hidden;
  pointer-events: none;
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  isolation: isolate;
  background: #fff;
  display: flex;
  flex-direction: column;
  visibility: visible;
  pointer-events: auto;
}
.lightbox[hidden] { display: none; }

.lightbox-chrome {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: calc(var(--frame-inset) + 4px) calc(var(--frame-inset) + 18px) 10px;
  background: #fff;
}
.lightbox-close {
  justify-self: start;
  border: none;
  background: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink);
  padding: 4px 8px;
  margin: 0;
}
.lightbox-close:hover { color: var(--accent); }

.lightbox-caption {
  justify-self: center;
  font-family: var(--sans);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #444;
  text-align: center;
}

.lightbox-controls {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.lightbox-controls button {
  border: none;
  background: none;
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  color: var(--ink);
}
.lightbox-controls button:hover { color: var(--accent); }
.lightbox-zoom-reset,
.lightbox-zoom-native {
  width: auto !important;
  font-size: 9.5px !important;
  letter-spacing: .12em;
}
.lightbox-zoom-level {
  min-width: 36px;
  text-align: center;
  color: #666;
  font-size: 9px;
  letter-spacing: .14em;
}

.lightbox-viewport {
  flex: 1;
  overflow: auto;
  cursor: zoom-in;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  position: relative;
  overscroll-behavior: contain;
}
.lightbox-viewport.is-panned { cursor: grab; }
.lightbox-viewport.is-dragging {
  cursor: grabbing;
  user-select: none;
}
.lightbox-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 100%;
  padding: 12px;
  box-sizing: border-box;
  background: #fff;
}
.lightbox-image {
  display: block;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  vertical-align: top;
}
@media (max-width: 640px) {
  .lightbox-chrome {
    grid-template-columns: auto 1fr;
    gap: 8px 12px;
  }
  .lightbox-caption {
    grid-column: 1 / -1;
    order: 3;
  }
  .lightbox-controls { justify-self: end; }
}

/* ------------------------------------------------------------------ */
/*  View dots — below the frame, bottom right                           */
/* ------------------------------------------------------------------ */
.view-dots {
  position: fixed;
  right: calc(var(--frame-inset) + 18px);
  bottom: 7px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 8px;
}
.view-dot {
  width: 7px;
  height: 7px;
  border: none;
  padding: 0;
  border-radius: 50%;
  background: #0a0a0a;
  opacity: .55;
  cursor: pointer;
}
.view-dot:hover { opacity: .85; }
.view-dot[aria-pressed="true"] { opacity: 1; }
body.mode-dark .view-dot { background: #f3f3f3; }

/* Text only — hide images, drop frame + caption rules, keep type in place */
body.mode-text .frame { visibility: hidden; }
body.mode-text .work-thumb {
  visibility: hidden;
}
body.mode-text .work-meta,
body.mode-text .work-headline,
body.mode-text .work-num,
body.mode-text .work-medium,
body.mode-text .work-size,
body.mode-text .work-place,
body.mode-text .press-list,
body.mode-text .press-list a,
body.mode-text .press-list .press-row {
  border-color: transparent;
}

/* Black ground */
html:has(body.mode-dark),
body.mode-dark {
  --ink: #f3f3f3;
  --paper: #000;
  --frame: #f3f3f3;
  background: #000;
  color: #f3f3f3;
}
body.mode-dark:not(.about-page) .logo-default { filter: invert(1); }
body.mode-dark .work-image,
body.mode-dark .work--featured .work-image,
body.mode-dark .chair-views .work-image,
body.mode-dark .work--featured.work--chair .work-image {
  background: #111;
}
body.mode-dark.works-page:not(.mode-carousel) .works-section .work-image,
body.mode-dark.works-page:not(.mode-carousel) .work--featured .work-image,
body.mode-dark.works-page:not(.mode-carousel) .work--featured.work--chair .work-image {
  background: transparent;
}
body.mode-dark .site-footer { color: #888; }
body.mode-dark .works-section-title,
body.mode-dark .works-subsection-title { color: #999; }
body.mode-dark .lightbox,
body.mode-dark .lightbox-chrome,
body.mode-dark .lightbox-viewport,
body.mode-dark .lightbox-stage {
  background: #000;
}
body.mode-dark .lightbox-close,
body.mode-dark .lightbox-controls button { color: #f3f3f3; }
body.mode-dark .lightbox-controls button { border-color: rgba(255,255,255,.2); }
body.mode-dark.about-page .about { color: #f6f6f6; }

/* Carousel — one work at a time */
body.mode-carousel.works-page {
  padding-bottom: calc(var(--frame-inset) + 72px);
}
body.mode-carousel .works-section-title,
body.mode-carousel .works-subsection-title { display: none; }
body.mode-carousel .works-grid,
body.mode-carousel .medita-group,
body.mode-carousel .work-featured,
body.mode-carousel .paintings-close,
body.mode-carousel .chair-views {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
body.mode-carousel article.work { display: none; }
body.mode-carousel .work-thumb { display: none; }
body.mode-carousel .work-image img { opacity: 1; }
body.mode-carousel article.work.is-active-slide {
  display: flex;
  flex-direction: column;
  width: min(720px, 92%);
  margin: 0 auto;
  position: relative;
  z-index: 46;
}
body.mode-carousel .work--featured,
body.mode-carousel .work--featured-compact,
body.mode-carousel .work--chair {
  max-width: min(720px, 92%);
}
body.mode-carousel .is-active-slide .work-image {
  min-height: 0;
  background: transparent;
}
body.mode-carousel .is-active-slide .work-image img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(72vh, 820px);
  margin: 0 auto;
  border: 0;
  outline: none;
  box-shadow: none;
  clip-path: inset(2px);
}

.carousel-nav {
  position: fixed;
  inset: 0;
  z-index: 45;
  pointer-events: none;
}
.carousel-nav[hidden] { display: none; }
.carousel-prev,
.carousel-next {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 32%;
  max-width: 420px;
  border: none;
  background: transparent;
  pointer-events: auto;
  opacity: 1;
  transform: none;
}
.carousel-prev { left: 0; cursor: w-resize; }
.carousel-next { right: 0; cursor: e-resize; }
.carousel-prev::before,
.carousel-next::before { content: none; }

body.lightbox-open .view-dots,
body.lightbox-open .carousel-nav { visibility: hidden; }

/* ------------------------------------------------------------------ */
/*  Studio — video + one audio track                                    */
/* ------------------------------------------------------------------ */
.studio {
  max-width: 720px;
  margin: 0 auto;
  padding-bottom: 88px;
}
.studio-piece { margin: 0; }
.studio-video-wrap {
  position: relative;
  background: #111;
  cursor: pointer;
}
.studio-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 720px);
  object-fit: contain;
  margin: 0 auto;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.studio-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: none;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
  cursor: pointer;
}
.studio-video-wrap.is-playing .studio-video-play {
  opacity: 0;
  pointer-events: none;
}
.studio-video-wrap:hover.is-playing .studio-video-play {
  opacity: 1;
  pointer-events: auto;
}
.studio-meta {
  margin-top: 10px;
  font-family: var(--serif);
  font-size: var(--meta-size);
  line-height: 1.3;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.studio-audio {
  position: fixed;
  left: calc(var(--frame-inset) + 28px);
  right: calc(var(--frame-inset) + 28px);
  bottom: calc(var(--frame-inset) + 28px);
  z-index: 40;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 16px;
  row-gap: 8px;
  align-items: baseline;
  max-width: 420px;
  pointer-events: auto;
}
.studio-audio-play {
  grid-row: 1;
  border: none;
  background: none;
  padding: 0;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.studio-audio-play:hover,
.studio-audio-play[aria-pressed="true"] { color: var(--accent); }
.studio-audio-info {
  grid-row: 1;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--sans);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.studio-audio-no { opacity: .45; }
.studio-audio-bar {
  grid-column: 1 / -1;
  height: 1px;
  padding: 8px 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.studio-audio-bar::before {
  content: "";
  display: block;
  height: 1px;
  background: rgba(0, 0, 0, .18);
}
body.mode-dark .studio-audio-bar::before { background: rgba(255, 255, 255, .22); }
.studio-audio-fill {
  display: block;
  height: 1px;
  width: 0;
  margin-top: -1px;
  background: var(--ink);
  pointer-events: none;
}
.studio-page .site-footer { right: calc(var(--frame-inset) + 28px); }