:root {
  --babel-paper: rgb(238, 234, 233);
  --babel-ink: #171513;
  --babel-white: #f5f2ed;
}

body.babel-page {
  background: var(--babel-paper);
  color: var(--babel-ink);
}

/* The navigation stays visually embedded in both the film and the pale page. */
body.babel-page .site-nav {
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  mix-blend-mode: difference !important;
}

body.babel-page .site-nav .logo,
body.babel-page .site-nav .nav-links a,
body.babel-page .site-nav .nav-docs a,
body.babel-page .site-nav .nav-separator {
  color: #fff !important;
  text-shadow: none !important;
}

/* Keep BABEL's navigation metrics identical to the site shell. */
body.babel-page .site-nav .logo {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 13px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
body.babel-page .site-nav .nav-links a,
body.babel-page .site-nav .nav-docs a {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body.babel-page .site-nav .shell-mobile-toggle span {
  background: #fff !important;
}

.babel-hero {
  height: 100svh;
  min-height: 620px;
  isolation: isolate;
  background: #090909;
  color: var(--babel-white);
}

.babel-video-shell {
  position: absolute;
  inset: 0;
  height: 100%;
  overflow: hidden;
  background: #090909 url("../images/babel/cover.webp") center / cover no-repeat;
}

.babel-video-shell iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100vw, 177.78vh);
  height: max(56.25vw, 100vh);
  border: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(1.012);
  opacity: 0;
  animation: babelFilmIn 1600ms cubic-bezier(.16, 1, .3, 1) 160ms forwards;
}

.babel-video-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .22) 0%, rgba(0, 0, 0, .02) 32%, rgba(0, 0, 0, .08) 68%, rgba(0, 0, 0, .46) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, .12), transparent 30%, transparent 70%, rgba(0, 0, 0, .1));
}

.babel-hero .installation-hero-copy {
  position: absolute;
  z-index: 3;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 13px;
  color: var(--babel-white);
  text-align: center;
  mix-blend-mode: normal;
  pointer-events: none;
}

.babel-eyebrow {
  margin: 0;
  font-size: 9px;
  line-height: 1;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  animation: babelCopyIn 1100ms cubic-bezier(.16, 1, .3, 1) 620ms forwards;
}

.babel-hero .installation-title {
  width: auto;
  margin: 0;
  color: inherit;
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: clamp(34px,3.2vw,42px);
  line-height: .86;
  font-weight: 400;
  letter-spacing: .025em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(13px);
  animation: babelCopyIn 1300ms cubic-bezier(.16, 1, .3, 1) 460ms forwards;
}

.babel-hero .installation-meta {
  max-width: none;
  margin: 0;
  color: rgba(245, 242, 237, .76);
  font-size: 9px;
  line-height: 1.45;
  letter-spacing: .13em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  animation: babelCopyIn 1100ms cubic-bezier(.16, 1, .3, 1) 720ms forwards;
}

.babel-scroll-cue {
  position: absolute;
  z-index: 4;
  right: 28px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(245, 242, 237, .76);
  font-size: 8px;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color 220ms ease;
}

.babel-scroll-cue::after {
  content: "";
  width: 34px;
  height: 1px;
  background: currentColor;
  transform-origin: right;
  animation: babelCue 1900ms ease-in-out infinite;
}

.babel-scroll-cue:hover { color: var(--babel-white); }

.babel-statement {
  min-height: 100svh;
  margin: 0;
  padding: 16vh 6vw;
  display: grid;
  grid-template-columns: minmax(100px, .45fr) minmax(0, 1.55fr);
  gap: 7vw;
  align-items: center;
  background: var(--babel-paper);
  mix-blend-mode: normal;
  pointer-events: auto;
}

.babel-section-label {
  align-self: start;
  margin: 4px 0 0;
  color: rgba(23, 21, 19, .55);
  font-size: 9px;
  line-height: 1.35;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.babel-statement p:last-child {
  max-width: 1200px;
  margin: 0;
  color: var(--babel-ink);
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: clamp(32px, calc(5.4vw - 10px), 74px);
  line-height: .98;
  font-weight: 400;
  letter-spacing: -.026em;
}

body.babel-page .pulled-gallery { background: var(--babel-paper); }

body.babel-page .gallery-track {
  gap: 0;
  padding: 0;
}

body.babel-page .gallery-item {
  width: 100vw;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}

body.babel-page .gallery-item.is-active {
  opacity: 1;
  filter: saturate(1);
}

body.babel-page .gallery-item.wide,
body.babel-page .gallery-item.large,
body.babel-page .gallery-item.medium,
body.babel-page .gallery-item.tall { width: 100vw; }

body.babel-page .gallery-item img,
body.babel-page .gallery-item.tall img {
  width: 100%;
  height: 100svh;
  max-height: none;
  object-fit: cover;
}

body.babel-page .gallery-progress {
  left: 6vw;
  right: 6vw;
  bottom: 26px;
  background: rgba(23, 21, 19, .16);
}

body.babel-page .installation-documentation {
  min-height: 72svh;
  padding: 14vh 6vw 10vh;
}

body.babel-page .installation-documentation a {
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: clamp(58px, 10vw, 158px);
  line-height: .88;
  font-weight: 400;
  letter-spacing: -.04em;
  text-transform: none;
}

@keyframes babelFilmIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(1.045); filter: blur(7px); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1.012); filter: blur(0); }
}

