:root {
  --sidebar-width: 634px;
  --stage-width: 1286px;
  --figma-width: 1920;
  --figma-height: 1080;
  --layout-scale: 1;
  --sidebar-text-scale: 1;
  --text: #000;
  --muted: #818181;
  --paper: #fff;
  --black: #000;
  --red: #cd1719;
  --gray: #818181;
  --font-main: "ABC Diatype Variable Unlicensed Trial", "ABC Diatype", Arial, Helvetica, sans-serif;
  --font-display: "Suisse Intl", "Helvetica Neue", Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--black);
  font-size: 16px;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--black);
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 17px;
  letter-spacing: 0;
  cursor: url("assets/cursor.svg") 0 0, auto;
}

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

a,
button,
iframe,
label,
summary,
select,
textarea,
input,
[role="button"],
[tabindex]:not([tabindex="-1"]),
[data-drag-scroll] {
  cursor: url("assets/cursor_click.svg") 0 0, pointer;
}

[data-drag-scroll] {
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

[data-drag-scroll]::-webkit-scrollbar {
  display: none;
}

img {
  display: block;
}

.site-shell {
  min-height: 100vh;
  background: var(--black);
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 20;
  width: calc(var(--sidebar-width) * var(--layout-scale));
  min-height: 100vh;
  background: var(--paper);
  border-right: 1px solid #d9d9d9;
  overflow: hidden;
}

.sidebar-inner {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--sidebar-width);
  height: 1080px;
  transform: scale(var(--layout-scale));
  transform-origin: top left;
}

.brand,
.bio-link {
  position: absolute;
  left: calc(8px * var(--sidebar-text-scale));
  top: calc(7px * var(--sidebar-text-scale));
  z-index: 3;
  width: calc(450px * var(--sidebar-text-scale));
  height: calc(25px * var(--sidebar-text-scale));
  font-size: calc(16px * var(--sidebar-text-scale));
  font-weight: 700;
  line-height: normal;
  white-space: nowrap;
}

.bio-link {
  top: auto;
  bottom: 0;
  display: none;
  width: 199px;
}

.project-nav {
  position: absolute;
  top: calc(32px * var(--sidebar-text-scale));
  left: 0;
  width: 100%;
  border-top: 1px solid #d9d9d9;
}

.project-nav a {
  display: block;
  width: 100%;
  height: calc(22px * var(--sidebar-text-scale));
  padding-left: calc(8px * var(--sidebar-text-scale));
  background: var(--paper);
  color: var(--black);
  font-size: calc(16px * var(--sidebar-text-scale));
  font-weight: 700;
  line-height: calc(22px * var(--sidebar-text-scale));
}

.project-nav a:hover,
.project-nav a:focus-visible,
.project-nav a.is-active {
  background: var(--black);
  color: var(--paper);
  outline: none;
}

.sidebar-details {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sidebar-details a {
  pointer-events: auto;
}

.sidebar dl {
  margin: 0;
}

.sidebar dt,
.sidebar dd {
  position: absolute;
  margin: 0;
  font-size: calc(16px * var(--sidebar-text-scale));
  letter-spacing: 0;
}

.sidebar dt {
  left: 8px;
  width: 149px;
  color: var(--muted);
  font-weight: 700;
  line-height: normal;
}

.sidebar dd {
  left: 108px;
  width: 490px;
  color: var(--black);
  font-weight: 400;
  line-height: calc(17px * var(--sidebar-text-scale));
}

.sidebar dd p {
  margin: 0 0 10px;
}

.sidebar dd p:last-child {
  margin-bottom: 0;
}

.project-details dl > div:nth-child(1) dt {
  top: 605px;
}

.project-details dl > div:nth-child(1) dd {
  top: 608px;
}

.project-details dl > div:nth-child(2) dt {
  top: 937px;
}

.project-details dl > div:nth-child(2) dd {
  top: 939px;
  width: 538px;
}

.project-details dl > div:nth-child(3) dt {
  top: 983px;
}

.project-details dl > div:nth-child(3) dd {
  top: 985px;
  width: 342px;
  line-height: calc(16px * var(--sidebar-text-scale));
}

.project-details dl > div:nth-child(4) dt {
  top: 1029px;
}

.project-details dl > div:nth-child(4) dd {
  top: 1031px;
  width: 538px;
}

.bio-details {
  display: none;
}

[data-route="home"] .project-details,
[data-route="bio"] .project-details,
[data-route="home"] .bio-details {
  display: none;
}

[data-route="bio"] .bio-details {
  top: calc(300px * var(--sidebar-text-scale));
  right: calc(36px * var(--sidebar-text-scale));
  bottom: calc(16px * var(--sidebar-text-scale));
  left: calc(8px * var(--sidebar-text-scale));
  display: block;
  overflow-y: auto;
  pointer-events: auto;
}

[data-route="bio"] .bio-details dl {
  display: grid;
  gap: calc(18px * var(--sidebar-text-scale));
  padding-bottom: calc(18px * var(--sidebar-text-scale));
}

[data-route="bio"] .bio-details dl > div {
  display: grid;
  grid-template-columns: calc(92px * var(--sidebar-text-scale)) minmax(0, 1fr);
  column-gap: calc(8px * var(--sidebar-text-scale));
}

[data-route="bio"] .bio-details dt,
[data-route="bio"] .bio-details dd {
  position: static;
  width: auto;
}

[data-route="bio"] .brand {
  width: calc(450px * var(--sidebar-text-scale));
}

[data-route="bio"] .brand::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: 1px;
  left: 0;
  height: 1px;
  background: var(--black);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms ease;
}

