.page-home {
  overflow: hidden;
  background: var(--color-black);
}

.home-entry {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  isolation: isolate;
}

.home-entry__content {
  display: grid;
  justify-items: center;
  gap: 3rem;
  text-align: center;
}

.home-entry__orb {
  width: 12.5rem;
  height: 12.5rem;
  object-fit: contain;
}

.home-entry__title {
  font-size: clamp(calc(3.4rem * var(--type-scale)), calc(10vw * var(--type-scale)), calc(8rem * var(--type-scale)));
  line-height: 0.9;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-black);
}

.home-entry__title a:hover {
  color: #ed7b33;
}

.page-art-home,
.page-art {
  --fs-art-caption: clamp(11px, calc(10.6px + 0.1vw), 12px);
  --fs-art-small: clamp(12.5px, 0.85vw, 14px);
  --fs-art-body: clamp(16px, 1.15vw, 18.5px);
  --fs-art-medium: clamp(20px, 1.75vw, 28px);
  --fs-art-large: clamp(44px, 5.7vw, 82px);
  --lh-art-caption: 1.3;
  --lh-art-small: 1.25;
  --lh-art-body: 1.35;
  --lh-art-medium: var(--lh-reading-large);
  --lh-art-copy: 1.3;
  --lh-art-large: 0.96;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

.page-art-home {
  min-height: 100dvh;
  background: #050505;
  color: #eaeaea;
  font-family: var(--font-display);
}

.page-art-entry {
  --art-gutter: clamp(1rem, 2.1vw, 2.4rem);
  --art-text: #d1dada;
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
}

.art-entry {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

.art-entry.is-leaving {
  pointer-events: none;
}

.art-entry__media {
  position: absolute;
  top: 50%;
  left: 50%;
  aspect-ratio: 16 / 9;
  transform: translate(-50%, -50%);
}

.art-entry__poster,
.art-entry__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.art-entry__poster {
  z-index: 0;
  object-fit: fill;
}

.art-entry__video {
  z-index: 1;
  --media-object-fit: fill;
  --media-object-position: center;
  opacity: 0;
  transition: opacity 720ms cubic-bezier(0.4, 0, 0.2, 1);
}

.art-entry__video.is-ready {
  opacity: 1;
}

.art-entry.is-leaving .art-entry__poster,
.art-entry.is-leaving .art-entry__video {
  opacity: 0;
  will-change: opacity;
}

@media (max-aspect-ratio: 16 / 9) {
  .art-entry__media {
    width: auto;
    height: 100%;
  }
}

@media (min-aspect-ratio: 16 / 9) {
  .art-entry__media {
    width: 100%;
    height: auto;
  }
}

.art-entry__trigger {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  color: var(--art-text);
  text-align: left;
  touch-action: manipulation;
}

.art-home {
  display: grid;
  grid-template-columns: minmax(16rem, 0.8fr) minmax(0, 1.2fr);
  min-width: 0;
  max-width: 100%;
  min-height: 100dvh;
}

.art-home__intro {
  position: sticky;
  top: 0;
  display: grid;
  align-content: end;
  gap: clamp(1rem, 2vw, 2rem);
  height: 100dvh;
  min-width: 0;
  padding: clamp(1rem, 2.1vw, 2.4rem);
  border-right: 1px solid rgba(234, 234, 234, 0.18);
}

.art-home__mark {
  width: clamp(5rem, 12vw, 10rem);
}

.art-home__mark img {
  width: 100%;
  height: auto;
  object-fit: contain;
}

.art-home__intro p,
.art-home__footer {
  color: #777;
  font-family: var(--font-accent);
  font-size: var(--fs-art-small);
  line-height: var(--lh-art-small);
  text-transform: uppercase;
}

.art-home__intro h1 {
  color: #eaeaea;
  font-size: var(--fs-art-large);
  line-height: var(--lh-art-large);
  font-weight: 400;
  text-transform: none;
}

.art-home__footer {
  position: fixed;
  right: clamp(1rem, 2.1vw, 2.4rem);
  bottom: clamp(1rem, 2.1vw, 2.4rem);
  display: flex;
  gap: 1rem;
}

.art-home__footer a:hover,
.art-home__footer a:focus-visible {
  color: #eaeaea;
}

@media (max-width: 820px) {
  .art-home {
    grid-template-columns: 1fr;
  }

  .art-home__intro {
    position: relative;
    height: auto;
    min-height: 50svh;
    border-right: 0;
    border-bottom: 1px solid rgba(234, 234, 234, 0.18);
  }

  .art-home__footer {
    position: static;
    padding: 0 clamp(1rem, 2.1vw, 2.4rem) clamp(1rem, 2.1vw, 2.4rem);
  }
}

.theme-fire {
  background: var(--color-black);
  color: var(--color-fire);
}

.page-project {
  --page-helvetica-size: calc(2.9rem * var(--type-scale));
  --page-helvetica-line: 1.1;
  --page-accent-size: calc(1.1rem * var(--type-scale));
  --page-accent-line: 1.1;
  overflow-x: hidden;
  font-size: var(--page-helvetica-size);
  line-height: var(--page-helvetica-line);
}

.project-header {
  min-height: 58vh;
  display: grid;
  align-content: end;
  gap: 1.3rem;
  padding: clamp(8rem, 18vw, 15rem) var(--space-page) clamp(3rem, 8vw, 6rem);
  color: var(--color-fire);
  font-size: var(--page-helvetica-size);
  line-height: var(--page-helvetica-line);
  font-weight: 500;
}

.project-header h1 {
  max-width: 14ch;
  font-size: var(--fs-project-title);
  line-height: 0.88;
  text-transform: uppercase;
}

.project-eyebrow {
  font-family: var(--font-accent);
  font-size: var(--page-accent-size);
  line-height: var(--page-accent-line);
  font-weight: 400;
  color: #f44;
}

.media-section {
  margin-bottom: clamp(4rem, 10vw, 10rem);
}

.project-copy {
  max-width: 58rem;
  margin: clamp(5rem, 12vw, 10rem) auto;
  padding: 0 var(--space-page);
  color: var(--color-fire);
  font-size: var(--page-helvetica-size);
  line-height: var(--page-helvetica-line);
}

.project-copy p + p {
  margin-top: 1.2em;
}

.shape--helix {
  color: #0008ff;
}

.shape--void {
  color: #8e8e8e;
}

.shape--lotus {
  color: #59e408;
}

.shape--splinter {
  color: #e4da51;
}

.project-image,
.project-video {
  width: 100%;
}

.project-image--narrow {
  width: min(100%, 72rem);
  margin-inline: auto;
}

.project-image--square {
  width: min(100%, 70rem);
  margin-inline: auto;
}

.project-video {
  margin-top: clamp(3rem, 7vw, 7rem);
  max-height: 72vh;
  object-fit: contain;
}

.project-footer {
  padding-bottom: clamp(4rem, 10vw, 9rem);
}

.site-contact {
  position: relative;
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
  padding: clamp(4rem, 8vw, 8rem) var(--space-page);
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  font-size: var(--fs-site-contact);
  line-height: 1.05;
  overflow: hidden;
}

.site-contact__links {
  display: grid;
  gap: 0.15rem;
  align-items: start;
}

.site-contact__links a {
  position: relative;
  display: inline-block;
  width: max-content;
  overflow: visible;
  perspective: 500px;
}

.site-contact__links span {
  display: inline-block;
  pointer-events: none;
  transform: translateZ(0);
  transform-origin: 12% center 10px;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transition: transform 300ms ease;
  will-change: transform;
  white-space: nowrap;
}

.site-contact__links a:hover span {
  transform: perspective(250px) rotateX(15deg) rotateY(13deg) scale(1.45) translateZ(10px);
}

.site-contact__edge {
  position: absolute;
  inset: 0 0 auto;
  height: var(--direction-separator-weight, 2px);
  block-size: var(--direction-separator-weight, 2px);
  min-block-size: var(--direction-separator-weight, 2px);
  max-block-size: var(--direction-separator-weight, 2px);
  background: linear-gradient(
    90deg,
    var(--direction-gradient-cyan, #56dcfd),
    var(--direction-gradient-green, #72ff00),
    var(--direction-gradient-olive, #f2de00),
    var(--direction-gradient-orange, #ff4800),
    var(--direction-gradient-yellow, #f0ff00),
    var(--direction-gradient-cyan, #56dcfd)
  );
}

.site-contact__top {
  position: absolute;
  right: var(--space-page);
  bottom: var(--space-page);
  font-size: var(--fs-site-contact-icon);
  line-height: 1;
}

.site-contact__top span {
  display: inline-block;
  color: inherit;
  pointer-events: none;
  transform: rotate(0deg) translateZ(0);
  transform-origin: center center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1), color 200ms ease;
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  .site-contact__top:hover span {
    transform: rotate(360deg) translateZ(0);
  }
}

.project-article--text .project-copy {
  max-width: 62rem;
  color: var(--color-black);
  font-size: clamp(calc(1rem * var(--type-scale)), calc(1.5vw * var(--type-scale)), calc(1.2rem * var(--type-scale)));
  line-height: 1.35;
}

.media-grid,
.direction-media {
  display: grid;
  gap: clamp(2rem, 6vw, 6rem);
  padding: 0 var(--space-page) clamp(5rem, 9vw, 9rem);
}

.media-card {
  display: grid;
  gap: 0.75rem;
  justify-items: stretch;
}

.media-card img,
.media-card video,
.media-card mux-player {
  width: 100%;
  max-height: 92vh;
  object-fit: contain;
}

.media-card figcaption {
  max-width: 44rem;
  margin-left: auto;
  color: var(--color-muted);
  font-family: var(--font-accent);
  font-size: var(--page-accent-size, 1.1rem);
  line-height: var(--page-accent-line, 1.1);
  font-weight: 400;
  text-align: right;
}

.related-links {
  padding: 0 var(--space-page) clamp(5rem, 9vw, 9rem);
  font-family: var(--font-accent);
  font-size: var(--page-accent-size, 1.1rem);
  line-height: var(--page-accent-line, 1.1);
  font-weight: 400;
}

.related-links h2 {
  margin-bottom: 1rem;
  font-size: inherit;
  text-transform: uppercase;
}

.related-links ul {
  display: grid;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.page-art {
  --art-bg: #000;
  --art-panel: #0d0d0d;
  --art-line: rgba(234, 234, 234, 0.18);
  --art-line-width: 1px;
  --art-text: #d1dada;
  --art-muted: #777;
  --art-caption: #555;
  --art-menu-link: var(--art-muted);
  --art-menu-active: var(--art-text);
  --art-menu-number: var(--art-caption);
  --art-accent: #ff2a00;
  --art-menu-bg: rgb(27 30 3 / 50%);
  --art-chrome-bg: rgba(5, 5, 5, 0.68);
  --art-chrome-blur: 18px;
  --art-gutter: clamp(1rem, 2.1vw, 2.4rem);
  --art-content-gutter: clamp(1.25rem, 4vw, 5rem);
  --art-panel-gutter: var(--art-content-gutter);
  --art-menu-width: clamp(17rem, 20vw, 20rem);
  --art-menu-toggle-open: clamp(3.5rem, 4.6vw, 4.5rem);
  --art-menu-toggle-closed: clamp(2.65rem, 3.4vw, 3.25rem);
  --art-menu-toggle-green: rgb(252 235 255 / 90%);
  --art-menu-open-duration: 360ms;
  --art-menu-open-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --art-menu-content-delay: 150ms;
  --art-project-sticky-padding-block: clamp(0.75rem, 1.4vw, 1.25rem);
  --art-layout-columns: repeat(12, minmax(0, 1fr));
  --art-layout-column-gap: clamp(1rem, 1.8vw, 2rem);
  --art-layout-row-gap: clamp(7.5rem, 14vw, 16rem);
  --art-project-hero-gap: clamp(8rem, 20vw, 20rem);
  --art-project-media-start-gap: clamp(5rem, 14vw, 15rem);
  --art-project-title-column: 1 / 11;
  --art-project-info-column: var(--art-project-title-column);
  --art-project-copy-column: 4 / 11;
  min-height: 100dvh;
  background: var(--art-bg);
  color: var(--art-text);
  font-family: var(--font-display);
}

.page-art.art-theme-light {
  --art-bg: #d1dada;
  --art-line: rgb(0 0 0 / 18%);
  --art-text: #000;
  --art-muted: #3d3d3d;
  --art-caption: #777;
  --art-menu-bg: rgb(209 218 218 / 50%);
  --art-chrome-bg: rgb(209 218 218 / 68%);
  --art-menu-link: var(--art-caption);
  --art-menu-active: var(--art-muted);
  --art-menu-number: #fff;
}

@media (min-width: 981px) {
  .page-art:not(.page-art-entry) {
    --art-content-gutter: clamp(4.5rem, 12vw, 14rem);
    --art-panel-gutter: clamp(2.25rem, 6vw, 7rem);
  }
}

.page-art a {
  color: inherit;
}

.art-shell__nav {
  position: fixed;
  z-index: 50;
  top: var(--art-gutter);
  right: var(--art-gutter);
  display: grid;
  grid-template-rows: auto auto;
  width: var(--art-menu-width);
  max-height: calc(100dvh - (2 * var(--art-gutter)));
  padding: var(--art-gutter) var(--art-gutter) calc(var(--art-gutter) * 1.55);
  overflow: visible;
  border: 0;
  background: transparent;
  font-family: var(--font-accent);
  font-size: var(--fs-art-small);
  line-height: var(--lh-art-small);
  scrollbar-width: none;
}

.art-shell__nav::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  border: var(--art-line-width) solid var(--art-line);
  background: var(--art-menu-bg);
  backdrop-filter: blur(var(--art-chrome-blur));
  -webkit-backdrop-filter: blur(var(--art-chrome-blur));
  transform: translateZ(0) scale(1);
  transform-origin: 100% 0;
  backface-visibility: hidden;
  transition:
    transform var(--art-menu-open-duration) var(--art-menu-open-ease),
    visibility 0s linear;
  will-change: transform;
  pointer-events: none;
}

.art-shell__nav::-webkit-scrollbar {
  display: none;
}

.art-shell__identity {
  position: relative;
  z-index: 1;
  display: inline-grid;
  grid-template-columns: auto 2.5rem;
  align-items: center;
  gap: 0.8rem;
  width: max-content;
  max-width: 100%;
  min-width: 0;
}

.art-shell__brand {
  color: var(--art-text);
  font-family: var(--font-blur);
  font-weight: 500;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.art-shell__identity,
.art-menu {
  visibility: visible;
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 180ms ease-out var(--art-menu-content-delay),
    transform 220ms var(--art-menu-open-ease) var(--art-menu-content-delay),
    visibility 0s linear;
  will-change: opacity, transform;
}

.page-art-project .art-shell__brand,
.page-art-bio .art-shell__brand,
.page-art-entry.is-entering-project .art-shell__brand {
  color: var(--art-menu-link);
}

.page-art-project .art-shell__brand:hover,
.page-art-project .art-shell__brand:focus-visible,
.page-art-bio .art-shell__brand:hover,
.page-art-bio .art-shell__brand:focus-visible {
  color: var(--art-menu-active);
}

.art-shell__mark {
  position: relative;
  z-index: 3;
  display: block;
  width: 2.5rem;
  height: 2.5rem;
  background-image: url("../media/localized/art-menu-mark-sprite.webp");
  background-repeat: no-repeat;
  background-size: 1000% 1000%;
  background-position: 0 0;
  transform: translateX(0.15rem);
  transform-origin: center;
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .art-shell__mark:hover {
    transform: translateX(0.15rem) scale(2.6);
  }
}

.art-menu-toggle,
.art-menu-toggle-blur,
.art-menu-toggle-outline {
  position: fixed;
  top: calc(var(--art-gutter) - 0.65rem);
  right: calc(var(--art-gutter) - 0.65rem);
  display: grid;
  width: var(--art-menu-toggle-open);
  height: var(--art-menu-toggle-open);
  place-items: center;
  border-radius: 50%;
}

.art-menu-toggle-blur {
  z-index: 51;
  pointer-events: none;
}

.art-menu-toggle {
  z-index: 52;
  mix-blend-mode: difference;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.art-menu-toggle-outline {
  z-index: 53;
  pointer-events: none;
}

.art-menu-toggle-blur::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--art-menu-toggle-open);
  height: var(--art-menu-toggle-open);
  border-radius: 50%;
  background: rgb(0 0 0 / 0.01);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width 300ms var(--art-menu-open-ease),
    height 300ms var(--art-menu-open-ease);
}

.art-menu-toggle__disc {
  display: block;
  width: var(--art-menu-toggle-open);
  height: var(--art-menu-toggle-open);
  border-radius: 50%;
  background: var(--art-menu-toggle-green);
  transition:
    width 300ms var(--art-menu-open-ease),
    height 300ms var(--art-menu-open-ease);
}

.art-menu-toggle-outline::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--art-menu-toggle-open);
  height: var(--art-menu-toggle-open);
  border: var(--art-line-width) solid var(--art-line);
  border-radius: 50%;
  content: "";
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition:
    width 300ms var(--art-menu-open-ease),
    height 300ms var(--art-menu-open-ease);
}

.art-menu-toggle:focus-visible {
  outline: 0;
}

.art-menu-toggle:focus-visible ~ .art-menu-toggle-outline::before {
  outline: var(--art-line-width) solid var(--art-text);
  outline-offset: 3px;
}

body.art-menu-collapsed .art-menu-toggle__disc,
body.art-menu-collapsed .art-menu-toggle-blur::before,
body.art-menu-collapsed .art-menu-toggle-outline::before {
  width: var(--art-menu-toggle-closed);
  height: var(--art-menu-toggle-closed);
}

html[data-art-menu-state="closed"] .art-shell__nav {
  pointer-events: none;
}

html[data-art-menu-state="closed"] .art-shell__identity,
html[data-art-menu-state="closed"] .art-menu {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, -0.25rem, 0);
  transition:
    opacity 180ms ease,
    transform 180ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s linear 180ms;
}

html[data-art-menu-state="closed"] .art-shell__nav::before {
  visibility: hidden;
  transform: translateZ(0) scale(0.02);
  transition:
    transform 480ms cubic-bezier(0.76, 0, 0.24, 1) 180ms,
    visibility 0s linear 660ms;
}

html[data-art-menu-state="closed"] .art-menu-toggle {
  pointer-events: auto;
}

html[data-art-menu-state="closed"] .art-menu-toggle__disc,
html[data-art-menu-state="closed"] .art-menu-toggle-blur::before,
html[data-art-menu-state="closed"] .art-menu-toggle-outline::before {
  width: var(--art-menu-toggle-closed);
  height: var(--art-menu-toggle-closed);
}

html.art-menu-booting .art-shell__nav,
html.art-menu-booting .art-shell__nav::before,
html.art-menu-booting .art-shell__identity,
html.art-menu-booting .art-menu,
html.art-menu-booting .art-menu-toggle__disc,
html.art-menu-booting .art-menu-toggle-blur::before,
html.art-menu-booting .art-menu-toggle-outline::before {
  transition: none !important;
}

@media (hover: hover) and (pointer: fine) {
  .art-menu-toggle:hover .art-menu-toggle__disc,
  .art-menu-toggle:hover + .art-menu-toggle-blur::before,
  .art-menu-toggle:hover ~ .art-menu-toggle-outline::before {
    width: var(--art-menu-toggle-closed);
    height: var(--art-menu-toggle-closed);
  }

  body.art-menu-collapsed .art-menu-toggle:hover .art-menu-toggle__disc,
  body.art-menu-collapsed .art-menu-toggle:hover + .art-menu-toggle-blur::before,
  body.art-menu-collapsed .art-menu-toggle:hover ~ .art-menu-toggle-outline::before {
    width: var(--art-menu-toggle-open);
    height: var(--art-menu-toggle-open);
  }
}

.art-menu {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: clamp(1.5rem, 3vh, 2.25rem);
  min-height: 0;
  min-width: 0;
  max-height: calc(100dvh - (2 * var(--art-gutter)) - 5.5rem);
  padding-top: clamp(2.25rem, 5vh, 3.5rem);
  overflow: hidden auto;
  scrollbar-width: none;
}

.art-menu::-webkit-scrollbar {
  display: none;
}

.art-menu__links {
  display: grid;
  align-content: start;
  gap: 0.42rem;
  min-height: 0;
  overflow: visible;
}

.art-menu__links a {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  color: var(--art-menu-link);
  text-transform: uppercase;
  transition: color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.art-menu__links a span {
  color: var(--art-menu-number);
  font-size: inherit;
  line-height: inherit;
}

.art-menu__links a:hover,
.art-menu__links a:focus-visible,
.art-menu__links a[aria-current="page"] {
  color: var(--art-menu-active);
  transform: translateX(0.35rem);
}

.art-menu__meta {
  display: grid;
  justify-items: start;
  gap: clamp(0.85rem, 1.5vh, 1.25rem);
  color: var(--art-menu-link);
  text-transform: uppercase;
}

.art-menu__meta-links {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
}

.art-menu__meta a {
  width: max-content;
  max-width: 100%;
}

.art-menu__bio {
  color: var(--art-menu-link);
}

.art-menu__bio[aria-current="page"] {
  color: var(--art-menu-active);
}

.art-menu__external {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
}

.art-menu__meta a:hover,
.art-menu__meta a:focus-visible {
  color: var(--art-menu-active);
}

.art-main {
  min-height: 100dvh;
  min-width: 0;
  max-width: 100%;
  padding-left: 0;
}

.art-article {
  min-height: 100dvh;
  min-width: 0;
  max-width: 100%;
}

.art-page-stage {
  min-width: 0;
  max-width: 100%;
}

.art-project-info {
  position: relative;
  z-index: 20;
  display: block;
  color: var(--art-muted);
  font-family: var(--font-accent);
  min-width: 0;
  max-width: 100%;
  font-size: var(--fs-art-small);
  line-height: var(--lh-art-small);
  font-weight: 400;
  text-transform: uppercase;
}

.art-project-info.is-fixed {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  width: auto;
  padding:
    var(--art-project-sticky-padding-block)
    var(--art-content-gutter);
  border-bottom: var(--art-line-width) solid var(--art-line);
  background: var(--art-chrome-bg);
  backdrop-filter: blur(var(--art-chrome-blur));
  -webkit-backdrop-filter: blur(var(--art-chrome-blur));
}

.art-hero {
  display: grid;
  align-content: end;
  gap: clamp(1rem, 2vw, 1.8rem);
  min-height: clamp(24rem, 64svh, 48rem);
  min-width: 0;
  max-width: 100%;
  padding: clamp(5rem, 10vw, 10rem) var(--art-content-gutter) clamp(2.8rem, 5vw, 5rem);
  border-bottom: var(--art-line-width) solid var(--art-line);
}

.page-art-project .art-hero {
  grid-template-columns: var(--art-layout-columns);
  column-gap: var(--art-layout-column-gap);
  align-items: end;
  min-height: 0;
  margin-top: var(--art-project-hero-gap);
  padding: 0 var(--art-content-gutter) clamp(2.5rem, 5vw, 5rem);
  border-bottom: 0;
}

.page-art-project .art-hero h1 {
  grid-column: var(--art-project-title-column);
}

.page-art-project .art-hero .art-project-info {
  grid-column: var(--art-project-info-column);
  align-self: start;
}

.art-hero h1 {
  max-width: 100%;
  color: var(--art-text);
  font-family: var(--font-blur);
  font-size: var(--fs-art-large);
  line-height: var(--lh-art-large);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: uppercase;
}

.art-hero p {
  max-width: 100%;
  margin-top: clamp(1.4rem, 3vw, 2.8rem);
  color: var(--art-muted);
  font-size: var(--fs-art-medium);
  line-height: var(--lh-art-medium);
  font-weight: 400;
}

.art-copy {
  display: block;
  min-width: 0;
  max-width: 100%;
  padding: clamp(3rem, 7vw, 7rem) var(--art-content-gutter);
}

.page-art-project .art-copy {
  display: grid;
  grid-template-columns: var(--art-layout-columns);
  column-gap: var(--art-layout-column-gap);
  padding-top: clamp(1.5rem, 2.5vw, 2.5rem);
}

.page-art-project .art-copy__body {
  grid-column: var(--art-project-copy-column);
}

.art-copy__body {
  display: grid;
  gap: 0.85em;
}

.art-copy__body p {
  max-width: 100%;
  color: var(--art-copy-color, var(--art-text));
  font-size: var(--fs-art-medium);
  line-height: var(--lh-art-copy);
  font-weight: 400;
}

.art-copy__body strong {
  font-weight: 700;
}

.art-copy__highlight {
  color: var(--art-copy-highlight);
}

.art-copy__meta,
.art-copy__notes {
  grid-column: 2;
  display: grid;
  align-content: start;
  gap: 0.45rem;
  color: var(--art-muted);
  font-family: var(--font-accent);
  min-width: 0;
  font-size: var(--fs-art-small);
  line-height: var(--lh-art-small);
  text-transform: uppercase;
}

.art-copy__notes {
  align-self: end;
}

.art-copy__meta + .art-copy__body {
  grid-row: 1 / span 2;
}

.art-copy a,
.art-bio a {
  color: var(--art-text);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
}

.art-copy a:hover,
.art-copy a:focus-visible,
.art-bio a:hover,
.art-bio a:focus-visible {
  color: var(--art-accent);
}

.art-media {
  display: grid;
  grid-template-columns: var(--art-layout-columns);
  grid-auto-flow: row dense;
  align-items: start;
  min-width: 0;
  max-width: 100%;
  column-gap: var(--art-layout-column-gap);
  row-gap: var(--art-layout-row-gap);
  padding: var(--art-project-media-start-gap) var(--art-content-gutter) clamp(5rem, 8vw, 8rem);
}

.art-project-fight-club-basel .art-media {
  grid-auto-flow: row;
}

.art-media--lead {
  width: 100%;
  max-width: none;
  margin-left: 0;
  column-gap: 0;
  row-gap: 0;
  padding: 0;
}

.art-media-card {
  grid-column: span 6;
  display: grid;
  gap: 0.7rem;
  align-content: start;
  min-width: 0;
}

.art-media-card--feature,
.art-media-card--layout-full {
  grid-column: 1 / -1;
}

.art-media-card--layout-large-left {
  grid-column: 1 / 10;
}

.art-media-card--layout-large-center {
  grid-column: 2 / 12;
}

.art-media-card--layout-large-right {
  grid-column: 4 / 13;
}

.art-media-card--layout-medium-left {
  grid-column: 1 / 7;
}

.art-media-card--layout-medium-right {
  grid-column: 7 / 13;
}

.art-media-card--layout-small-left {
  grid-column: 1 / 5;
}

.art-media-card--layout-small-center {
  grid-column: 5 / 9;
}

.art-media-card--layout-small-right {
  grid-column: 9 / 13;
}

.art-media-card--slideshow {
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.art-media-card--scroll {
  overflow: visible;
}

.art-scroll-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  box-sizing: border-box;
  border: var(--art-line-width) solid var(--art-project-accent, var(--art-text));
  border-radius: 4px;
  background: #090909;
}

.art-scroll-viewport {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.art-scroll-viewport:focus-visible {
  outline: 2px solid var(--art-project-accent, var(--art-text));
  outline-offset: -2px;
}

.art-scroll-viewport::-webkit-scrollbar {
  display: none;
}

.art-scroll-indicator {
  position: absolute;
  z-index: 2;
  top: 0.4rem;
  right: 0.35rem;
  bottom: 0.4rem;
  width: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--art-project-accent, var(--art-text)) 28%, transparent);
  pointer-events: none;
}

.art-scroll-indicator__thumb {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 2rem;
  border-radius: 999px;
  background: var(--art-project-accent, var(--art-text));
  will-change: height, transform;
}

.art-media-card--scroll .art-scroll-viewport > img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.art-x-posts {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
}

.art-x-posts__grid {
  --x-post-row-size: 8px;
  --x-post-gap: clamp(1rem, 1.8vw, 2rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
  grid-auto-rows: var(--x-post-row-size);
  align-items: start;
  column-gap: var(--x-post-gap);
  row-gap: 0;
  min-width: 0;
}

.art-x-post {
  display: grid;
  place-items: start center;
  align-self: start;
  grid-row-end: span var(--x-post-row-span, 54);
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: clamp(15rem, 30vw, 27rem);
  padding-bottom: var(--x-post-gap);
  overflow: hidden;
}

.art-x-post.is-loaded {
  min-height: 0;
}

.art-x-post iframe,
.art-x-post .twitter-tweet,
.art-x-post .twitter-tweet-rendered {
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}

.art-x-post__fallback {
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 8rem;
  padding: 1rem;
  border: var(--art-line-width) solid var(--art-line);
  color: var(--art-muted);
  font-family: var(--font-accent);
  font-size: var(--fs-art-caption);
  line-height: var(--lh-art-small);
  text-align: center;
  text-transform: uppercase;
}

@media (max-width: 980px) {
  .art-x-posts__grid {
    --x-post-gap: clamp(0.65rem, 2.6vw, 1.25rem);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .art-x-post {
    min-height: clamp(12rem, 58vw, 22rem);
  }
}

.art-slideshow {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  aspect-ratio: var(--media-ratio, 16 / 9);
  overflow: hidden;
  border-radius: inherit;
  background: transparent;
}

.art-slideshow__track {
  position: absolute;
  inset: 0;
  display: flex;
  height: 100%;
  transform: translate3d(calc(var(--slide-index, 0) * -100%), 0, 0);
  transition: transform 1200ms cubic-bezier(0.45, 0, 0.2, 1);
  will-change: transform;
}

.art-slideshow__track.is-jumping {
  transition: none;
}

.art-slideshow__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  height: 100%;
  pointer-events: none;
}

.art-slideshow__slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  background: transparent;
}

.art-slideshow__controls {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.55rem;
  color: #eaeaea;
  font-family: var(--font-accent);
  font-size: var(--fs-art-small);
  line-height: 1;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.art-slideshow:hover .art-slideshow__controls,
.art-slideshow:focus-within .art-slideshow__controls {
  opacity: 1;
}

.art-slideshow__controls button {
  width: auto;
  min-width: 2.75rem;
  min-height: auto;
  padding: 0;
  color: inherit;
  opacity: 1;
  pointer-events: auto;
}

.art-slideshow__counter {
  margin-inline: auto;
  pointer-events: none;
}

.art-media-card--mosaic {
  gap: 0.9rem;
}

.art-media-mosaic {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  min-width: 0;
  max-width: 100%;
  gap: clamp(0.45rem, 0.8vw, 0.9rem);
}

.art-media-mosaic__tile {
  aspect-ratio: 1;
  overflow: hidden;
  background: transparent;
}

.art-media-mosaic__tile img,
.art-media-mosaic__tile video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.art-media-card img,
.art-media-card video,
.art-media-card mux-player,
.art-media-card iframe {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  max-height: 90svh;
  object-fit: contain;
}

.art-media-card img {
  background: transparent;
  height: auto;
  max-height: none;
}

.art-media-card video,
.art-media-card mux-player,
.art-media-card iframe {
  background: #090909;
}

.art-media-card--alpha-video > video {
  background: transparent;
}

.art-media-card iframe {
  aspect-ratio: 16 / 9;
  border: 0;
}

.art-media-card video {
  height: auto;
}

.art-media:not(.art-media--lead) > .art-media-card--video > :is(video, mux-player, iframe) {
  height: auto;
  max-height: none;
}

.art-media:not(.art-media--lead) > .art-media-card--video > mux-player {
  aspect-ratio: var(--art-video-aspect-ratio);
}

.art-media mux-player[data-mux-autoplay] {
  --controls: none;
}

.art-media-card .art-media-mosaic__tile img,
.art-media-card .art-media-mosaic__tile video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

.art-media-card--slideshow .art-slideshow__slide img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.art-media-card figcaption {
  color: var(--art-caption);
  font-family: var(--font-accent);
  font-size: var(--fs-art-caption);
  line-height: var(--lh-art-caption);
  text-transform: uppercase;
}

.art-media--lead figcaption {
  margin-left: 0;
  padding-inline: var(--art-content-gutter);
}

.page-art .related-links {
  padding: 0 var(--art-content-gutter) clamp(4rem, 7vw, 7rem);
  color: var(--art-muted);
  font-family: var(--font-accent);
  min-width: 0;
  max-width: 100%;
  font-size: var(--fs-art-small);
  line-height: var(--lh-art-small);
  text-transform: uppercase;
}

.page-art .related-links a:hover,
.page-art .related-links a:focus-visible {
  color: var(--art-text);
}

.art-bio {
  display: grid;
  grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.2fr);
  min-width: 0;
  max-width: 100%;
  min-height: 100dvh;
  border-bottom: 0;
}

.art-bio__intro {
  min-width: 0;
  border-right: var(--art-line-width) solid var(--art-line);
}

.art-bio__intro-inner {
  position: sticky;
  top: 0;
  display: grid;
  align-content: start;
  gap: 1rem;
  min-height: 100dvh;
  min-width: 0;
  padding-block: clamp(2rem, 4vw, 4rem);
  padding-right: var(--art-panel-gutter);
  padding-left: var(--art-content-gutter);
}

.art-bio__intro h2 {
  color: var(--art-text);
  font-family: var(--font-accent);
  font-size: var(--fs-art-small);
  line-height: var(--lh-art-small);
  font-weight: 500;
  text-transform: uppercase;
}

.art-bio__intro p {
  color: var(--art-text);
  font-size: var(--fs-art-body);
  line-height: var(--lh-art-body);
}

.art-bio__sections {
  display: grid;
  min-width: 0;
}

.art-bio-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  min-width: 0;
  padding-block: clamp(2rem, 4vw, 4rem);
  padding-right: var(--art-content-gutter);
  padding-left: var(--art-panel-gutter);
  border-bottom: var(--art-line-width) solid var(--art-line);
}

.art-bio-section:last-child {
  border-bottom: 0;
}

.art-bio-section h2 {
  color: var(--art-muted);
  font-family: var(--font-accent);
  font-size: var(--fs-art-small);
  line-height: var(--lh-art-small);
  font-weight: 500;
  text-transform: uppercase;
}

.art-bio-section ul {
  display: grid;
  gap: 0.55rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.art-bio-section li {
  color: var(--art-text);
  font-family: var(--font-accent);
  font-size: var(--fs-art-small);
  line-height: var(--lh-art-small);
}

.art-shell__identity,
.art-menu__links a,
.art-menu__meta,
.art-project-info,
.art-copy,
.art-media-card figcaption,
.page-art .related-links,
.art-bio,
.art-project-footer {
  overflow-wrap: anywhere;
}

.art-project-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  min-width: 0;
  max-width: 100%;
  min-height: clamp(13rem, 34svh, 24rem);
  gap: 2rem;
  padding: clamp(3rem, 7vw, 7rem) var(--art-content-gutter);
  border-top: var(--art-line-width) solid var(--art-line);
  color: var(--art-muted);
  background: var(--art-bg);
  font-family: var(--font-accent);
  font-size: var(--fs-art-small);
  line-height: var(--lh-art-small);
  text-transform: uppercase;
}

.art-project-footer a {
  width: max-content;
  max-width: 50%;
  transition: color 180ms ease;
}

.art-project-footer a:hover,
.art-project-footer a:focus-visible {
  color: var(--art-text);
}

@media (max-width: 980px) {
  .page-art {
    --art-content-gutter: calc(2 * var(--art-gutter));
    --art-layout-row-gap: clamp(4.5rem, 16vw, 8rem);
    --art-project-hero-gap: clamp(5.5rem, 30vw, 15rem);
    --art-project-media-start-gap: clamp(4.5rem, 25vw, 13rem);
  }

  .art-shell__nav {
    top: var(--art-gutter);
    right: var(--art-gutter);
    left: var(--art-gutter);
    bottom: auto;
    width: auto;
    max-height: calc(100dvh - (2 * var(--art-gutter)));
    min-height: 0;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto;
    align-items: center;
    padding: 0.85rem var(--art-gutter);
    overflow: visible;
    border: 0;
  }

  .art-menu-toggle:hover .art-menu-toggle__disc,
  .art-menu-toggle:hover + .art-menu-toggle-blur::before,
  .art-menu-toggle:hover ~ .art-menu-toggle-outline::before {
    width: var(--art-menu-toggle-open);
    height: var(--art-menu-toggle-open);
  }

  body.art-menu-collapsed .art-menu-toggle:hover .art-menu-toggle__disc,
  body.art-menu-collapsed .art-menu-toggle:hover + .art-menu-toggle-blur::before,
  body.art-menu-collapsed .art-menu-toggle:hover ~ .art-menu-toggle-outline::before {
    width: var(--art-menu-toggle-closed);
    height: var(--art-menu-toggle-closed);
  }

  .art-menu {
    position: relative;
    grid-column: 1 / -1;
    display: grid;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - 3.75rem);
    padding: clamp(2.25rem, 7vw, 3.25rem) 0 0;
    overflow: hidden auto;
    background: transparent;
  }

  body.art-menu-open .art-menu {
    gap: 2rem;
  }

  .art-menu__links a {
    grid-template-columns: 2.2em minmax(0, 1fr);
    font-size: var(--fs-art-body);
    line-height: var(--lh-art-body);
  }

  .art-main {
    padding-left: 0;
    padding-top: calc(3.75rem + var(--art-gutter));
  }

  .page-art-project .art-main {
    padding-top: 0;
  }

  .art-project-info {
    top: auto;
  }

  .art-project-info.is-fixed {
    top: 0;
    right: 0;
    left: 0;
  }

  .page-art-project .art-hero,
  .page-art-project .art-copy {
    grid-template-columns: 1fr;
  }

  .page-art-project .art-hero {
    row-gap: clamp(1.5rem, 5vw, 2.5rem);
    margin-top: var(--art-project-hero-gap);
    padding-bottom: clamp(2rem, 7vw, 3.5rem);
  }

  .page-art-project .art-hero h1,
  .page-art-project .art-hero .art-project-info,
  .page-art-project .art-copy__body {
    grid-column: 1;
  }

  .art-copy,
  .art-bio,
  .art-bio-section {
    grid-template-columns: 1fr;
  }

  .art-copy__body,
  .art-copy__meta,
  .art-copy__notes,
  .art-copy__meta + .art-copy__body {
    grid-column: auto;
    grid-row: auto;
  }

  .art-copy__notes {
    align-self: start;
  }

  .art-bio__intro {
    min-height: 0;
    border-right: 0;
    border-bottom: var(--art-line-width) solid var(--art-line);
  }

  .art-bio__intro-inner {
    position: relative;
    min-height: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .art-shell__nav,
  .art-shell__nav::before,
  .art-shell__identity,
  .art-menu,
  .art-menu-toggle__disc,
  .art-menu-toggle-blur::before,
  .art-menu-toggle-outline::before,
  .art-shell__mark {
    transition-duration: 1ms;
    transition-delay: 0s;
  }

  .art-entry__video {
    transition-duration: 1ms;
  }

}

@media (max-width: 620px) {
  .page-art {
    --art-layout-row-gap: clamp(4.5rem, 18vw, 7rem);
    --art-project-hero-gap: clamp(5.5rem, 35vw, 20rem);
    --art-project-media-start-gap: clamp(4.5rem, 30vw, 17rem);
  }

  .art-media {
    column-gap: 0;
    row-gap: var(--art-layout-row-gap);
  }

  .art-media > .art-media-card {
    grid-column: 1 / -1;
  }

  .art-media-mosaic {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .art-hero {
    min-height: 60svh;
  }

  .art-media {
    grid-template-columns: 1fr;
  }

  .art-media > .art-media-card {
    grid-column: 1;
  }

}

.art-project-the-algorithm-of-fire .art-media--lead .art-slideshow {
  height: auto;
  max-height: none;
}

.art-project-dada .art-media--lead mux-player::part(poster) {
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.page-direction {
  --color-white: #eaeaea;
  --direction-menu-surface: #eeeeee;
  --color-footer-bg: #000;
  --color-footer-text: #838383;
  --direction-bg: #080808;
  --direction-separator-weight: 2px;
  --direction-gradient-cyan: #56dcfd;
  --direction-gradient-green: #72ff00;
  --direction-gradient-olive: #f2de00;
  --direction-gradient-orange: #ff4800;
  --direction-gradient-yellow: #f0ff00;
  --page-helvetica-size: var(--fs-direction-contact);
  --page-helvetica-line: 0.96;
  --page-accent-size: var(--fs-direction-filter);
  --page-accent-line: 1.12;
  --direction-menu-width: max(50vw, 34rem);
  --direction-nav-link-gap: clamp(0.66rem, 1.18vw, 1.18rem);
  --direction-nav-link-row-height: 0.98em;
  --direction-label-content-gap: clamp(1.55rem, 2.85vw, 2.85rem);
  --direction-project-card-width: clamp(19rem, 28.3vw, 22.625rem);
  --direction-project-focus-edge: max(var(--space-page), calc((100vw - var(--direction-project-card-width)) / 2));
  --direction-media-radius: 16px;
  background: var(--direction-bg);
  color: #fba700;
  font-family: var(--font-display);
  font-size: var(--page-helvetica-size);
  line-height: var(--page-helvetica-line);
  min-height: 100dvh;
  overscroll-behavior-y: none;
  overflow-x: hidden;
  overflow-x: clip;
}

@media (min-width: 769px) {
  .page-direction {
    --space-page: clamp(1.5rem, 2.8vw, 3.5rem);
  }

  .page-direction .direction-menu-toggle {
    right: calc(env(safe-area-inset-right, 0px) + var(--space-page));
  }

  .page-direction .direction-back-main {
    left: calc(env(safe-area-inset-left, 0px) + var(--space-page));
  }

  .page-direction .direction-intro {
    padding-inline: var(--space-page);
  }
}

.direction-header {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  pointer-events: none;
  padding: clamp(0.85rem, 1.5vw, 1.4rem);
  font-size: var(--fs-direction-filter);
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
  mix-blend-mode: difference;
}

.direction-menu-toggle {
  position: relative;
  z-index: 61;
  pointer-events: auto;
  color: #eaeaea;
}

.direction-menu-toggle {
  position: fixed;
  top: 2%;
  right: 1.6%;
  display: inline-block;
  min-width: 0;
  min-height: 0;
  padding: 0;
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  font-weight: 600;
  text-align: right;
  letter-spacing: 0;
  touch-action: manipulation;
  transform: translateX(0) rotate(0deg);
  transform-origin: bottom center;
  transition: transform 500ms cubic-bezier(0.65, 0, 0.35, 1), opacity 220ms ease;
}

.direction-menu-toggle::before {
  content: "";
  position: absolute;
  inset: -0.8rem -1.6rem -0.8rem -2.2rem;
  z-index: 1;
}

.direction-menu-toggle__label {
  position: relative;
  z-index: 2;
  display: inline-block;
  color: #eaeaea;
  pointer-events: none;
  transform: translateX(0);
  transform-origin: bottom center;
  transition: transform 450ms cubic-bezier(0.25, 1.5, 0.5, 1);
  will-change: transform;
}

@media (hover: hover) and (pointer: fine) {
  body:not(.direction-menu-open) .direction-menu-toggle:hover .direction-menu-toggle__label {
    transform: translateX(20px);
  }
}

body.direction-menu-open .direction-menu-toggle {
  opacity: 1;
  pointer-events: none;
  transform: translateX(-48vw) rotate(-450deg);
}

.direction-back-main {
  position: fixed;
  z-index: 62;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: calc(env(safe-area-inset-left, 0px) + 12px);
  color: #eaeaea;
  font-family: var(--font-display);
  font-size: var(--fs-direction-arrow);
  line-height: 1;
  mix-blend-mode: difference;
  opacity: 1;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform, opacity;
  transition: transform 250ms ease, opacity 250ms ease;
}

.direction-back-main:hover {
  color: #eaeaea;
  transform: translateX(-0.32rem);
}

.direction-side-menu-bg {
  position: fixed;
  z-index: 78;
  inset: 0 auto 0 0;
  width: var(--direction-menu-width);
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
  background: transparent;
  opacity: 0;
  transform: none;
  transition: opacity 220ms ease;
}

.direction-side-menu {
  position: fixed;
  z-index: 80;
  inset: 0 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: var(--direction-menu-width);
  min-width: 0;
  height: 100vh;
  height: 100dvh;
  padding: 3rem 1rem 1rem;
  overflow: hidden;
  overscroll-behavior: contain;
  pointer-events: none;
  color: #080808;
  background-color: var(--direction-menu-surface);
  transform: translate3d(100%, 0, 0);
  transition: transform 520ms cubic-bezier(0.65, 0, 0.35, 1);
  isolation: isolate;
}

.direction-side-menu__close {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + 2%);
  right: calc(env(safe-area-inset-right, 0px) + 2%);
  display: grid;
  place-items: center;
  width: clamp(2.25rem, 3.4vw, 3rem);
  height: clamp(2.25rem, 3.4vw, 3rem);
  color: #080808;
  mix-blend-mode: normal;
  transform-origin: center;
}

.direction-side-menu__close span,
.direction-side-menu__close span::before {
  display: block;
  width: clamp(1.9rem, 2.85vw, 2.45rem);
  height: 1.5px;
  background: currentColor;
  content: "";
  transform-origin: center;
}

.direction-side-menu__close span {
  transform: rotate(45deg);
  transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.direction-side-menu__close span::before {
  transform: rotate(90deg);
}

.direction-side-menu__close:hover {
  transform: none;
}

.direction-side-menu__close:hover span,
.direction-side-menu__close:focus-visible span {
  transform: rotate(135deg);
}

.direction-side-menu__primary {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  top: clamp(4.5rem, 9vh, 7rem);
  right: var(--direction-menu-content-inset, clamp(2rem, 5vw, 5rem));
  bottom: clamp(2.5rem, 6vh, 4.5rem);
  left: var(--direction-menu-content-inset, clamp(2rem, 5vw, 5rem));
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--direction-nav-link-gap);
  min-height: 0;
  font-size: var(--fs-direction-contact);
  line-height: 0.9;
  font-weight: 400;
  text-align: left;
  text-transform: uppercase;
  mix-blend-mode: normal;
  transition: opacity 180ms ease-out 180ms, visibility 0s linear;
}

.direction-side-menu__primary > a,
.direction-side-menu__primary > button {
  opacity: 1;
  position: relative;
  left: auto;
  transform: none;
  color: #080808;
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), color 300ms ease, filter 420ms ease, opacity 220ms ease;
}

.direction-side-menu__primary > a,
.direction-side-menu__primary > button {
  display: inline-block;
  width: max-content;
  height: var(--direction-nav-link-row-height);
  min-height: 0;
  overflow: visible;
  cursor: pointer;
  --menu-laser-y: -0.04em;
  --menu-laser-travel: 35px;
}

.direction-side-menu__link--optical-outset {
  margin-left: -0.04em;
}

.direction-side-menu__primary > a::after,
.direction-side-menu__primary > button::after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--menu-laser-y);
  height: clamp(3px, 0.05em, 6px);
  background: linear-gradient(
    90deg,
    var(--direction-gradient-yellow) 0%,
    var(--direction-gradient-orange) 16%,
    var(--direction-gradient-olive) 51%,
    var(--direction-gradient-green) 75%,
    var(--direction-gradient-cyan) 96%
  );
  background-size: 129% 100%;
  background-position: center;
  content: "";
  opacity: 0;
  transform: translate3d(calc(var(--menu-laser-travel) * -1), 0, 0) scaleX(0);
  transform-origin: 0% 50%;
  pointer-events: none;
  will-change: opacity, transform;
}

.direction-side-menu__meta {
  color: #080808;
}

.direction-side-menu__meta,
.direction-side-menu__meta span {
  mix-blend-mode: normal;
}

.direction-side-menu__link-mask {
  display: inline-block;
  height: 0.9em;
  overflow: hidden;
  line-height: 0.9;
}

.small-text-reveal__mask {
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  vertical-align: bottom;
}

.small-text-reveal__text {
  display: inline-block;
  line-height: inherit;
}

.small-text-reveal__part-mask {
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  vertical-align: bottom;
}

.small-text-reveal__part {
  display: inline-block;
  line-height: inherit;
}

.js .small-text-reveal__text:not(.is-small-text-initialized, .is-small-text-visible) {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .js .small-text-reveal__text {
    visibility: visible;
  }
}

.direction-side-menu__primary > a.direction-side-menu__contact {
  display: inline-block;
}

.direction-side-menu__link-text {
  color: #080808;
}

.direction-side-menu__contact-arrow {
  position: absolute;
  bottom: 0.15em;
  left: calc(100% + 0.16em);
  display: block;
  font-size: var(--fs-direction-arrow);
  line-height: 1;
  pointer-events: none;
}

.direction-side-menu__link-text {
  display: inline-block;
  color: #080808;
  line-height: inherit;
  pointer-events: none;
  transition: color 180ms ease;
}

.direction-side-menu__primary > a:hover .direction-side-menu__link-text,
.direction-side-menu__primary > button:hover .direction-side-menu__link-text,
.direction-side-menu__primary > a:focus-visible .direction-side-menu__link-text,
.direction-side-menu__primary > button:focus-visible .direction-side-menu__link-text {
  color: #080808;
}

.direction-side-menu__primary > a:hover::after,
.direction-side-menu__primary > button:hover::after,
.direction-side-menu__primary > a:focus-visible::after,
.direction-side-menu__primary > button:focus-visible::after {
  animation: direction-menu-link-laser 820ms cubic-bezier(0.76, 0.14, 0.94, 0.99) infinite;
}

@keyframes direction-menu-link-laser {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--menu-laser-travel) * -1), 0, 0) scaleX(0);
    transform-origin: 0% 50%;
  }

  8% {
    opacity: 1;
    transform: translate3d(calc(var(--menu-laser-travel) * -0.8), 0, 0) scaleX(0.08);
    transform-origin: 0% 50%;
  }

  45% {
    opacity: 1;
    transform: translate3d(0%, 0, 0) scaleX(1);
    transform-origin: 0% 50%;
  }

  58% {
    opacity: 1;
    transform: translate3d(calc(var(--menu-laser-travel) * 0.3), 0, 0) scaleX(0.96);
    transform-origin: 100% 50%;
  }

  86% {
    opacity: 1;
    transform: translate3d(var(--menu-laser-travel), 0, 0) scaleX(0);
    transform-origin: 100% 50%;
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--menu-laser-travel), 0, 0) scaleX(0);
    transform-origin: 100% 50%;
  }
}

