@charset "utf-8";

/* ==================================================
 * ==================================================
 * about-page
 * ==================================================
 * ================================================== */
.about-page{
  --about-content-width: 42rem;
  --about-opening-scroll-space: 145svh;
  --about-chapter-scroll-space: 170svh;
  background: var(--color-bg-deep);
  min-width: 0;
  overflow: clip;
}

/* ==================================================
 * ==================================================
 * about-story static base
 * ==================================================
 * ================================================== */
.about-story{
  position: relative;
}
.about-story__stage{
  display: grid;
}
.about-story__track{
  display: none;
}
.about-story__slide{
  color: var(--color-white);
  background: var(--color-bg-deep);
  display: grid;
  min-width: 0;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: clip;
}
.about-story__visual,
.about-story__media,
.about-story__media-sharp,
.about-story__media-blur,
.about-story__scrim,
.about-story__grain{
  position: absolute;
  inset: 0;
}
.about-story__visual{
  z-index: 0;
  overflow: hidden;
}
.about-story__media{
  z-index: 0;
  overflow: hidden;
}
.about-story__media-sharp,
.about-story__media-blur{
  overflow: hidden;
}
.about-story__media-sharp{
  z-index: 0;
}
.about-story__media-blur{
  display: none;
  z-index: 1;
  opacity: 0;
}
.about-story__image{
  object-fit: cover;
  object-position: center center;
  width: 100%;
  height: 100%;
  transform: scale(1.02);
  transform-origin: center center;
}
.about-story__scrim{
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.16) 34%, rgba(0,0,0,.72) 100%),
    linear-gradient(90deg, rgba(0,0,0,.36) 0%, rgba(0,0,0,.10) 100%);
  pointer-events: none;
}
.about-story__scrim--opening{
  background:
    linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.70) 100%),
    linear-gradient(90deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.16) 56%, rgba(0,0,0,.04) 100%);
}
.about-story__grain{
  z-index: 3;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: .10;
  pointer-events: none;
}
.about-story__screen{
  display: grid;
  align-items: center;
  width: 100%;
  min-height: 100svh;
  padding-top: calc(var(--layout-header-height) + clamp(2rem, 5vh, 5rem));
  padding-bottom: clamp(3rem, 8vh, 8rem);
  padding-inline: var(--layout-inner-padding);
  position: relative;
  z-index: 4;
}
.about-story__screen--opening{
  grid-template-rows: minmax(0, 1fr) auto;
  padding-top: calc(var(--layout-header-height) + clamp(3rem, 8vh, 7rem));
  padding-bottom: 1.5rem;
}

/* ==================================================
 * about-story opening
 * ================================================== */
