@font-face {
  font-display: swap;
  font-family: LZ;
  font-style: normal;
  font-weight: 400;
  src: url(./lz.ha95lv80.woff2) format("woff2"), url(./lz.ionqh5jx.woff) format("woff");
}

@font-face {
  font-display: swap;
  font-family: Neue-Montreal;
  font-style: normal;
  font-weight: 400;
  src: url(./neuemontreal.cqi9ibog.woff2) format("woff2"), url(./neuemontreal.h5e5gl63.woff) format("woff");
}

@font-face {
  font-display: swap;
  font-family: PPNeue-Montreal;
  font-style: normal;
  font-weight: 400;
  src: url(./ppneuemontreal-italic.k8mzpg6o.woff2) format("woff2"), url(./ppneuemontreal-italic.jc7t38tw.woff) format("woff");
}
*,
:after,
:before {
  box-sizing: border-box
}
* {
  margin: 0
}
body {
  line-height: 1.5
}
canvas,
img,
picture,
svg,
video {
  display: block;
  max-width: 100%
}
button,
input,
select,
textarea {
  font: inherit
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  overflow-wrap: break-word
}
#__next,
#root {
  isolation: isolate
}
button {
  background-color: transparent;
  border: none;
  padding: 0
}
ul {
  list-style: none;
  padding: 0
}
a {
  color: currentColor;
  text-decoration: none
}
@media (aspect-ratio >=1440/800) {
  :root {
      --ratio: 0.125vh
  }
}
@media (aspect-ratio <=1440/800) {
  :root {
      --ratio: 0.06944vw
  }
}
@media (width <=800px) and (aspect-ratio >=320/568) {
  :root {
      --ratio: 0.17606vh
  }
}
@media (width <=800px) and (aspect-ratio <=320/568) {
  :root {
      --ratio: 0.3125vw
  }
}
html {
  font-size: clamp(7px, 14px, 10 * var(--ratio))
}
body {
  font-family: Neue-Montreal, sans-serif;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-variant-ligatures: none;
  text-rendering: optimizelegibility;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  text-size-adjust: none
}
.display {
  font-family: Neue-Montreal, sans-serif;
  font-size: 12rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: 1
}
@media (min-width:801px) {
  .display {
      font-size: 15.2rem;
      line-height: 1
  }
}
.display-b {
  font-family: LZ, serif;
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: uppercase
}
@media (min-width:801px) {
  .display-b {
      font-size: 9rem
  }
}
.h1 {
  font-family: Neue-Montreal, sans-serif;
  font-size: 8rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .9
}
@media (min-width:801px) {
  .h1 {
      font-size: 10rem;
      line-height: .925
  }
}
.h2 {
  font-family: Neue-Montreal, sans-serif;
  font-size: 4.8rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .9
}
@media (min-width:801px) {
  .h2 {
      font-size: 7.8rem;
      line-height: .925
  }
}
.h3 {
  font-family: Neue-Montreal, sans-serif;
  font-size: 3.2rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .9
}
@media (min-width:801px) {
  .h3 {
      font-size: 4.6rem;
      line-height: .925
  }
}
.h4 {
  font-family: LZ, serif;
  font-size: 3.4rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: uppercase
}
@media (min-width:801px) {
  .h4 {
      font-size: 4.8rem
  }
}
.h5 {
  font-family: Neue-Montreal, sans-serif;
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .9
}
@media (min-width:801px) {
  .h5 {
      font-size: 4.2rem;
      line-height: .925
  }
}
.h5b {
  font-family: Neue-Montreal, sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .9
}
@media (min-width:801px) {
  .h5b {
      font-size: 3.6rem;
      line-height: .925
  }
}
.h6 {
  font-family: LZ, serif;
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1;
  text-transform: uppercase
}
@media (min-width:801px) {
  .h6 {
      font-size: 3.2rem
  }
}
.h7 {
  font-family: LZ, serif;
  font-size: 1.8rem;
  font-weight: 500;
  letter-spacing: -.03em;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase
}
@media (min-width:801px) {
  .h7 {
      font-size: 2.4rem
  }
}
.p-l {
  font-family: Neue-Montreal, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -.04em;
  letter-spacing: 0;
  line-height: 1
}
@media (min-width:801px) {
  .p-l {
      font-size: 1.4rem
  }
}
.p-s {
  font-family: Neue-Montreal, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -.04em;
  letter-spacing: 0;
  line-height: 1
}
@media (min-width:801px) {
  .p-s {
      font-size: 1.2rem
  }
}
.label-serif {
  font-family: LZ, serif;
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: -.03em;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase
}
@media (min-width:801px) {
  .label-serif {
      font-size: 1.4rem
  }
}
.label-l {
  font-family: Neue-Montreal, sans-serif;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: -.04em;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase
}
@media (min-width:801px) {
  .label-l {
      font-size: 1.4rem
  }
}
.label-s {
  font-family: Neue-Montreal, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: -.04em;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase
}
@media (min-width:801px) {
  .label-s {
      font-size: 1.2rem
  }
}
.decoration-i {
  font-family: PPNeue-Montreal, sans-serif;
  font-size: 1rem;
  line-height: 1
}
.decoration {
  font-family: Neue-Montreal, sans-serif;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: -.04em;
  letter-spacing: 0;
  line-height: 1
}
.c-white {
  color: #fff
}
.c-black {
  color: #000
}
.c-white-50 {
  color: hsla(0, 0%, 100%, .5)
}
.c-black-50 {
  color: rgba(0, 0, 0, .5)
}
.c-light-grey {
  color: #e0dfdf
}
.c-grey {
  color: #5e5d5d
}
html {
  overscroll-behavior: none
}
@media (min-width:801px) {
  html {
      touch-action: none
  }
}
body {
  -webkit-tap-highlight-color: transparent
}
body.locked {
  overflow: hidden
}
#app {
  height: 100%;
  transition: background-color .5s cubic-bezier(.445, .05, .55, .95);
  width: 100%
}
#app.dark {
  background-color: #000
}
#app.light {
  background-color: #fff
}
@media (min-width:801px) {
  #app {
      position: fixed
  }
}
.page {
  height: 100%;
  inset: 0;
  position: relative;
  width: 100%
}
@media (min-width:801px) {
  .page {
      position: absolute
  }
}
.page.page-transition {
  z-index: 6
}
.page-content {
  height: 100%;
  inset: 0;
  position: relative;
  width: 100%
}
@media (min-width:801px) {
  .page-content {
      position: absolute
  }
}
.w-full {
  width: 100%
}
.h-full {
  height: 100%
}
.w-fulls {
  width: 100%
}
@media (min-width:801px) {
  .w-fulls {
      width: 100vw
  }
}
.h-fulls {
  height: 100svh
}
.block {
  display: block
}
.pointer-none {
  pointer-events: none
}
.pointer-auto {
  pointer-events: auto
}
.uppercase {
  text-transform: uppercase
}
.clip {
  overflow: hidden
}
.img-full {
  height: 100%;
  inset: 0;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute
}
.img-full,
.side-60 {
  width: 100%
}
@media (min-width:801px) {
  .side-60 {
      width: 61.111%
  }
}
.side-40 {
  width: 100%
}
@media (min-width:801px) {
  .side-40 {
      width: 38.8889%
  }
}
.contained {
  padding-inline: 1.6rem
}
@media (min-width:801px) {
  .contained {
      padding-inline: 0
  }
}
.hint-underline {
  cursor: default;
  position: relative
}
.hint-underline:before {
  content: "";
  display: none;
  height: 130%;
  left: -30%;
  position: absolute;
  top: -15%;
  width: 160%
}
@media (min-width:801px) {
  .hint-underline:before {
      display: block
  }
}
.hint {
  left: calc(50% - .75rem);
  position: absolute;
  top: 1rem
}
.arrow {
  display: block;
  width: 2.8rem
}
.arrow-stroke {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.25
}
.list-item__body,
.list-item__head {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%
}
.list-item__body {
  align-items: flex-end;
  margin-top: auto
}
.list-item__head {
  margin-bottom: 5rem
}
.list-item__thumbnail {
  aspect-ratio: 203/255;
  background-color: #5e5d5d;
  display: block;
  position: relative;
  width: 20.3rem
}
.card-arrow {
  margin-bottom: -.65rem;
  width: 2.8rem
}
.photos-list__item {
  background-color: #fff;
  margin-inline: auto;
  max-width: 32rem;
  padding: 1.2rem;
  width: 100%
}
@media (min-width:801px) {
  .photos-list__item {
      margin-inline: 0;
      max-width: 100%;
      width: auto
  }
}
.photos-list__item.small {
  padding: 1rem
}
.photos-list__item.small .list-item__head {
  margin-bottom: 4rem
}
.photos-list__item.small .list-item__thumbnail {
  width: 16rem
}
.photos-list__item.small .arrow {
  margin-bottom: -.45rem;
  width: 2rem
}
@media (min-width:801px) {
  .photos-list__item.small {
      padding: .7rem
  }
  .photos-list__item.small .list-item__head {
      margin-bottom: 2.4rem
  }
  .photos-list__item.small .list-item__thumbnail {
      width: 15rem
  }
  .photos-list__item.small .arrow {
      margin-bottom: -.25rem;
      width: 1.6rem
  }
}
.list-item__btn {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%
}
.list-item__body-copy {
  text-align: left
}
.list-item__title {
  display: block;
  margin-bottom: .6rem;
  max-width: 22.8rem
}
.list-item__location {
  vertical-align: bottom
}
.thumb-img {
  opacity: 0;
  visibility: hidden
}
.thumb-img.visible {
  opacity: 1;
  transition: opacity 1.25s cubic-bezier(.445, .05, .55, .95) .125s;
  visibility: visible
}
.photos-modal {
  display: none;
  height: 100dvh;
  left: 0;
  position: fixed;
  top: 4.8rem;
  width: 100%;
  z-index: 5
}
.photos-modal.visible {
  display: flex
}
@media (min-width:801px) {
  .photos-modal {
      left: 6rem;
      top: 0;
      width: calc(100% - 6rem)
  }
}
.photos-modal__container {
  align-items: center;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding: 2rem 1.6rem;
  position: relative;
  width: 100%
}
@media (min-width:801px) {
  .photos-modal__container {
      height: 100%;
      overflow-y: hidden;
      width: auto
  }
}
.photos-modal__bg {
  inset: 0;
  position: absolute
}
.photos-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem 0;
  height: auto;
  margin-bottom: 5rem;
  width: 100%
}
@media (min-width:801px) {
  .photos-list {
      display: grid;
      gap: 2.8rem;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(2, 1fr);
      height: 100%;
      margin-bottom: 0;
      width: auto
  }
}
.photos-list__card {
  max-width: 30rem
}
.photos-modal__title {
  margin-bottom: 2rem
}
.header-photos__chapters {
  margin-top: auto
}
.btn-chapters {
  align-items: center;
  display: flex;
  flex-direction: row;
  text-orientation: mixed;
  writing-mode: vertical-rl
}
.header-photos__logo {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center
}
.chevron {
  height: 2.8rem;
  transform: rotate(90deg);
  width: 2.8rem
}
.split-text .line {
  overflow: hidden
}
.split-text.padded .line {
  padding-inline: 1px
}
.btn-main__underline {
  height: 100%;
  inset: 0;
  overflow: hidden;
  position: absolute;
  transform-origin: top left;
  width: 100%
}
.btn-main__underline:after,
.btn-main__underline:before {
  background-color: hsla(0, 0%, 100%, .5);
  content: "";
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%
}
.btn-main__underline:before {
  opacity: 0;
  transform: translateX(0)
}
.btn-main__underline:after {
  opacity: 1;
  transform: translateX(0);
  transition: transform .3s cubic-bezier(.77, 0, .175, 1)
}
.btn-main__underline-wrapper {
  bottom: -2px;
  display: none;
  height: max(.1rem, 1px);
  left: 0;
  position: absolute;
  transform-origin: top left;
  width: 100%
}
.btn-main {
  cursor: pointer;
  position: relative;
  transition: opacity .2s cubic-bezier(.445, .05, .55, .95)
}
.btn-main.underline .btn-main__underline-wrapper {
  display: block
}
.btn-main:disabled {
  opacity: .25
}
.btn-main:hover .btn-main__underline:before {
  opacity: 1;
  transform: translateX(102%);
  transition: transform .6s cubic-bezier(.77, 0, .175, 1)
}
.btn-main:hover .btn-main__underline:after {
  opacity: 0;
  transform: translateX(-102%);
  transition: none
}
.text span {
  display: block
}
.text-line-wrapper {
  overflow: hidden
}
.text-line {
  transform: translate3d(0, 110%, 0)
}
.btn-arrow__icon {
  margin-left: 4.8rem
}
.btn-arrow__border-wrapper {
  background-color: hsla(0, 0%, 100%, .1);
  bottom: -1px;
  height: 1px;
  left: 0;
  position: absolute;
  width: 100%
}
.btn-arrow__border {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%
}
.btn-arrow__border:after,
.btn-arrow__border:before {
  background-color: hsla(0, 0%, 100%, .5);
  content: "";
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%
}
.btn-arrow__border:before {
  opacity: 0;
  transform: translateX(-102%)
}
.btn-arrow__border:after {
  opacity: 1;
  transform: translateX(102%);
  transition: transform .6s cubic-bezier(.77, 0, .175, 1)
}
.btn-arrow {
  align-items: center;
  border-bottom: 1px solid transparent;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-block: .7rem .9rem;
  position: relative
}
.btn-arrow>span {
  color: currentcolor
}
.btn-arrow:hover .btn-arrow__border:before {
  opacity: 1;
  transform: translateX(0);
  transition: transform 1.1s cubic-bezier(.77, 0, .175, 1)
}
.btn-arrow:hover .btn-arrow__border:after {
  opacity: 0;
  transform: translateX(0);
  transition: none
}
.work-modal {
  display: none;
  inset: 0;
  position: fixed;
  z-index: 7
}
.work-modal.visible {
  display: block
}
.modal-bg {
  background-color: #000;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%
}
.modal-content {
  background-color: #0d0d0d;
  position: relative
}
.modal-actions,
.modal-content {
  display: flex;
  flex-direction: row
}
.modal-actions {
  bottom: 1.6rem;
  gap: 0 .8rem;
  left: 2rem;
  position: absolute;
  z-index: 2
}
.modal-left {
  display: flex;
  flex-direction: column;
  padding-inline: 11rem 15.5rem
}
.modal-title {
  margin-left: -.4rem;
  margin-block: 12rem 3rem;
  position: relative;
  z-index: 2
}
.modal-imgs {
  height: min(49vh, 40rem);
  margin-bottom: 4.4rem;
  margin-top: auto;
  position: relative;
  width: 100%
}
.item-img__ind {
  opacity: 0;
  position: absolute;
  top: -1.6rem;
  transition: opacity .1s cubic-bezier(.445, .05, .55, .95);
  transition-delay: 0s
}
.item-img {
  transition: transform .85s cubic-bezier(.23, 1, .32, 1)
}
.item-img,
.item-img:after {
  height: 100%;
  inset: 0;
  position: absolute;
  width: 100%
}
.item-img:after {
  background-color: #0d0d0d;
  content: "";
  opacity: .35;
  transition: opacity .25s cubic-bezier(.445, .05, .55, .95)
}
.item-img.current {
  transform: translateZ(0)
}
.item-img.current .item-img__ind {
  opacity: 1;
  transition-delay: .2s
}
.item-img.current:after {
  opacity: 0
}
.item-img.prev {
  transform: translate3d(0, -91vh, 0)
}
.item-img.next {
  transform: translate3d(0, 91vh, 0)
}
.item-img__element {
  height: 100%;
  inset: 0;
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: top left;
  object-position: top left;
  position: absolute;
  width: 100%
}
.modal-right {
  display: flex;
  flex-direction: column;
  padding: 2.8rem 8.8rem 6.8rem 2.8rem
}
.modal-lists {
  display: flex;
  flex-direction: row;
  padding-top: 9.2rem
}
.modal-list {
  margin-right: 5.6rem
}
.list__item,
.list__title {
  margin-bottom: 1.2rem
}
.modal-text {
  transform: translate3d(0, 110%, 0)
}
.modal-description__wrapper {
  margin-top: auto
}
.modal-description>span {
  overflow: hidden
}
.modal-year {
  margin-bottom: 2rem
}
.modal-url {
  margin-top: 3.6rem
}
.btn-close {
  position: absolute;
  right: 2rem;
  top: 2rem;
  z-index: 2
}
.work-modal {
  display: none;
  height: 100dvh;
  inset: 0;
  overflow: hidden;
  position: fixed;
  z-index: 7
}
.work-modal.visible {
  display: block
}
.modal-bg {
  background-color: #000;
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  width: 100%
}
.modal-content {
  background-color: #0d0d0d;
  display: flex;
  flex-direction: row;
  height: 100%;
  overflow-y: scroll;
  overscroll-behavior: none;
  position: relative
}
.modal-wrapper {
  display: flex;
  flex-direction: column;
  padding: 6rem 1.6rem 0
}
.modal-actions {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: calc(env(safe-area-inset-bottom) + 3.2rem);
  width: 100%
}
.modal-title {
  margin-bottom: 2.8rem;
  margin-left: -.4rem;
  position: relative;
  z-index: 2
}
.modal-imgs {
  aspect-ratio: 288/174;
  margin-bottom: .8rem;
  margin-top: auto;
  position: relative;
  width: 100%
}
.item-img {
  height: 100%;
  inset: 0;
  opacity: 0;
  position: absolute;
  transition: opacity .25s cubic-bezier(.445, .05, .55, .95)
}
.item-img.current {
  opacity: 1
}
.modal-lists {
  display: flex;
  flex-direction: row;
  margin-bottom: 2.8rem;
  padding-top: 2rem
}
.modal-list {
  width: 50%
}
.list__item,
.list__title {
  margin-bottom: 1.2rem
}
.modal-text {
  transform: translate3d(0, 110%, 0)
}
.modal-description__wrapper {
  margin-top: auto
}
.modal-description>span {
  overflow: hidden
}
.modal-year {
  margin-bottom: 2rem
}
.modal-url {
  margin-top: 1.6rem
}
.btn-close {
  position: absolute;
  right: 1.6rem;
  top: 2rem;
  z-index: 2
}
.btn-next,
.btn-prev {
  touch-action: none
}
.btn-prev {
  padding: .6rem .6rem .6rem 0
}
.btn-next {
  padding: .6rem 0 .6rem .6rem
}
.orientation-fallback {
  align-items: center;
  background-color: #fff;
  color: #000;
  display: none;
  flex-direction: column;
  height: 100%;
  inset: 0;
  justify-content: center;
  position: fixed;
  width: 100%;
  z-index: 8
}
.orientation-fallback.dark {
  background-color: #000;
  color: #fff
}
@media screen and (orientation:landscape) and (height <=600px) {
  .orientation-fallback {
      display: flex
  }
}
.orientation-fallback__copy {
  padding-inline: 1.2rem;
  text-align: center;
  width: 100%
}
.preloader-section {
  background-color: #000;
  height: 100%
}
.section-right {
  background-color: transparent;
  left: 0;
  position: absolute;
  top: 0
}
@media (min-width:801px) {
  .section-right {
      background-color: #000;
      position: relative
  }
}
.filling-section {
  background-color: #0d0d0d;
  height: 100%;
  transform: scaleX(var(--progress));
  transform-origin: top left;
  width: 100%
}
.preloader-number {
  bottom: 0;
  color: #e0dfdf;
  left: 1.6rem;
  overflow: hidden;
  position: absolute
}
@media (min-width:801px) {
  .preloader-number {
      bottom: 2rem;
      left: 2rem
  }
}
.loading-span,
.number-span {
  display: block
}
.loading-label {
  color: #e0dfdf;
  margin-left: 1.6rem;
  margin-top: 1.6rem;
  overflow: hidden
}
@media (min-width:801px) {
  .loading-label {
      margin-left: 2.4rem;
      margin-top: 2rem
  }
}
.preloader {
  display: flex;
  flex-direction: row;
  inset: 0;
  overflow: hidden;
  position: fixed;
  width: 100%;
  z-index: 9
}
.preloader.light .filling-section,
.preloader.light .preloader-section {
  background-color: #fff
}
.preloader.light .loading-label,
.preloader.light .preloader-number {
  color: #000
}
#highlight-container {
  height: 100%;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  width: 100%
}
.clone {
  margin-top: -100vh
}
/* ===== index.css ===== */
.intro.mobile {
  margin-top: calc(var(--head-h)*-1)
}
.intro,
.intro-wrapper {
  display: flex;
  flex-direction: column
}
@media (min-width:801px) {
  .intro,
  .intro-wrapper {
      flex-direction: row
  }
}
.intro-wrapper {
  display: flex;
  will-change: transform;
}
.intro-left {
  background: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 4.4rem 0;
  position: relative;
  }