.direction-side-menu__primary > :nth-child(1) {
  transition-delay: 0ms;
}

.direction-side-menu__primary > :nth-child(2) {
  transition-delay: 0ms;
}

.direction-side-menu__primary > :nth-child(3) {
  transition-delay: 0ms;
}

.direction-side-menu__primary > :nth-child(4) {
  transition-delay: 0ms;
}

.direction-side-menu__index {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  padding: clamp(5.5rem, 10vh, 8rem) var(--direction-menu-content-inset, clamp(2rem, 5vw, 5rem)) clamp(3rem, 6vw, 5rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  color: #080808;
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  line-height: 1.2;
  font-weight: 400;
  mix-blend-mode: normal;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  scrollbar-width: none;
  transition: opacity 180ms ease-in, visibility 0s linear 180ms;
}

.direction-side-menu__index::-webkit-scrollbar {
  display: none;
}

.direction-index-list {
  display: grid;
  width: 100%;
  border-top: 1px solid rgba(0, 0, 0, 0.32);
}

.direction-index-row {
  position: relative;
  display: block;
  min-width: 0;
  color: #080808;
  cursor: pointer;
  transition: background-color 180ms ease, color 180ms ease;
}

.direction-index-row__content {
  display: grid;
  grid-template-columns: 2.25rem minmax(8rem, 0.9fr) minmax(12rem, 1.7fr);
  align-items: start;
  gap: clamp(0.6rem, 1.2vw, 1.15rem);
  padding: clamp(0.72rem, 1.25vw, 1rem) 0;
}

.direction-index-row__content > span {
  min-width: 0;
}

.direction-index-row__brand,
.direction-index-row__title {
  text-transform: uppercase;
}

.direction-index-row__title {
  font-family: var(--font-sans);
  font-weight: 700;
}

.direction-index-row__line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  height: 1px;
  background: rgba(0, 0, 0, 0.32);
  transform-origin: 0 50%;
}