.about-story__opening-content{
  display: grid;
  align-content: end;
  justify-items: start;
  gap: clamp(1rem, 2vw, 2rem);
  width: min(100%, 62rem);
  padding-bottom: clamp(3rem, 12vh, 6rem);
}
.about-story__opening-head{
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
}
.about-story__opening-label{
  font-family: var(--font-en-sans);
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.about-story__opening-label-clip{
  display: block;
  overflow: clip;
}
.about-story__opening-label-text,
.about-story__opening-title-text{
  display: block;
}
.about-story__opening-title{
  display: grid;
  gap: .06em;
  font-size: clamp(3rem, 4vw, 4rem);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-wrap: balance;
  overflow: clip;
}
.about-story__opening-body{
  display: grid;
  gap: .875rem;
  width: min(100%, 34rem);
}
.about-story__opening-lead{
  font-size: clamp(1rem, 1.5vw, 1.375rem);
  font-weight: 500;
  line-height: 1.8;
}
.about-story__opening-text{
  font-size: var(--fs-xs);
  line-height: 1.9;
  opacity: .82;
}
.about-story__opening-scroll{
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-self: start;
}
.about-story__opening-scroll-label{
  font-family: var(--font-en-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.about-story__opening-scroll-line{
  background: rgba(255,255,255,.64);
  display: block;
  width: clamp(3rem, 7vw, 7rem);
  height: 1px;
  position: relative;
  overflow: hidden;
}
.about-story__opening-scroll-line::after{
  content: "";
  background: var(--color-white);
  width: 48%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -48%;
  animation: about-scroll-line 2.2s cubic-bezier(.22,1,.36,1) infinite;
}
@keyframes about-scroll-line{
  0%{transform: translateX(0);}
  55%,100%{transform: translateX(310%);}
}

/* ==================================================
 * about-story chapter
 * ================================================== */
.about-story__chapter-content{
  display: grid;
  gap: clamp(2rem, 4vw, 4rem);
  width: min(100%, var(--about-content-width));
  min-width: 0;
}
.about-story__chapter-head{
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
}
.about-story__chapter-meta{
  display: flex;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--font-en-sans);
  line-height: 1;
}
.about-story__chapter-number{
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  opacity: .52;
}
.about-story__chapter-label-clip,
.about-story__chapter-title-line{
  display: block;
  overflow: clip;
}
.about-story__chapter-label-text,
.about-story__chapter-title-text{
  display: block;
}
.about-story__chapter-label-text{
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .20em;
  text-transform: uppercase;
}
.about-story__chapter-title{
  display: grid;
  gap: .08em;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -.035em;
}
.about-story__chapter-body{
  display: grid;
  gap: .875rem;
  width: min(100%, 36rem);
}
.about-story__chapter-lead{
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  line-height: 1.8;
}
.about-story__chapter-text{
  font-size: var(--fs-xs);
  line-height: 1.9;
  opacity: .82;
}

/* ==================================================
 * about-story nav
 * ================================================== */
.about-story__nav{
  display: none;
}
.about-story__nav-counter{
  display: none;
  align-items: baseline;
  gap: .35rem;
  font-family: var(--font-en-sans);
  font-size: var(--fs-2xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
}
.about-story__nav-counter-separator{
  opacity: .42;
}
.about-story__nav-list{
  display: grid;
  gap: 0;
}
.about-story__nav-button{
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
}
.about-story__nav-dot{
  background: currentColor;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: var(--radius-pill);
  opacity: .34;
  transform: scale(1);
  transition:
    opacity 240ms cubic-bezier(.22,1,.36,1),
    transform 240ms cubic-bezier(.22,1,.36,1);
}
.about-story__nav-button[aria-current="step"] .about-story__nav-dot,
.about-story__nav-button.is-hovered .about-story__nav-dot,
.about-story__nav-button:focus-visible .about-story__nav-dot{
  opacity: 1;
  transform: scale(1.75);
}

/* ==================================================
 * ==================================================
 * enhanced single-stage experience
 * ==================================================
 * ================================================== */
.about-page.is-about-enhanced .about-story{
  color: var(--color-white);
  background: var(--color-bg-deep);
}
.about-page.is-about-enhanced .about-story__stage{
  display: block;
  width: 100%;
  height: 100svh;
  position: sticky;
  top: 0;
  z-index: 1;
  overflow: hidden;
  isolation: isolate;
}
.about-page.is-about-enhanced .about-story__track{
  display: block;
  margin-top: -100svh;
  position: relative;
  z-index: 2;
  pointer-events: none;
}
.about-page.is-about-enhanced .about-story__segment--opening{
  min-height: var(--about-opening-scroll-space);
}
.about-page.is-about-enhanced .about-story__segment--chapter{
  min-height: var(--about-chapter-scroll-space);
}
.about-page.is-about-enhanced .about-story__slide{
  display: block;
  width: 100%;
  height: 100svh;
  min-height: 0;
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.about-page.is-about-enhanced .about-story__slide--opening{
  z-index: 1;
  opacity: 1;
  visibility: visible;
}
.about-page.is-about-enhanced .about-story__slide--chapter{
  background: transparent;
}
.about-page.is-about-enhanced .about-story__slide--chapter[data-about-story-slide="0"]{
  z-index: 2;
  opacity: 1;
  visibility: visible;
}
.about-page.is-about-enhanced .about-story__visual,
.about-page.is-about-enhanced .about-story__screen{
  width: 100%;
  height: 100svh;
}
.about-page.is-about-enhanced .about-story__slide--chapter[data-about-story-slide="0"] .about-story__visual{
  position: absolute;
  inset: 0;
  clip-path: ellipse(68% .5% at 50% 100%);
  -webkit-clip-path: ellipse(68% .5% at 50% 100%);
  backface-visibility: hidden;
  contain: paint;
  will-change: clip-path;
}
.about-page.is-about-enhanced .about-story__media-blur{
  display: block;
  filter: blur(12px) saturate(.96);
  transform: scale(1.06, 1.10);
  transform-origin: center center;
}
.about-page.is-about-enhanced .about-story__image{
  will-change: transform;
}
.about-page.is-about-enhanced .about-story__slide--chapter .about-story__screen{
  align-items: end;
  padding-bottom: clamp(4rem, 12vh, 8rem);
  padding-right: calc(var(--layout-inner-padding) + 1.5rem);
  opacity: 0;
  visibility: hidden;
}
.about-page.is-about-enhanced .about-story__nav{
  color: var(--color-white);
  display: grid;
  justify-items: center;
  gap: 1rem;
  position: absolute;
  right: 1rem;
  top: 50%;
  z-index: 20;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
}

/* ==================================================
 * responsive 768px
 * ================================================== */
@media (min-width: 768px){
  .about-page{
    --about-opening-scroll-space: 155svh;
    --about-chapter-scroll-space: 125svh;
  }
  .about-story__screen{
    padding-inline: max(var(--layout-inner-padding), calc((100vw - var(--layout-inner-width)) / 2 + var(--layout-inner-padding)));
  }
  .about-story__screen--opening{
    padding-bottom: clamp(2rem, 5vw, 5rem);
  }
  .about-story__opening-content{
    padding-bottom: clamp(3rem, 8vh, 8rem);
  }
  .about-story__opening-title{
    font-size: clamp(3rem, 6vw, 6rem);
    line-height: .98;
  }
  .about-story__chapter-title{
    font-size: clamp(2rem, 3vw, 3rem);
  }
  .about-story__opening-body,
  .about-story__chapter-body{
    gap: clamp(1rem, 1.5vw, 1.5rem);
  }
  .about-story__opening-text,
  .about-story__chapter-text{
    font-size: var(--fs-sm);
    line-height: 2;
  }
  .about-page.is-about-enhanced .about-story__slide--chapter .about-story__screen{
    padding-right: max(var(--layout-inner-padding), calc((100vw - var(--layout-inner-width)) / 2 + var(--layout-inner-padding)));
  }
}

/* ==================================================
 * responsive 1025px
 * ================================================== */
@media (min-width: 1025px){
  .about-page{
    --about-opening-scroll-space: 180svh;
    --about-chapter-scroll-space: 145svh;
  }
  .about-story__scrim{
    background:
      linear-gradient(90deg, rgba(0,0,0,.66) 0%, rgba(0,0,0,.22) 54%, rgba(0,0,0,.10) 100%),
      linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.06) 42%, rgba(0,0,0,.48) 100%);
  }
  .about-story__scrim--opening{
    background:
      linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,.08) 38%, rgba(0,0,0,.70) 100%),
      linear-gradient(90deg, rgba(0,0,0,.54) 0%, rgba(0,0,0,.16) 56%, rgba(0,0,0,.04) 100%);
  }
  .about-story__opening-content,
  .about-story__chapter-content{
    margin-left: clamp(0rem, 3vw, 3rem);
  }
  .about-story__chapter-title{
    font-size: clamp(3.25rem, 4vw, 4rem);
  }
  .about-page.is-about-enhanced .about-story__media-blur{
    filter: blur(18px) saturate(.94);
  }
  .about-page.is-about-enhanced .about-story__slide--chapter .about-story__screen{
    align-items: center;
    padding-bottom: clamp(3rem, 8vh, 8rem);
  }
  .about-page.is-about-enhanced .about-story__nav{
    right: max(1.5rem, var(--layout-inner-padding));
  }
  .about-story__nav-counter{
    display: flex;
  }
  .about-story__nav-list{
    gap: .25rem;
  }
  .about-story__nav-button{
    width: 2rem;
    height: 2rem;
  }
}

/* ==================================================
 * reduced motion
 * ================================================== */
@media (prefers-reduced-motion: reduce){
  .about-story__opening-scroll-line::after{
    animation: none;
    transform: translateX(148%);
  }
  .about-story__nav-dot{
    transition: none;
  }
}