[data-route="bio"] .brand:hover::after {
  transform: scaleX(1);
}

[data-route="bio"] .bio-link {
  display: none;
}

[data-route="home"] .stage,
[data-route="bio"] .stage {
  min-height: 100vh;
  background: var(--paper);
}

.stage {
  position: relative;
  margin-left: calc(var(--sidebar-width) * var(--layout-scale));
  width: calc(var(--stage-width) * var(--layout-scale));
  min-height: var(--stage-height, 100vh);
  overflow-x: hidden;
  background: var(--black);
}

.description-toggle {
  display: none;
}

.empty-state {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--stage-width);
  min-height: max(1080px, calc(100vh / var(--layout-scale)));
  background: var(--paper);
  transform: scale(var(--layout-scale));
  transform-origin: top left;
}

.empty-state p {
  position: absolute;
  top: 605px;
  left: 108px;
  width: 490px;
  margin: 0;
  line-height: 17px;
}

.project-canvas {
  position: absolute;
  inset: 0 auto auto 0;
  width: var(--stage-width);
  min-height: var(--canvas-height);
  overflow: hidden;
  background: var(--canvas-bg, var(--paper));
  transform: scale(var(--layout-scale));
  transform-origin: top left;
}

.project-canvas img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.project-canvas .contain img {
  object-fit: contain;
}

.abs {
  position: absolute;
}

.svelo-canvas {
  --canvas-height: 4006px;
  --canvas-bg: #fff;
}

.svelo-canvas {
  --canvas-height: 4258px;
  --canvas-bg: #fff;
}

.svelo-title {
  top: 49px;
  left: 34px;
  z-index: 3;
  width: 680px;
  margin: 0;
  color: #000;
  font-family: var(--font-main);
  font-size: 64px;
  font-weight: 700;
  line-height: 58px;
}

.svelo-subtitle {
  top: 108px;
  left: 34px;
  z-index: 3;
  width: 690px;
  margin: 0;
  color: #000;
  font-family: var(--font-main);
  font-size: 24px;
  font-weight: 700;
  line-height: 26px;
}

.svelo-title,
.svelo-subtitle {
  display: none;
}

.svelo-logo {
  top: 49px;
  left: 34px;
  z-index: 3;
  width: 666px;
  height: 128px;
  margin: 0;
}

.svelo-logo img {
  object-fit: contain;
}

.svelo-hero {
  top: 117px;
  left: 13px;
  z-index: 1;
  width: 1273px;
  height: 1013px;
  transform: rotate(0.42deg);
  overflow: hidden;
}

.svelo-hero img {
  width: 151.69%;
  height: 127.45%;
  margin-left: -39.44%;
  margin-top: -22.11%;
}

.svelo-img-a {
  top: 1073px;
  left: 13px;
  width: 611px;
  height: 408px;
}

.svelo-img-a img {
  object-fit: contain;
}

.svelo-img-b {
  top: 1073px;
  left: 643px;
  width: 628px;
  height: 408px;
}

