/* ============================================================
   PAGE.CSS
   intro → works → about-designer → about-photo → photos →
   sub-page (header-photos)
   ============================================================ */


/* ============================================================
   INTRO (HERO)
   ============================================================ */

.intro,
.intro-wrapper {
  display: flex;
  flex-direction: column;
}
@media (min-width: 801px) {
  .intro,
  .intro-wrapper {
    flex-direction: row;
  }
}

.intro.mobile { margin-top: calc(var(--head-h) * -1); }

.intro-wrapper {
  will-change: transform;
}

/* intro-left */
.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-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-top: auto;
  margin-bottom: 0.8rem;
}

.intro-left__content-title { position: relative; }

.intro-left__content-title-num {
  position: absolute;
  top: -1rem;
  left: 31rem;
}
@media (min-width: 801px) {
  .intro-left__content-title-num { left: 31rem; }
}

.intro-left__footer {
  bottom: 1.6rem;
}
@media (min-width: 801px) {
  .intro-left__footer { bottom: 4.4rem; }
}

/* intro-right */
.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 {
  object-fit: cover;
  z-index: -1;
}

.intro-right__header {
  left: 0;
  position: absolute;
  text-align: center;
  top: 4.4rem;
  width: 100%;
}

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

.intro-right__center-top {
  margin-block: .2rem;
  letter-spacing: 0.04em;
}

.intro-right__content-center {
  display: flex;
  flex-direction: row;
  align-content: flex-start
}

.intro-right__content-center h4:first-child {
  transform: translateX(-4%);
}

.intro-right__content-center h4:last-child {
  transform: translateX(4%);
}

.intro-right__content-center p {
  white-space: nowrap;
}

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

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

.intro-right__picture {
  aspect-ratio: 121 / 152;
  margin-inline: 1.2rem;
  -o-object-fit: cover;
  object-fit: cover;
  width: 12.1rem;
}

.intro-right__footer { bottom: 5rem; }
@media (min-width: 801px) {
  .intro-right__footer { bottom: 4.4rem; }
}

/* shared footer */
.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; }
}

.footer-right-copy {
  margin-block: 1rem;
  text-align: center;
}

.footer-scroll {
  display: block;
  margin-top: 2.7rem;
}
@media (min-width: 801px) {
  .footer-scroll { display: none; }
}

.img-pretitle { text-transform: uppercase; }
.img-title    { margin-top: .2rem; }


/* ============================================================
   WORKS
   ============================================================ */

.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 (left panel) */
.works-display { position: relative; }

.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; }

.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; }
}

/* mobile item title */
.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);
}

.decorative-number { margin-left: auto; }

/* mobile picture */
.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,
.item-thumbnail {
  aspect-ratio: 660/400;
  background-color: #0d0d0d;
  position: relative;
  width: 100%;
}
@media (min-width: 801px) {
  .item-thumbnail { width: 66rem; }
}

/* sticky block (right panel) */
.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;
}

.sticky-block__footer { margin-top: auto; }

/* works list */
.works-list__item {
  display: flex;
  flex-direction: column;
  margin-bottom: .8rem;
  opacity: .4;
  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;
}

.btn-modal {
  margin-bottom: 2rem;
  width: 100%;
}
@media (min-width: 801px) {
  .btn-modal { margin-bottom: 2.8rem; }
}


/* ============================================================
   ABOUT DESIGNER
   ============================================================ */

.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;
  }
}

/* left */
.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;
  }
}

/* right */
.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;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: -1;
}

/* card */
.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; }

/* accordion */
.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
   ============================================================ */

.about-photo {
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
@media (min-width: 801px) {
  .about-photo { flex-direction: row; }
}

/* left */
.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; }
}

/* right */
.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;
  object-fit: cover;
  position: absolute;
  width: 100%;
  z-index: -1;
}

.btn-description {
  margin-top: 1.6rem;
  width: 100%;
}
@media (min-width: 801px) {
  .btn-description { margin-top: 4.6rem; }
}


/* ============================================================
   PHOTOS
   ============================================================ */

.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;
  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; }

/* list */
.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);
  }
}

/* description / CTA */
.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; }


/* ============================================================
   SUB-PAGE — header-photos (sidebar nav)
   ============================================================ */

.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;
  }
}

.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__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__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;
}