/* Kiyomi: Figma frame 2142:6709, 1920 × 6885. */
.page-kiyomi .kiyomi-concept {
  position: relative;
  height: 56.25vw;
  background: #481312;
  overflow: hidden;
}
.kiyomi-concept__chopstick,
.kiyomi-concept__letter { position: absolute; object-fit: contain; }
.page-kiyomi .kiyomi-concept__chopstick {
  left: 19.801432%;
  top: 4.907407%;
  width: 15.104167%;
  height: 90.925926%;
}
.page-kiyomi .kiyomi-concept__letter {
  left: 65.748901%;
  top: 9.179145%;
  width: 20.208333%;
  height: 81.666667%;
}
.page-kiyomi .kiyomi-wordmark {
  display: grid;
  place-items: center;
  height: 42.1875vw;
  background: #481312;
}
.page-kiyomi .kiyomi-wordmark img {
  width: 74.635417%;
  height: 43.580247%;
  object-fit: contain;
}
.kiyomi-signage {
  position: relative;
  height: 56.25vw;
  background: #fff;
}
.kiyomi-signage img { position: absolute; object-fit: cover; }
.kiyomi-signage__render {
  left: 12.65625%;
  top: 25%;
  width: 29.895833%;
  height: 49.97046%;
}
.kiyomi-signage__photo {
  left: 53.811849%;
  top: 12.5%;
  width: 37.760417%;
  height: 75.077944%;
}
.kiyomi-facade { margin: 0; height: 56.25vw; background: #1a1712; overflow: hidden; }
.kiyomi-facade img { width: 100%; height: 100%; object-fit: contain; }
.kiyomi-social { position: relative; height: 56.25vw; background: #1a1712; }
.kiyomi-social img {
  position: absolute;
  top: 11.851852%;
  width: 20.260417%;
  height: 76.782769%;
  object-fit: contain;
}
.kiyomi-social__feed { left: 18.90625%; }
.kiyomi-social__story { left: 61.822917%; }
.project-footer .project-nav__image--vahit { object-fit: contain; padding: 2.083333vw; background: #d0d0d0; }

@media (min-width: 901px) {
  .page-kiyomi { --side: 5.208333vw; }
  .page-kiyomi .hero {
    --hero-inset: max(100px, 5.208333vw);
    --hero-block-inset: clamp(24px, 3.703704svh, 60px);
    height: 100svh;
    min-height: 0;
  }
  .page-kiyomi .hero__title,
  .page-kiyomi .hero__description { top: var(--hero-block-inset); }
  .page-kiyomi .hero__title { left: 50.052609%; }
  .page-kiyomi .hero__description {
    left: calc(75% - var(--hero-inset) / 2);
    width: calc((100% - 2 * var(--hero-inset)) / 4);
  }
  .page-kiyomi .hero__mark {
    left: 50.009766%;
    top: 47.765299%;
    width: 29.427083%;
    height: 12.87037%;
  }
  .page-kiyomi .hero__meta { bottom: var(--hero-block-inset); }
  .page-kiyomi .hero__meta--place { left: 50.008333%; width: calc((100% - 2 * var(--hero-inset)) / 4); }
  .page-kiyomi .hero__meta--discipline { left: calc(75% - var(--hero-inset) / 2); }
  .page-kiyomi .hero__meta--year { right: var(--hero-inset); }
}

@media (max-width: 900px) {
  .project-footer .project-nav__image--vahit { padding: 12px; }
  .page-kiyomi .hero {
    min-height: 100svh;
    height: auto;
    grid-template-rows: auto auto minmax(5rem, 1fr) auto auto;
    row-gap: 1rem;
  }
  .page-kiyomi .hero__mark {
    width: min(72vw, 60svh, 28rem);
    height: auto;
    aspect-ratio: 565 / 139;
    margin: 1rem 0;
  }
  .page-kiyomi .kiyomi-concept { height: 68vw; }
  .page-kiyomi .kiyomi-wordmark { height: 42.1875vw; }
  .kiyomi-signage { height: 68vw; }
  .kiyomi-signage__render { left: 5%; width: 37%; }
  .kiyomi-signage__photo { left: 51%; width: 44%; }
  .kiyomi-social { height: 92vw; }
  .kiyomi-social img { top: 10%; width: 35%; height: 80%; }
  .kiyomi-social__feed { left: 9%; }
  .kiyomi-social__story { left: 56%; }
}

.kiyomi-concept__letter svg { display: block; width: 100%; height: 100%; }