/* ---------- Tokens ---------- */

:root {
  --black: #000;
  --ink: #f4f2ef;
  --ink-rgb: 244, 242, 239;
  --muted: #8c8783;

  --serif: "Playfair Display", "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --pad: clamp(14px, 2.6vw, 34px);
  --tap: 44px; /* smallest comfortable touch target */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1); /* quick start, long soft landing: for things arriving */

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  /* Set from main.js to suit the viewport. */
  --perspective: 1150px;
  --card-width: 200px;
}

/* ---------- Base ---------- */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The gutter is reserved so the layout does not shift when scrolling is
   locked and unlocked. */
html {
  background: var(--black);
  scrollbar-gutter: stable;
}

html.is-loading,
html.is-lightbox-open {
  overflow: hidden;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  background: var(--black);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
}

button {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

a {
  -webkit-tap-highlight-color: transparent;
}

:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Everything outside the sphere stays hidden until the photos are ready. */
.fades-in {
  opacity: 0;
  transition: opacity 1.2s var(--ease) .15s;
}

.is-ready .fades-in {
  opacity: 1;
}

/* Menu links, gallery tiles and the lightbox caption all arrive with
   this. Only the starting point is given, so each one lands on whatever
   its own styles say and its hover styles still work afterwards. */
@keyframes arrive {
  from { opacity: 0; transform: translateY(var(--rise, 12px)); }
}

/* The page is 16vh taller than the screen. That short scroll drives the
   zoom on the sphere and nothing else. */
.scroll-track {
  height: 116vh;
  pointer-events: none;
}

/* ---------- Loader ---------- */

.loader {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 26px;
  background: var(--black);
  transition: opacity .6s var(--ease);
}

.is-ready .loader {
  opacity: 0;
  pointer-events: none;
}

.loader__name {
  font-family: var(--serif);
  font-size: clamp(28px, 4.4vw, 52px);
  font-weight: 400;
  letter-spacing: .005em;
  opacity: 0;
  animation: rise-in 1.25s var(--ease) .15s forwards;
}

.loader__track {
  width: clamp(120px, 17vw, 210px);
  height: 1px;
  overflow: hidden;
  background: rgba(var(--ink-rgb), .16);
  opacity: 0;
  animation: rise-in .9s var(--ease) .5s forwards;
}

.loader__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .55s var(--ease);
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:
    calc(var(--pad) * .8 + var(--safe-top))
    calc(var(--pad) + var(--safe-right))
    calc(var(--pad) * .35)
    calc(var(--pad) + var(--safe-left));
  color: #fff;
  mix-blend-mode: difference; /* stays legible over light and dark photos */
}

