/* ==========================================================
   Work pages: scaled reproductions of the 1512px-wide Figma frames.
   All offsets are Figma px / 15.12, so they track the page width.
   ========================================================== */

.work {
  position: relative;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  color: #fff;
  font-size: 0.992cqw;
  line-height: 2.105;
}

.work p + p {
  margin-top: 2.105em;
}

.work__background {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the hand, Menu and the menu panel float over the page, even on scroll.
   The layer is the viewport's size and a container itself, so cqw / cqh
   resolve the same as inside .work */
.floating {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  container-type: size;
  pointer-events: none;
  color: var(--color-ink);
}

.work__menu,
.menu {
  font-size: 0.992cqw;
  line-height: 2.105;
  pointer-events: auto;
}

.work__hand {
  position: absolute;
  left: 89.550cqw;
  top: 0;
  width: 10.450cqw;
  transform: rotate(180deg);
}

/* with a mouse, the hand waits above the window and slides down while
   Menu is hovered or the menu is open; touch screens keep it in place */
@media (hover: hover) {
  .work__hand {
    translate: 0 -100%;
    transition: translate 0.4s ease;
  }

  .floating:has(.work__menu:hover, .work__menu:focus-visible, .menu:not([hidden])) .work__hand {
    translate: 0 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .work__hand {
    transition: none;
  }
}

.work__menu {
  position: absolute;
  left: 94.048cqw;
  top: 5.291cqw;
}

.film-page .work__menu,
.ghosts-page .work__menu,
.blind-page .work__menu,
.jolda-page .work__menu {
  color: #fff;
}

/* list of works opened by "Menu" over the page (see menu.js);
   Figma frame 2264:406, 580px wide at 900, 80 */
.menu {
  position: absolute;
  left: 59.524cqw;
  top: 5.291cqw;
  width: 38.360cqw;
  max-height: calc(100cqh - 5.291cqw);
  overflow-y: auto;
  padding: 0.529cqw 1.323cqw 0.840cqw;
  background: #e9e9e9;
  color: var(--color-ink);
}

.menu__label,
.menu li a {
  text-decoration: underline wavy;
  text-decoration-thickness: 6%;
  text-decoration-skip-ink: none;
}

.menu__home {
  color: #4dcd17;
  text-decoration: none;
}

.work__text,
.work__img {
  position: absolute;
}

.work__img {
  max-width: none;
  height: auto;
}

.work__player {
  position: absolute;
  width: 89.352cqw;
  aspect-ratio: 1351 / 761;
  display: grid;
  place-items: center;
  background: #d9d9d9;
  color: var(--color-ink);
}

.work__player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Everything's new, and some things aren't (1512 x 3203) ---------- */

.film-page {
  background: #000;
}

.film {
  aspect-ratio: 1512 / 3203;
}

.film__background {
  position: absolute;
  left: -58.598cqw;
  top: -44.511cqw;
  width: 158.598cqw;
  max-width: none;
}

.film__intro {
  left: 5.291cqw;
  top: 5.291cqw;
  width: 40.807cqw;
}

.film__story {
  left: 51.587cqw;
  top: 35.582cqw;
  width: 43.651cqw;
}

.film__still {
  width: 41.071cqw;
  aspect-ratio: 621 / 348;
  object-fit: cover;
}

.film__still--1 {
  left: 51.587cqw;
  top: 8.862cqw;
}

.film__still--2 {
  left: 5.291cqw;
  top: 35.582cqw;
}

.film__still--3 {
  left: 5.291cqw;
  top: 63.492cqw;
}

.film__still--4 {
  left: 5.291cqw;
  top: 91.534cqw;
}

.film__still--5 {
  left: 5.291cqw;
  top: 119.577cqw;
}

.film__player {
  left: 5.291cqw;
  top: 148.148cqw;
}

/* ---------- Ghosts (1512 x 1681) ---------- */

.ghosts-page,
.ghosts {
  background: #6b6eaa;
}

.ghosts {
  aspect-ratio: 1512 / 1681;
}

.ghosts__intro {
  left: 28.836cqw;
  top: 5.291cqw;
  width: 42.328cqw;
  text-align: center;
}

/* a pile of works; each one can be dragged around (see drag.js).
   Offsets inside are % of the 789px pile */
.ghosts__pile {
  position: absolute;
  left: 23.876cqw;
  top: 40.675cqw;
  width: 52.183cqw;
  aspect-ratio: 1;
  /* keeps dragged cards' z-index below the menu */
  isolation: isolate;
}

.ghosts__card {
  position: absolute;
  top: 0;
  max-width: none;
}

.ghosts__card--narrow {
  left: 16.730%;
  width: 66.667%;
}

.ghosts__card--wide {
  left: 12.548%;
  width: 74.905%;
}

.ghosts__jakho {
  left: 12.674%;
  width: 74.651%;
}

.ghosts__untitled {
  left: 14.702%;
  width: 70.722%;
}

.ghosts__cock {
  left: 12.801%;
  width: 74.398%;
}

.ghosts__untitled-1 {
  left: 13.561%;
  width: 72.877%;
}

.ghosts__opa {
  left: 0;
  top: 12.421%;
  width: 100%;
}

.ghosts__toza-asal {
  left: 11.787%;
  width: 76.426%;
}

/* ---------- Loy qo'llar / Where Do the Plants Sleep? (1512 x 4648) ---------- */

.loy-page {
  background: #3d3c14;
}

.loy {
  aspect-ratio: 1512 / 4648;
  color: var(--color-ink);
  background: linear-gradient(
    #ace3f8 0%,
    #f8f4ac 2.885%,
    #d0f8ac 5.288%,
    #88ba57 74.519%,
    #3d3c14 100%
  );
}

.loy__intro {
  left: 5.291cqw;
  top: 5.291cqw;
  width: 40.807cqw;
}

.loy__media {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.loy__clip-2 {
  left: 50.132cqw;
  top: 19.709cqw;
  width: 49.934cqw;
}

.loy__clip-1 {
  left: 0;
  top: 65.608cqw;
  width: 50.132cqw;
}

.loy__still-1 {
  left: 49.802cqw;
  top: 65.608cqw;
  width: 50.198cqw;
}

/* archive (film) photos, then installation shots */
.loy__archive-1 {
  left: 3.968cqw;
  top: 122.95cqw;
  width: 16.601cqw;
}

.loy__archive-2 {
  left: 0;
  top: 100.397cqw;
  width: 25cqw;
}

.loy__archive-3 {
  left: 24.934cqw;
  top: 100.397cqw;
  width: 25cqw;
}

.loy__archive-4 {
  left: 75cqw;
  top: 100.397cqw;
  width: 25cqw;
}

.loy__archive-5 {
  left: 25cqw;
  top: 127.05cqw;
  width: 25cqw;
}

.loy__archive-6 {
  left: 50cqw;
  top: 127.05cqw;
  width: 25cqw;
}

.loy__archive-7 {
  left: 75cqw;
  top: 127.05cqw;
  width: 25cqw;
}

.loy__archive-8 {
  left: 24.934cqw;
  top: 153.108cqw;
  width: 50.132cqw;
}

.loy__archive-9 {
  left: 3.902cqw;
  top: 157.474cqw;
  width: 16.733cqw;
}

.loy__archive-10 {
  left: 79.233cqw;
  top: 157.474cqw;
  width: 16.733cqw;
}

.loy__archive-11 {
  left: 0;
  top: 194.18cqw;
  width: 25cqw;
}

.loy__archive-12 {
  left: 24.802cqw;
  top: 194.18cqw;
  width: 25cqw;
}

.loy__archive-13 {
  left: 62.566cqw;
  top: 194.18cqw;
  width: 25cqw;
}

.loy__archive-14 {
  left: 28.373cqw;
  top: 214.881cqw;
  width: 25cqw;
}

.loy__archive-15 {
  left: 53.373cqw;
  top: 214.881cqw;
  width: 25cqw;
}

.loy__archive-16 {
  left: 3.373cqw;
  top: 235.648cqw;
  width: 25cqw;
}

.loy__archive-17 {
  left: 28.505cqw;
  top: 235.648cqw;
  width: 25cqw;
}

.loy__archive-18 {
  left: 75cqw;
  top: 235.648cqw;
  width: 25cqw;
}

.loy__installation-1 {
  left: -0.066cqw;
  top: 264.087cqw;
  width: 19.775cqw;
}

.loy__installation-2 {
  left: 20.04cqw;
  top: 264.087cqw;
  width: 14.815cqw;
}

.loy__installation-3 {
  left: 35.185cqw;
  top: 264.087cqw;
  width: 22.222cqw;
}

.loy__installation-4 {
  left: 57.738cqw;
  top: 264.087cqw;
  width: 22.222cqw;
}

.loy__installation-5 {
  left: 80.225cqw;
  top: 264.087cqw;
  width: 19.775cqw;
}

.loy__installation-6 {
  left: 7.143cqw;
  top: 279.233cqw;
  width: 12.5cqw;
}

.loy__installation-7 {
  left: 35.185cqw;
  top: 279.233cqw;
  width: 22.222cqw;
}

.loy__installation-8 {
  left: 57.738cqw;
  top: 279.233cqw;
  width: 10.979cqw;
}

.loy__installation-9 {
  left: 69.048cqw;
  top: 279.233cqw;
  width: 24.934cqw;
}

/* ---------- Jolda (1512 x 1427) ---------- */

.jolda-page {
  background: #6b6eaa;
}

.jolda {
  aspect-ratio: 1512 / 1427;
  color: var(--color-ink);
}

.jolda__intro {
  left: 5.291cqw;
  top: 5.291cqw;
  width: 40.807cqw;
}

.jolda__player {
  left: 5.423cqw;
  top: 30.423cqw;
}

/* ---------- In the Circle of My Heart (1512 x 5081) ---------- */

.circle-page,
.circle {
  background: #f0cddb;
}

.circle {
  aspect-ratio: 1512 / 5081;
  color: var(--color-ink);
}

.circle__intro {
  left: 5.291cqw;
  top: 5.291cqw;
  width: 40.807cqw;
}

.circle__drawing {
  left: 59.259cqw;
  top: 14.087cqw;
  width: 26.323cqw;
}

.circle__photo {
  left: 0;
  width: 100cqw;
}

.circle__photo--1 {
  top: 69.378cqw;
}

.circle__photo--2 {
  top: 136.045cqw;
}

.circle__photo--3 {
  top: 202.712cqw;
}

.circle__photo--4 {
  top: 269.378cqw;
}

/* video-call screenshot laid over the left edge of the second photo */
.circle__call {
  left: 0;
  top: 136.045cqw;
  width: 25.926cqw;
}

/* ---------- Sometimes I fall apart (1512 x 5211) ---------- */

.fall-page,
.fall {
  background: #f5d2d2;
}

.fall {
  aspect-ratio: 1512 / 5211;
  color: var(--color-ink);
}

.fall__intro {
  left: 5.291cqw;
  top: 5.291cqw;
  width: 40.807cqw;
}

.fall__sketch-1 {
  left: 5.423cqw;
  top: 86.111cqw;
  width: 18.452cqw;
}

.fall__sketch-2 {
  left: 57.937cqw;
  top: 24.008cqw;
  width: 23.413cqw;
}

.fall__sketch-3,
.fall__sketch-4 {
  left: 69.378cqw;
  width: 20.172cqw;
}

.fall__sketch-3 {
  top: 48.082cqw;
}

.fall__sketch-4 {
  top: 54.960cqw;
}

.fall__clip {
  left: 28.770cqw;
  top: 74.074cqw;
  width: 42.659cqw;
  aspect-ratio: 645 / 363;
  object-fit: cover;
}

.fall__player {
  left: 5.423cqw;
  top: 120.767cqw;
}

/* notebook pages, one at a time; arrows sit outside the page */
.fall__carousel {
  position: absolute;
  left: 5.225cqw;
  top: 182.209cqw;
  width: 90.675cqw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fall__slides {
  position: relative;
  width: 76.951%;
  aspect-ratio: 1055 / 746;
}

.fall__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  visibility: hidden;
}

.fall__slide.is-active {
  visibility: visible;
}

.fall__arrow {
  width: 1.323cqw;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.fall__arrow img {
  width: 100%;
}

.fall__arrow--prev img {
  transform: rotate(180deg);
}

.fall__page {
  width: 28.241cqw;
}

.fall__page--1 {
  left: 5.622cqw;
  top: 242.460cqw;
}

.fall__page--2 {
  left: 35.847cqw;
  top: 242.460cqw;
}

.fall__page--3 {
  left: 66.071cqw;
  top: 242.460cqw;
}

.fall__page--4 {
  left: 5.622cqw;
  top: 264.418cqw;
}

.fall__page--5 {
  left: 35.847cqw;
  top: 264.418cqw;
}

.fall__page--6 {
  left: 66.071cqw;
  top: 264.418cqw;
}

.fall__page--7 {
  left: 5.622cqw;
  top: 286.376cqw;
}

.fall__page--8 {
  left: 35.847cqw;
  top: 286.376cqw;
}

.fall__page--9 {
  left: 66.071cqw;
  top: 286.376cqw;
}

.fall__polaroid {
  left: 43.585cqw;
  top: 318.585cqw;
  width: 12.831cqw;
}

/* ---------- TASHKENT<3YOU (1512 x 3229) ---------- */

.tashkent-page {
  background: #c6e6f3;
}

.tashkent {
  aspect-ratio: 1512 / 3229;
  color: var(--color-ink);
}

.tashkent__intro {
  left: 28.836cqw;
  top: 5.291cqw;
  width: 42.328cqw;
  text-align: center;
}

.tashkent__player {
  left: 5.291cqw;
  top: 47.421cqw;
}

.tashkent__photo {
  left: 5.291cqw;
  width: 89.352cqw;
  aspect-ratio: 1351 / 761;
  object-fit: cover;
}

.tashkent__photo--1 {
  top: 102.712cqw;
}

.tashkent__photo--2 {
  top: 158.003cqw;
}

/* ---------- Blind zone (1512 x 1978) ---------- */

.blind-page,
.blind {
  background: #47365f;
}

.blind {
  aspect-ratio: 1512 / 1978;
}

.blind__intro,
.blind__story {
  left: 28.836cqw;
  width: 42.328cqw;
  text-align: center;
}

.blind__intro {
  top: 5.291cqw;
}

.blind__story {
  top: 76.124cqw;
}

.blind__open {
  position: absolute;
  left: 14.286cqw;
  top: 19.841cqw;
  width: 71.429cqw;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}

.blind__open img {
  width: 100%;
}

/* full-screen view of a single work; click anywhere or Esc to close */
.viewer {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 16px;
  border: 0;
  background: #000;
  cursor: zoom-out;
}

.viewer[open] {
  display: grid;
  place-items: center;
}

.viewer img {
  max-width: 100%;
  max-height: calc(100vh - 32px);
  width: auto;
  height: auto;
}

/* ---------- Women of Our Mahalla (27452 x 982, scrolls sideways) ----------
   The frame is scaled to the window height, so offsets are Figma px / 9.82
   in cqh */

.mahalla-page {
  background: #fff;
}

.mahalla {
  width: calc(100vh * 27452 / 982);
  height: 100vh;
  container-type: size;
  color: var(--color-ink);
  font-size: 1.527cqh;
}

@media (min-width: 881px) {
  .mahalla-page {
    overflow-y: hidden;
  }

  /* the floating layer is the window, not the wide frame: keep the corner
     layout pinned to the window's right edge (Figma px from x 1512 / 9.82) */
  .mahalla-page .work__hand {
    left: calc(100cqw - 16.090cqh);
    width: 16.090cqh;
  }

  .mahalla-page .work__menu {
    left: calc(100cqw - 9.165cqh);
    top: 8.147cqh;
  }

  .mahalla-page .work__menu,
  .mahalla-page .menu {
    font-size: 1.527cqh;
  }

  .mahalla-page .menu {
    left: calc(100cqw - 62.322cqh);
    max-height: calc(100cqh - 8.147cqh);
    top: 8.147cqh;
    width: 59.063cqh;
    padding: 0.815cqh 2.037cqh 1.293cqh;
  }
}

.mahalla__intro,
.mahalla__opening {
  top: 8.147cqh;
  width: 62.831cqh;
}

.mahalla__intro {
  left: 8.147cqh;
}

.mahalla__opening {
  left: 2637.475cqh;
}

.mahalla__dscf7037 {
  left: 81.365cqh;
  top: 12.226cqh;
  width: 50.333cqh;
}

.mahalla__dscf7166 {
  left: 149.398cqh;
  top: 26.860cqh;
  width: 70.802cqh;
}

.mahalla__dscf7151 {
  left: 238.000cqh;
  top: 18.060cqh;
  width: 94.337cqh;
}

.mahalla__dscf6967 {
  left: 350.136cqh;
  top: 21.719cqh;
  width: 37.675cqh;
}

.mahalla__dscf7740 {
  left: 405.611cqh;
  top: 37.936cqh;
  width: 37.774cqh;
}

.mahalla__dscf7376 {
  left: 461.086cqh;
  top: 31.113cqh;
  width: 56.662cqh;
}

.mahalla__dscf7671 {
  left: 535.448cqh;
  top: 18.060cqh;
  width: 94.436cqh;
}

.mahalla__dscf7690 {
  left: 647.683cqh;
  top: 18.060cqh;
  width: 42.422cqh;
}

.mahalla__dscf7917 {
  left: 647.683cqh;
  top: 52.769cqh;
  width: 42.422cqh;
}

.mahalla__dscf8115 {
  left: 707.904cqh;
  top: 18.060cqh;
  width: 94.337cqh;
}

.mahalla__dscf8130 {
  left: 820.041cqh;
  top: 18.060cqh;
  width: 56.563cqh;
}

.mahalla__dscf8290 {
  left: 894.403cqh;
  top: 43.276cqh;
  width: 56.662cqh;
}

.mahalla__dscf8402 {
  left: 968.765cqh;
  top: 18.060cqh;
  width: 94.436cqh;
}

.mahalla__dscf8617 {
  left: 1080.901cqh;
  top: 18.060cqh;
  width: 42.521cqh;
}

.mahalla__dscf8443 {
  left: 1137.563cqh;
  top: 52.769cqh;
  width: 42.422cqh;
}

.mahalla__dscf8631 {
  left: 1197.784cqh;
  top: 14.995cqh;
  width: 44.004cqh;
}

.mahalla__dscf8626 {
  left: 1259.588cqh;
  top: 31.113cqh;
  width: 56.662cqh;
}

.mahalla__dscf8673 {
  left: 1333.950cqh;
  top: 18.554cqh;
  width: 94.436cqh;
}

.mahalla__dscf8702 {
  left: 1446.087cqh;
  top: 53.164cqh;
  width: 42.521cqh;
}

.mahalla__dscf8820 {
  left: 1506.308cqh;
  top: 31.113cqh;
  width: 56.662cqh;
}

.mahalla__dscf8872 {
  left: 1580.769cqh;
  top: 18.554cqh;
  width: 94.337cqh;
}

.mahalla__dscf8869 {
  left: 1692.905cqh;
  top: 18.554cqh;
  width: 47.169cqh;
}

.mahalla__dscf8792 {
  left: 1754.709cqh;
  top: 50.099cqh;
  width: 47.169cqh;
}

.mahalla__dscf9080 {
  left: 1819.676cqh;
  top: 18.554cqh;
  width: 94.337cqh;
}

.mahalla__dscf9021 {
  left: 1931.813cqh;
  top: 18.554cqh;
  width: 42.422cqh;
}

.mahalla__dscf9119 {
  left: 1931.813cqh;
  top: 53.164cqh;
  width: 42.422cqh;
}

.mahalla__dscf8908 {
  left: 1992.035cqh;
  top: 31.113cqh;
  width: 56.563cqh;
}

.mahalla__dscf9219 {
  left: 2066.396cqh;
  top: 18.554cqh;
  width: 56.662cqh;
}

.mahalla__dscf9192 {
  left: 2140.759cqh;
  top: 18.554cqh;
  width: 94.436cqh;
}

.mahalla__dscf9238 {
  left: 2252.895cqh;
  top: 50.000cqh;
  width: 47.169cqh;
}

.mahalla__dscf9333 {
  left: 2317.863cqh;
  top: 18.554cqh;
  width: 94.337cqh;
}

.mahalla__dscf9288 {
  left: 2429.999cqh;
  top: 26.367cqh;
  width: 31.446cqh;
}

.mahalla__dscf9322 {
  left: 2479.146cqh;
  top: 35.859cqh;
  width: 42.521cqh;
}

.mahalla__dscf9257 {
  left: 2539.367cqh;
  top: 16.973cqh;
  width: 56.662cqh;
}

.mahalla__opening-4373 {
  left: 2637.576cqh;
  top: 17.006cqh;
  width: 31.466cqh;
}

.mahalla__opening-4416 {
  left: 2675.560cqh;
  top: 17.006cqh;
  width: 41.955cqh;
}

.mahalla__opening-4417 {
  left: 2724.033cqh;
  top: 17.006cqh;
  width: 41.853cqh;
}

.mahalla__opening-4434 {
  left: 2675.560cqh;
  top: 56.212cqh;
  width: 41.853cqh;
}

.mahalla__opening-4465 {
  left: 2724.033cqh;
  top: 56.212cqh;
  width: 17.617cqh;
}

/* ---------- Bio (1512 wide, grows with the text) ---------- */

.bio-page,
.bio {
  background: #9bd5c1;
}

.bio {
  color: var(--color-ink);
}

.bio__text {
  width: 39.418cqw;
  margin-left: 5.291cqw;
  padding: 5.291cqw 0 7.672cqw;
}

.bio__heading {
  margin: 4.21em 0 2.105em;
  font: inherit;
  text-decoration: underline wavy;
  text-decoration-thickness: 6%;
  text-decoration-skip-ink: none;
}

.bio__list li {
  position: relative;
  padding-left: 0.75em;
}

.bio__list li::before {
  content: "-";
  position: absolute;
  left: 0.25em;
}

.bio__list + p {
  margin-top: 2.105em;
}

/* ==========================================================
   Mobile: linear, readable layout
   ========================================================== */

@media (max-width: 880px) {
  .work {
    aspect-ratio: auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    gap: 32px;
    /* leaves room for the floating Menu line and the hand */
    padding: calc(96px + 2.105em) 24px 32px;
    font-size: 16px;
  }

  .work__menu,
  .menu {
    font-size: 16px;
  }

  .work__menu {
    left: 24px;
    top: 32px;
  }

  .work__hand {
    left: auto;
    right: 0;
    width: 96px;
  }

  .menu {
    left: 16px;
    right: 16px;
    top: 24px;
    width: auto;
    padding: 8px 20px 12px;
    max-height: calc(100cqh - 48px);
  }

  .mahalla {
    width: 100%;
    height: auto;
    container-type: inline-size;
  }

  .bio__text {
    width: auto;
    margin: 0;
    padding: 0;
  }

  .work__text,
  .work__img,
  .work__player,
  .fall__carousel,
  .blind__open,
  .ghosts__pile {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: auto;
  }

  .film__background {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .fall__arrow {
    width: 16px;
  }

  .fall__slides {
    width: calc(100% - 56px);
  }

  .work__player {
    padding: 24px;
    text-align: center;
  }

}