:root {
  color-scheme: light;
  --paper: #fff;
  --ink: #111;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--paper); }
body { color: var(--ink); font-family: "Times New Roman", Times, serif; }
.work-page { position: relative; width: 100vw; height: 100svh; min-height: 820px; overflow: hidden; background: var(--paper); }
.work-list { position: absolute; inset: 0; z-index: 2; }
.work-title, .contact-label, .dont-click {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font: 400 clamp(16px, 1.02vw, 18px)/1.14 "Times New Roman", Times, serif;
  text-align: center;
  text-decoration: none;
}
.work-title { cursor: pointer; transition: opacity 180ms ease, font-style 180ms ease; }
.work-title:hover, .work-title:focus-visible { font-style: italic; outline: none; }
.work-title:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.title-dior { top: 18.4vh; left: 12.2vw; }
.title-vogue { top: 25.0vh; left: 9.2vw; }
.title-met { top: 28.7vh; left: 7.4vw; }
.title-bella { top: 32.3vh; left: 7.9vw; }
.title-bfa { top: 38.1vh; left: 8.7vw; }
.title-hollywood { top: 41.8vh; left: 9.8vw; }
.title-bts { top: 47.7vh; left: 12.2vw; }
.title-kate { top: 54vh; left: 13.8vw; white-space: nowrap; }
.title-victoria { top: 57.0vh; left: 15.5vw; }
.title-pillow { top: 66.4vh; left: 22.5vw; }
.title-met-2022 { top: 71.9vh; left: 29.1vw; }
.dont-click { top: 76.8vh; left: 36.6vw; white-space: nowrap; font-size: clamp(14px, .94vw, 16px); }
.contact-label { top: 79.6vh; left: 9.8vw; }
.image-panel {
  position: absolute;
  top: 15.8vh;
  right: 16.4vw;
  width: min(31.7vw, 540px);
  aspect-ratio: .98;
  overflow: hidden;
  background: #d9d2c1;
}
.panel-image { position: absolute; top: 0; left: 0; display: block; max-width: none; object-fit: fill; will-change: opacity; transition: opacity 460ms cubic-bezier(.22, .61, .36, 1); }
.panel-image-current { z-index: 0; opacity: 1; }
.panel-image-next { z-index: 1; opacity: 0; }
.panel-image-next.is-visible { opacity: 1; }
.video-layer { position: absolute; z-index: 2; inset: 0; overflow: hidden; background: #000; opacity: 0; transition: opacity 300ms ease; }
.video-layer.is-playing { opacity: 1; }
.video-layer iframe { position: absolute; top: 0; left: -38.89%; width: 177.78%; height: 112%; border: 0; pointer-events: none; }
.image-panel.has-video .panel-shade, .image-panel.has-video .panel-details { display: none; }
.panel-shade { position: absolute; z-index: 3; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(0 0 0 / .19), transparent 32%); }
.panel-details { position: absolute; z-index: 4; top: 17px; left: 28px; display: flex; flex-direction: column; margin: 0; color: #fff; font-size: clamp(17px, 1.15vw, 20px); line-height: 1.2; text-shadow: 0 1px 5px rgb(0 0 0 / .2); }
.panel-details span:empty { display: none; }
.panel-details #detail-credit.is-narrow { max-width: 25%; white-space: pre-line; }
.project-gallery {
  position: fixed;
  width: min(92vw, 1380px);
  height: min(94vh, 1050px);
  max-width: none;
  max-height: none;
  padding: clamp(28px, 4vw, 64px) clamp(28px, 6vw, 92px);
  border: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--paper);
  font-family: "Times New Roman", Times, serif;
}
.project-gallery::backdrop { background: rgb(255 255 255 / .97); }
.gallery-close {
  position: absolute;
  top: 22px;
  right: 26px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 300 34px/1 "Times New Roman", Times, serif;
  cursor: pointer;
}
.gallery-heading { margin: 0 auto 22px; max-width: 1120px; }
.gallery-heading > span, .gallery-heading p { margin: 0; font-size: 15px; }
.gallery-heading h1 { margin: 4px 0; font-size: clamp(25px, 3vw, 40px); font-weight: 400; }
.gallery-content { display: grid; gap: 22px; max-width: 1120px; margin: 0 auto; }
.gallery-player { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.gallery-player[hidden] { display: none; }
.gallery-player iframe { position: absolute; top: 0; left: 0; width: 100%; height: 112%; border: 0; pointer-events: none; }
.gallery-player.video-list { position: static; aspect-ratio: auto; overflow: visible; background: transparent; }
.gallery-video-list { display: grid; gap: 22px; }
.gallery-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #111; }
.gallery-video-frame iframe { position: absolute; top: 0; left: 0; width: 100%; height: 112%; border: 0; pointer-events: none; }
.gallery-stills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gallery-stills img { display: block; width: 100%; height: clamp(180px, 24vh, 285px); object-fit: contain; background: #f5f4f1; }
.gallery-stills.single { grid-template-columns: minmax(260px, 560px); justify-content: center; }
.gallery-stills.single img { height: clamp(360px, 58vh, 640px); background: transparent; }
.gallery-stills.video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.gallery-stills.mixed-media { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.gallery-stills.mixed-media img { height: clamp(190px, 31vh, 350px); }
.gallery-video-card { margin: 0; min-width: 0; }
.gallery-video-card video { display: block; width: 100%; aspect-ratio: 9 / 16; max-height: 70vh; object-fit: contain; background: #111; }
.gallery-video-card figcaption { padding-top: 7px; font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; }
}