.wordmark {
  color: inherit;
  font-family: var(--serif);
  font-size: clamp(19px, 2.1vw, 27px);
  font-weight: 400;
  letter-spacing: .005em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.menu-toggle {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding-left: 12px;
  font-size: 11px;
  letter-spacing: .18em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* "Menu" and "Close" are stacked in a window one line tall. Opening the
   menu slides the stack up so the second word replaces the first. */
.menu-toggle__words {
  display: block;
  height: 1.3em;
  overflow: hidden;
  text-align: right;
}

.menu-toggle__words span {
  display: block;
  transition: transform .5s var(--ease);
}

.menu-toggle__mark {
  width: 7px;
  height: 7px;
  background: currentColor;
  transition: transform .5s var(--ease);
}

.menu-toggle:hover .menu-toggle__mark {
  transform: scale(1.45);
}

.is-menu-open .site-header {
  z-index: 90;
  color: var(--ink);
  mix-blend-mode: normal;
}

.is-menu-open .menu-toggle__words span {
  transform: translateY(-100%);
}

/* Matches the hover rule's weight so the diamond holds while hovered. */
.is-menu-open .menu-toggle .menu-toggle__mark {
  transform: rotate(45deg);
}

/* ---------- Studio card ---------- */

.studio {
  position: fixed;
  left: calc(var(--pad) + var(--safe-left));
  bottom: calc(var(--pad) + var(--safe-bottom));
  z-index: 55;
  max-width: min(320px, 46vw);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.studio__id {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.studio__logo {
  flex: none;
  width: 52px;
  height: 52px;
}

.studio__name {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: .01em;
}

.studio__blurb {
  color: rgba(var(--ink-rgb), .72);
  font-size: 12.5px;
  line-height: 1.62;
}

.is-gallery .studio,
.is-lightbox-open .studio {
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
}

/* ---------- Drag hint ---------- */

.hint {
  position: fixed;
  left: 50%;
  bottom: calc(var(--pad) + var(--safe-bottom) + 4px);
  z-index: 54;
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(var(--ink-rgb), .42);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity .6s var(--ease);
}

.hint__line {
  position: relative;
  display: block;
  width: 44px;
  height: 1px;
  overflow: hidden;
  background: rgba(var(--ink-rgb), .28);
}

.hint__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: translateX(-100%);
  animation: sweep 4.6s var(--ease) infinite;
}

@keyframes sweep {
  0%   { transform: translateX(-100%); }
  55%  { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* It also goes for good once the sphere has been turned. */
.has-turned .hint,
.is-gallery .hint,
.is-lightbox-open .hint {
  opacity: 0;
  pointer-events: none;
}

/* ---------- Sphere ---------- */

.sphere {
  position: fixed;
  inset: 0;
  z-index: 10;
  overflow: clip;
  perspective: var(--perspective);
  perspective-origin: 50% 50%;
  touch-action: none; /* dragging turns the sphere; the wheel scrolls the page */
  -webkit-user-select: none;
  user-select: none;  /* a drag would otherwise select the photos and tint them */
  transition: opacity .75s var(--ease), filter .75s var(--ease);
}

/* On touch screens a vertical swipe still scrolls the page. */
@media (pointer: coarse) {
  .sphere {
    touch-action: pan-y;
  }
}

.is-gallery .sphere {
  opacity: 0;
  filter: blur(14px);
  pointer-events: none;
}

.sphere__world {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Cards are centred on the world's origin, then placed in 3D by main.js. */
.card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--card-width);
  height: calc(var(--card-width) / 1.5);
  margin-left: calc(var(--card-width) / -2);
  margin-top: calc(var(--card-width) / -3);
}

/* An upright card is narrower, so it covers the same area as the others. */
.card--portrait {
  --portrait-width: calc(var(--card-width) * .73);
  width: var(--portrait-width);
  height: calc(var(--portrait-width) * 1.25);
  margin-left: calc(var(--portrait-width) / -2);
  margin-top: calc(var(--portrait-width) * -.625);
}

.card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 3px;
  background: #0a0a0a;
  transition: transform .5s var(--ease);
}

.card:hover .card__face {
  transform: scale(1.045);
}

/* Cards further from the viewer are darkened with a black wash set by
   --shade. A CSS filter would look the same but costs far more to draw
   on every card at once. */
.card__face::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: rgba(0, 0, 0, var(--shade, 0));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
  pointer-events: none;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}

.card img.is-loaded {
  opacity: 1;
}

/* A photo's clip is drawn on a canvas laid over the still. It fades in
   once the first frame is ready and fades back out when it stops. */
.card__motion,
.gallery__motion,
.lightbox__motion {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--ease);
}

.card__motion.is-playing,
.gallery__motion.is-playing,
.lightbox__motion.is-playing {
  opacity: 1;
}

/* Photos that arrive after the loader has gone fade in; the rest are
   already in place. */
.is-ready .card img {
  transition: opacity .8s ease-out;
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 12;
  background: radial-gradient(ellipse 88% 92% at 50% 50%,
    rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .26) 80%, rgba(0, 0, 0, .72) 100%);
  pointer-events: none;
  transition: opacity .6s var(--ease);
}

.is-gallery .vignette,
.is-lightbox-open .vignette {
  opacity: 0;
}

/* ---------- Gallery ---------- */

.gallery {
  --gallery-top: calc(var(--pad) * 3.4);
  --gallery-bottom: calc(var(--pad) * 1.6 + var(--tap)); /* clears the close button */
  --gallery-gap: clamp(10px, 1.4vw, 20px);

  position: fixed;
  inset: 0;
  z-index: 20;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--gallery-top) var(--pad) var(--gallery-bottom);
  background: var(--black);
  opacity: 0;
  pointer-events: none;
  transition: opacity .6s var(--ease);
}

.is-gallery .gallery {
  opacity: 1;
  pointer-events: auto;
}

.gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* twelve tiles make three rows */
  gap: var(--gallery-gap);
  /* Three rows of 3:2 tiles are half as tall as the grid is wide, so capping
     the width at twice the free height keeps every row on screen. */
  max-width: min(1680px, calc((100dvh - var(--gallery-top) - var(--gallery-bottom)) * 2 - var(--gallery-gap) - 2px));
  margin: 0 auto;
}

.gallery__item {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 3px;
  background: #0b0b0b;
}

/* Tiles arrive one after another; --i is the tile's position, set by
   main.js. They wait for the menu's wipe to clear the top row first, and
   the delay stops growing after the first few rows. */
.is-gallery .gallery__item {
  --rise: 22px;
  animation: arrive .9s var(--ease-out) backwards;
  animation-delay: calc(380ms + min(var(--i, 0), 14) * 45ms);
}

.gallery__item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .82;
  transition: transform .8s var(--ease), opacity .6s;
}

