@import url("https://use.typekit.net/mlw6xcm.css");
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  min-height: 100%;
  background: #453e35;
  font-family: "adobe-caslon-pro", "Adobe Caslon Pro", "Times New Roman", serif;
  color: #fff;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  background: #453e35;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
}

p,
h1,
h2,
h3,
figure,
ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

[hidden] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

.chapter02 {
  position: relative;
  background: #453e35;
  color: #fff;
  font-family: "adobe-caslon-pro", "Adobe Caslon Pro", "Times New Roman", serif;
}

.chapter02__preloader {
  position: fixed;
  z-index: 2000;
  inset: 0;
  background: #453e35;
  opacity: 1;
  transition: opacity 760ms cubic-bezier(0.22, 1, 0.36, 1), visibility 760ms cubic-bezier(0.22, 1, 0.36, 1);
}

.chapter02__preloader.is-hidden {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.chapter02__main-visual {
  position: sticky;
  z-index: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3/4;
  background: #453e35;
}

.chapter02__hero-picture,
.chapter02__hero-image {
  display: block;
  width: 100%;
  height: 100%;
}

.chapter02__hero-image {
  object-fit: cover;
}

.chapter02__hero-picture {
  filter: blur(12px);
  transform: scale(1.04);
  transition: filter 1200ms cubic-bezier(0.22, 1, 0.36, 1), transform 1200ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-loaded .chapter02__hero-picture {
  filter: blur(0);
  transform: scale(1);
}

.chapter02__logo {
  position: absolute;
  z-index: 1;
  top: clamp(13.12px, 4.102564vw, 22.4px);
  left: clamp(13.12px, 4.102564vw, 22.4px);
  width: 13.0432%;
  height: auto;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-loaded .chapter02__logo {
  opacity: 1;
  transition-delay: 260ms;
}

.chapter02__title {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  width: 46.1538%;
  height: auto;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-loaded .chapter02__title {
  opacity: 1;
  transition-delay: 380ms;
}

.chapter02__content {
  position: relative;
  z-index: 1;
  background: #453e35;
}

.look-gallery {
  width: min(100%, 1200px);
  margin-inline: auto;
  padding-bottom: clamp(131.2px, 41.025641vw, 224px);
  background: #453e35;
}

.is-reveal-ready {
  opacity: 0;
  transform: translate3d(0, clamp(9.84px, 3.076923vw, 16.8px), 0);
  transition: opacity 1100ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 1200ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: opacity, transform;
}

.is-reveal-ready.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

.look-card {
  position: relative;
}

.look-card--space-64 {
  margin-top: clamp(52.48px, 16.410256vw, 89.6px);
}

.look-card--space-72 {
  margin-top: clamp(59.04px, 18.461538vw, 100.8px);
}

.look-card--space-80 {
  margin-top: clamp(65.6px, 20.512821vw, 112px);
}

.look-card--space-160 {
  margin-top: clamp(131.2px, 41.025641vw, 224px);
}

.look-card--full,
.look-card--landscape {
  width: 100%;
}

.look-card--medium {
  width: 67.1795%;
  margin-inline: auto;
}

.look-card--medium-offset {
  width: 67.1795%;
  margin-left: 14.359%;
}

.look-card--wide-start,
.look-card--wide-end {
  width: 87.6923%;
}

.look-card--wide-end {
  margin-left: auto;
}

.look-card--small {
  width: 60%;
  margin-inline: auto;
}

.look-card--duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5128%;
  width: 91.7949%;
  margin-inline: auto;
}

.look-card__trigger,
.look-card__figure {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  aspect-ratio: 3/4;
}

.look-card--landscape .look-card__figure {
  aspect-ratio: 4/3;
}

.look-card__trigger {
  cursor: pointer;
}

.look-card__trigger:focus-visible {
  outline: 1px solid #fff;
  outline-offset: -3px;
}

.look-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.look-card__plus {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(28.7px, 8.974359vw, 49px);
  height: clamp(28.7px, 8.974359vw, 49px);
  pointer-events: none;
}

.look-card__plus::before,
.look-card__plus::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(15.58px, 4.871795vw, 26.6px);
  height: 1px;
  background: #fff;
  content: "";
  transform: translate(-50%, -50%);
}

.look-card__plus::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.chapter02-staff {
  padding-bottom: 80px;
  text-align: center;
}

.chapter02-staff__item + .chapter02-staff__item {
  margin-top: 16px;
}

.chapter02-staff__role,
.chapter02-staff__name {
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.chapter02-staff__role {
  font-size: 12px;
}

.chapter02-staff__name {
  font-size: 12px;
}

.chapter02-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 80px;
  overflow: hidden;
  padding: 80px 24px 24px;
  text-align: center;
}

.chapter02-footer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

.chapter02-footer__logo {
  width: 116px;
  height: auto;
}

.chapter02-footer__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45em;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.chapter02-footer__nav a {
  text-decoration: none;
}

.chapter02-footer__copyright {
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

.look-modal {
  position: fixed;
  z-index: 1000;
  inset: 0;
  background: rgba(69, 62, 53, 0.92);
  color: #fff;
  opacity: 0;
  transition: opacity 240ms ease;
}

.look-modal.is-open {
  opacity: 1;
}

.look-modal__scroll {
  --modal-top-offset: clamp(39.36px, 12.307692vw, 67.2px);
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100dvh;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.look-modal__close {
  position: fixed;
  z-index: 3;
  top: clamp(6.56px, 2.051282vw, 11.2px);
  right: clamp(6.56px, 2.051282vw, 11.2px);
  width: clamp(27.88px, 8.717949vw, 47.6px);
  height: clamp(27.88px, 8.717949vw, 47.6px);
  cursor: pointer;
}

.look-modal__close::before,
.look-modal__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(19.68px, 6.153846vw, 33.6px);
  height: 1px;
  background: #fff;
  content: "";
}

.look-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.look-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.look-modal__close:focus-visible {
  outline: 1px solid #fff;
}

.look-modal__list {
  display: grid;
  gap: clamp(45.92px, 14.358974vw, 78.4px);
  width: min(calc(100% - clamp(26.24px, 8.205128vw, 44.8px)), 640px);
  margin-inline: auto;
  padding-block: clamp(39.36px, 12.307692vw, 67.2px) clamp(65.6px, 20.512821vw, 112px);
}

.look-modal__look {
  scroll-margin-top: clamp(39.36px, 12.307692vw, 67.2px);
}

.look-modal__credits {
  display: grid;
  gap: clamp(9.84px, 3.076923vw, 16.8px);
  margin-top: clamp(19.68px, 6.153846vw, 33.6px);
  padding-inline: clamp(3.28px, 1.025641vw, 5.6px);
}

.look-slider {
  position: relative;
}

.look-slider.is-single .look-slider__button {
  display: none;
}

.look-slider__viewport {
  overflow: hidden;
  width: 100%;
  aspect-ratio: 3/4;
  touch-action: pan-y;
  cursor: grab;
}

.look-slider__viewport:active {
  cursor: grabbing;
}

.look-slider__track {
  display: flex;
  height: 100%;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.look-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  margin: 0;
}

.look-slider__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.look-slider__button {
  position: absolute;
  z-index: 2;
  top: 50%;
  width: clamp(29.52px, 9.230769vw, 50.4px);
  height: clamp(36.08px, 11.282051vw, 61.6px);
  cursor: pointer;
  transform: translateY(-50%);
}

.look-slider__button--prev {
  left: 0;
}

.look-slider__button--next {
  right: 0;
}

.look-slider__button:disabled {
  cursor: default;
  opacity: 0.35;
}

.look-slider__button:focus-visible {
  outline: 1px solid #fff;
}

.look-slider__arrow {
  position: absolute;
  top: 50%;
  width: clamp(9.84px, 3.076923vw, 16.8px);
  height: clamp(18.04px, 5.641026vw, 30.8px);
  background: url("https://www.dot-st.com/static/docs/chaos/pages/261105_ch_quiethours/assets/images/arrow.png") center/contain no-repeat;
}

.look-slider__button--prev .look-slider__arrow {
  left: clamp(6.56px, 2.051282vw, 11.2px);
  transform: translateY(-50%);
}

.look-slider__button--next .look-slider__arrow {
  right: clamp(6.56px, 2.051282vw, 11.2px);
  transform: translateY(-50%) rotate(180deg);
}

.staff-card__credit {
  display: flex;
  align-items: center;
  gap: clamp(13.12px, 4.102564vw, 22.4px);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.05em;
}

.staff-card__buy {
  flex: 0 0 auto;
  text-decoration: none;
  white-space: nowrap;
}

.staff-card__buy::before {
  content: "[ ";
}

.staff-card__buy::after {
  content: " ]";
}

html.is-modal-open,
body.is-modal-open {
  overflow: hidden;
  overscroll-behavior: none;
}

@media (min-width: 768px) {
  .chapter02__main-visual {
    width: 100vw;
    height: 100vh;
    aspect-ratio: auto;
  }
  .chapter02__hero-picture {
    position: absolute;
    inset: 0;
  }
  .chapter02__hero-image {
    width: 100%;
    max-width: none;
    height: auto;
    object-fit: initial;
    object-position: top center;
  }
  .chapter02__logo {
    top: 1.875vw;
    left: 1.875vw;
    width: 6.25vw;
  }
  .chapter02__title {
    top: 45.793%;
    left: 12.969%;
    width: 15.656%;
    transform: none;
  }
  .chapter02.is-hero-blurred .chapter02__hero-picture {
    filter: blur(12px);
    transform: scale(1.04);
  }
  .look-gallery {
    width: 100%;
    max-width: none;
    padding-bottom: 246px;
  }
  .chapter02__content {
    width: min(600px, calc(100% - 48px));
    margin-inline: auto;
  }
  .look-card--space-64 {
    margin-top: 98.462px;
  }
  .look-card--space-72 {
    margin-top: 110.769px;
  }
  .look-card--space-80 {
    margin-top: 123.077px;
  }
  .look-card--space-160 {
    margin-top: 246.154px;
  }
  .look-card__plus {
    width: 44px;
    height: 44px;
  }
  .look-card__plus::before,
  .look-card__plus::after {
    width: 24px;
  }
  .chapter02-staff,
  .chapter02-footer {
    width: 100%;
    max-width: none;
  }
  .look-modal__scroll {
    --modal-top-offset: 64px;
  }
  .look-modal__list {
    width: min(650px, calc(100% - 48px));
    padding-block: 64px 112px;
  }
  .look-modal__look {
    scroll-margin-top: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter02__preloader,
  .chapter02__hero-picture,
  .chapter02__logo,
  .chapter02__title,
  .is-reveal-ready,
  .look-modal,
  .look-slider__track {
    transition-duration: 0.01ms;
  }
}