@keyframes babelCopyIn {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes babelCue {
  0%, 100% { transform: scaleX(.28); opacity: .48; }
  50% { transform: scaleX(1); opacity: 1; }
}

@media (max-width: 900px) {
  .babel-hero {
    height: 100svh;
    min-height: 560px;
  }

  .babel-video-shell {
    top: 0;
    height: 100%;
  }

  .babel-hero .installation-hero-copy {
    inset: auto 18px 10.5svh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 12px;
    text-align: left;
  }

  .babel-hero .installation-title {
    font-size: clamp(42px, 13vw, 68px);
  }

  .babel-scroll-cue {
    right: 18px;
    bottom: max(18px, env(safe-area-inset-bottom));
  }

  .babel-statement {
    min-height: 92svh;
    padding: 14vh 18px 12vh;
    display: block;
  }

  .babel-section-label { margin-bottom: 25vh; }

  .babel-statement p:last-child {
    font-size: clamp(26px, calc(10.2vw - 10px), 42px);
    line-height: 1;
  }

  body.babel-page .pulled-gallery { padding-top: 70px; }
  body.babel-page .gallery-track { gap: 100px; }
  body.babel-page .gallery-item { opacity: 1; filter: none; }

  body.babel-page .installation-documentation {
    min-height: 58svh;
    padding: 100px 18px 76px;
  }

  body.babel-page .installation-documentation a {
    font-size: clamp(54px, 18vw, 92px);
  }
}

/* Statement typography and the six-page portfolio reader. */
.babel-statement {
  grid-template-columns: minmax(120px, .5fr) minmax(280px, .9fr) minmax(300px, 1fr);
  gap: clamp(28px, 6vw, 110px);
  align-items: start;
}
.babel-section-label { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.babel-quote { margin: 0; text-align: left; }
.babel-quote p {
  margin: 0;
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: clamp(28px, 3.35vw, 54px);
  font-weight: 400;
  letter-spacing: -.02em;
  line-height: 1.02;
}
.babel-quote cite {
  display: block;
  margin-top: 22px;
  color: rgba(23, 21, 19, .55);
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: clamp(16px, 1.3vw, 20px);
  font-style: normal;
  line-height: 1.35;
}
.babel-statement .babel-statement-copy { max-width: 620px; }
.babel-statement .babel-statement-copy p {
  margin: 0;
  color: var(--babel-ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(15px, 1.18vw, 19px);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.55;
}
.babel-statement .babel-statement-copy p + p { margin-top: 1.25em; }
.babel-portfolio {
  padding: clamp(92px, 13vh, 180px) 6vw clamp(110px, 15vh, 210px);
  background: #e7dfd8;
  color: var(--babel-ink);
}
.babel-portfolio-header {
  display: grid;
  grid-template-columns: minmax(120px, .5fr) minmax(300px, 1.5fr) minmax(170px, .55fr);
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(54px, 9vh, 130px);
}
.babel-portfolio-header h2 {
  margin: 0;
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: clamp(46px, 7.2vw, 112px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .84;
}
.babel-portfolio-header > p:last-child {
  margin: 0;
  color: rgba(23, 21, 19, .55);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.5;
}
.babel-portfolio-pages { display: grid; gap: clamp(46px, 9vh, 130px); }
.babel-portfolio-pages figure { width: min(100%, 1720px); margin: 0 auto; }
.babel-portfolio-pages img {
  display: block;
  width: 100%;
  height: auto;
  background: #d5ceca;
}
.babel-portfolio-pages figcaption {
  margin-top: 10px;
  color: rgba(23, 21, 19, .55);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .14em;
  text-align: right;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .babel-statement { display: block; min-height: 0; padding: 105px 18px; }
  .babel-quote { margin: 78px 0; }
  .babel-quote p { font-size: clamp(34px, 10.5vw, 51px); }
  .babel-statement .babel-statement-copy p { font-size: 16px; line-height: 1.58; }
  .babel-portfolio { padding: 105px 14px 120px; }
  .babel-portfolio-header { display: block; margin: 0 4px 65px; }
  .babel-portfolio-header h2 { margin: 70px 0 34px; font-size: clamp(51px, 15vw, 76px); }
  .babel-portfolio-header > p:last-child { max-width: 260px; }
  .babel-portfolio-pages { gap: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .babel-video-shell iframe { display: none; }
  .babel-eyebrow,
  .babel-hero .installation-title,
  .babel-hero .installation-meta {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .babel-scroll-cue::after { animation: none; }
}

/* Twelve-language translation circuit. */
.babel-translation-section {
  padding: clamp(96px, 15vh, 210px) 6vw;
  background: var(--babel-paper);
  color: var(--babel-ink);
  border-top: 1px solid rgba(23, 21, 19, .14);
}
.babel-translation-heading {
  display: grid;
  grid-template-columns: minmax(120px, .5fr) minmax(0, 1.5fr);
  gap: clamp(28px, 6vw, 110px);
  margin-bottom: clamp(70px, 13vh, 170px);
}
.babel-translation-heading h2 {
  max-width: 900px;
  margin: 0;
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: clamp(48px, 7vw, 108px);
  font-weight: 400;
  letter-spacing: -.04em;
  line-height: .86;
}
.translation-machine {
  --machine-accent: #713529;
  padding: clamp(30px, 5vw, 68px);
  background: #e7dfd8;
  border: 1px solid rgba(23, 21, 19, .15);
}
.translation-sentence {
  display: grid;
  grid-template-columns: minmax(145px, .45fr) minmax(0, 1.55fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: baseline;
}
.translation-sentence span {
  color: rgba(23, 21, 19, .54);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .15em;
  line-height: 1.4;
  text-transform: uppercase;
}
.translation-sentence p {
  max-width: 780px;
  margin: 0;
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: clamp(24px, 3vw, 45px);
  font-weight: 400;
  letter-spacing: -.018em;
  line-height: 1.06;
}
.translation-process {
  display: grid;
  grid-template-columns: minmax(145px, .45fr) minmax(0, 1.55fr);
  gap: clamp(20px, 4vw, 72px);
  align-items: start;
}
.translation-process > span {
  color: rgba(23, 21, 19, .54);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .15em;
  line-height: 1.4;
  text-transform: uppercase;
}
.translation-process .language-track { margin: 0; }
.sentence-out p { color: var(--machine-accent); }
.language-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0;
  margin: clamp(62px, 11vh, 140px) 0;
}
.track-line {
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  overflow: hidden;
  background: rgba(23, 21, 19, .19);
}
.track-line i {
  position: absolute;
  top: 0;
  left: 0;
  width: 8.333%;
  height: 1px;
  background: var(--machine-accent);
  box-shadow: 0 0 10px rgba(113, 53, 41, .45);
  transition: transform 720ms cubic-bezier(.16, 1, .3, 1);
}
.language-node {
  position: relative;
  z-index: 1;
  min-width: 0;
  padding: 0 8px 0 0;
  color: rgba(23, 21, 19, .46);
  transition: color 480ms ease;
}
.language-node::before {
  content: "";
  display: block;
  width: 11px;
  height: 11px;
  margin-bottom: 16px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #e7dfd8;
  transition: color 480ms ease, background 480ms ease, transform 480ms cubic-bezier(.16, 1, .3, 1);
}
.language-node i,
.language-node span { display: block; font-style: normal; }
.language-node i {
  margin-bottom: 7px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 8px;
  letter-spacing: .1em;
}
.language-node span {
  overflow-wrap: anywhere;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(9px, .78vw, 12px);
  line-height: 1.25;
}
.language-node.active { color: var(--machine-accent); }
.language-node.active::before { background: var(--machine-accent); transform: scale(1.28); }
.babel-language-title { transition: opacity 180ms ease, color 400ms ease; }
.babel-language-title.is-changing { opacity: .25; }

@media (max-width: 900px) {
  .babel-translation-section { padding: 105px 18px; }
  .babel-translation-heading { display: block; margin-bottom: 74px; }
  .babel-translation-heading h2 { margin-top: 68px; font-size: clamp(52px, 15vw, 76px); }
  .translation-machine { padding: 28px 18px 34px; }
  .translation-sentence { display: block; }
  .translation-sentence p { margin-top: 16px; font-size: clamp(27px, 8.5vw, 42px); }
  .translation-process { display: block; }
  .translation-process .language-track { margin: 20px 0 0; }
  .language-track { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; margin: 64px 0; }
  .track-line { display: none; }
  .language-node { padding-right: 8px; }
  .language-node::before { margin-bottom: 11px; }
  .language-node span { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .track-line i,
  .language-node,
  .language-node::before,
  .babel-language-title { transition: none; }
}

/* Project details and horizontal portfolio reader. */
.babel-project-data {
  padding: 0 6vw clamp(96px, 14vh, 180px);
  background: var(--babel-paper);
  color: var(--babel-ink);
}
.babel-project-data dl {
  width: min(1080px, 76%);
  margin: 0 0 0 auto;
  border-top: 1px solid rgba(23, 21, 19, .18);
}
.babel-project-data dl > div {
  display: grid;
  grid-template-columns: minmax(6px, .35fr) minmax(0, 1.65fr);
  gap: 32px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(23, 21, 19, .18);
}
.babel-project-data dt {
  color: rgba(23, 21, 19, .52);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.babel-project-data dd {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(12px, 1.05vw, 16px);
  line-height: 1.5;
}
.babel-portfolio { overflow: hidden; }
.babel-portfolio-pages {
  display: flex;
  width: auto;
  gap: clamp(20px, 3vw, 50px);
  margin-right: calc(-1 * 6vw);
  padding: 0 6vw 14px 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: rgba(23, 21, 19, .36) transparent;
}
.babel-portfolio-pages::-webkit-scrollbar { height: 4px; }
.babel-portfolio-pages::-webkit-scrollbar-thumb { background: rgba(23, 21, 19, .36); }
.babel-portfolio-pages figure {
  flex: 0 0 min(78vw, 1440px);
  width: min(78vw, 1440px);
  margin: 0;
  scroll-snap-align: start;
}
body.babel-page .installation-documentation {
  min-height: auto;
  padding: 44px 6vw 54px;
}
body.babel-page .installation-documentation a {
  color: rgba(23, 21, 19, .58);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .babel-project-data { padding: 0 18px 105px; }
  .babel-project-data dl { width: 100%; margin: 0; }
  .babel-project-data dl > div { grid-template-columns: 76px 1fr; gap: 16px; padding: 14px 0; }
  .babel-project-data dd { font-size: 13px; }
  .babel-portfolio-pages { margin-right: -14px; padding-right: 14px; gap: 18px; }
  .babel-portfolio-pages figure { flex-basis: 88vw; width: 88vw; }
  body.babel-page .installation-documentation { padding: 34px 18px 42px; }
}

/* Open translation field and condensed project data. */
.babel-translation-section {
  padding-top: clamp(42px, 7vh, 92px);
  border-top: 0;
}
.translation-machine {
  padding: 0;
  background: transparent;
  border: 0;
}
.language-track { margin: clamp(52px, 9vh, 115px) 0; }
.language-node.active { color: var(--node-color, var(--machine-accent)); }
.language-node.active::before { background: var(--node-color, var(--machine-accent)); }
.sentence-out p {
  color: var(--machine-accent);
  transition: color 500ms ease, opacity 180ms ease;
}
.sentence-out p.is-changing { opacity: .26; }
.translation-machine .sentence-in,
.translation-machine .sentence-out { transition: opacity 360ms ease; }
.translation-machine.is-input .sentence-out { opacity: .22; }
.translation-machine.is-output .sentence-in { opacity: .36; }
.babel-language-map {
  width: min(100%, 1480px);
  margin: 0 auto clamp(76px, 12vh, 150px);
}
.babel-language-map img { display: block; width: 100%; height: auto; }
.babel-project-data { padding-bottom: clamp(52px, 8vh, 104px); }
.babel-project-data dl {
  width: min(960px, 70%);
  border-top: 0;
}
.babel-project-data dl > div { padding: 8px 0; border-bottom: 0; }
.babel-project-data dt,
.babel-project-data dd { font-family: "Sorts Mill Goudy", Georgia, serif; }
.babel-project-data dt {
  color: rgba(23, 21, 19, .52);
  font-size: clamp(9px, 0.8vw, 14px);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.babel-project-data dd { font-size: clamp(9px, 0.8vw, 14px); line-height: 1.38; }

/* Project data forms the left companion to the opening gallery image. */
.gallery-opening {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-left: calc(50vw - min(30vw, 300px));
  gap: max(120px, calc(76vw - min(60vw, 600px)));
}
.gallery-opening .gallery-project-data {
  flex: 0 0 min(60vw, 600px);
  width: min(50vw, 600px);
  margin-left: clamp(-120px, -6vw, -40px);
  padding: 0;
  background: transparent;
}
.gallery-opening .gallery-project-data dl {
  width: 100%;
  margin: 0;
}
.gallery-opening .gallery-project-data dl > div { padding: 7px 0; }

@media (max-width: 900px) {
  .babel-translation-section { padding-top: 40px; }
  .language-track { margin: 56px 0; }
  .babel-language-map { width: calc(100% + 10px); margin: 0 -5px 74px; }
  .babel-project-data { padding-bottom: 52px; }
  .babel-project-data dl > div { padding: 7px 0; }
  .babel-project-data dt { font-size: 14px; }
  .babel-project-data dd { font-size: 14px; }
  .gallery-opening { display: block; width: 100%; padding-left: 0; }
  .gallery-opening .gallery-project-data { width: 100%; margin: 0 0 52px; }
  .gallery-opening .gallery-project-data dl { width: 100%; }
}

/* Circular translation machine. */
.translation-machine .language-track {
  --ring-radius: clamp(205px, 20vw, 285px);
  position: relative;
  display: block;
  width: min(72vw, 680px);
  height: min(72vw, 680px);
  margin: 0 auto clamp(78px, 11vh, 140px);
  border: 0;
}
.translation-machine .language-track::before {
  content: "";
  position: absolute;
  inset: 13%;
  border: 1px solid rgba(23, 21, 19, .16);
  border-radius: 50%;
}
.translation-machine .language-node {
  --angle: calc(var(--node-index) * 30deg);
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(82px, 8vw, 118px);
  padding: 0;
  color: rgba(23, 21, 19, .25);
  text-align: center;
  opacity: .35;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--ring-radius))) rotate(calc(-1 * var(--angle)));
  transition: color 380ms ease, opacity 380ms ease, transform 480ms cubic-bezier(.16, 1, .3, 1);
}
.translation-machine .language-node:nth-child(1) { --node-index: 0; }
.translation-machine .language-node:nth-child(2) { --node-index: 1; }
.translation-machine .language-node:nth-child(3) { --node-index: 2; }
.translation-machine .language-node:nth-child(4) { --node-index: 3; }
.translation-machine .language-node:nth-child(5) { --node-index: 4; }
.translation-machine .language-node:nth-child(6) { --node-index: 5; }
.translation-machine .language-node:nth-child(7) { --node-index: 6; }
.translation-machine .language-node:nth-child(8) { --node-index: 7; }
.translation-machine .language-node:nth-child(9) { --node-index: 8; }
.translation-machine .language-node:nth-child(10) { --node-index: 9; }
.translation-machine .language-node:nth-child(11) { --node-index: 10; }
.translation-machine .language-node:nth-child(12) { --node-index: 11; }
.translation-machine .language-node::before {
  margin: 0 auto 10px;
  background: var(--babel-paper);
}
.translation-machine .language-node.active {
  color: var(--node-color, var(--machine-accent));
  opacity: 1;
  transform: translate(-50%, -50%) rotate(var(--angle)) translateY(calc(-1 * var(--ring-radius))) rotate(calc(-1 * var(--angle))) scale(1.08);
}
.translation-machine .ring-core {
  position: absolute;
  top: 50%;
  left: 50%;
  color: rgba(23, 21, 19, .4);
  font-family: "Sorts Mill Goudy", Georgia, serif;
  font-size: clamp(18px, 2vw, 28px);
  letter-spacing: .08em;
  transform: translate(-50%, -50%);
}
.translation-copy {
  display: grid;
  gap: clamp(28px, 4vh, 48px);
}
.translation-copy .translation-sentence {
  min-height: clamp(72px, 8vw, 112px);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
}
.translation-machine.has-input .sentence-in,
.translation-machine.has-process .sentence-process,
.translation-machine.has-output .sentence-out {
  opacity: 1;
  transform: translateY(0);
}
.sentence-process p { color: var(--machine-accent); transition: color 320ms ease; }
.sentence-out p { color: var(--babel-ink) !important; }

@media (max-width: 900px) {
  .translation-machine .language-track {
    --ring-radius: min(36vw, 138px);
    width: min(92vw, 350px);
    height: min(92vw, 350px);
    margin-bottom: 74px;
  }
  .translation-machine .language-track::before { inset: 16%; }
  .translation-machine .language-node { width: 66px; }
  .translation-machine .language-node::before { width: 8px; height: 8px; margin-bottom: 5px; }
  .translation-machine .language-node i { margin-bottom: 3px; font-size: 7px; }
  .translation-machine .language-node span { font-size: 8px; line-height: 1.1; }
  .translation-copy { gap: 28px; }
  .translation-copy .translation-sentence { min-height: 110px; }
}

/* Person symbols on the ring; language families outside. */
.translation-machine .language-node { width: 30px; overflow: visible; }
.translation-machine .language-node::before { display: none; }
.translation-machine .node-symbol {
  display: block;
  width: 24px;
  height: 25px;
  margin: 0 auto;
  background: currentColor;
  -webkit-mask: url("../images/babel/person.svg") center / contain no-repeat;
  mask: url("../images/babel/person.svg") center / contain no-repeat;
}
.translation-machine .language-node > span {
  position: absolute;
  width: clamp(100px, 10vw, 155px);
  overflow-wrap: normal;
  color: currentColor;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: clamp(8px, .7vw, 10px);
  line-height: 1.2;
}
.translation-machine .language-node:nth-child(1) > span { left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%); }
.translation-machine .language-node:nth-child(2) > span { left: calc(100% + 10px); bottom: 58%; text-align: left; }
.translation-machine .language-node:nth-child(3) > span { left: calc(100% + 10px); bottom: 0; text-align: left; }
.translation-machine .language-node:nth-child(4) > span { left: calc(100% + 10px); top: 50%; text-align: left; transform: translateY(-50%); }
.translation-machine .language-node:nth-child(5) > span { left: calc(100% + 10px); top: 20%; text-align: left; }
.translation-machine .language-node:nth-child(6) > span { left: calc(100% + 10px); top: 70%; text-align: left; }
.translation-machine .language-node:nth-child(7) > span { left: 50%; top: calc(100% + 9px); transform: translateX(-50%); }
.translation-machine .language-node:nth-child(8) > span { right: calc(100% + 10px); top: 70%; text-align: right; }
.translation-machine .language-node:nth-child(9) > span { right: calc(100% + 10px); top: 20%; text-align: right; }
.translation-machine .language-node:nth-child(10) > span { right: calc(100% + 10px); top: 50%; text-align: right; transform: translateY(-50%); }
.translation-machine .language-node:nth-child(11) > span { right: calc(100% + 10px); bottom: 0; text-align: right; }
.translation-machine .language-node:nth-child(12) > span { right: calc(100% + 10px); bottom: 58%; text-align: right; }
.sentence-process .process-language {
  grid-column: 2;
  justify-self: end;
  margin-top: 8px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 8px;
  font-weight: 400;
  letter-spacing: .15em;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .translation-machine .node-symbol { width: 17px; height: 18px; }
  .translation-machine .language-node { width: 20px; }
  .translation-machine .language-node > span { width: 72px; font-size: 6.5px; line-height: 1.08; }
  .translation-machine .language-node:nth-child(2) > span,
  .translation-machine .language-node:nth-child(3) > span,
  .translation-machine .language-node:nth-child(4) > span,
  .translation-machine .language-node:nth-child(5) > span,
  .translation-machine .language-node:nth-child(6) > span { left: calc(100% + 5px); }
  .translation-machine .language-node:nth-child(8) > span,
  .translation-machine .language-node:nth-child(9) > span,
  .translation-machine .language-node:nth-child(10) > span,
  .translation-machine .language-node:nth-child(11) > span,
  .translation-machine .language-node:nth-child(12) > span { right: calc(100% + 5px); }
  .sentence-process .process-language { grid-column: auto; margin-top: 6px; }
}

/* Keep the user-edited content intact; refine only spacing and ring legibility. */
.babel-statement {
  min-height: 0;
  padding-bottom: clamp(38px, 5vh, 68px);
}
.translation-machine .node-symbol {
  background: url("../images/babel/person.svg") center / contain no-repeat;
}
.translation-machine .language-node > span {
  width: clamp(116px, 11vw, 172px);
  font-size: clamp(10px, .85vw, 13px);
}

@media (max-width: 900px) {
  .babel-statement { padding-bottom: 42px; }
  .translation-machine .language-node > span { width: 82px; font-size: 7.5px; }
}

/* Enlarged orbit with the translation copy centered inside. */
.translation-machine .language-track {
  --ring-radius: clamp(285px, 27vw, 380px);
  width: min(82vw, 900px);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 0;
}
.translation-machine .language-track::before { inset: 9%; }
.translation-machine .language-track .translation-copy {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  width: min(47%, 430px);
  gap: clamp(12px, 2vh, 24px);
  transform: translate(-50%, -50%);
}
.translation-machine .translation-copy .translation-sentence {
  min-height: clamp(54px, 5.5vw, 76px);
  grid-template-columns: 62px minmax(0, 1fr);
  gap: clamp(10px, 1.5vw, 22px);
}
.translation-machine .translation-copy .translation-sentence p {
  font-size: clamp(14px, 1.35vw, 21px);
  line-height: 1.12;
}
.sentence-process .process-language {
  width: 100%;
  margin-top: -12px;
  text-align: right;
}
.babel-language-map {
  width: min(64%, 920px);
  margin: clamp(70px, 10vh, 120px) auto 0;
}
.translation-machine .node-symbol {
  background-color: currentColor;
  background-image: none;
  -webkit-mask-image: url("../images/babel/person.svg");
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-image: url("../images/babel/person.svg");
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

@media (max-width: 900px) {
  .translation-machine .language-track {
    --ring-radius: min(39vw, 150px);
    width: min(100%, 390px);
  }
  .translation-machine .language-track::before { inset: 11%; }
  .translation-machine .language-track .translation-copy { width: 56%; gap: 8px; }
  .translation-machine .translation-copy .translation-sentence {
    min-height: 64px;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 7px;
  }
  .translation-machine .translation-copy .translation-sentence span { font-size: 6.5px; }
  .translation-machine .translation-copy .translation-sentence p { margin-top: 0; font-size: 11px; line-height: 1.1; }
  .sentence-process .process-language { grid-column: 2; margin-top: -8px; font-size: 6.5px; }
  .babel-language-map { width: 78%; margin: 58px auto 0; }
}

/* Final orbit scale and centered copy treatment. */
.babel-statement { padding-bottom: clamp(76px, 10vh, 136px); }
.babel-portfolio {
  --portfolio-vertical-space: clamp(110px, 15vh, 190px);
  padding-top: var(--portfolio-vertical-space);
  padding-bottom: var(--portfolio-vertical-space);
}
.translation-machine .language-track {
  --ring-radius: clamp(355px, 35vw, 494px);
  width: min(90vw, 1170px);
}
.translation-machine .language-track::before { inset: 8%; }
.translation-machine .language-track .translation-copy {
  width: min(48%, 560px);
  gap: clamp(18px, 2.5vh, 32px);
}
.translation-machine .translation-copy .translation-sentence {
  display: block;
  min-height: clamp(68px, 6vw, 96px);
  text-align: center;
}
.translation-machine .translation-copy .translation-sentence p {
  max-width: none;
  margin: 0;
  font-size: clamp(19px, 1.8vw, 29px);
  line-height: 1.12;
  text-align: center;
}
.translation-machine .translation-copy .sentence-in > span,
.translation-machine .translation-copy .sentence-out > span {
  display: block;
  margin-top: 10px;
  text-align: center;
}
.sentence-process .process-language {
  display: block;
  width: 100%;
  margin-top: 4px;
  text-align: right;
}
.translation-machine .node-symbol { width: 30px; height: 31px; }

@media (max-width: 900px) {
  .babel-statement { padding-bottom: 84px; }
  .babel-portfolio { --portfolio-vertical-space: 105px; }
  .translation-machine .language-track {
    --ring-radius: min(44vw, 185px);
    width: min(104vw, 480px);
  }
  .translation-machine .language-track .translation-copy { width: 55%; gap: 10px; }
  .translation-machine .translation-copy .translation-sentence { min-height: 76px; }
  .translation-machine .translation-copy .translation-sentence p { font-size: clamp(13px, 3.8vw, 17px); }
  .translation-machine .translation-copy .sentence-in > span,
  .translation-machine .translation-copy .sentence-out > span { margin-top: 6px; font-size: 7px; }
  .sentence-process .process-language { margin-top: 2px; font-size: 6.5px; }
  .translation-machine .node-symbol { width: 21px; height: 22px; }
}

/* Collapsible language map. */
.babel-map-disclosure {
  width: 100%;
  margin-top: clamp(58px, 9vh, 110px);
}
.babel-map-disclosure summary {
  width: fit-content;
  margin: 0 auto;
  color: rgba(23, 21, 19, .58);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .16em;
  line-height: 1;
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.babel-map-disclosure summary::-webkit-details-marker { display: none; }
.babel-map-disclosure summary::after { content: " +"; }
.babel-map-disclosure[open] summary::after { content: " −"; }
.babel-map-disclosure .babel-language-map {
  margin: clamp(38px, 6vh, 74px) auto 0;
  animation: babelMapReveal 520ms cubic-bezier(.16, 1, .3, 1);
}
@keyframes babelMapReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 900px) {
  .babel-map-disclosure { margin-top: 52px; }
  .babel-map-disclosure .babel-language-map { margin-top: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .babel-map-disclosure .babel-language-map { animation: none; }
}

/* Final fullscreen gallery overrides, including the mobile layout. */
body.babel-page .gallery-track { gap: 0; padding: 0; }
body.babel-page .gallery-item,
body.babel-page .gallery-item.wide,
body.babel-page .gallery-item.large,
body.babel-page .gallery-item.medium,
body.babel-page .gallery-item.tall {
  width: 100vw;
  opacity: 1;
  filter: none;
  transform: none;
  transition: none;
}
body.babel-page .gallery-item img,
body.babel-page .gallery-item.tall img {
  width: 100%;
  height: 100svh;
  max-height: none;
  object-fit: cover;
}

@media (max-width: 900px) {
  body.babel-page .gallery-track { gap: 0; }
  body.babel-page .gallery-item,
  body.babel-page .gallery-item.wide,
  body.babel-page .gallery-item.large,
  body.babel-page .gallery-item.medium,
  body.babel-page .gallery-item.tall { width: 100vw; }
}

/* Fixed site-shell colours, compact orbit symbols, and iOS overflow control. */
html,
body.babel-page {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
  overscroll-behavior-x: none;
}

body.babel-page .site-nav {
  background: transparent !important;
  color: rgb(22, 20, 19) !important;
  mix-blend-mode: normal !important;
}
body.babel-page .site-nav .logo { color: #37332e !important; }
body.babel-page .site-nav .nav-links a { color: rgba(22, 20, 19, .58) !important; }
body.babel-page .site-nav .nav-links a:hover,
body.babel-page .site-nav .nav-links a.is-active,
body.babel-page .site-nav .nav-docs a { color: rgb(22, 20, 19) !important; }
body.babel-page .site-nav .shell-mobile-toggle span { background: #37332e !important; }

.translation-machine .language-track::before { inset: 11%; }
.translation-machine .node-symbol {
  width: 18px;
  height: 19px;
  background: currentColor;
  -webkit-mask: url("../images/babel/person.svg") center / contain no-repeat;
  mask: url("../images/babel/person.svg") center / contain no-repeat;
}

@media (max-width: 900px) {
  body.babel-page main,
  body.babel-page section,
  body.babel-page .gallery-sticky,
  body.babel-page .gallery-track { max-width: 100%; }

  .translation-machine .language-track {
    --ring-radius: min(39vw, 164px);
    width: min(92vw, 420px);
    height: min(92vw, 420px);
  }
  .translation-machine .language-track::before { inset: 11%; }
  .translation-machine .node-symbol { width: 14px; height: 15px; }

  body.babel-page .pulled-gallery { padding: 0 0 80px; overflow: hidden; }
  body.babel-page .gallery-track,
  body.babel-page .gallery-opening,
  body.babel-page .gallery-item,
  body.babel-page .gallery-item.wide,
  body.babel-page .gallery-item.large,
  body.babel-page .gallery-item.medium,
  body.babel-page .gallery-item.tall { width: 100%; max-width: 100%; }
  body.babel-page .gallery-opening .gallery-project-data {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 70px 18px;
  }
  body.babel-page .gallery-item img,
  body.babel-page .gallery-item.tall img {
    display: block;
    width: 100%;
    height: auto;
    max-height: none;
    object-fit: contain;
  }
  body.babel-page .babel-video-shell,
  body.babel-page .babel-video-shell iframe { max-width: none; }
}

@media (max-width: 900px) and (orientation: landscape) {
  body.babel-page .babel-hero {
    min-height: 100svh;
  }
  body.babel-page .babel-hero,
  body.babel-page .gallery-item,
  body.babel-page .gallery-item img,
  body.babel-page .gallery-item.tall img {
    width: 100vw;
    height: 100svh;
  }
  body.babel-page .gallery-item img,
  body.babel-page .gallery-item.tall img { object-fit: cover; }
}

/* Condense the BABEL statement while preserving its final emphasis. */
.babel-statement .babel-statement-copy p { font-size: clamp(13px, 1vw, 17px); }
.babel-statement .babel-statement-copy p:last-child {
  font-size: clamp(28px, calc(4.8vw - 10px), 66px);
}

@media (max-width: 900px) {
  .babel-statement .babel-statement-copy p { font-size: 14px; }
  .babel-statement .babel-statement-copy p:last-child {
    font-size: clamp(24px, calc(8.5vw - 10px), 38px);
  }
}