.direction-index-row:hover,
.direction-index-row:focus-visible {
  color: #eaeaea;
  background: #080808;
}

@media (max-width: 720px) {
  .direction-side-menu__index {
    padding-top: calc(env(safe-area-inset-top, 0px) + 5.25rem);
  }

  .direction-index-row__content {
    grid-template-columns: 2rem minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 0.8rem;
    padding-block: 0.85rem;
  }

  .direction-index-row__number {
    grid-column: 1;
    grid-row: 1;
  }

  .direction-index-row__brand {
    grid-column: 2;
    grid-row: 1;
  }

  .direction-index-row__title {
    grid-column: 3;
    grid-row: 1;
  }
}

.direction-side-menu__meta {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  bottom: 0;
  left: 0;
  gap: 0.42em;
  width: max-content;
  margin-top: 0;
  margin-left: -0.035em;
  color: #080808;
  font-family: var(--font-body);
  font-size: var(--fs-direction-index);
  line-height: 1.2;
  font-weight: 400;
  text-transform: lowercase;
  opacity: 1;
  transform: none;
  transition: none;
}

.direction-side-menu__time,
.direction-side-menu__email {
  color: #080808;
  mix-blend-mode: normal;
}

.direction-side-menu__time {
  text-transform: none;
}

.direction-side-menu__email {
  position: relative;
  padding: 0;
  border: 0;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: none;
  cursor: pointer;
  font: inherit;
  pointer-events: auto;
  text-transform: lowercase;
  transform: none;
}