.paper-decor {
  aspect-ratio: 412/323;
  bottom: 0;
  position: absolute;
  right: 0;
  width: 50%;
  z-index: 0;
  }
@media (min-width:801px) {
  .paper-decor {
      width: 41.2rem
  }
}
.intro-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4.4rem 0;
  position: relative;
  }
.intro-right:before {
  background: #00000080;
  content: "";
  z-index: 0
}
.intro-right:before,
.intro-right__bg {
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%
}
.intro-right__bg {
  -o-object-fit: cover;
  object-fit: cover;
  z-index: -1
}
.intro-left__footer {
  bottom: 1.6rem
}
@media (min-width:801px) {
  .intro-left__footer {
      bottom: 4.4rem
  }
}
.intro-right__footer {
  bottom: 5rem
}
@media (min-width:801px) {
  .intro-right__footer {
      bottom: 4.4rem
  }
}
.footer-scroll {
  display: block;
  margin-top: 2.7rem
}
@media (min-width:801px) {
  .footer-scroll {
      display: none
  }
}
.intro-left__footer,
.intro-right__footer {
  align-items: center;
  display: flex;
  flex-direction: column;
  left: 0;
  position: absolute;
  width: 100%
}
.footer-copy {
  margin-top: 1rem;
  max-width: 26.6rem;
  text-align: center
}
@media (min-width:801px) {
  .footer-copy {
      max-width: 40rem
  }
}
.intro-left__card {
  aspect-ratio: 412/488;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin-bottom: 3.2rem;
  margin-inline: auto;
  max-width: 24.8rem;
  padding: 1rem;
  position: relative;
  width: 77.5%;
}
@media (min-width:801px) {
  .intro-left__card {
      margin-bottom: 0;
      max-width: 100%;
      padding: 1.6rem;
      width: 41.2rem
  }
}
.intro-left__content-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between
}
.intro-left__content-pretitle {
  margin-bottom: .8rem;
  margin-top: auto
}
.intro-left__content-title {
  position: relative
}
.intro-left__content-title-num {
  left: 17.25rem;
  position: absolute;
  top: -1rem
}
@media (min-width:801px) {
  .intro-left__content-title-num {
      left: 31rem
  }
}
.intro-right__header {
  top: 4.4rem;
  left: 0;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 2;
}

