/* Each sequence uses native document scroll or the exhibit's existing scrollport. */
.home-reel {
  height: 165svh;
  margin: 0 calc(-1 * var(--gutter));
}
.reel-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
}
.home-reel .principle-art {
  --inset: calc((1 - var(--open, 0)) * 9%);
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  clip-path: inset(
    var(--inset) calc(var(--inset) + (1 - var(--open, 0)) * 3%) round calc((1 - var(--open, 0)) * 24px)
  );
}
.home-reel .principle-art img {
  object-fit: cover;
  transform: scale(calc(1.08 - 0.08 * var(--open, 0)));
  transition: none;
}
.home-reel .image-cta {
  right: calc(4% + var(--inset));
  bottom: calc(5% + var(--inset));
}
.perspective-cards {
  margin-top: clamp(24px, 4vw, 70px);
}
.perspective-card .card-image img {
  translate: 0 calc(var(--plate-travel, 0) * 2%);
  scale: 1.045;
}

.institute-flight {
  height: 235svh;
  background: #101713;
  position: relative;
}
.flight-pin {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}
.flight-pin .space-frame {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
}
.flight-pin .arrival .space-plate {
  background-size: cover;
  transform-origin: 35% 52%;
  transform: translate(calc(var(--look-x, 0) * -0.65%), calc(var(--look-y, 0) * -0.65%))
    scale(calc(1.025 + var(--push, 0) * 2.4));
}
.flight-pin .inquiry {
  opacity: var(--pass, 0);
  pointer-events: none;
}
.flight-pin .inquiry .space-plate {
  transform-origin: 60% 46%;
  transform: scale(calc(1.04 + var(--push, 0) * 0.18))
    translate(calc(var(--look-x, 0) * -0.9%), calc(var(--look-y, 0) * -0.9%));
}
.flight-pin .arrival h1,
.flight-pin .scene-scroll {
  opacity: var(--arrival-type, 1);
  translate: 0 calc((1 - var(--arrival-type, 1)) * 65%);
}
.flight-pin .inquiry :is(h2, p) {
  opacity: var(--inside-type, 0);
  translate: 0 calc((1 - var(--inside-type, 0)) * 48px);
}
.flight-pin .inquiry-disciplines {
  translate: 0 calc((1 - var(--inside-type, 0)) * -60px);
}
.flight-dust {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.institute-flight #inquiry {
  position: absolute;
  bottom: 100svh;
}
.foundations {
  isolation: isolate;
  background: #8e9f91;
}
.foundations::before {
  content: '';
  position: absolute;
  inset: -5%;
  z-index: -1;
  background:
    linear-gradient(110deg, #5f786766, #bcccb1b0 55%, #435a49bb),
    url('/assets/editorial/institute-inquiry.webp') center/cover;
  filter: saturate(0.62);
}
.foundation-deck {
  gap: 2vw;
  perspective: 1050px;
}
.foundation-deck article {
  --fan-side: -1;
  --tilt: -7deg;
  --roll: -4deg;
  --step: 1;
  position: relative;
}
.foundation-deck article:nth-child(2) {
  --fan-side: 0;
  --step: 0.65;
  --tilt: 5deg;
  --roll: 3deg;
}
.foundation-deck article:nth-child(3) {
  --fan-side: 1;
  --step: 1.25;
  --tilt: -11deg;
  --roll: -7deg;
}
.foundation-deck article:nth-child(n) {
  transform: translate3d(
      calc((1 - var(--fan, 1)) * var(--fan-side) * -13vw),
      calc((1 - var(--fan, 1)) * var(--step) * 18vh),
      calc((1 - var(--fan, 1)) * -190px)
    )
    rotateY(calc(var(--tilt) + var(--look-x, 0) * 4deg + (1 - var(--fan, 1)) * var(--fan-side) * 24deg))
    rotateZ(calc(var(--roll) + (1 - var(--fan, 1)) * var(--fan-side) * 12deg));
}

.exhibit-wall {
  grid-template-columns: 1.8fr 1fr;
  gap: clamp(18px, 2.1vw, 40px);
}
.exhibit-wall .chapter-link {
  position: relative;
}
.exhibit-art img {
  translate: 0 calc(var(--plate-travel, 0) * 3%);
}
.panel-0 img {
  scale: 1.075;
}
.panel-open {
  transition:
    transform 0.35s,
    background 0.35s;
}
.chapter-link:is(:focus-visible, :hover) .panel-open {
  transform: rotate(45deg);
  background: white;
}
.patent-chapter[open] {
  --chapter-paper: #e6eae2;
  position: fixed;
  inset: 0;
  display: grid;
  grid-template: auto 1fr auto 1fr auto / minmax(0, 1.12fr) minmax(0, 1fr);
  align-content: start;
  gap: clamp(16px, 2.6vh, 36px) clamp(30px, 5.5vw, 112px);
  width: 100%;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: clamp(20px, 3.5vw, 64px);
  color: #18231f;
  background: var(--chapter-paper);
  overflow: auto;
  overscroll-behavior: contain;
}
.patent-chapter[data-chapter-panel='1'] {
  --chapter-paper: #eee8dc;
}
.patent-chapter[data-chapter-panel='2'] {
  --chapter-paper: #eadfd5;
}
.patent-chapter::backdrop {
  background: transparent;
}
.patent-chapter .dialog-top,
.chapter-turn {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
}
.patent-chapter .dialog-top {
  grid-row: 1;
}
.patent-chapter .chapter-artwork {
  position: relative;
  isolation: isolate;
  align-self: stretch;
  grid-column: 1;
  grid-row: 2/5;
  overflow: hidden;
  min-height: 44svh;
  border-radius: clamp(10px, 1.5vw, 26px);
}
.chapter-plate {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #39403a;
}
.chapter-plate img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.chapter-plate[data-panel='1'] {
  background: linear-gradient(145deg, #98866e, #d4c7af 60%, #ad9982);
}
.chapter-plate[data-panel='2'] {
  background: linear-gradient(120deg, #51211d, #782e24 19%, #d2c1a7 19.2%, #e5dac8 70%, #c4b299);
}
.chapter-plate:not([data-panel='0']) img {
  object-fit: contain;
  padding: clamp(16px, 3vw, 64px);
}
.patent-chapter h2,
.patent-chapter .reading-copy {
  grid-column: 2;
  max-width: 54ch;
  margin: 0;
}
.patent-chapter h2 {
  align-self: end;
  grid-row: 2;
  font-size: clamp(32px, min(4.1vw, 7vh), 86px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.055em;
  text-wrap: balance;
}
.patent-chapter .reading-copy {
  grid-row: 3;
  font-size: clamp(15px, 1.14vw, 21px);
  line-height: 1.6;
}
.patent-chapter .reading-copy p {
  margin: 0 0 0.9em;
}
.chapter-turn {
  grid-row: 5;
  border-top: 1px solid #62706466;
  padding-top: 14px;
}
.chapter-turn button {
  padding: 5px 0;
}
.studio-photo {
  background-image:
    linear-gradient(90deg, #e6dcca75, transparent 55%), url('/assets/editorial/studio-backplate.webp');
  transform-origin: 68% 52%;
  transform: translateX(calc(-110% * var(--travel, 0))) scale(calc(1 + 0.075 * var(--travel, 0)));
}
.dancer-foreground {
  display: block;
  opacity: 1;
  transform-origin: 68% 52%;
  transform: translateX(calc(-122% * var(--travel, 0))) scale(calc(1 + 0.15 * var(--travel, 0)));
}
.passing-wall {
  z-index: 1;
  pointer-events: none;
  left: 100%;
  width: 25%;
  background: linear-gradient(90deg, #544d44 0%, #c9b9a1 5%, #dfcfbb 47%, #9a8b77 88%, #706656);
  box-shadow: -2vw 0 4vw #241f1922;
  transform: translateX(calc(-530% * var(--travel, 0)));
}
.coast-photo {
  transform-origin: 77% 49%;
  transform: scale(calc(1.19 - 0.19 * var(--travel, 0))) translateX(calc((1 - var(--travel, 0)) * 4%));
}
.coast-reading {
  transform: translateX(calc((1 - var(--end, 0)) * 3vw));
}
.chapter-rail {
  z-index: 2;
}
.photo-chapter {
  overflow: hidden;
}
.photo-chapter img {
  object-position: 50% calc(50% + var(--plate-travel, 0) * 13%);
}
.contact-opening {
  overflow: clip;
  min-height: 100svh;
}
.contact-opening > img {
  width: 78%;
  object-position: 62% 46%;
  transform-origin: 72% 46%;
  transform: translate3d(calc(var(--look-x, 0) * -0.7%), calc(var(--leave, 0) * 12%), 0)
    scale(calc(1.035 + var(--leave, 0) * 0.095));
}
.contact-opening .contact-copy {
  translate: 0 calc(var(--leave, 0) * -7vh);
}
.contact-opening .editorial-line {
  bottom: -2.2vw;
  height: 12vw;
}
.contact-directory nav a span,
.email-large .circle {
  transition: transform 0.32s ease;
}
.contact-directory nav a:is(:hover, :focus-visible) span,
.email-large:is(:hover, :focus-visible) .circle {
  transform: translate(4px, -4px);
}
.ex-life {
  --life-width: min(100%, calc((var(--art-h) - 24px) * 1.5));
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  justify-items: center;
  background: transparent;
  border-radius: 0;
}
.ex-life img {
  align-self: end;
  width: var(--life-width);
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  border-radius: clamp(10px, 1.5vw, 23px);
}
.ex-life figcaption {
  position: static;
  width: var(--life-width);
  padding: 8px 0 0;
  line-height: 16px;
  background: transparent;
  color: #34463b;
}
.ex-macro img {
  translate: calc(var(--gallery-depth, 0) * 5%) 0;
}
@media (max-width: 720px) {
  .home-reel {
    height: 140svh;
  }
  .home-reel .reel-pin {
    height: 76svh;
    top: 12svh;
  }
  .home-reel .principle-art img {
    object-fit: contain;
  }
  .flight-pin .arrival .space-plate {
    background-size: auto 81%;
    background-repeat: no-repeat;
  }
  .foundation-deck {
    gap: 3vw;
  }
  .patent-chapter[open] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px max(20px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom))
      max(20px, env(safe-area-inset-left));
  }
  .patent-chapter .chapter-artwork {
    order: 1;
    flex: none;
    width: 100%;
    height: clamp(180px, 35svh, 380px);
    min-height: 0;
  }
  .patent-chapter h2 {
    order: 2;
    align-self: start;
    font-size: clamp(36px, 8vw, 54px);
  }
  .patent-chapter .reading-copy {
    order: 3;
  }
  .patent-chapter .chapter-turn {
    order: 4;
    margin-top: auto;
  }
  .ex-image.ex-life {
    height: auto;
    align-self: center;
  }
  .ex-life img,
  .ex-life figcaption {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-reel,
  .reel-pin {
    height: auto;
  }
  .home-reel .reel-pin {
    position: relative;
    top: auto;
    height: auto;
  }
  .home-reel .principle-art {
    height: auto;
    aspect-ratio: 1.8;
    clip-path: none;
  }
  .institute-flight {
    height: auto;
  }
  .flight-pin {
    position: relative;
    height: auto;
  }
  .flight-pin .space-frame {
    position: relative;
    height: 100svh;
  }
  .flight-pin .space-frame,
  .flight-pin .arrival h1,
  .flight-pin .scene-scroll,
  .flight-pin .inquiry :is(h2, p) {
    opacity: 1;
    translate: none;
  }
  .flight-pin .space-plate,
  .foundation-deck article:nth-child(n) {
    transform: none;
  }
  .flight-dust {
    display: none;
  }
  .institute-flight #inquiry {
    top: 100svh;
    bottom: auto;
  }
}
.ex-macro iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0;
}
.ex-macro iframe.ready {
  z-index: 1;
  opacity: 1;
}
.ex-macro figcaption {
  z-index: 2;
}
.ex-lightbox {
  width: min(94vw, 2200px);
  height: 90svh;
}
body[data-page='institute']:has(.flight-pin) .header.v2-scrolled {
  background: linear-gradient(#101a1599, transparent);
  color: #faf8ef;
}
body[data-page='institute']:has(.flight-pin) .header.v2-scrolled .brand img {
  filter: invert(1);
}
@media (max-width: 720px) {
  .contrib-opening {
    z-index: 1;
    max-width: 93%;
    text-shadow: 0 0 18px #f4efdbaf;
  }
  .contrib-opening h1 {
    font-size: clamp(46px, 13.25vw, 87px);
    line-height: 0.92;
  }
  .contrib-opening p {
    background: #f3eedfe3;
  }
}
.passing-wall {
  width: 39%;
  transform: translateX(calc(-365% * var(--travel, 0)));
  background:
    linear-gradient(90deg, #29231936, transparent 22%, transparent 91%, #51453980),
    url('/assets/editorial/studio-plaster.webp') center/cover;
  filter: blur(4px);
  box-shadow: 1.1vw 0 1.9vw #29241d42;
}
.coast-photo {
  transform-origin: 77% 49%;
  transform: translateX(calc((1 - var(--travel, 0)) * 9%)) scale(calc(1 + 0.08 * var(--travel, 0)));
  background-color: #c7d0ca;
}
.contribution-pin {
  background: #c7d0ca;
}
@media (prefers-reduced-motion: no-preference) {
  .flight-pin .inquiry {
    opacity: var(--inside-visible, 0);
    mask-image: radial-gradient(
      ellipse farthest-corner at 35% 49%,
      #000 calc(var(--pass, 0) * 157% - 46%),
      transparent calc(var(--pass, 0) * 157%)
    );
  }
}

.ex-lightbox {
  overflow: hidden;
}
.ex-lightbox .ex-view iframe {
  display: block;
}
.ex-identity .ex-lightbox:not([open]) {
  display: block;
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  border: 0;
  border-radius: 0;
  pointer-events: none;
  overflow: hidden;
}
.ex-identity .ex-lightbox:not([open]) > div:first-child {
  display: none;
}
.ex-identity .ex-lightbox:not([open]) .ex-view {
  height: 100%;
}
.ex-playback {
  position: absolute;
  right: 62px;
  bottom: 12px;
  min-width: 40px;
  height: 40px;
  border-radius: 50%;
  color: white;
  background: #33404ae8;
  font-size: 16px;
}
.ex-playback[hidden] {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .ex-playback {
    display: none;
  }
}

.home-pillar-gallery {
  margin: clamp(60px, 9vw, 144px) auto 0;
  max-width: 1600px;
  scroll-margin-top: 100px;
}
.home-pillar-gallery h3 {
  margin: 0 0 clamp(24px, 4vw, 60px);
  font-size: clamp(36px, 5.2vw, 78px);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 1;
}
.home-pillar-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(35px, 5vw, 90px) clamp(18px, 3vw, 54px);
}
.home-pillar-slot {
  min-width: 0;
}
.home-pillar-slot .perspective-card {
  display: block;
}
.home-pillar-slot .card-image {
  position: relative;
  isolation: isolate;
  aspect-ratio: 3/2;
  height: auto;
  max-height: none;
}
.home-pillar-slot .card-image img {
  display: block;
  object-fit: contain;
  transform: none;
  translate: none;
  scale: none;
}
.home-pillar-slot h4 {
  margin: 0;
  font-size: clamp(21px, 2.5vw, 39px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.045em;
}
.home-pillar-slot h4 span {
  display: inline-block;
  vertical-align: middle;
  font: 500 0.39em/1 monospace;
  letter-spacing: 0.05em;
  margin-right: 0.55em;
}
.home-pillar-slot a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}
.home-paper-surface {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
body:not([data-navigating]):not(.v2-menu-open) .card-image[data-paper-surface='ready'] {
  background: transparent;
}
body:not([data-navigating]):not(.v2-menu-open) .card-image[data-paper-surface='ready'] .home-paper-surface {
  display: block;
}
body:not([data-navigating]):not(.v2-menu-open) .card-image[data-paper-surface='ready'] img {
  opacity: 0;
}
.home-contribution {
  padding-block: clamp(40px, 6vw, 110px);
}
.home-contribution a {
  display: grid;
  grid-template-columns: minmax(180px, 42%) 1fr auto;
  align-items: center;
  gap: clamp(16px, 3vw, 54px);
}
.home-contribution img {
  width: 100%;
  aspect-ratio: 2.2;
  object-fit: cover;
  border-radius: 18px;
}
.home-contribution h2 {
  font-size: clamp(30px, 4vw, 64px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.055em;
}
@media (min-width: 1001px) {
  .home-pillar-slot:nth-child(even) {
    margin-top: clamp(54px, 6.5vw, 108px);
  }
}
@media (max-width: 700px) {
  .home-pillar-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .home-contribution a {
    grid-template-columns: 1fr auto;
  }
  .home-contribution img {
    grid-column: 1/-1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-pillar-slot .perspective-card {
    transform: none;
  }
  .home-pillar-slot .home-paper-surface {
    display: none !important;
  }
  .home-pillar-slot .card-image img {
    opacity: 1 !important;
  }
}