.svelo-img-c {
  top: 1498px;
  left: 13px;
  width: 1259px;
  height: 958px;
}

.svelo-img-d {
  top: 2473px;
  left: 13px;
  width: 1264px;
  height: 842px;
}

.svelo-img-e {
  top: 3315px;
  left: 13px;
  width: 1258px;
  height: 943px;
}

.blue-canvas {
  --canvas-height: 7552px;
  --canvas-bg: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  overflow: hidden;
}

.blue-canvas figure {
  margin: 0;
  overflow: hidden;
}

.blue-hero {
  width: 1286px;
  height: 1088px;
}

.blue-hero img {
  width: 106.24%;
  height: 100%;
  margin-left: -2.49%;
  object-fit: cover;
}

.blue-title-map {
  width: 1286px;
  height: 655px;
}

.blue-title-map img {
  object-fit: contain;
}

.blue-catalogues {
  width: 1231px;
  height: 318px;
}

.blue-catalogues img {
  object-fit: contain;
}

.blue-spread-system {
  position: relative;
  width: 1286px;
  height: 997px;
  padding-top: 183px;
  background: #000;
}

.blue-main-spread {
  position: absolute;
  top: 183px;
  left: 0;
  width: 725px;
  height: 631px;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
}

.blue-main-spread img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.blue-small-spreads {
  position: absolute;
  top: 230px;
  left: 742px;
  width: 374px;
  height: 698px;
}

.blue-spread-thumb {
  position: absolute;
  width: 181px;
  height: 150px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: 8px 8px 8px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  overflow: hidden;
}

.blue-spread-thumb:nth-child(1) {
  top: 1px;
  left: 0;
}

.blue-spread-thumb:nth-child(2) {
  top: 0;
  left: 191px;
}

.blue-spread-thumb:nth-child(3) {
  top: 173px;
  left: 0;
  width: 180px;
}

.blue-spread-thumb:nth-child(4) {
  top: 173px;
  left: 191px;
}

.blue-spread-thumb:nth-child(5) {
  top: 374px;
  left: 1px;
}

.blue-spread-thumb:nth-child(6) {
  top: 370px;
  left: 191px;
  width: 179px;
}

.blue-small-spreads img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.blue-book-grid {
  width: 1199px;
  height: 908px;
}

.blue-book-grid img {
  object-fit: contain;
}

.blue-installation-a {
  width: 1289px;
  height: 1441px;
}

.blue-installation-b {
  width: 1286px;
  height: 802px;
  margin-top: -10px;
}

.blue-installation-b img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.blue-installation-c {
  width: 1286px;
  height: 620px;
  margin-top: -10px;
}

.blue-installation-c img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.blue-cover-pair {
  display: grid;
  grid-template-columns: 643px 643px;
  gap: 0;
  width: 1286px;
  height: 643px;
  margin-top: -10px;
}

.blue-cover-pair figure {
  width: 643px;
  height: 643px;
}

.blue-cover-pair figure + figure {
  margin-left: -1px;
  width: 644px;
}

.blue-cover-pair img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.uncanny-canvas {
  --canvas-height: 9576px;
  --canvas-bg: #000;
  overflow: hidden;
  color: #fff;
}

.uncanny-canvas figure {
  margin: 0;
  overflow: hidden;
}

.uncanny-title {
  position: absolute;
  top: 30px;
  left: 12px;
  width: 1261px;
  height: 132px;
  margin: 0;
  color: #fff;
  font-family: "PP Neue Machina", var(--font-display);
  font-size: 64px;
  line-height: 1.03;
  text-align: center;
}

.uncanny-title p {
  margin: 0;
}

.uncanny-media {
  background: #000;
}

.uncanny-media img,
.uncanny-media video,
.uncanny-assonometria img,
.uncanny-research-stack img,
.uncanny-phone-row img,
.uncanny-spotify img {
  display: block;
  width: 100%;
  height: 100%;
}

.uncanny-sequence {
  position: absolute;
  top: 272px;
  left: 0;
  width: 1286px;
  height: 723px;
}

.uncanny-sequence img,
.uncanny-sequence video {
  object-fit: cover;
}

.uncanny-portrait {
  position: absolute;
  top: 1183px;
  left: 704px;
  width: 493px;
  height: 877px;
}

.uncanny-portrait img,
.uncanny-portrait video {
  object-fit: cover;
}