.gallery__item:hover img {
  opacity: 1;
  transform: scale(1.05);
}

/* The clip grows with the still beneath it. */
.gallery__motion {
  transition: opacity .4s var(--ease), transform .8s var(--ease);
}

.gallery__item:hover .gallery__motion {
  transform: scale(1.05);
}

.gallery__title {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 14px 12px;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s, transform .4s var(--ease);
}

.gallery__item:hover .gallery__title {
  opacity: 1;
  transform: none;
}

/* Four squares, bottom left, shown only in the gallery. */
.gallery-close {
  position: fixed;
  left: calc(var(--pad) + var(--safe-left));
  bottom: calc(var(--pad) + var(--safe-bottom));
  z-index: 56;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: var(--tap);
  height: var(--tap);
  padding: 5px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.gallery-close span {
  display: block;
  border-radius: 2px;
  background: var(--ink);
  transition: background .3s, transform .4s var(--ease);
}

.is-gallery .gallery-close {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.is-gallery .gallery-close span:nth-child(1) {
  transform: translate(3px, 3px);
}

.is-gallery .gallery-close span:nth-child(4) {
  transform: translate(-3px, -3px);
}

.gallery-close:hover span {
  background: #fff;
  transform: scale(.86);
}

/* ---------- Lightbox ---------- */

/* There is no dark backdrop: the sphere stays visible, dimmed, behind the
   open photo. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: clamp(56px, 8vh, 84px) var(--pad);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s var(--ease);
}

.is-lightbox-open .lightbox {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
}

.lightbox__frame {
  position: relative;
  width: min(72vw, 860px, calc((100vh - 230px) * 1.5));
  transform-origin: 50% 50%;
  transition: transform .62s var(--ease), opacity .42s var(--ease);
}

.lightbox__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  border-radius: 2px;
  background: #0b0b0b;
  box-shadow: 0 30px 90px rgba(0, 0, 0, .75);
}

.lightbox__photo img {
  width: 100%;
  height: 100%;
  border-radius: 2px;
  object-fit: cover;
}

.lightbox__motion {
  border-radius: 2px;
}

.lightbox__close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 3;
  min-width: var(--tap);
  min-height: var(--tap);
  padding: 10px 14px;
  border: 1px solid rgba(var(--ink-rgb), .78);
  border-radius: 6px;
  background: rgba(0, 0, 0, .7); /* keeps the label readable over the dots */
  color: var(--ink);
  font-size: 12.5px;
  letter-spacing: .01em;
  line-height: 1;
  transition: border-color .35s, background .35s;
}

.lightbox__close:hover {
  border-color: #fff;
  background: rgba(0, 0, 0, .55);
}

.lightbox__caption {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(22px, 3.2vw, 48px);
  padding-top: 16px;
}

/* The words follow the photo in, the title a beat before the rest. */
.is-lightbox-open .lightbox__caption > * {
  animation: arrive .8s var(--ease-out) .26s backwards;
}

.is-lightbox-open .lightbox__caption > * + * {
  animation-delay: .36s;
}

.lightbox__title {
  margin-bottom: 6px;
  font-family: var(--serif);
  font-size: clamp(22px, 2.15vw, 32px);
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.08;
}

.lightbox__place {
  color: rgba(var(--ink-rgb), .62);
  font-size: 13px;
}

.lightbox__note {
  color: rgba(var(--ink-rgb), .92);
  font-size: 13.5px;
  line-height: 1.55;
}

/* One line per detail of a job: a short label, then its value. */
.lightbox__job div {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 14px;
  padding: 6px 0;
  border-top: 1px solid rgba(var(--ink-rgb), .16);
  font-size: 13px;
  line-height: 1.45;
}

.lightbox__job div:first-child {
  padding-top: 0;
  border-top: 0;
}

.lightbox__job dt {
  color: rgba(var(--ink-rgb), .62);
}

.lightbox__job dd {
  color: rgba(var(--ink-rgb), .92);
}

/* ---------- Menu ---------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: #050505;
  clip-path: inset(0 0 100% 0); /* wipes down from the top when opened */
  pointer-events: none;
  transition: clip-path .85s var(--ease);
}

.is-menu-open .menu {
  clip-path: inset(0 0 0 0);
  pointer-events: auto;
}

.menu__links {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 1vw, 10px);
  text-align: center;
}

.menu__link {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(34px, 7.6vw, 78px);
  font-weight: 400;
  line-height: 1.08;
  text-decoration: none;
  opacity: .55;
  transition: opacity .4s, letter-spacing .5s var(--ease);
}

.menu__link:hover {
  letter-spacing: .012em;
  opacity: 1;
}