.direction-side-menu__email::before {
  position: absolute;
  left: calc(var(--fs-direction-arrow) * -1 - 0.28em);
  top: calc(50% + 0.06em);
  color: #080808;
  content: "︎︎︎";
  font-size: var(--fs-direction-arrow);
  opacity: 0;
  transform: translate(-8px, -50%);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .direction-side-menu__primary > a:hover,
  .direction-side-menu__primary > button:hover {
    transform: translateX(0.12em);
  }

  .direction-side-menu__email:hover::before {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.direction-side-menu__email:focus-visible::before {
  opacity: 1;
  transform: translate(0, -50%);
}

.direction-side-menu__copy-toast {
  position: absolute;
  left: 50%;
  top: -1.5em;
  z-index: 1;
  color: #080808;
  font-size: inherit;
  line-height: inherit;
  pointer-events: none;
  opacity: 0;
  translate: -50% 0;
  mix-blend-mode: normal;
  transition: opacity 180ms ease;
}

.direction-side-menu__copy-toast.is-visible {
  opacity: 1;
}

.direction-side-menu__copy-toast.is-fading {
  opacity: 0;
  transition-duration: 520ms;
}

body.direction-menu-open .direction-side-menu {
  transform: translate3d(0, 0, 0);
}

body.direction-menu-open .direction-side-menu {
  pointer-events: auto;
}

body.direction-menu-open .direction-side-menu-bg {
  pointer-events: auto;
  opacity: 1;
}

body.direction-index-open .direction-side-menu__primary {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 150ms ease-in, visibility 0s linear 150ms;
}

body.direction-index-open .direction-side-menu__index {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms cubic-bezier(0.22, 1, 0.36, 1) 180ms, visibility 0s linear 180ms;
}

.direction-side-menu a[aria-current="page"] {
  color: #080808;
}

.direction-side-menu,
.direction-side-menu__close,
.direction-side-menu__primary,
.direction-side-menu__primary a,
.direction-side-menu__primary button,
.direction-side-menu__primary a > span,
.direction-side-menu__primary button > span,
.direction-side-menu__index,
.direction-index-row,
.direction-side-menu__meta,
.direction-side-menu__meta span,
.direction-side-menu__time,
.direction-side-menu__email,
.direction-side-menu__email::before,
.direction-side-menu__copy-toast,
.direction-side-menu a[aria-current="page"] {
  color: #000;
}

.direction-main {
  min-height: 100vh;
  transform-origin: left center;
  transition: none;
}

body.direction-menu-animating .direction-main {
  transition: transform 520ms cubic-bezier(0.65, 0, 0.35, 1);
}

body.direction-resize-lock .direction-main,
body.direction-resize-lock .direction-side-menu,
body.direction-resize-lock .direction-side-menu-bg,
body.direction-resize-lock .direction-menu-toggle,
body.direction-resize-lock .direction-menu-toggle__label {
  transition-delay: 0ms !important;
  transition-duration: 0ms !important;
}

.direction-article {
  min-height: 100vh;
}

.direction-hero {
  display: grid;
  gap: 0.65rem;
  padding: clamp(6rem, 12vw, 10rem) var(--space-page) clamp(3rem, 8vw, 8rem);
}

.direction-hero h1 {
  max-width: 18ch;
  color: #eaeaea;
  font-size: var(--fs-direction-hero);
  line-height: 0.9;
  font-weight: 700;
  text-transform: uppercase;
}

.direction-copy {
  max-width: 78rem;
  padding: 0 var(--space-page) clamp(4rem, 8vw, 8rem);
  font-size: var(--page-helvetica-size);
  line-height: var(--page-helvetica-line);
  font-weight: 400;
}

.direction-copy p + p {
  margin-top: 0.55em;
}

.direction-about {
  --about-line: #4a4a4a;
  --about-bg: var(--direction-bg);
  --about-cell: var(--about-bg);
  --about-text: #eaeaea;
  --about-muted: #838383;
  --about-hero-y: clamp(4.6rem, 7vw, 6.4rem);
  --about-kicker-gap: clamp(1.55rem, 2.85vw, 2.85rem);
  --about-sticky-top: clamp(3.6rem, 6vh, 5rem);
  --line-weight: 1px;
  background: var(--about-bg);
  color: var(--about-text);
  overflow: clip;
}

.direction-about-hero::after,
.direction-about-clients::after,
.direction-about-panel:not(:last-child)::after,
.direction-about-links-panel::before,
.direction-about-links-panel::after {
  content: "";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 3;
  height: var(--line-weight);
  background: var(--about-line);
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  animation: direction-about-line-x 1120ms cubic-bezier(0.33, 0, 0.2, 1) var(--about-grid-delay, 0ms) both;
}

.direction-about-layout__side--model::after,
.direction-about-link-cell--fine::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  z-index: 3;
  width: var(--line-weight);
  background: var(--about-line);
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: center top;
  animation: direction-about-line-y 1120ms cubic-bezier(0.33, 0, 0.2, 1) var(--about-grid-delay, 0ms) both;
}

.direction-about-hero {
  --about-grid-delay: 120ms;
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  min-height: clamp(30rem, 58vh, 46rem);
  padding: var(--about-hero-y) var(--space-page);
  overflow: hidden;
  isolation: isolate;
  background: var(--about-bg);
}

.direction-about-hero::after {
  bottom: 0;
}

.direction-about-module {
  background: var(--about-cell);
}

.direction-about-hero__copy {
  display: grid;
  grid-template-rows: auto auto;
  gap: var(--about-kicker-gap);
  align-content: center;
  padding: clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.6rem) clamp(1rem, 2vw, 1.6rem) 0;
  z-index: 1;
}