.uncanny-faces {
  position: absolute;
  top: 2357px;
  left: 0;
  width: 1286px;
  height: 722px;
}

.uncanny-faces img,
.uncanny-faces video {
  object-fit: cover;
}

.uncanny-assonometria {
  position: absolute;
  top: 3374px;
  left: 16px;
  width: 1253px;
  height: 705px;
  padding: 0;
}

.uncanny-assonometria img {
  object-fit: contain;
}

.uncanny-research-stack {
  position: absolute;
  top: 4243px;
  left: 68px;
  width: 1149px;
}

.uncanny-research-stack figure {
  position: absolute;
  left: 0;
  width: 1149px;
  height: 646px;
}

.uncanny-research-stack figure:first-child {
  top: 0;
  height: 514px;
}

.uncanny-research-stack figure:nth-child(2) {
  top: 678px;
}

.uncanny-research-stack figure:last-child {
  top: 1409px;
  height: 504px;
}

.uncanny-research-stack img {
  object-fit: cover;
}

.uncanny-phone-row {
  position: absolute;
  top: 6456px;
  left: 179px;
  display: flex;
  align-items: center;
  gap: 52px;
  padding: 0;
}

.uncanny-phone-row figure:nth-child(1) {
  width: 259px;
  height: 639px;
}

.uncanny-phone-row figure:nth-child(2) {
  width: 303px;
  height: 617px;
}

.uncanny-phone-row figure:nth-child(3) {
  width: 262px;
  height: 644px;
}

.uncanny-phone-row img {
  object-fit: contain;
}

.uncanny-gif {
  position: absolute;
  top: 7473px;
  left: 0;
  width: 1286px;
  height: 805px;
}

.uncanny-gif img,
.uncanny-gif video {
  object-fit: cover;
}

.uncanny-spotify {
  position: absolute;
  top: 8551px;
  left: 416px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 467px;
  min-height: 755px;
  padding-top: 0;
  color: #fff;
  font-family: "PP Neue Machina", var(--font-display);
  text-align: center;
}

.uncanny-qr {
  width: 467px;
  height: 467px;
}

.uncanny-code {
  width: 467px;
  height: 117px;
}

.uncanny-spotify img {
  object-fit: contain;
}

.uncanny-spotify p {
  width: 439px;
  margin: 91px 0 0;
  font-size: 39px;
  line-height: 1.1;
}

.youtube-canvas {
  --canvas-height: 7151px;
  --canvas-bg: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 323px;
  padding: 70px 0;
  overflow: hidden;
}

.youtube-canvas figure {
  margin: 0;
  overflow: hidden;
}

.youtube-canvas img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.youtube-hero {
  width: 1152px;
  height: 853px;
}

.youtube-chart {
  width: 1109px;
  height: 463px;
}

.youtube-data {
  width: 659px;
  height: 458px;
}

.youtube-strip {
  width: 1284px;
  height: 253px;
}

.youtube-production {
  width: 1286px;
  height: 2444px;
}

.youtube-final {
  width: 1286px;
  height: 925px;
  transform: rotate(-0.79deg);
}

.non-verbal-canvas {
  --canvas-height: 4656px;
  --canvas-bg: #000;
}

.non-verbal-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1286px;
  height: 4656px;
  margin: 0;
  overflow: hidden;
}

.non-verbal-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.non-verbal-pillow-gif {
  position: absolute;
  top: 1571px;
  left: -49px;
  z-index: 1;
  width: 1384px;
  height: 746px;
  margin: 0;
  overflow: hidden;
}

.non-verbal-pillow-gif img,
.non-verbal-pillow-gif video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.non-verbal-spread-group {
  position: absolute;
  top: 3165px;
  left: 25px;
  z-index: 2;
  width: 1259px;
  height: 744px;
  margin: 0;
  overflow: hidden;
  background: #000;
}

.non-verbal-spread-group img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.swup-canvas {
  --canvas-height: 6787px;
  --canvas-bg: #d7e0fe;
}

.swup-frame {
  position: absolute;
  top: 0;
  left: 0;
  width: 1286px;
  height: 6787px;
  margin: 0;
  overflow: hidden;
}

.swup-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.swup-video {
  position: absolute;
  top: 2981px;
  left: 0;
  z-index: 2;
  width: 1286px;
  height: 780px;
  background: #000;
  overflow: hidden;
}