.intro-right__content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.intro-right__content-center {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.intro-right__title-top {
  margin-bottom: 0.6rem;
}

.intro-right__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.6rem;
}

.intro-right__picture-wrap {
  width: 12.1rem;
  aspect-ratio: 121 / 152;
  overflow: hidden;
}

.intro-right__picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.footer-right-copy {
  margin-top: 1.6rem;
  max-width: 28rem;
  text-align: center;
}

.img-pretitle {
  text-transform: uppercase
}
.img-title {
  margin-top: .2rem
}
.works,
.works-wrapper {
  background-color: #000;
  display: flex;
  flex-direction: column;
  position: relative
}
@media (min-width:801px) {
  .works,
  .works-wrapper {
      flex-direction: row
  }
}
.works-display {
  position: relative
}
.works-display__item {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative
}
@media (min-width:801px) {
  .works-display__item {
      height: 100vh
  }
}
.works-display__bg {
  height: 100svh;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 0
}
.item-bg {
  opacity: 0;
  transition: opacity .65s cubic-bezier(.445, .05, .55, .95)
}
.item-bg.active {
  opacity: .2
}
.item-thumbnail {
  aspect-ratio: 660/400;
  background-color: #0d0d0d;
  position: relative;
  width: 100%
}
@media (min-width:801px) {
  .item-thumbnail {
      width: 66rem
  }
}
.sticky-block {
  display: flex;
  flex-direction: column;
  padding: 2.8rem;
  position: sticky;
  top: 0;
  will-change: transform
}
.sticky-block__header {
  border-bottom: 1px solid hsla(0, 0%, 100%, .1);
  display: flex;
  flex-direction: row;
  padding-bottom: 2.8rem
}
.item-number {
  margin-right: 2rem;
  position: relative;
  width: 2.6rem
}
.item-number:after,
.item-number:before {
  opacity: 0;
  position: absolute;
  top: 0;
  transition: transform .3s cubic-bezier(.445, .05, .55, .95), opacity .3s cubic-bezier(.445, .05, .55, .95)
}
.item-number:before {
  content:"{";
  left: -.7rem;
  transform: translate(-.1rem)
}
.item-number:after {
  content: "}";
  right: -.5rem;
  transform: translate(.1rem)
}
.works-list__item {
  display: flex;
  flex-direction: column;
  margin-bottom: .8rem;
  opacity: .4
}
.works-list__item,
.works-list__item:hover {
  transition: opacity .3s cubic-bezier(.445, .05, .55, .95)
}
.works-list__item:hover {
  opacity: .65
}
.works-list__item.active {
  opacity: 1
}
.works-list__item.active .item-number:after,
.works-list__item.active .item-number:before {
  opacity: 1;
  transform: translate(0)
}
.item-btn {
  cursor: pointer;
  display: flex;
  flex-direction: row
}
.decorative-number {
  margin-left: auto
}
.sticky-block__footer {
  margin-top: auto
}
.btn-modal {
  margin-bottom: 2.8rem;
  width: 100%
}
.works,
.works-wrapper {
  background-color: #000
}
.works,
.works-display__item,
.works-wrapper {
  display: flex;
  flex-direction: column;
  position: relative
}
.works-display__item {
  align-items: center;
  justify-content: center
}
.item-title__wrapper {
  background-color: #000;
  display: flex;
  flex-direction: column;
  height: auto;
  padding: 2rem 1.6rem 0;
  z-index: 2
}
.item-title__container {
  display: flex;
  flex-direction: row;
  padding-bottom: 4.2rem
}
.item-title {
  padding-right: 1rem
}
.item-number {
  margin-right: 2rem;
  position: relative;
  width: 2.6rem
}
.item-number:after,
.item-number:before {
  opacity: 0;
  position: absolute;
  top: 0;
  transition: transform .3s cubic-bezier(.445, .05, .55, .95), opacity .3s cubic-bezier(.445, .05, .55, .95)
}
.item-number:before {
  content:"{";
  left: -.7rem;
  transform: translate(-.1rem)
}
.item-number:after {
  content: "}";
  right: -.5rem;
  transform: translate(.1rem)
}
.item-picture {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 50svh;
  justify-content: center;
  min-height: 280px;
  position: relative
}
.item-picture__bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  z-index: 0
}
.bg-img {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .2;
  position: absolute
}
.item-picture__thumbnail {
  aspect-ratio: 660/400;
  background-color: #0d0d0d;
  position: relative;
  width: 100%
}
.decorative-number {
  margin-left: auto
}
.btn-modal {
  margin-bottom: 2rem
}
.btn-accordion {
  align-items: center;
  border-bottom: 1px solid hsla(0, 0%, 100%, .1);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  height: 3rem;
  justify-content: space-between;
  position: relative
}
.btn-accordion__svg {
  display: block;
  margin-left: 4.8rem;
  width: 2.8rem
}
.accordion-wrapper {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s cubic-bezier(.645, .045, .355, 1)
}
.accordion-wrapper.visible {
  max-height: var(--1c17a821)
}
.accordion-content {
  display: flex;
  flex-direction: column;
  gap: 1.6rem 1.2rem;
  padding-top: 2rem
}
@media (min-width:801px) {
  .accordion-content {
      display: grid;
      gap: 2.4rem 1.2rem;
      grid-template-columns: repeat(3, 1fr);
      padding-top: 2.8rem
  }
}
.accordion-content__item-title {
  margin-bottom: .8rem
}
.accordion-content__item-label {
  margin-bottom: .4rem
}
.accordion-content__item-label:last-child {
  margin-bottom: 0
}
.about-designer {
  background-color: transparent;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  position: relative
}
@media (min-width:801px) {
  .about-designer {
      flex-direction: row;
      height: 250vh;
      margin-top: -100vh
  }
}
.about-designer-wrapper {
  background-color: #000;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  will-change: transform
}
@media (min-width:801px) {
  .about-designer-wrapper {
      flex-direction: row;
      height: 100vh
  }
}
.about-designer-left {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 100svh;
  justify-content: flex-end;
  padding: 2.4rem 1.6rem
}
@media (min-width:801px) {
  .about-designer-left {
      height: auto;
      padding: 4.4rem
  }
}
.about-designer__title {
  margin-block: 1.2rem 3.2rem;
  max-width: 69.6rem
}
@media (min-width:801px) {
  .about-designer__title {
      margin-block: 2rem
  }
}
.about-designer__interest-list {
  display: flex;
  flex-direction: column;
  gap: .4rem 0
}
@media (min-width:801px) {
  .about-designer__interest-list {
      flex-direction: row;
      gap: 0 2rem
  }
}
.about-designer-right {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 0
}
.about-designer-right:before {
  background: #00000080;
  content: "";
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
  z-index: 0
}
.about-designer-right__container {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative
}
.about-designer-right__bg {
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: -1
}
.about-designer__card {
  align-items: center;
  aspect-ratio: 330/390;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  margin-block: 10rem 6.4rem;
  max-width: 24.8rem;
  padding: 1.6rem;
  position: relative;
  width: 77.5%;
  z-index: 1
}
@media (min-width:801px) {
  .about-designer__card {
      margin-bottom: 12.6rem;
      max-width: 100%;
      width: 33rem
  }
}
.about-designer__card-list {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between
}
.card-item {
  display: flex;
  flex-direction: column;
  text-align: center
}
.card-item:nth-of-type(2n) {
  flex-direction: column-reverse
}
.card-item:nth-of-type(2n) .card-item__title {
  margin-top: .6rem
}
.card-item:nth-of-type(odd) .card-item__title {
  margin-bottom: .6rem
}
.about-designer__accordion {
  background-color: #000;
  padding: 2rem 1.6rem;
  width: 100%;
  z-index: 2
}
@media (min-width:801px) {
  .about-designer__accordion {
      bottom: 0;
      left: 0;
      padding: 2.8rem;
      position: absolute
  }
}
.about-designer__accordion-item:first-of-type {
  margin-bottom: .8rem
}
.about-designer__accordion-item:first-of-type .accordion-content {
  padding-bottom: 2rem
}
@media (min-width:801px) {
  .about-designer__accordion-item:first-of-type {
      margin-bottom: 1rem
  }
  .about-designer__accordion-item:first-of-type .accordion-content {
      padding-bottom: 3rem
  }
}
.about-photo {
  background-color: #fff;
  display: flex;
  flex-direction: column
}
@media (min-width:801px) {
  .about-photo {
      flex-direction: row
  }
}
.about-photo-left {
  align-items: center;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 4.4rem 1.6rem 2rem;
  text-align: center
}
@media (min-width:801px) {
  .about-photo-left {
      padding: 4.4rem
  }
}
.about-photo-copy__center {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 3.6rem
}
@media (min-width:801px) {
  .about-photo-copy__center {
      margin-top: 0
  }
}
.about-photo__pre {
  margin-inline: auto;
  max-width: 12.8rem
}
@media (min-width:801px) {
  .about-photo__pre {
      max-width: 100%
  }
}
.about-photo__title {
  margin-block: .8rem 3.6rem;
  max-width: 68rem
}
@media (min-width:801px) {
  .about-photo__title {
      margin-block: .8rem
  }
}
.about-photo__info {
  margin-inline: auto;
  max-width: 24rem
}
@media (min-width:801px) {
  .about-photo__info {
      max-width: 54rem
  }
}
.about-photo-right {
  align-items: center;
  aspect-ratio: 288/417;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.6rem;
  position: relative;
  z-index: 0
}
@media (min-width:801px) {
  .about-photo-right {
      aspect-ratio: auto;
      height: 100vh;
      padding: 2rem 2rem 2rem 0
  }
}
.about-photo-right__wrapper {
  height: 100%;
  position: relative;
  width: 100%
}
.about-photo-right__bg {
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: -1
}
.photos {
  background-color: #000;
  flex-wrap: wrap
}
.photos,
.photos-wrapper {
  display: flex;
  flex-direction: column;
  position: relative
}
@media (min-width:801px) {
  .photos,
  .photos-wrapper {
      flex-direction: row
  }
}
.photos-filler {
  display: none;
  height: 50svh
}
@media (min-width:801px) {
  .photos-filler {
      display: block
  }
}
.photos-bg__wrapper {
  height: 0;
  left: 0;
  position: sticky;
  top: 0;
  width: 100%
}
@media (min-width:801px) {
  .photos-bg__wrapper {
      height: 100%
  }
}
.photos-bg {
  filter: grayscale(100%);
  height: 100lvh;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  opacity: .5;
  position: absolute;
  width: 100%;
  z-index: 0
}
.photos-bg-description {
  position: absolute;
  right: 2.5rem;
  text-align: right;
  top: 2rem
}
.photos-bg-description__name {
  margin-top: .2rem
}
.photos-list__wrapper {
  padding: 7rem 1.6rem 2rem;
  position: relative
}
@media (min-width:801px) {
  .photos-list__wrapper {
      padding: 8.4rem 7.2rem 25.5rem
  }
}
.photos-list {
  display: flex;
  flex-direction: column;
  gap: 2rem
}
@media (min-width:801px) {
  .photos-list {
      display: grid;
      gap: 3.2rem;
      grid-template-columns: repeat(2, 1fr)
  }
}
.photos-description {
  display: flex;
  flex-direction: column
}
@media (min-width:801px) {
  .photos-description {
      height: 100vh;
      padding-top: 2rem
  }
}
.photos-description__container {
  background-color: #fff;
  margin-top: auto;
  padding: 1.6rem;
  width: 100%
}
@media (min-width:801px) {
  .photos-description__container {
      padding: 2.8rem
  }
}
.photos-description__copy {
  max-width: 45rem
}
.btn-description {
  margin-top: 1.6rem;
  width: 100%
}
@media (min-width:801px) {
  .btn-description {
      margin-top: 4.6rem
  }
}
.clone {
  margin-top: -100vh
}
/* ===== entry.css ===== */
.arrow {
  display: block;
  width: 2.8rem
}
.arrow-stroke {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.25
}
/* trimmed in this generated file for brevity? no */
/* ===== ScrollerWrapper.css ===== */
.path-line {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.25
}
.btn-menu {
  align-items: center;
  color: #e0dfdf;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 2.8rem;
  justify-content: center;
  position: relative;
  transition: color .3s cubic-bezier(.445, .05, .55, .95);
  width: 2.8rem
}
.btn-menu.alt-color {
  color: #000
}
.btn-menu__lines {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: .5rem 0;
  justify-content: center;
  width: 2.8rem
}
.path-line,
.path-line {
  fill: none;
  stroke: currentcolor;
  stroke-width: 1.25
}
.btn-menu {
  align-items: center;
  color: #e0dfdf;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 2.8rem;
  justify-content: center;
  position: relative;
  width: 2.8rem
}
.btn-menu.alt-color {
  color: #000
}
.logo-link {
  align-items: center;
  aspect-ratio: 1/1;
  color: #000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: color .3s cubic-bezier(.445, .05, .55, .95)
}
.logo {
  display: block;
  height: 1.2rem;
  width: 1.3rem
}
.header {
  align-items: center;
  background-color: #000;
  display: flex;
  height: 4.8rem;
  left: 0;
  position: sticky;
  top: 0;
  z-index: 5
}
.header .logo-link {
  color: #e0dfdf
}
.header.alt-color .logo-link {
  color: #000
}
@media (min-width:801px) {
  .header {
      background-color: transparent;
      padding: 1rem 2rem;
      position: absolute
  }
}
.header__container {
  align-items: center;
  display: flex;
  flex-direction: row;
  padding: 1rem 1.6rem
}
@media (min-width:801px) {
  .header__container {
      padding: 1rem 0
  }
}
.header__btn-close {
  margin-left: auto;
  position: absolute;
  right: 1.6rem;
  top: 1rem
}
@media (min-width:801px) {
  .header__btn-close {
      position: relative;
      right: auto;
      top: auto
  }
}
.header__content {
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between
}
@media (min-width:801px) {
  .header__content {
      padding-right: 1.8rem
  }
}
.header__border {
  background-color: #fff;
  bottom: 0;
  height: 1px;
  left: 0;
  opacity: .1;
  position: absolute
}
.header-photos {
  background-color: #fff;
  border-bottom: 1px solid #e0dfdf;
  height: 4.8rem;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 5
}
.header-photos:after {
  background-color: #000;
  bottom: 0;
  content: "";
  display: none;
  height: .2rem;
  left: 0;
  position: absolute;
  width: calc(100% + 1px)
}
@media (min-width:801px) {
  .header-photos {
      border-bottom: none;
      border-right: 1px solid #e0dfdf;
      height: 100%;
      position: absolute;
      width: 6rem
  }
  .header-photos:after {
      display: block
  }
}
.header-photos__content {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: .6rem 1.6rem;
  place-items: center flex-start
}
@media (min-width:801px) {
  .header-photos__content {
      grid-template-columns: none;
      grid-template-rows: repeat(3, 1fr);
      padding: 1.6rem;
      place-items: flex-start center
  }
}
.photos-modal {
  display: none;
  left: 6rem;
  position: fixed;
  top: 0;
  width: calc(100% - 6rem);
  z-index: 5
}
.photos-modal.visible {
  display: flex
}
.photos-modal__container {
  align-items: center;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.6rem;
  position: relative
}
.photos-modal__bg {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute
}
.photos-modal__title {
  margin-bottom: 2rem
}
.photos-list {
  display: grid;
  gap: 2.8rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr)
}
.photos-list__card {
  max-width: 30rem
}
.btn-chapters {
  align-items: center;
  display: flex;
  flex-direction: row
}
@media (min-width:801px) {
  .btn-chapters {
      padding-bottom: .4rem;
      text-orientation: mixed;
      writing-mode: vertical-rl
  }
}
.header-photos__chapters {
  margin-top: .2rem;
  margin-inline: auto;
  order: 1
}
@media (min-width:801px) {
  .header-photos__chapters {
      margin-top: auto;
      margin-inline: 0;
      order: 2
  }
}
.header-photos__logo {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-block: 0;
  order: 0
}
@media (min-width:801px) {
  .header-photos__logo {
      margin-block: auto;
      order: 1;
      width: 100%
  }
}
.header-photos__btn-wrapper {
  margin-left: auto;
  order: 2;
  position: relative
}
@media (min-width:801px) {
  .header-photos__btn-wrapper {
      margin-left: 0;
      order: 0
  }
}
.header-photos__btn-menu-close {
  left: 0;
  position: absolute;
  top: 0
}
.chevron {
  height: 2.8rem;
  width: 2.8rem
}
.chevron.active {
  transform: scaleY(-1)
}
@media (min-width:801px) {
  .chevron {
      transform: rotate(90deg) scaleY(-1)
  }
  .chevron.active {
      transform: rotate(90deg)
  }
}
.menu-list__item-link {
  color: #ffffff80;
  cursor: pointer;
  transition: opacity .3s cubic-bezier(.445, .05, .55, .95)
}
.menu-list__item-link:hover {
  opacity: .5
}
.menu-list__wrapper {
  color: #e0dfdf;
  margin-block: 1.6rem
}
.menu-list__wrapper.light {
  color: #000
}
.menu-list__wrapper.light .menu-list__item-link {
  color: #00000080
}
@media (min-width:801px) {
  .menu-list__wrapper {
      margin-block: 0
  }
  .menu-list__wrapper:nth-of-type(2) {
      margin-left: 5.4rem
  }
}
.menu-list__title {
  margin-bottom: .4rem;
  overflow: hidden
}
.menu-list__item {
  margin-top: 1.2rem;
  overflow: hidden
}
.menu-list__title-line {
  display: block
}
.menu-list__item-container,
.menu-list__title-line {
  transform: translate3d(0, 110%, 0)
}
.split-wrapper {
  overflow: hidden;
  padding: 1px
}
.split-element {
  display: block;
  transform: translate3d(0, 110%, 0)
}
.nav-link {
  display: flex;
  padding-bottom: 2rem;
  position: relative;
  transition: opacity .3s cubic-bezier(.445, .05, .55, .95)
}
.nav-link.disabled {
  opacity: .35
}
@media (min-width:801px) {
  .nav-link {
      padding-bottom: 3.6rem
  }
}
.nav-link__content {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  width: 100%
}
.nav-block {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%
}
@media (min-width:801px) {
  .nav-block {
      overflow: initial;
      width: auto
  }
}
.nav-inline {
  display: flex;
  flex-direction: column
}
@media (min-width:801px) {
  .nav-inline {
      flex-direction: row
  }
}
.nav-photo {
  background: url(./oakley-project-2075-cover.ktwjws01.webp) 50% no-repeat;
  background-size: cover;
  display: none;
  height: 6.4rem;
  margin-inline: 2rem;
  width: 11.3rem
}
@media (min-width:801px) {
  .nav-photo {
      display: inline-block
  }
}
.alone-word {
  --offset: 0;
  transform: translate(calc(-13.8rem*var(--offset)))
}
.nav-numbered {
  position: relative;
  width: 100%
}
@media (min-width:801px) {
  .nav-numbered {
      width: auto
  }
}
.nav-number {
  position: absolute;
  right: 0;
  top: 0
}
@media (min-width:801px) {
  .nav-number {
      left: calc(100% + 1rem);
      right: auto;
      top: -.5rem
  }
}
.nav-arrow {
  align-items: center;
  aspect-ratio: 1/1;
  bottom: 0;
  display: flex;
  position: absolute;
  right: 0
}
@media (min-width:801px) {
  .nav-arrow {
      position: relative
  }
}
.nav-border {
  background-color: #ffffff1a;
  bottom: 0;
  height: 1px;
  left: 0;
  position: absolute
}
.nav-border.is-alt {
  background-color: #e0dfdf
}
.nav-link {
  display: flex;
  padding-bottom: 2rem;
  position: relative;
  transition: opacity .3s cubic-bezier(.445, .05, .55, .95)
}
.nav-link.disabled {
  opacity: .35
}
@media (min-width:801px) {
  .nav-link {
      padding-bottom: 3.6rem
  }
}
.nav-link__content {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  position: relative;
  width: 100%
}
.nav-block {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%
}
@media (min-width:801px) {
  .nav-block {
      overflow: initial;
      width: auto
  }
}
.nav-inline {
  display: flex;
  flex-direction: column
}
@media (min-width:801px) {
  .nav-inline {
      flex-direction: row
  }
}
.nav-photo {
  background: url(./home-bali.i3on8xff.webp) 50% no-repeat;
  background-size: cover;
  display: none;
  height: 6.4rem;
  margin-inline: 2rem;
  width: 11.3rem
}
@media (min-width:801px) {
  .nav-photo {
      display: inline-block
  }
}
.alone-word {
  --offset: 0;
  transform: translate(calc(-13.8rem*var(--offset)))
}
.nav-numbered {
  position: relative;
  width: 100%
}
@media (min-width:801px) {
  .nav-numbered {
      width: auto
  }
}
.nav-number {
  position: absolute;
  right: 0;
  top: 0
}
@media (min-width:801px) {
  .nav-number {
      left: calc(100% + 1rem);
      right: auto;
      top: -.5rem
  }
}
.nav-arrow {
  align-items: center;
  aspect-ratio: 1/1;
  bottom: 0;
  display: flex;
  position: absolute;
  right: 0
}
@media (min-width:801px) {
  .nav-arrow {
      position: relative
  }
}
.nav-border {
  background-color: #ffffff1a;
  bottom: 0;
  height: 1px;
  left: 0;
  position: absolute
}
.nav-border.is-alt {
  background-color: #e0dfdf
}
.menu__wrapper {
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  overscroll-behavior: none;
  padding: 7.8rem 1.6rem calc(env(safe-area-inset-bottom) + 2rem);
  position: relative
}
@media (min-width:801px) {
  .menu__wrapper {
      overflow-y: hidden;
      padding: 10rem 5.4rem 4.4rem
  }
}
.menu__bg {
  background-color: #000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: absolute
}
.menu__border {
  background-color: #fff;
  height: 1px;
  left: 0;
  opacity: .1;
  position: absolute;
  top: calc(4.8rem - 1px)
}
.socials {
  border-top: 1px solid hsla(0, 2%, 88%, .1);
  display: flex;
  flex-direction: row;
  gap: 0 1.2rem;
  margin-left: auto;
  padding-top: 1.4rem;
  width: 100%
}
@media (min-width:801px) {
  .socials {
      border-top: none;
      margin-left: auto;
      padding-top: 0;
      width: auto
  }
}
.socials__item {
  color: #ffffff80
}
.item-credits {
  margin-left: auto
}
@media (min-width:801px) {
  .item-credits {
      margin-left: 0
  }
}
.menu {
  color: #e0dfdf;
  display: none;
  left: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  z-index: 4
}
.menu.visible {
  display: flex
}
.menu.light {
  color: #000
}
.menu.light .menu__bg {
  background-color: #f6f6f6
}
.menu.light .menu__wrapper {
  padding: 7.8rem 1.6rem 2rem
}
@media (min-width:801px) {
  .menu.light .menu__wrapper {
      padding: 4.4rem 5.4rem 4.4rem 10rem
  }
}
.menu.light .nav-border {
  opacity: 1
}
.menu.light .socials {
  border-top: 1px solid #e0dfdf
}
@media (min-width:801px) {
  .menu.light .socials {
      border-top: none
  }
}
.menu.light .socials__item {
  color: #00000080
}
.menu-secondary {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  margin-top: 1.2rem
}
@media (min-width:801px) {
  .menu-secondary {
      margin-top: auto
  }
}
.nav-list__item:nth-of-type(2) .nav-link {
  margin-top: 4rem
}
@media (min-width:801px) {
  .nav-list__item:nth-of-type(2) .nav-link {
      margin-top: 0;
      padding-top: 2.8rem
  }
}
.socials__item-link {
  transition: opacity .3s cubic-bezier(.445, .05, .55, .95)
}
.socials__item-link:hover {
  opacity: .5
}
.text-image__wrapper {
  height: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  width: 0;
  z-index: 3
}
.text-image {
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -o-object-fit: cover;
  object-fit: cover;
  position: absolute;
  transform: scale(1.4);
  transition: transform 1.4s cubic-bezier(.165, .84, .44, 1);
  width: 100%
}
.text-image__container {
  aspect-ratio: 1/1;
  -webkit-clip-path: inset(100% 100%);
  clip-path: inset(100% 100%);
  display: block;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: -webkit-clip-path 1.4s cubic-bezier(.165, .84, .44, 1);
  transition: clip-path 1.4s cubic-bezier(.165, .84, .44, 1);
  transition: clip-path 1.4s cubic-bezier(.165, .84, .44, 1), -webkit-clip-path 1.4s cubic-bezier(.165, .84, .44, 1);
  width: 18rem
}
.text-image__container.visible {
  -webkit-clip-path: inset(0 0);
  clip-path: inset(0 0);
  transition: -webkit-clip-path 1s cubic-bezier(.19, 1, .22, 1);
  transition: clip-path 1s cubic-bezier(.19, 1, .22, 1);
  transition: clip-path 1s cubic-bezier(.19, 1, .22, 1), -webkit-clip-path 1s cubic-bezier(.19, 1, .22, 1)
}
.text-image__container.visible .text-image {
  transform: scale(1);
  transition: transform 1s cubic-bezier(.19, 1, .22, 1)
}
.progresses {
  pointer-events: none;
  position: fixed;
  z-index: 3
}
.progresses.is-photo {
  bottom: 0;
  left: 0
}
.progresses.is-home {
  left: 0;
  top: 0
}
.scroll-hint {
  display: none;
  opacity: 1;
  pointer-events: none;
  position: absolute;
  transition: opacity .65s cubic-bezier(.445, .05, .55, .95)
}
.scroll-hint.hint-up {
  right: 2rem;
  top: 1.6rem
}
.scroll-hint.hint-down {
  bottom: 1.6rem;
  left: 2rem
}
@media (min-width:801px) {
  .scroll-hint {
      display: block
  }
}
.home-progress,
.photos-progress {
  position: relative
}
.home-progress.scrolled .scroll-hint {
  opacity: 0
}
.progress-wrapper {
  background-color: #0000004d;
  height: calc(100dvh - 4.8rem);
  overflow: hidden;
  position: absolute;
  top: 4.8rem;
  width: .2rem
}
.progress-wrapper.progress-left {
  left: 0
}
.progress-wrapper.progress-right {
  right: 0
}
@media (min-width:801px) {
  .progress-wrapper {
      height: 100svh;
      top: 0
  }
}
.progress {
  background-color: #fff;
  height: 100%;
  position: relative;
  transform-origin: top left;
  width: 100%
}
.progress-right .progress {
  transform-origin: top right
}
.progress-single__wrapper {
  bottom: 0;
  height: .2rem;
  left: 0;
  overflow: hidden;
  position: absolute;
  width: 100vw
}
@media (min-width:801px) {
  .progress-single__wrapper {
      left: 6rem;
      width: calc(100vw - 6rem)
  }
}
.progress-single {
  background-color: #000;
  height: 100%;
  position: relative;
  transform-origin: bottom left;
  width: 100%
}
.wrapper {
  backface-visibility: hidden;
  left: 0;
  top: 0;
  width: 100%;
  will-change: transform
}
.wrapper.horizontal {
  display: flex;
  flex-direction: column;
  width: 100%
}
@media (min-width:801px) {
  .wrapper.horizontal {
      display: inline-block;
      white-space: nowrap;
      width: auto
  }
  .wrapper {
      position: fixed
  }
}
.pointer-blocker {
  display: none;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: fixed;
  width: 100%;
  z-index: 10
}
.pointer-blocker.blocking {
  pointer-events: all
}
@media (min-width:801px) {
  .pointer-blocker {
    display: block;
  }
}