.direction-about-kicker,
.direction-about-panel__head,
.direction-about-link-panel {
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  line-height: 1.05;
  font-weight: 400;
  text-transform: uppercase;
}

.direction-about-hero h1 {
  color: var(--about-text);
  max-width: none;
  margin: 0;
  font-size: var(--fs-direction-index);
  line-height: var(--lh-reading-large);
  font-weight: 400;
}

.direction-about-hero__text {
  display: grid;
  width: min(86rem, 100%);
}

.direction-about-model {
  position: relative;
  display: grid;
  place-items: start center;
  container-type: inline-size;
  width: 100%;
  min-height: clamp(28rem, calc(100svh - (var(--about-sticky-top) * 2)), 54rem);
  z-index: 1;
  pointer-events: auto;
  overflow: hidden;
  background: var(--about-bg);
}

.direction-about-model model-viewer {
  position: absolute;
  top: 50%;
  left: 50%;
  justify-self: center;
  width: clamp(9rem, 150cqw, 42rem);
  height: clamp(18rem, 220cqw, 54rem);
  background: var(--about-bg);
  --poster-color: var(--about-bg);
  transform: translate(-50%, -50%);
}

.direction-about-bio {
  padding: 0 0 0 var(--space-page);
  background: var(--about-bg);
}

.direction-about-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(10rem, 0.82fr) minmax(0, 1.64fr);
  gap: 0;
  align-items: stretch;
  background: var(--about-cell);
}

.direction-about-layout__side {
  position: relative;
  min-height: 100%;
  background: var(--about-cell);
}

.direction-about-sticky {
  position: sticky;
  top: var(--about-sticky-top);
}

.direction-about-layout__side--model {
  --about-grid-delay: 420ms;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: clamp(1rem, 1.8vw, 1.5rem);
}

.direction-about-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  grid-auto-flow: dense;
  background: var(--about-cell);
}

.direction-about-panel {
  position: relative;
  grid-column: auto;
  display: grid;
  align-content: start;
  min-height: auto;
  padding: clamp(1rem, 1.8vw, 1.5rem);
  color: var(--about-muted);
  background: var(--about-cell);
}

.direction-about-panel--wide {
  grid-column: auto;
  min-height: auto;
}

.direction-about-panel::after {
  bottom: 0;
}

.direction-about-panel:nth-child(1) {
  --about-grid-delay: 560ms;
}

.direction-about-panel:nth-child(2) {
  --about-grid-delay: 680ms;
}

.direction-about-panel:nth-child(3) {
  --about-grid-delay: 800ms;
}

.direction-about-panel:nth-child(4) {
  --about-grid-delay: 920ms;
}

.direction-about-panel:nth-child(5) {
  --about-grid-delay: 1040ms;
}

.direction-about-panel__head {
  margin-bottom: var(--direction-label-content-gap);
  color: var(--about-text);
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  font-weight: 400;
  text-transform: uppercase;
}

.direction-about-panel__head h2 {
  margin: 0;
  font: inherit;
}

.direction-about-panel dl,
.direction-about-panel div {
  display: grid;
}

.direction-about-panel dl {
  gap: clamp(0.72rem, 1.05vw, 0.95rem);
  margin: 0;
}

.direction-about-panel dl > div {
  grid-template-columns: minmax(5.6rem, 0.28fr) minmax(0, 1fr);
  gap: clamp(0.8rem, 1.4vw, 1.5rem);
  align-items: baseline;
}

.direction-about-panel dt,
.direction-about-panel dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-direction-filter);
  font-weight: 400;
  line-height: 1.25;
  text-transform: none;
}

.direction-about-panel dt {
  color: var(--about-muted);
}

.direction-about-panel dd {
  color: var(--about-text);
}

.direction-about-clients {
  --about-grid-delay: 260ms;
  position: relative;
  display: grid;
  gap: 0.6rem;
  padding: clamp(1rem, 2.2vw, 2rem) 0;
  overflow: hidden;
  background: var(--about-bg);
  color: var(--about-text);
  font-size: var(--fs-direction-about-clients);
  line-height: 0.9;
  font-weight: 500;
  white-space: nowrap;
  text-transform: uppercase;
}

.direction-about-clients::after {
  bottom: 0;
}

.direction-about-clients p {
  animation: direction-marquee 28s linear infinite;
}

.direction-about-clients p:nth-child(2) {
  color: var(--about-muted);
  background: transparent;
  animation-direction: reverse;
  animation-duration: 38s;
}

.direction-about-links-panel {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 clamp(4rem, 7vw, 7rem);
  padding: 0;
  background: var(--about-cell);
}

.direction-about-links-panel::before {
  --about-grid-delay: 1200ms;
  top: 0;
}

.direction-about-links-panel::after {
  --about-grid-delay: 1440ms;
  bottom: 0;
}

.direction-about-link-cell {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(7rem, 13vw, 12rem);
  padding: clamp(1rem, 1.8vw, 1.5rem) var(--space-page);
  background: var(--about-cell);
}

.direction-about-link-cell--fine {
  --about-grid-delay: 1320ms;
  justify-content: flex-start;
}

.direction-about-link-cell--partner {
  justify-content: flex-end;
}

.direction-about-link-panel {
  display: inline-flex;
  align-items: center;
  width: max-content;
  max-width: 100%;
  --about-link-hover-x: -0.42em;
  color: var(--about-text);
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  line-height: 1.05;
  font-weight: 400;
  text-transform: uppercase;
}

.direction-about-link-panel--fine {
  gap: 0.55em;
}

.direction-about-link-panel--partner {
  --about-link-hover-x: 0.42em;
  gap: 0.55em;
  text-align: right;
}

.direction-about-link-panel strong,
.direction-about-link-panel span {
  display: inline-block;
  font: inherit;
  color: inherit;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.direction-about-link-panel:hover span,
.direction-about-link-panel:hover strong,
.direction-about-link-panel:focus-visible span,
.direction-about-link-panel:focus-visible strong {
  animation: direction-about-link-bump 1280ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.direction-about-link-panel:hover > :nth-child(2),
.direction-about-link-panel:focus-visible > :nth-child(2) {
  animation-delay: 70ms;
}

.direction-about-link-panel:hover > :nth-child(3),
.direction-about-link-panel:focus-visible > :nth-child(3) {
  animation-delay: 140ms;
}

@keyframes direction-about-link-bump {
  0%,
  8% {
    transform: translate3d(0, 0, 0);
  }

  18% {
    transform: translate3d(var(--about-link-hover-x), 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .direction-about-link-panel:hover span,
  .direction-about-link-panel:hover strong,
  .direction-about-link-panel:focus-visible span,
  .direction-about-link-panel:focus-visible strong {
    animation: none;
  }
}

.js .direction-about-hero__copy[data-about-intro-reveal]:not(.is-reveal-ready) {
  opacity: 0;
}

.js .direction-about-hero__copy.is-reveal-ready {
  opacity: 1;
  transform: none;
}

.js .direction-about-hero__copy.is-reveal-ready .direction-about-kicker {
  opacity: 0;
  transform: translate3d(0, 0.7rem, 0);
}

.js .direction-about-hero__copy.is-visible .direction-about-kicker {
  animation: direction-about-copy-rise 640ms cubic-bezier(0.16, 1, 0.3, 1) 60ms forwards;
}

.js .direction-about-panel.is-reveal-ready,
.js .direction-about-layout__side.is-reveal-ready {
  opacity: 1;
  transform: none;
}

.js .direction-about-panel.is-reveal-ready .direction-about-panel__row,
.js .direction-about-layout__side.is-reveal-ready .direction-about-model {
  opacity: 0;
  transform: translate3d(0, 1.1rem, 0);
}

.js .direction-about-panel.is-visible .direction-about-panel__row {
  animation: direction-about-copy-rise 760ms cubic-bezier(0.16, 1, 0.3, 1) calc(var(--reveal-delay, 0ms) + 190ms + var(--about-row-delay, 0ms)) forwards;
}

.js .direction-about-layout__side.is-visible .direction-about-model {
  animation: direction-about-copy-rise 820ms cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms) forwards;
}

@keyframes direction-about-line-x {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}

@keyframes direction-about-line-y {
  from {
    transform: scaleY(0);
  }

  to {
    transform: scaleY(1);
  }
}

@keyframes direction-about-copy-rise {
  from {
    opacity: 0;
    transform: translate3d(0, 1.1rem, 0);
  }

  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .js .direction-about-hero__copy.is-reveal-ready .direction-about-kicker,
  .js .direction-about-panel.is-reveal-ready .direction-about-panel__head,
  .js .direction-about-panel.is-reveal-ready .direction-about-panel__row,
  .js .direction-about-layout__side.is-reveal-ready .direction-about-model {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .direction-about-hero::after,
  .direction-about-clients::after,
  .direction-about-panel:not(:last-child)::after,
  .direction-about-links-panel::before,
  .direction-about-links-panel::after,
  .direction-about-layout__side--model::after,
  .direction-about-link-cell--fine::after {
    animation: none;
    transform: none;
  }
}

@keyframes direction-marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.direction-about-finearts {
  padding: clamp(2rem, 4vw, 4rem) var(--space-page);
  color: #eaeaea;
  font-family: var(--font-accent);
  font-size: var(--page-accent-size);
  line-height: var(--page-accent-line);
  font-weight: 400;
  text-transform: uppercase;
}

.direction-about-finearts a {
  color: #fba700;
}

.direction-detail {
  background: var(--direction-bg);
  color: #eaeaea;
}

.page-direction-detail {
  --direction-detail-content-width: min(80vw, 1180px);
  --direction-detail-hero-media-width: min(80vw, 1180px);
}

.direction-detail-hero {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: var(--direction-bg);
}

.direction-detail-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  --controls: none;
  --media-object-fit: cover;
  filter: none;
}

.direction-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

.direction-detail-hero__overlay {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16em;
  width: 100%;
  max-width: 100%;
  padding: 0 15%;
  color: var(--direction-hero-color, #eaeaea);
  mix-blend-mode: normal;
  text-align: center;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
  transition: left 500ms cubic-bezier(0.65, 0, 0.35, 1);
}

.direction-detail-hero__brand {
  display: block;
  margin: 0;
  color: #838383;
  font-family: var(--font-sans);
  font-size: var(--fs-direction-detail-title);
  line-height: 1;
  font-weight: 400;
}

.direction-detail-hero__title {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-direction-project);
  font-size: var(--fs-direction-detail-title);
  line-height: 1;
  font-weight: 700;
  text-transform: uppercase;
}

.direction-detail-hero .wr-word {
  display: inline-block;
  white-space: pre;
  opacity: 0;
  transform: translateY(0.8em);
  animation: direction-hero-word-reveal 680ms cubic-bezier(0.22, 1, 0.36, 1) var(--word-delay, 0ms) forwards;
}

.direction-detail-hero__brand .wr-word {
  transform: scale(0.965);
  animation-name: direction-hero-brand-reveal;
  animation-duration: 560ms;
}

@keyframes direction-hero-word-reveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes direction-hero-brand-reveal {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .direction-detail-hero .wr-word {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.direction-detail-bar {
  position: relative;
  height: var(--direction-separator-weight);
  block-size: var(--direction-separator-weight);
  min-block-size: var(--direction-separator-weight);
  max-block-size: var(--direction-separator-weight);
  width: 72%;
  margin: 15% 14% 8%;
  overflow: hidden;
  background: var(--color-direction-muted);
}

.direction-detail-bar::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 50%;
  height: var(--direction-separator-weight);
  block-size: var(--direction-separator-weight);
  border-radius: 999px;
  background: var(--color-direction-accent);
  animation: direction-bar-shimmer 10s ease-in-out infinite;
}

@keyframes direction-bar-shimmer {
  0% {
    left: -50%;
    width: 80%;
  }

  50% {
    left: 70%;
    width: 100%;
  }

  100% {
    left: -50%;
    width: 80%;
  }
}

.direction-project-info {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 2.8vw, 2.8rem);
  padding: 0 14% 80px;
  color: var(--color-direction-muted);
  font-family: var(--font-display);
  font-size: var(--fs-direction-filter);
  line-height: 1.25;
  font-weight: 400;
}

.direction-project-info__facts {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: clamp(1rem, 1.6vw, 1.45rem);
  width: 100%;
  min-width: 0;
  margin: 0;
}

.direction-project-info__field {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.38fr) minmax(0, 1fr);
  align-items: baseline;
  align-content: start;
  gap: clamp(0.75rem, 1.2vw, 1.25rem);
  min-width: 0;
  margin: 0;
}

.direction-project-info dt {
  margin: 0;
  color: var(--color-footer-text);
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  line-height: var(--page-accent-line);
  font-weight: 400;
  text-transform: uppercase;
}

.direction-project-info dd {
  display: grid;
  gap: 0.1rem;
  margin: 0;
  color: #eaeaea;
  font-family: var(--font-display);
  font-size: var(--fs-direction-filter);
  line-height: 1.25;
  font-weight: 400;
  text-transform: none;
}

.direction-project-info__about {
  display: grid;
  gap: 0.7em;
  width: 100%;
  margin: 0;
  color: #eaeaea;
  font-family: var(--font-display);
  font-size: var(--fs-direction-body);
  line-height: 1.22;
  font-weight: 400;
  text-transform: none;
}

.direction-project-info__about p {
  max-width: 40ch;
  margin: 0;
}

.direction-project-info__categories {
  max-width: 48ch;
  margin: 0;
  color: #838383;
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  line-height: var(--page-accent-line);
  font-weight: 400;
  text-transform: lowercase;
}

.direction-project-info__about a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.12em;
  text-decoration-color: currentColor;
  background: none;
}

.direction-project-info__about a:hover,
.direction-project-info__about a:focus-visible {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  background: none;
}

.js .direction-detail-bar,
.js .direction-project-info [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 0.85rem, 0);
  transition: opacity 420ms ease var(--reveal-delay, 0ms), transform 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .direction-detail-bar.is-visible,
.js .direction-project-info [data-reveal].is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

html.gsap-reveals .direction-detail-bar,
html.gsap-reveals .direction-project-info [data-reveal],
html.gsap-reveals .direction-contact .site-contact__links a,
html.gsap-reveals .direction-contact .site-contact__top {
  transition: none;
}

.direction-detail-copy {
  display: grid;
  gap: 1rem;
  max-width: 76rem;
  padding: clamp(4rem, 9vw, 8rem) var(--space-page);
  color: #fba700;
  font-size: var(--fs-direction-contact);
  line-height: 0.96;
  font-weight: 400;
}

.direction-detail-media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 30px 18px;
  width: var(--direction-detail-content-width);
  margin: 86px auto 0;
  padding: 0 0 clamp(5rem, 9vw, 9rem);
}