.swup-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.swup-video-preview-mask {
  position: absolute;
  top: 3761px;
  left: 0;
  z-index: 1;
  width: 1286px;
  height: 984px;
  background: #d7e0fe;
  pointer-events: none;
}

.swup-video-fallback {
  position: absolute;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  padding: 10px 14px;
  color: #000;
  background: #fff;
  border-radius: 999px;
  font-size: 16px;
  line-height: 17px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 22%);
}

.sexy-canvas {
  --canvas-height: 5360px;
  --canvas-bg: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 10px 10px 130px;
}

.sexy-canvas figure {
  margin: 0;
}

.sexy-hero {
  width: 1286px;
  height: 1080px;
  overflow: hidden;
}

.sexy-hero img,
.sexy-hero video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sexy-pill {
  position: relative;
  width: 332px;
  height: 122px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 32px;
  line-height: normal;
  text-align: center;
}

.sexy-pill img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.sexy-pill span {
  position: relative;
  z-index: 1;
  font-weight: 500;
}

.sexy-pill .bold {
  font-weight: 700;
}

.sexy-research-image {
  width: 828px;
  height: 586px;
  overflow: hidden;
  background: #000;
}

.sexy-research-image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sexy-gallery {
  position: relative;
  width: 1289px;
  height: 599px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
}

.sexy-gallery:active {
  cursor: grabbing;
}

.sexy-gallery-track {
  position: relative;
  width: 2935px;
  height: 599px;
}

.sexy-gallery figure {
  position: absolute;
  top: 39px;
  width: 802px;
  height: 562px;
}

.sexy-gallery figure:nth-child(2) {
  top: 39px;
}

.sexy-gallery figure:nth-child(3) {
  top: 30px;
  width: 807px;
  height: 557px;
}

.sexy-gallery figure:nth-child(4) {
  top: 43px;
  width: 806px;
  height: 558px;
}

.sexy-publishing-image {
  width: 1289px;
  height: 725px;
  overflow: hidden;
}

.sexy-publishing-image img {
  display: block;
  width: 109.65%;
  height: 106.84%;
  margin-left: -9.65%;
  object-fit: cover;
}

.sexy-publishing-image video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sexy-title-block {
  position: relative;
  width: 1215px;
  height: 619px;
  margin: 0;
  color: #cf0;
}

.sexy-title-block figure {
  position: absolute;
  top: 0;
  left: 16px;
  width: 1199px;
  height: 583px;
}

.sexy-title-block img {
  width: 100%;
  height: 100%;
}