/* =========================================================
   MAYLAB CUSTOM UPDATES
   - desktop fixed-scroll structure disabled
   - hero right rebuilt to original two-line image title layout
   - media-query overrides grouped by breakpoint
========================================================= */

/* ---------- Common overrides ---------- */
.intro-right {
  position: relative;
  overflow: hidden;
}

.intro-right__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.intro-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

.intro-right__header {
  position: absolute;
  top: 4.4rem;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.intro-right__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.intro-right__content-center {
  position: relative;
  display: flex;
  flex-direction: column !important;
  align-items: center !important;
}

.intro-right__index {
  margin-bottom: 1rem;
}

.intro-right__title-top {
  margin-bottom: 0.6rem;
}

.intro-right__title-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1.6rem;
}

.intro-right__picture-wrap {
  width: 12.1rem;
  aspect-ratio: 121 / 152;
  overflow: hidden;
}

.intro-right__picture {
  width: 100%;
  height: 100%;
  margin-inline: 0;
  object-fit: cover;
}

.footer-right-copy {
  margin-top: 1.6rem;
  text-align: center;
  max-width: 28rem;
}

.intro-right__center-top {
  display: none;
}

/* ---------- Mobile / tablet ---------- */
@media (max-width:800px) {
  .intro-right__header {
    top: 4.4rem;
  }

  .intro-right__title-row {
    gap: 1.2rem;
  }

  .intro-right__picture-wrap {
    width: 12.1rem;
  }

  .footer-right-copy {
    max-width: 24rem;
  }
}

/* ---------- Desktop ---------- */
@media (min-width:801px) {
  /* disable original fixed/horizontal desktop structure */
  #app {
    position: relative !important;
    height: auto !important;
    min-height: 100vh;
  }

  #scroll-wrapper {
    position: relative;
    width: 100%;
  }

  .wrapper {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    display: block !important;
    white-space: normal !important;
    transform: none !important;
  }

  .intro,
  .works,
  .about-designer,
  .about-photo,
  .photos {
    width: 100%;
    min-height: 100vh;
  }

  .intro-wrapper,
  .works-wrapper,
  .about-designer-wrapper {
    min-height: 100vh;
  }

  .works-wrapper {
    align-items: stretch;
  }

  .works-display,
  .sticky-block {
    min-height: 100vh;
  }

  .sticky-block {
    top: 0;
  }

  .photos {
    align-items: stretch;
  }

  .photos-bg__wrapper,
  .photos-description,
  .photos-list__wrapper {
    min-height: 100vh;
  }

  .intro-right__header {
    top: 4.4rem;
  }

  .intro-right__title-row {
    gap: 1.6rem;
  }

  .intro-right__picture-wrap {
    width: 12.1rem;
  }

  .footer-right-copy {
    max-width: 28rem;
  }
}