.direction-detail-media__item {
  display: grid;
  align-content: start;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.direction-detail-media--laned {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 30px;
}

.direction-detail-media__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
}

.direction-detail-media__column {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
}

.direction-detail-media__column .direction-detail-media__item,
.direction-detail-media--laned > .direction-detail-media__item {
  grid-column: auto;
  width: 100%;
  margin-inline: 0;
}

.direction-detail-media--laned > .direction-detail-media__item--wide,
.direction-detail-media--laned > .direction-detail-media__item--parallax {
  width: var(--direction-detail-hero-media-width);
  margin-inline: auto;
}

.direction-detail-media__item--1,
.direction-detail-media__item--2 {
  grid-column: 1 / -1;
  width: var(--direction-detail-hero-media-width);
  margin-inline: auto;
}

.direction-detail-media__column .direction-detail-media__item--1,
.direction-detail-media__column .direction-detail-media__item--2 {
  grid-column: auto;
  width: 100%;
  margin-inline: 0;
}

.direction-detail-media__item img,
.direction-detail-media__item mux-player {
  display: block;
  width: 100%;
  max-height: none;
  --media-object-fit: cover;
  background: #111;
}

.direction-detail-media__item--image img {
  aspect-ratio: var(--media-ratio, auto);
  height: auto;
  object-fit: contain;
}

.direction-detail-media__item mux-player {
  aspect-ratio: var(--media-ratio, 16 / 9);
  --media-object-fit: cover;
  --media-background-color: transparent;
}

.direction-detail-media__item:not(.direction-detail-media__item--lead-video):not(.direction-detail-media__item--parallax) img,
.direction-detail-media__item:not(.direction-detail-media__item--lead-video):not(.direction-detail-media__item--parallax) mux-player {
  border-radius: var(--direction-media-radius);
  overflow: hidden;
}

.direction-detail-media__item--video:not(.direction-detail-media__item--lead-video) mux-player {
  aspect-ratio: var(--media-ratio, 452 / 567);
}

.direction-detail-media__item mux-player[data-mux-autoplay] {
  --controls: none;
}

.direction-detail-media__item--slideshow {
  overflow: hidden;
  border-radius: var(--direction-media-radius);
  background: #111;
}

.direction-detail-slideshow {
  position: relative;
  width: 100%;
  aspect-ratio: var(--media-ratio, 16 / 9);
  border-radius: inherit;
  background: #111;
}

.direction-detail-slideshow__track {
  position: absolute;
  inset: 0;
  display: flex;
  transform: translate3d(calc(var(--slide-index, 0) * -100%), 0, 0);
  transition: transform 620ms cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}

.direction-detail-slideshow__track.is-jumping {
  transition: none;
}

.direction-detail-slideshow .slide {
  position: relative;
  display: block;
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
  pointer-events: none;
}

.direction-detail-slideshow img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: contain;
  background: #111;
}

.direction-detail-slideshow__controls {
  position: absolute;
  inset: auto 0 0 0;
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  height: auto;
  z-index: 2;
  justify-content: space-between;
  align-items: end;
  gap: 0.45rem;
  padding: 0.55rem;
  color: #eaeaea;
  font-family: var(--font-mono);
  font-size: clamp(calc(0.62rem * var(--type-scale)), calc(0.72vw * var(--type-scale)), calc(0.76rem * var(--type-scale)));
  line-height: 1;
  mix-blend-mode: difference;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.direction-detail-slideshow:hover .direction-detail-slideshow__controls,
.direction-detail-slideshow:focus-within .direction-detail-slideshow__controls {
  opacity: 1;
}

.direction-detail-slideshow__controls button {
  width: auto;
  min-width: 2.75rem;
  min-height: auto;
  padding: 0;
  color: inherit;
  opacity: 1;
  pointer-events: auto;
  text-shadow: none;
}

.direction-detail-slideshow:hover .direction-detail-slideshow__controls button,
.direction-detail-slideshow:focus-within .direction-detail-slideshow__controls button {
  color: inherit;
  opacity: 1;
  text-shadow: none;
}

.direction-detail-slideshow__counter {
  margin-inline: auto;
  pointer-events: none;
}

.direction-detail-media__item--parallax {
  grid-column: 1 / -1;
  position: relative;
  width: 100vw;
  aspect-ratio: 16 / 9;
  margin-left: calc((100vw - var(--direction-detail-content-width)) / -2);
  overflow: hidden;
  border-radius: var(--direction-media-radius);
  --parallax-y: -9%;
}

.direction-detail-media__item--parallax img {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 118%;
  max-width: none;
  height: 118%;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: 50% 50%;
  transform: translate3d(-50%, calc(-50% + var(--parallax-y)), 0);
  will-change: transform;
}

.page-direction-detail .direction-project-info {
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  width: var(--direction-detail-content-width, min(80vw, 1180px));
  margin-inline: auto;
  padding-inline: 0;
  padding-bottom: 0;
}

.page-direction-detail .direction-detail-bar {
  width: var(--direction-detail-content-width, min(80vw, 1180px));
  margin-inline: auto;
}

.page-direction-detail-split .direction-detail-split {
  --direction-detail-split-gap: clamp(2.75rem, 5vw, 5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 27vw);
  gap: var(--direction-detail-split-gap);
  width: min(calc(100vw - (var(--space-page) * 2)), 1640px);
  margin: 0 auto;
  padding: clamp(11rem, 17vw, 17rem) 0 clamp(10rem, 16vw, 16rem);
  position: relative;
}

.page-direction-detail-split .direction-detail-split__info {
  --direction-detail-info-edge: clamp(4rem, 10vh, 7rem);
  position: sticky;
  top: var(--direction-detail-info-edge);
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  min-width: 0;
  min-height: calc(100dvh - (var(--direction-detail-info-edge) * 2));
  max-height: none;
  overflow: visible;
  overscroll-behavior: auto;
}

.page-direction-detail-split .direction-detail-split__info .direction-detail-bar {
  display: none;
}

.page-direction-detail-split .direction-detail-split__info .direction-project-info {
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 2.6vw, 2.6rem);
  width: 100%;
  min-height: inherit;
  margin: 0;
  padding: 0;
}

.page-direction-detail-split .direction-detail-split__info .direction-project-info__about,
.page-direction-detail-split .direction-detail-split__info .direction-project-info__categories,
.page-direction-detail-split .direction-detail-split__info .direction-project-info__facts {
  grid-column: 1;
}

.page-direction-detail-split .direction-detail-split__info .direction-project-info__about {
  width: 100%;
  margin-left: 0;
}

.page-direction-detail-split .direction-detail-split__info .direction-project-info__facts {
  grid-template-columns: 1fr;
  gap: clamp(1rem, 1.5vw, 1.4rem);
  width: 100%;
  margin: auto 0 0;
}

.page-direction-detail-split .direction-detail-split__info .direction-project-info__field {
  gap: 0.58rem;
}

.page-direction-detail-split .direction-detail-split__info .direction-project-info dd {
  gap: 0.08rem;
}

.page-direction-detail-split .direction-detail-split__info .direction-project-info__about p {
  max-width: 34ch;
  margin: 0;
}

.page-direction-detail-split .direction-detail-split__info .direction-project-info dt {
  color: var(--color-footer-text);
  line-height: 1;
}

.page-direction-detail-split .direction-detail-split__info .direction-project-info dd,
.page-direction-detail-split .direction-detail-split__info .direction-project-info__about {
  color: #eaeaea;
}