.sexy-title-block p {
  position: absolute;
  top: 595px;
  margin: 0;
  font-size: 13.575px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.sexy-caption-left {
  left: 0;
  width: 498px;
}

.sexy-caption-right {
  right: 0;
  width: 588px;
  text-align: right;
}

.sexy-link {
  display: block;
  width: 650px;
  height: 139px;
}

.sexy-link img {
  width: 100%;
  height: 100%;
}

.sexy-output {
  display: block;
  width: 868px;
  height: 480px;
  overflow: hidden;
  border: 3px solid #000;
}

.sexy-output img,
.sexy-output video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ugly-canvas {
  --canvas-height: 7865px;
  --canvas-bg: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 10px;
}

.ugly-hero-video {
  width: 1080px;
  height: 1135px;
  overflow: hidden;
}

.ugly-hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ugly-title-mark {
  width: 686px;
  height: 160px;
  margin: 0;
}

.ugly-quote,
.ugly-copy {
  margin: 0;
  color: var(--red);
  font-size: 20px;
  font-weight: 500;
  line-height: 19px;
}

.ugly-quote {
  width: 408px;
}

.ugly-copy {
  width: 408px;
}

.ugly-group {
  width: 699px;
  height: 131px;
  margin: 0;
}

.ugly-book-section {
  position: relative;
  width: 1288px;
  height: 980px;
}

.ugly-thumb-group {
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.ugly-thumb-group img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.ugly-thumb-group-top {
  top: 0;
  left: 154px;
  width: 940px;
  height: 132px;
}

.ugly-thumb-group-bottom {
  top: 850px;
  left: 164px;
  width: 919px;
  height: 130px;
}

.ugly-strip {
  position: absolute;
  top: 121px;
  left: 0;
  width: 1288px;
  height: 747px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
}

.ugly-strip:active {
  cursor: grabbing;
}

.ugly-strip-track {
  position: relative;
  width: 9160px;
  height: 747px;
}

.ugly-spread {
  position: absolute;
  top: -388px;
  width: 967px;
  height: 1289px;
}

.ugly-spread img {
  object-fit: cover;
}

.ugly-installation-hero {
  position: relative;
  width: 1306px;
  height: 1741px;
  overflow: visible;
}

.ugly-photo-a {
  position: absolute;
  inset: 0 auto auto 0;
  width: 1306px;
  height: 1741px;
  margin: 0;
}

.ugly-poster {
  position: absolute;
  top: 98px;
  left: 198px;
  width: 911px;
  height: 1511px;
  margin: 0;
  box-shadow: 40px 47px 21.2px 8px rgba(0, 0, 0, 0.25);
}

.ugly-final-gallery {
  display: grid;
  grid-template-columns: repeat(2, 653px);
  grid-template-rows: 871px 871px 871px 468px;
  width: 1306px;
  height: 3125px;
  overflow: hidden;
  background: #000;
}

.ugly-final-gallery figure {
  width: 653px;
  height: 871px;
  margin: 0;
  overflow: hidden;
}

.ugly-final-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ugly-final-gallery .rotate-crop {
  width: 655px;
  height: 468px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ugly-final-gallery .rotate-crop span {
  display: block;
  width: 468px;
  height: 655px;
  transform: rotate(-90deg);
}

.ugly-final-gallery .rotate-crop img {
  width: 133.55%;
  height: 127.26%;
  margin-left: -6.76%;
  margin-top: -13.76%;
}

.ugly-final-gallery .tall-crop {
  width: 651px;
  height: 468px;
}

.ugly-final-gallery .tall-crop img {
  width: 100.31%;
  height: 186.04%;
  margin-top: -47.32%;
}

.micia-canvas {
  --canvas-height: 10383px;
  --canvas-bg: #000;
  color: #ff169a;
  font-family: var(--font-main);
}

.micia-canvas figure {
  margin: 0;
  overflow: hidden;
}

.micia-canvas video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.micia-title {
  top: 253px;
  left: 402px;
  width: 482px;
  height: 317px;
  overflow: visible;
}

.micia-flash {
  top: 1313px;
  left: -151px;
  width: 1589px;
  height: 520px;
  animation: micia-flash 200ms steps(1, end) infinite;
}

.micia-flash img {
  position: absolute;
  left: 1px;
  width: 1587px;
  height: 275px;
  object-fit: contain;
}

.micia-flash-have {
  top: 0;
}

.micia-flash-lost {
  top: 245px;
}

@keyframes micia-flash {
  0%,
  49% {
    opacity: 1;
  }

  50%,
  100% {
    opacity: 0;
  }
}

.micia-group-87 {
  top: 2098px;
  left: -7px;
  width: 1292px;
  height: 726px;
}

.micia-word-grid {
  top: 2824px;
  left: -7px;
  width: 1299px;
  height: 732px;
  padding: 28px;
  background: #ff169a;
  overflow: hidden;
}

.micia-word-grid img {
  position: absolute;
  inset: 28px;
  width: calc(100% - 56px);
  height: calc(100% - 56px);
  object-fit: contain;
  opacity: 0;
  animation: micia-word-frame 4.2s steps(1, end) infinite;
  animation-delay: calc(var(--frame-index) * 200ms);
}

@keyframes micia-word-frame {
  0%,
  4.7618% {
    opacity: 1;
  }

  4.7619%,
  100% {
    opacity: 0;
  }
}

.micia-group-88 {
  top: 3556px;
  left: -7px;
  width: 1292px;
  height: 862px;
}

.micia-frame-20 {
  top: 4418px;
  left: 0;
  width: 1286px;
  height: 942px;
  display: grid;
  grid-template-columns: 532px 754px;
  overflow: hidden;
  background: #000;
}

.micia-frame-20 figure {
  width: 754px;
  height: 942px;
}

.micia-frame-20 video {
  width: 532px;
  height: 942px;
}

.micia-frame-16 {
  top: 5696px;
  left: 254px;
  width: 779px;
  height: 276px;
  overflow: visible;
}

.micia-mg {
  top: 6293px;
  left: 181px;
  width: 924px;
  height: 739px;
}

.micia-canvas .micia-reel {
  top: 7428px;
  left: 339px;
  width: 608px;
  height: 1080px;
  background: #000;
}

.micia-group-79 {
  top: 8904px;
  left: 20px;
  width: 1247px;
  height: 691px;
}

.micia-frame-19 {
  top: 9593px;
  left: 593px;
  width: 101px;
  height: 559px;
  overflow: visible;
}

@media (max-width: 1100px) {
  body {
    overflow-x: hidden;
  }
}

@media (min-width: 761px) and (max-height: 900px), (min-width: 761px) and (max-width: 1500px) {
  .project-details {
    top: calc(250px * var(--sidebar-text-scale));
    right: 12px;
    bottom: auto;
    left: 8px;
    height: calc(var(--viewport-height-unscaled) - (272px * var(--sidebar-text-scale)));
    overflow-y: auto;
    pointer-events: auto;
  }

  .project-details dl {
    display: grid;
    gap: 18px;
    padding: 0 18px 16px 0;
  }

  .project-details dl > div {
    display: grid;
    grid-template-columns: calc(92px * var(--sidebar-text-scale)) minmax(0, 1fr);
    column-gap: 8px;
  }

  .project-details dt,
  .project-details dd,
  .project-details dl > div:nth-child(n) dt,
  .project-details dl > div:nth-child(n) dd {
    position: static;
    width: auto;
  }

  .project-details dt {
    line-height: calc(17px * var(--sidebar-text-scale));
  }

  .project-details dd {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  html,
  body {
    width: 100%;
    min-height: 100%;
    overflow-x: hidden;
  }

  .sidebar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    width: 100vw;
    height: 230px;
    min-height: 0;
    background: var(--paper);
    border-right: 0;
    border-bottom: 1px solid #d9d9d9;
    overflow: visible;
  }

  .sidebar-inner {
    position: relative;
    width: 100vw;
    height: 230px;
    transform: none;
  }

  .brand {
    left: 8px;
    top: 7px;
    width: calc(100vw - 16px);
    height: 25px;
    font-size: 16px;
    white-space: nowrap;
  }

  .project-nav {
    top: 32px;
  }

  .project-nav a {
    width: 100vw;
    height: 22px;
    padding-left: 8px;
    font-size: 16px;
    line-height: 22px;
  }

  .bio-link {
    display: none;
  }

  .stage {
    margin-top: 230px;
    margin-left: 0;
    width: 100vw;
    min-height: var(--stage-height, calc(100vh - 230px));
  }

  [data-route="home"] .stage,
  [data-route="bio"] .stage {
    min-height: calc(100vh - 230px);
  }

  .project-canvas,
  .empty-state {
    width: var(--stage-width);
    transform: scale(var(--layout-scale));
    transform-origin: top left;
  }

  .description-toggle {
    position: fixed;
    left: 8px;
    bottom: 8px;
    z-index: 70;
    display: none;
    height: 22px;
    padding: 0 8px;
    border: 1px solid var(--black);
    border-radius: 0;
    background: var(--paper);
    color: var(--black);
    font: 700 16px/20px var(--font-main);
    letter-spacing: 0;
    cursor: pointer;
  }

  [data-route]:not([data-route="home"]):not([data-route="bio"]) .description-toggle {
    display: block;
  }

  .project-details {
    display: none;
  }

  [data-description-open="true"] .project-details {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: block;
    max-height: 72vh;
    padding: 36px 8px 42px;
    overflow-y: auto;
    background: var(--paper);
    border-top: 1px solid #d9d9d9;
    pointer-events: auto;
  }

  [data-description-open="true"] .project-details dl {
    display: grid;
    gap: 20px;
  }

  [data-description-open="true"] .project-details dl > div {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    column-gap: 8px;
  }

  [data-description-open="true"] .project-details dt,
  [data-description-open="true"] .project-details dd,
  [data-description-open="true"] .project-details dl > div:nth-child(n) dt,
  [data-description-open="true"] .project-details dl > div:nth-child(n) dd {
    position: static;
    width: auto;
    line-height: 17px;
  }

  [data-description-open="true"] .project-details dd {
    min-width: 0;
  }

  [data-description-open="true"] .description-toggle {
    background: var(--black);
    color: var(--paper);
  }
}