/* Each link rises in a beat after the one above it, behind the wipe. */
.is-menu-open .menu__link,
.is-menu-open .menu__email {
  --rise: .5em;
  animation: arrive .95s var(--ease-out) .2s backwards;
}

.is-menu-open .menu__link:nth-child(2) { animation-delay: .28s; }
.is-menu-open .menu__link:nth-child(3) { animation-delay: .36s; }
.is-menu-open .menu__email { animation-delay: .5s; }

.menu__email {
  position: absolute;
  left: calc(var(--pad) + var(--safe-left));
  bottom: calc(var(--pad) + var(--safe-bottom));
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.7;
  text-decoration: none;
}

/* ---------- Cursor ---------- */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 19px;
  height: 19px;
  margin: -9.5px 0 0 -9.5px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: rgba(214, 212, 209, .9);
  mix-blend-mode: difference;
  pointer-events: none;
  opacity: 0; /* until the mouse first moves, and while it is off the page */
  transition:
    width .35s var(--ease),
    height .35s var(--ease),
    margin .35s var(--ease),
    background .35s var(--ease),
    border-color .35s var(--ease),
    opacity .3s var(--ease),
    scale .3s var(--ease);
}

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

/* It tightens while the mouse button is held. main.js moves the dot with
   `translate`, which the browser applies before `scale`, so the dot shrinks
   where it sits. A position set with `transform` is applied after `scale`
   and would be shrunk along with the dot. */
.cursor.is-pressed {
  scale: .72;
}

/* Over anything clickable it opens into a ring. */
.cursor.is-active {
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(var(--ink-rgb), .75);
  background: rgba(var(--ink-rgb), .14);
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* ---------- Smaller screens ---------- */

@media (max-width: 900px) {
  .studio {
    max-width: min(420px, calc(100vw - var(--pad) * 2 - var(--safe-left) - var(--safe-right)));
  }

  .studio__blurb {
    font-size: 12px;
  }

  .lightbox__frame {
    width: min(92vw, calc((100dvh - 220px) * 1.5));
  }

  .lightbox__caption {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-top: 14px;
  }

  .gallery {
    --gallery-top: calc(var(--pad) * 2.8 + var(--safe-top));
  }
}

@media (max-width: 768px) {
  .studio {
    max-width: calc(100vw - var(--pad) * 2 - var(--safe-left) - var(--safe-right));
  }

  .menu__link {
    font-size: clamp(28px, 9vw, 54px);
  }

  .menu__email {
    font-size: 11.5px;
  }
}

@media (max-width: 640px) {
  :root {
    --pad: clamp(12px, 4vw, 18px);
  }

  .studio__logo {
    width: 42px;
    height: 42px;
  }

  .studio__name {
    font-size: 17px;
  }

  .studio__blurb {
    font-size: 11.5px;
    line-height: 1.55;
  }

  .hint {
    display: none;
  }

  /* The photo and its caption stack and scroll instead of centring. */
  .lightbox {
    display: block;
    overflow-y: auto;
    padding:
      calc(52px + var(--safe-top))
      calc(var(--pad) + var(--safe-right))
      calc(18px + var(--safe-bottom))
      calc(var(--pad) + var(--safe-left));
  }

  .lightbox__frame {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
  }

  .lightbox__close {
    top: 8px;
    right: 8px;
  }

  .lightbox__title {
    font-size: clamp(20px, 5.6vw, 26px);
  }

  .lightbox__note {
    font-size: 12.5px;
    line-height: 1.58;
  }

  .gallery {
    padding:
      calc(var(--pad) * 2.4 + var(--safe-top))
      calc(var(--pad) + var(--safe-right))
      calc(var(--pad) * 2.8 + var(--safe-bottom))
      calc(var(--pad) + var(--safe-left));
  }

  /* Two columns make six rows, which scroll. */
  .gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    max-width: none;
  }

  /* No hover on a phone, so titles are always shown. */
  .gallery__title {
    padding: 18px 10px 8px;
    font-size: 13px;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 380px) {
  .studio__id {
    gap: 10px;
    margin-bottom: 10px;
  }

  .studio__blurb {
    display: none;
  }

  .gallery__grid {
    grid-template-columns: 1fr;
  }

  .menu__links {
    gap: 2px;
  }

  .menu__link {
    font-size: clamp(24px, 10vw, 40px);
  }
}

@media (max-height: 520px) and (orientation: landscape) {
  .site-header {
    padding-top: calc(8px + var(--safe-top));
  }

  .studio,
  .hint {
    display: none;
  }

  .lightbox {
    padding-top: calc(36px + var(--safe-top));
  }

  .lightbox__frame {
    width: min(58vw, calc((100dvh - 80px) * 1.5));
  }

  .lightbox__caption {
    padding-top: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .14s !important;
  }
}