.page-direction-detail-split .direction-detail-split__media {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

.page-direction-detail-split .direction-detail-split__media .direction-detail-media {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 30px 18px;
  width: 100%;
  margin: 0;
  padding-bottom: 0;
}

.page-direction-detail-split .direction-detail-split__media .direction-detail-media--laned {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.page-direction-detail-split .direction-detail-split__media .direction-detail-media__item {
  max-width: 100%;
}

.page-direction-detail-split .direction-detail-split__media .direction-detail-media > .direction-detail-media__item.direction-detail-media__item--1,
.page-direction-detail-split .direction-detail-split__media .direction-detail-media > .direction-detail-media__item.direction-detail-media__item--2 {
  grid-column: 1 / -1;
  width: 100%;
  margin-inline: 0;
}

.page-direction-detail-split .direction-detail-split__media .direction-detail-media--laned > .direction-detail-media__item.direction-detail-media__item--wide,
.page-direction-detail-split .direction-detail-split__media .direction-detail-media--laned > .direction-detail-media__item.direction-detail-media__item--parallax {
  width: 100%;
  margin-inline: 0;
}

.page-direction-detail-split .direction-detail-split__media .direction-detail-media > .direction-detail-media__item--parallax {
  grid-column: 1 / -1;
  width: 100%;
  margin-left: 0;
  aspect-ratio: 16 / 9;
  --parallax-y: -10%;
}

.page-direction-detail-split .direction-detail-split__media .direction-detail-media__item--parallax img {
  width: 124%;
  height: 124%;
  object-position: 50% 48%;
}

@media (max-width: 768px) {
  .page-direction-detail {
    --direction-detail-mobile-gutter: 1.5rem;
    --direction-detail-content-width: calc(100% - (var(--direction-detail-mobile-gutter) * 2));
    --direction-detail-hero-media-width: var(--direction-detail-content-width);
  }

  .page-direction-detail .direction-detail-media {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-top: 3rem;
  }

  .page-direction-detail .direction-project-info {
    width: var(--direction-detail-content-width);
  }

  .page-direction-detail .direction-detail-bar {
    width: var(--direction-detail-content-width);
  }

  .page-direction-detail .direction-detail-media__item--parallax {
    width: calc(100% + (var(--direction-detail-mobile-gutter) * 2));
    max-width: none;
    aspect-ratio: 9 / 15;
    margin-inline: calc(var(--direction-detail-mobile-gutter) * -1);
    border-radius: 0;
    --parallax-y: -12%;
  }

  .page-direction-detail .direction-detail-media__item--parallax img {
    width: 124%;
    height: 128%;
    object-position: var(--parallax-mobile-focus-x, 50%) 50%;
  }

  .page-direction-detail-split .direction-detail-split__media .direction-detail-media > .direction-detail-media__item.direction-detail-media__item--parallax,
  .page-direction-detail-split .direction-detail-split__media .direction-detail-media--laned > .direction-detail-media__item.direction-detail-media__item--parallax {
    width: calc(100% + (var(--direction-detail-mobile-gutter) * 2));
    max-width: none;
    aspect-ratio: 9 / 15;
    margin-inline: calc(var(--direction-detail-mobile-gutter) * -1);
    --parallax-y: -12%;
  }

  .page-direction-detail-split .direction-detail-split__media .direction-detail-media__item.direction-detail-media__item--parallax img {
    width: 124%;
    height: 128%;
    object-position: var(--parallax-mobile-focus-x, 50%) 48%;
  }

  .page-direction-detail-split .direction-detail-split {
    grid-template-columns: 1fr;
    width: var(--direction-detail-content-width);
    gap: clamp(6rem, 24vw, 8rem);
    padding-top: clamp(7rem, 28vw, 9rem);
  }

  .page-direction-detail-split .direction-detail-split__info {
    position: relative;
    top: auto;
    grid-column: auto;
    grid-row: 1;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .page-direction-detail-split .direction-detail-split__media {
    grid-column: auto;
    grid-row: 2;
  }

  .page-direction-detail-split .direction-detail-split__media .direction-detail-media {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .direction-detail-media__columns {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .direction-detail-media__column {
    gap: 1rem;
  }

  .page-direction-detail-split .direction-detail-split__info .direction-project-info {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .page-direction-detail-split .direction-detail-split__info .direction-project-info__about,
  .page-direction-detail-split .direction-detail-split__info .direction-project-info__categories,
  .page-direction-detail-split .direction-detail-split__info .direction-project-info__facts {
    grid-column: 1;
  }

  .page-direction-detail-split .direction-detail-split__info .direction-project-info__about {
    width: 100%;
    margin-left: 0;
  }

  .page-direction-detail-split .direction-detail-split__info .direction-project-info__facts {
    width: 100%;
    margin: 0;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .page-direction-detail {
    --direction-detail-content-width: min(calc(100vw - (var(--space-page) * 2)), 1180px);
    --direction-detail-hero-media-width: var(--direction-detail-content-width);
  }

  .page-direction-detail .direction-project-info {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: clamp(2rem, 4vw, 3rem);
  }

  .direction-detail-media {
    margin-top: clamp(3.8rem, 7vw, 5.4rem);
  }

}

.js .direction-detail-media__item {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity 520ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .direction-detail-media__item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.direction-intro {
  position: relative;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(0.85rem, 1.5vw, 1.4rem);
  overflow: hidden;
  isolation: isolate;
  color: #eaeaea;
}

.direction-intro__video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
}

.direction-intro__video {
  object-fit: cover;
  --controls: none;
  --media-object-fit: cover;
}

.direction-intro__top,
.direction-intro__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  line-height: 1;
  font-weight: 400;
  text-transform: uppercase;
  mix-blend-mode: difference;
  user-select: none;
  transition: transform 420ms ease, opacity 420ms ease;
}

.direction-intro__headline {
  align-self: center;
  justify-self: center;
  width: 100%;
  color: #eaeaea;
  font-size: var(--fs-direction-intro);
  line-height: 0.72;
  font-weight: 400;
  letter-spacing: -0.07em;
  text-align: center;
  text-transform: lowercase;
  mix-blend-mode: difference;
  isolation: isolate;
  user-select: none;
  transition: transform 500ms ease, opacity 600ms ease;
}

.direction-intro__headline span {
  display: inline-block;
}

.direction-intro__headline .intro-line-reveal {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: stretch;
  color: #eaeaea;
  line-height: inherit;
  isolation: isolate;
  padding-bottom: 0.1em;
}

.direction-intro__headline .intro-line-text {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 0.18em;
  color: #eaeaea;
  line-height: inherit;
}

.direction-intro__headline .intro-line-word {
  display: inline-block;
  line-height: inherit;
}

.direction-intro__headline .intro-line-rule {
  position: absolute;
  left: 0.24em;
  right: 0.24em;
  top: calc(100% + 0.16em);
  display: block;
  height: clamp(4px, 0.06em, 7px);
  background: linear-gradient(
    90deg,
    var(--direction-gradient-yellow) 0%,
    var(--direction-gradient-orange) 16%,
    var(--direction-gradient-olive) 51%,
    var(--direction-gradient-green) 75%,
    var(--direction-gradient-cyan) 96%
  );
  background-size: 129% 100%;
  background-position: center;
  transform-origin: 0% 50%;
}

.direction-intro__bottom {
  align-self: end;
}

.direction-intro__top {
  opacity: 0;
  animation: direction-intro-left 500ms cubic-bezier(0.22, 0, 0.1, 1) 450ms forwards;
}

@keyframes direction-intro-left {
  from {
    opacity: 0;
    transform: translateX(-2.5rem);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.direction-story,
.direction-works {
  padding: clamp(4rem, 9vw, 9rem) var(--space-page);
}

.direction-story {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(10rem, 44vw) minmax(0, 1fr);
  align-items: start;
  gap: 0.5em;
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-top: clamp(18rem, 30vw, 30rem);
  padding-bottom: clamp(12rem, 19vw, 19rem);
  color: #eaeaea;
  font-family: var(--font-direction-project);
  font-size: var(--fs-direction-index);
  line-height: var(--lh-reading-large);
  font-weight: 400;
  letter-spacing: 0;
  text-align: left;
  text-wrap: pretty;
}

.direction-story__backdrop {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  display: block;
  width: clamp(23.4rem, 36vw, 35.1rem);
  height: auto;
  opacity: 0.3;
  pointer-events: none;
  transform: translate(-50%, -50%);
  user-select: none;
}

.direction-story p {
  grid-column: 2;
  width: 100%;
  margin: 0;
}

.direction-story p:first-of-type {
  text-indent: 0;
}

.direction-story p + p {
  margin-top: 0.48em;
}

.page-direction-index .direction-story {
  color: #eaeaea;
}

.direction-section-label {
  color: #838383;
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: nowrap;
}

.direction-story__hint {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
}

.direction-story a {
  --story-underline-height: clamp(1.75px, calc(var(--fs-direction-index) * 0.06), 2.5px);
  --story-underline-y: calc(100% - 0.19em);
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit;
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: normal;
  background-image: linear-gradient(
    rgb(80 80 80 / var(--link-underline-opacity, 1)),
    rgb(80 80 80 / var(--link-underline-opacity, 1))
  );
  background-repeat: no-repeat;
  background-position: center var(--story-underline-y);
  background-size: 100% var(--story-underline-height);
  text-decoration: none;
  text-transform: none;
  white-space: normal;
}

.direction-story a:hover,
.direction-story a:focus-visible {
  background-image:
    linear-gradient(var(--direction-bg), var(--direction-bg)),
    linear-gradient(var(--direction-bg), var(--direction-bg)),
    linear-gradient(
      90deg,
      var(--direction-gradient-yellow) 0%,
      var(--direction-gradient-orange) 16%,
      var(--direction-gradient-olive) 51%,
      var(--direction-gradient-green) 75%,
      var(--direction-gradient-cyan) 96%
    );
  background-position:
    left -3px top var(--story-underline-y),
    right -3px top var(--story-underline-y),
    center var(--story-underline-y);
  background-size:
    0% var(--story-underline-height),
    calc(100% + 6px) var(--story-underline-height),
    129% var(--story-underline-height);
  animation: direction-story-link-line 820ms cubic-bezier(0.76, 0.14, 0.94, 0.99) infinite;
  will-change: background-size;
}

@keyframes direction-story-link-line {
  0% {
    background-size:
      0% var(--story-underline-height),
      calc(100% + 6px) var(--story-underline-height),
      129% var(--story-underline-height);
  }

  45% {
    background-size:
      0% var(--story-underline-height),
      0% var(--story-underline-height),
      129% var(--story-underline-height);
  }

  55% {
    background-size:
      0% var(--story-underline-height),
      0% var(--story-underline-height),
      129% var(--story-underline-height);
  }

  100% {
    background-size:
      calc(100% + 6px) var(--story-underline-height),
      0% var(--story-underline-height),
      129% var(--story-underline-height);
  }
}

@media (prefers-reduced-motion: reduce) {
  .direction-story a:hover,
  .direction-story a:focus-visible {
    background-size:
      0% var(--story-underline-height),
      0% var(--story-underline-height),
      129% var(--story-underline-height);
    animation: none;
  }
}

.direction-story__word {
  display: inline;
  color: #eaeaea;
  opacity: var(--word-opacity, 1);
  transition: opacity 95ms cubic-bezier(0.35, 0, 0.2, 1), color 120ms ease;
}

.js .direction-story[data-word-reveal] .direction-story__word {
  --word-opacity: 0.08;
}

.direction-works__kicker {
  color: #eaeaea;
  font-size: var(--fs-direction-kicker);
  line-height: 1.1;
  font-weight: 400;
  font-variation-settings: "wght" 420;
  text-transform: uppercase;
}

.direction-works {
  color: #eaeaea;
  padding-top: clamp(2rem, 4vw, 4rem);
}

.direction-works__kicker {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  min-height: 1em;
  color: #eaeaea;
  font-size: var(--fs-direction-kicker);
  line-height: 0.85;
  overflow: visible;
}

.direction-works__arrow {
  font-size: var(--fs-direction-arrow);
  line-height: 1;
}

.page-direction-projects {
  background: var(--direction-bg);
}

.page-direction-projects .direction-intro {
  background: var(--direction-bg);
  --intro-shade-opacity: 0;
  --intro-shade-y: 28%;
  z-index: 0;
}

.page-direction-projects .direction-main > section:not(.direction-intro) {
  position: relative;
  z-index: 2;
  background: var(--direction-bg);
}

.page-direction-projects .direction-main > section.direction-project-shelf {
  z-index: 2;
  background: var(--direction-bg);
}

.page-direction-projects .direction-contact {
  position: relative;
  z-index: 2;
}

.page-direction-projects .direction-intro::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 40%;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(8 8 8 / 0.9), rgb(8 8 8 / 0));
  opacity: var(--intro-shade-opacity);
  transform: translate3d(0, var(--intro-shade-y), 0);
  will-change: transform, opacity;
}

.page-direction-projects .direction-intro__video {
  opacity: 0;
  z-index: 0;
  transform: translate3d(0, 100vh, 0);
  transform-origin: 50% 100%;
  filter: none;
  will-change: transform, opacity, filter;
}

.page-direction-projects .direction-intro__headline {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform-origin: 50% 50%;
  filter: none;
  white-space: nowrap;
  will-change: opacity;
}

.page-direction-projects .direction-intro__top {
  animation-delay: 1550ms;
}

.is-direction-intro-parallax .direction-intro__video,
.is-direction-intro-parallax .direction-intro__top,
.is-direction-intro-parallax .direction-intro__bottom {
  transition-property: opacity;
  will-change: transform;
}

.intro-word {
  display: inline-block;
  line-height: inherit;
  white-space: nowrap;
  will-change: opacity;
}

.intro-word + .intro-word {
  margin-left: 0.18em;
}

.direction-projects__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.58rem;
  max-width: min(70rem, 100%);
  margin-inline: auto;
  justify-content: center;
}

.direction-project-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  min-height: 2.06rem;
  padding: 0.38rem 0.78rem 0.35rem;
  border: 1px solid #838383;
  border-radius: 999px;
  background: rgb(234 234 234 / 0.025);
  color: #838383;
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  line-height: 1;
  font-weight: 400;
  text-transform: lowercase;
  cursor: pointer;
  transition: border-color 180ms ease, color 180ms ease, background-color 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js .direction-project-filter {
  opacity: 0;
  transform: translateY(0.85rem);
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 620ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms ease,
    color 180ms ease,
    background-color 180ms ease;
  transition-delay: var(--filter-reveal-delay, 0ms), var(--filter-reveal-delay, 0ms), 0ms, 0ms, 0ms;
}

.js .direction-projects__filters.is-visible .direction-project-filter {
  opacity: 1;
  transform: translateY(0);
}

.direction-project-filter span {
  font-family: var(--font-accent);
  font-size: 1em;
  color: currentColor;
}

.direction-project-filter:hover,
.direction-project-filter:focus-visible,
.direction-project-filter.is-active {
  border-color: #eaeaea;
  background: #eaeaea;
  color: #080808;
}

.direction-project-filter:active {
  transform: translateY(1px);
}

.js .direction-projects__filters.is-visible .direction-project-filter:active {
  transform: translateY(1px);
}

@media (max-width: 980px) {
  .direction-projects__filters {
    max-width: 48rem;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .page-direction {
    --direction-media-radius: 12px;
  }

  .direction-projects__filters {
    flex-wrap: wrap;
    gap: 0.42rem;
    padding-top: 0.75rem;
    max-width: min(24rem, 100%);
    margin-inline: auto;
    overflow: visible;
  }

  .direction-project-filter {
    min-height: 1.72rem;
    padding: 0.29rem 0.54rem 0.27rem;
  }
}

.page-direction-project-shelf .direction-story {
  position: relative;
  z-index: 2;
}

.direction-project-shelf__filter-shell {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(4rem, 7vw, 7rem) var(--space-page) 0;
  background: var(--direction-bg);
}

.direction-project-shelf__works {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(5rem, 9vw, 9rem);
  background: var(--direction-bg);
  text-align: left;
}

.direction-project-shelf__works .direction-works__kicker {
  width: max-content;
  margin-inline: 0;
}

.direction-project-shelf {
  --project-shelf-gutter: clamp(2rem, 6.8vw, 6.125rem);
  --project-card-width: var(--direction-project-card-width);
  --project-shelf-edge: max(var(--project-shelf-gutter), calc((100vw - var(--project-card-width)) / 2));
  --project-copy-width: calc(100vw - (2 * var(--space-page)));
  position: relative;
  z-index: 2;
  padding: 0 0 clamp(12rem, 18vw, 18rem);
  overflow: hidden;
  background: var(--direction-bg);
  color: #eaeaea;
}

@media (min-width: 769px) {
  .direction-project-shelf {
    --project-shelf-gutter: var(--space-page);
    --project-copy-width: clamp(23rem, 36.667vw, 45rem);
  }
}

.direction-project-shelf__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--project-card-width);
  align-items: end;
  gap: 1rem;
  width: 100%;
  min-height: calc((var(--project-card-width) * 1.5) + 4rem);
  padding: 2rem var(--project-shelf-edge);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--project-shelf-edge);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  cursor: grab;
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

.direction-project-shelf__track::-webkit-scrollbar {
  display: none;
}

.direction-project-shelf__track:focus-visible {
  outline: 1px solid #838383;
  outline-offset: -1px;
}

.direction-project-shelf__track.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
  scroll-snap-type: none;
  user-select: none;
}

.direction-project-card {
  width: var(--project-card-width);
  align-self: end;
  scroll-snap-align: center;
  scroll-snap-stop: normal;
  opacity: 0;
  transform: translateY(2rem) rotateX(8deg);
  transform-origin: 50% 100%;
  transition:
    opacity 520ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

.direction-project-card.is-visible {
  opacity: 1;
  transform: none;
}

.direction-project-card.is-filtered-out {
  display: none;
}

.direction-project-card--tall {
  aspect-ratio: 2 / 3;
}

.direction-project-card--medium {
  aspect-ratio: 3 / 4;
}

.direction-project-card--short {
  aspect-ratio: 4 / 5;
}

.direction-project-card__link,
.direction-project-card__media {
  display: block;
  width: 100%;
  height: 100%;
}

.direction-project-card__link {
  color: #eaeaea;
  cursor: pointer;
  perspective: 1500px;
  -webkit-user-drag: none;
}

.direction-project-shelf__track.is-dragging .direction-project-card__link {
  cursor: grabbing;
}

.direction-project-card__media {
  position: relative;
  overflow: hidden;
  border-radius: var(--direction-media-radius);
  background: #000;
  isolation: isolate;
  transform: translateZ(0);
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  transition: transform 800ms cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}

.direction-project-card__media-element {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  --media-object-fit: cover;
  --controls: none;
  pointer-events: none;
  transform: scale(1.002);
  transition: transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.direction-project-shelf__number {
  display: block;
  margin: 0 0 clamp(2rem, 4vw, 4rem);
  padding-inline: var(--space-page);
  color: #eaeaea;
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  line-height: 1;
  font-weight: 400;
  text-align: center;
}

.direction-project-shelf__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--project-copy-width);
  max-width: 100%;
  min-height: clamp(8rem, 11vw, 10rem);
  margin: clamp(3rem, 5vw, 5rem) auto 0;
  color: #eaeaea;
  text-align: center;
}

.direction-project-shelf__heading {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  width: 100%;
}

.direction-project-shelf__brand,
.direction-project-shelf__categories {
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  line-height: 1.1;
  font-weight: 400;
}

.direction-project-shelf__brand {
  width: 100%;
  color: #838383;
  font-family: var(--font-sans);
  font-size: var(--fs-direction-body);
  line-height: 0.92;
  margin: 0;
  text-transform: uppercase;
}

.direction-project-shelf__title {
  width: 100%;
  max-width: 100%;
  font-family: var(--font-direction-project);
  font-size: var(--fs-direction-body);
  line-height: 0.92;
  font-weight: 700;
  text-transform: uppercase;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.direction-project-shelf__categories {
  width: 100%;
  max-width: 100%;
  color: #838383;
  line-height: 1.25;
  margin-top: clamp(1.25rem, 1.8vw, 1.75rem);
  text-transform: lowercase;
  text-wrap: balance;
}

.direction-project-shelf .direction-projects__filters {
  width: var(--project-copy-width);
  max-width: 100%;
}

@media (hover: hover) and (pointer: fine) {
  .direction-project-card__link:hover .direction-project-card__media,
  .direction-project-card__link:focus-visible .direction-project-card__media {
    transform: rotateX(-5deg);
  }
}

@media (max-width: 640px) {
  .direction-project-shelf__filter-shell {
    padding-top: clamp(3rem, 12vw, 4.5rem);
  }

  .direction-project-shelf {
    --project-shelf-gutter: 1.5rem;
    --project-card-width: clamp(12.5rem, 60vw, 15rem);
    padding-bottom: clamp(11rem, 44vw, 15rem);
  }

  .direction-project-shelf__track {
    gap: 0.75rem;
    min-height: calc((var(--project-card-width) * 1.25) + 3rem);
    padding-block: 1.5rem;
  }

  .direction-project-card--tall,
  .direction-project-card--medium,
  .direction-project-card--short {
    aspect-ratio: 4 / 5;
  }

  .direction-project-card__media {
    border-radius: var(--direction-media-radius);
  }

  .direction-project-shelf__info {
    min-height: 7rem;
    margin-top: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .direction-project-shelf__track {
    scroll-behavior: auto;
  }

  .direction-project-card {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .direction-project-card__media-element {
    transition: none;
  }

  .direction-project-card__media {
    transform: none;
    transition: none;
  }
}
.direction-contact {
  --direction-footer-column-x: var(--space-page);
  --direction-footer-display-optical-x: -0.055em;
}

.direction-contact {
  --direction-footer-bottom-space: clamp(3.4rem, 6vw, 6.2rem);
  --direction-footer-link-gap: var(--direction-nav-link-gap);
  --direction-footer-link-leading: 0.9;
  min-height: clamp(28rem, 50vh, 42rem);
  align-content: end;
  gap: var(--direction-label-content-gap);
  padding-left: var(--direction-footer-column-x);
  padding-right: var(--space-page);
  padding-top: clamp(4rem, 7vw, 7rem);
  padding-bottom: var(--direction-footer-bottom-space);
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
}

.direction-contact .site-contact__label {
  position: relative;
  z-index: 1;
  color: var(--color-footer-text);
  font-family: var(--font-accent);
  font-size: var(--fs-direction-filter);
  font-weight: 400;
  margin: 0;
  line-height: 1;
}

.direction-contact .site-contact__links {
  display: flex;
  flex-direction: column;
  gap: var(--direction-footer-link-gap);
  margin-left: var(--direction-footer-display-optical-x);
  font-size: var(--fs-direction-contact);
  line-height: var(--direction-footer-link-leading);
  font-weight: 400;
  text-transform: uppercase;
}

.direction-contact .site-contact__links a,
.direction-contact .site-contact__links span {
  line-height: inherit;
}

.direction-contact .site-contact__links a {
  height: var(--direction-nav-link-row-height);
}

.direction-contact .site-contact__top {
  right: var(--space-page);
  bottom: var(--direction-footer-bottom-space);
  color: var(--color-footer-text);
  font-size: var(--fs-direction-arrow);
  line-height: 0.82;
}

.direction-contact .site-contact__top span {
  transform: translateY(0.06em) rotate(0deg) translateZ(0);
}

@media (hover: hover) and (pointer: fine) {
  .direction-contact .site-contact__top:hover span {
    transform: translateY(0.06em) rotate(360deg) translateZ(0);
  }
}

.direction-contact .site-contact__links a:hover {
  color: inherit;
}

.js .direction-contact .site-contact__links a,
.js .direction-contact .site-contact__top {
  opacity: 0;
  transform: translateY(2.35rem);
  transition:
    opacity 780ms ease var(--footer-reveal-delay, 0ms),
    transform 960ms cubic-bezier(0.16, 1, 0.3, 1) var(--footer-reveal-delay, 0ms);
  will-change: opacity, transform;
}

.js .direction-contact .site-contact__links a:nth-child(1) {
  --footer-reveal-delay: 260ms;
}

.js .direction-contact .site-contact__links a:nth-child(2) {
  --footer-reveal-delay: 350ms;
}

.js .direction-contact .site-contact__links a:nth-child(3) {
  --footer-reveal-delay: 440ms;
}

.js .direction-contact .site-contact__links a:nth-child(4) {
  --footer-reveal-delay: 530ms;
}

.js .direction-contact .site-contact__top {
  --footer-reveal-delay: 660ms;
}

.js .direction-contact.is-footer-visible .site-contact__links a,
.js .direction-contact.is-footer-visible .site-contact__top {
  opacity: 1;
  transform: translateY(0);
}

.direction-flipbook-region {
  display: grid;
  grid-template-columns: minmax(10rem, 44vw) minmax(0, 1fr);
  padding: clamp(7.5rem, 9vw, 10rem) 0 clamp(10rem, 13vw, 14rem);
  background: #080808;
  color: #eaeaea;
}

.direction-flipbook__label {
  z-index: 3;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  margin: 0;
  padding-left: var(--space-page);
}

.direction-flipbook {
  --flipbook-card-width: min(56vw, 320px);
  --flipbook-stage-bleed: 1.6rem;
  --flipbook-track-padding: 2.8rem;
  --flipbook-track-space: 11.2rem;
  --flipbook-slide-space: 5.6rem;
  grid-column: 1 / -1;
  grid-row: 1;
  display: grid;
  justify-items: center;
  min-width: 0;
}

.direction-flipbook__stage {
  display: grid;
  place-items: center;
  margin-block: calc(-1 * var(--flipbook-stage-bleed));
  padding-block: var(--flipbook-stage-bleed);
  contain: paint;
  overflow: hidden;
}

.direction-flipbook__scroller,
.direction-flipbook__stack {
  grid-area: 1 / 1;
}

.direction-flipbook__scroller[blossom-carousel] {
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  width: calc((var(--flipbook-card-width) * 1.3) + var(--flipbook-track-space));
  inline-size: calc((var(--flipbook-card-width) * 1.3) + var(--flipbook-track-space));
  height: 100%;
  padding-inline: var(--flipbook-track-padding);
  box-sizing: border-box;
  overflow-x: auto;
  white-space: normal;
  overscroll-behavior-inline: contain;
  scroll-padding-inline: var(--flipbook-track-padding);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.direction-flipbook__scroller::-webkit-scrollbar {
  display: none;
}

.direction-flipbook__scroller > .direction-flipbook__slide {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(calc(100vw - var(--flipbook-slide-space)), calc((var(--flipbook-card-width) * 1.3) + var(--flipbook-slide-space)));
  height: 100%;
  opacity: 0;
  scroll-snap-align: center;
}

.direction-flipbook__slide > a {
  display: block;
  width: var(--flipbook-card-width);
  height: 100%;
  color: inherit;
  -webkit-user-select: none;
  user-select: none;
}

.direction-flipbook__stack {
  z-index: 1;
  display: grid;
  width: var(--flipbook-card-width);
  perspective: calc(var(--flipbook-card-width) * 2);
  pointer-events: none;
  transform-style: preserve-3d;
}

.direction-flipbook__card {
  grid-area: 1 / 1;
  position: relative;
  width: var(--flipbook-card-width);
  opacity: var(--flipbook-visibility);
  text-align: center;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.direction-flipbook__card-inner {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.direction-flipbook__cover {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  border-radius: var(--direction-media-radius);
  background: #111;
}

.direction-flipbook__cover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 38%);
  opacity: calc((var(--flipbook-opacity) * 0.6) + 0.2);
  pointer-events: none;
}

.direction-flipbook__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.direction-flipbook__body {
  display: grid;
  gap: 1rem;
  opacity: var(--flipbook-opacity);
}

.direction-flipbook__body p {
  margin: 0;
  color: #eaeaea;
  font-family: var(--font-direction-project);
  font-size: var(--fs-direction-filter);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
}

.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(1) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(1) img,
.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(2) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(2) img,
.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(3) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(3) img,
.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(4) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(4) img,
.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(5) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(5) img {
  transform: scale(1.02);
}

.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(1) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(1) .direction-flipbook__cover,
.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(2) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(2) .direction-flipbook__cover,
.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(3) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(3) .direction-flipbook__cover,
.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(4) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(4) .direction-flipbook__cover,
.direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(5) > a:focus-visible) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(5) .direction-flipbook__cover {
  outline: 2px solid #eaeaea;
  outline-offset: 0.35rem;
}

@media (hover: hover) and (pointer: fine) {
  .direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(1) > a:hover) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(1) img,
  .direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(2) > a:hover) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(2) img,
  .direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(3) > a:hover) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(3) img,
  .direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(4) > a:hover) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(4) img,
  .direction-flipbook__scroller:has(.direction-flipbook__slide:nth-child(5) > a:hover) ~ .direction-flipbook__stack .direction-flipbook__card:nth-child(5) img {
    transform: scale(1.02);
  }
}

@media (min-width: 769px) {
  body.direction-menu-open .direction-main {
    transform: translate3d(calc(-1 * var(--direction-menu-width)), 0, 0);
  }
}

@media (max-width: 768px) {
  .page-direction {
    --direction-menu-width: 100vw;
  }

  body.direction-menu-open .direction-back-main {
    opacity: 0;
    pointer-events: none;
  }

  body.direction-menu-open .direction-main {
    transform: translate3d(calc(-1 * var(--direction-menu-width)), 0, 0);
  }
}

.external-embed {
  display: grid;
  place-items: center;
  min-height: 14rem;
  padding: 2rem;
  background: var(--color-black);
  color: #eaeaea;
}

@media (max-width: 760px) {
  .page-direction {
    --direction-label-content-gap: clamp(1.15rem, 5.8vw, 2rem);
  }

  .home-entry__orb {
    width: 9rem;
    height: 9rem;
  }

  .project-header {
    min-height: 44vh;
    padding-top: 5rem;
  }

  .project-copy {
    margin-block: 4rem;
  }

  .direction-header {
    padding: 0.9rem;
  }

  .direction-menu-toggle {
    top: calc(env(safe-area-inset-top, 0px) + var(--space-page));
    right: calc(env(safe-area-inset-right, 0px) + var(--space-page));
  }

  .direction-side-menu,
  .direction-side-menu-bg {
    min-width: 0;
  }

  .direction-side-menu {
    width: 100vw;
  }

  .direction-side-menu-bg {
    width: 100vw;
  }

  .direction-side-menu__primary,
  .direction-copy {
    line-height: 0.82;
  }

  .direction-side-menu__primary {
    --direction-menu-content-inset: clamp(1.5rem, 6vw, 2rem);
    font-size: var(--fs-direction-contact);
  }

  .direction-copy {
    font-size: var(--fs-direction-menu);
  }

  .direction-side-menu__primary {
    top: calc(env(safe-area-inset-top, 0px) + clamp(4.5rem, 9vh, 6.25rem));
    right: calc(env(safe-area-inset-right, 0px) + var(--direction-menu-content-inset));
    bottom: calc(env(safe-area-inset-bottom, 0px) + clamp(2rem, 5vh, 3rem));
    left: calc(env(safe-area-inset-left, 0px) + var(--direction-menu-content-inset));
  }

  .direction-contact {
    --direction-footer-bottom-space: clamp(2.8rem, 11vw, 4.8rem);
    min-height: clamp(24rem, 48vh, 34rem);
    padding-top: clamp(2.4rem, 8vw, 4rem);
  }

  .direction-contact .site-contact__links {
    font-size: var(--fs-direction-contact);
  }

  .direction-contact .site-contact__top {
    position: absolute;
    right: var(--space-page);
    bottom: var(--direction-footer-bottom-space);
    justify-self: end;
    margin-top: 0;
    font-size: var(--fs-direction-arrow);
  }

  .direction-flipbook-region {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--direction-label-content-gap);
    padding-top: clamp(7rem, 24vw, 9.5rem);
    padding-bottom: clamp(10rem, 34vw, 13rem);
    overflow-x: hidden;
  }

  .direction-flipbook__label {
    grid-column: 1;
    grid-row: 1;
    padding-inline: var(--space-page);
  }

  .direction-flipbook {
    --flipbook-card-width: min(80vw, 320px);
    grid-column: 1;
    grid-row: 2;
  }

  .direction-intro__headline {
    font-size: var(--fs-direction-intro);
  }

  .direction-story {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--direction-label-content-gap);
    width: 100%;
    margin-inline: auto;
    font-size: var(--fs-direction-index);
  }

  .direction-story__hint,
  .direction-story p {
    grid-column: 1;
  }

  .direction-story__hint {
    grid-row: auto;
    margin-bottom: 0;
  }

  .direction-story p + p {
    margin-left: 0;
  }

  .direction-detail-hero__overlay {
    padding: 0 10%;
  }

  .direction-detail-hero__brand,
  .direction-detail-hero__title {
    max-width: 100%;
    font-size: var(--fs-direction-index);
  }

  .direction-detail-hero__brand .wr-word,
  .direction-detail-hero__title .wr-word {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .direction-detail-bar {
    width: 96%;
    margin: 30% 2% 10%;
  }

  .direction-project-info {
    grid-template-columns: 1fr;
    gap: 2.4rem;
    padding: 30px 10% 70px;
    font-size: var(--fs-direction-filter);
    line-height: 1.25;
  }

  .direction-project-info__about,
  .direction-project-info__categories,
  .direction-project-info__facts {
    grid-column: 1;
  }

  .direction-detail-copy {
    font-size: var(--fs-direction-contact);
    line-height: 0.96;
  }

  .direction-about-hero {
    grid-template-columns: 1fr;
    align-content: stretch;
    min-height: auto;
    padding-top: clamp(4.8rem, 18vw, 6.5rem);
  }

  .direction-about-layout {
    grid-template-columns: minmax(5.6rem, 0.76fr) minmax(0, 1.66fr);
  }

  .direction-about-grid {
    grid-template-columns: 1fr;
  }

  .direction-about-panel,
  .direction-about-panel--wide {
    min-height: auto;
  }

  .direction-about-panel dl > div {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }

  .direction-about-layout__side,
  .direction-about-panel {
    padding: clamp(0.58rem, 2.2vw, 0.9rem);
  }

  .direction-about-panel {
    padding-block: clamp(1.35rem, 5.5vw, 1.8rem);
  }

  .direction-about-link-cell {
    min-height: clamp(4.8rem, 18vw, 7rem);
  }

  .direction-about-links-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .direction-about-link-cell--fine::after {
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    width: auto;
    height: var(--line-weight);
    transform: scaleX(0);
    transform-origin: left center;
    animation-name: direction-about-line-x;
  }

  .direction-about-link-cell--partner {
    grid-row: 1;
    justify-content: flex-end;
    text-align: right;
  }

  .direction-about-link-cell--fine {
    grid-row: 2;
  }

  .direction-about-clients {
    font-size: var(--fs-direction-about-clients);
  }

  .direction-detail-media {
    grid-template-columns: 1fr;
  }

  .direction-detail-media__item:nth-child(3n + 1) {
    grid-column: auto;
  }

  .direction-intro__bottom {
    display: grid;
    gap: 0.35rem;
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .direction-contact {
    min-height: clamp(24rem, 42vh, 34rem);
    padding-top: clamp(2.4rem, 5vw, 4rem);
  }

}

@media (prefers-reduced-motion: reduce) {
  .direction-flipbook__cover img {
    transition: none;
  }

  .page-direction-projects .direction-intro::before {
    display: none;
  }

  .page-direction-projects .direction-intro__video,
  .page-direction-projects .direction-intro__headline {
    opacity: 1;
    transform: none;
    filter: none;
    animation: none;
  }

  .direction-about-clients p {
    animation: none;
  }

  .direction-side-menu,
  .direction-side-menu-bg,
  .direction-side-menu__primary a,
  .direction-side-menu__primary button,
  .direction-index-row {
    transition: none;
  }
}