:root {
  --gallery: #f4f4f2;
  --print: #fff;
  --ink: #111;
  --progress: 0;
  --ui-opacity: 1;
  --onboarding-opacity: 1;
  font-family: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--gallery);
  font-synthesis: none;
}

* { box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  background: var(--gallery);
  color: var(--ink);
  overflow-x: clip;
}

.opening-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--gallery);
  opacity: 1;
}

.opening-loader-number {
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.opening-loader.is-flashing .opening-loader-number { visibility: hidden; }
.opening-loader.is-flashing { background: #fff; }

.opening-loader.is-complete {
  visibility: hidden;
  pointer-events: none;
}

.index-viewer {
  position: fixed;
  inset: 0;
  z-index: 70;
  visibility: hidden;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 clamp(2rem, 4.1vw, 3.875rem) 12vh;
  background: var(--gallery);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 18px, 0) scale(.988);
  transform-origin: 50% 30%;
  transition:
    opacity 280ms linear,
    transform 430ms cubic-bezier(.22, .61, .36, 1);
}

.index-viewer.is-mounted {
  visibility: visible;
  pointer-events: auto;
}

.index-viewer.is-open {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.index-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  min-height: 136px;
  padding: clamp(1.75rem, 3.87vh, 2.375rem) 0 2rem;
  background: var(--gallery);
}

.index-header h1 {
  margin: 0 0 .45rem;
  font-size: clamp(1.8rem, 2.75vw, 2.6rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.045em;
}

.index-header span {
  margin-left: clamp(2.5rem, 6vw, 5rem);
  font-size: .62rem;
}

.index-return {
  padding: .35rem 0;
  color: inherit;
  background: none;
  border: 0;
  font-size: clamp(.72rem, 1.06vw, 1rem);
  cursor: pointer;
}

.index-return::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: .25rem;
  margin-left: auto;
  background: currentColor;
  transition: width 180ms ease;
}

.index-return:hover::after,
.index-return:focus-visible::after { width: 100%; }

.index-return:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.index-archive {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1.25rem, 2.6vw, 2.5rem);
  row-gap: clamp(3.5rem, 9vh, 7.5rem);
  align-items: start;
  max-width: 1800px;
  margin: 2vh auto 0;
}

.index-item {
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px;
  color: inherit;
  background: var(--print);
  border: 0;
  cursor: zoom-in;
}

.index-item img {
  display: block;
  width: 100%;
  height: auto;
}

.index-item:nth-child(6n + 1) { grid-column: 1 / span 4; }
.index-item:nth-child(6n + 2) { grid-column: 6 / span 2; margin-top: 7vh; }
.index-item:nth-child(6n + 3) { grid-column: 9 / span 3; margin-top: 2vh; }
.index-item:nth-child(6n + 4) { grid-column: 2 / span 2; margin-top: 3vh; }
.index-item:nth-child(6n + 5) { grid-column: 5 / span 4; }
.index-item:nth-child(6n + 6) { grid-column: 10 / span 2; margin-top: 8vh; }

.index-item:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}

#smooth-content {
  transform-origin: 50% 50%;
  transition: transform 430ms cubic-bezier(.22, .61, .36, 1), opacity 260ms linear;
}

body.index-mode #smooth-content {
  opacity: .22;
  transform: scale(.965);
}

.contextual-view-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 34px;
  height: 34px;
  pointer-events: none;
  mix-blend-mode: difference;
  transform: translate3d(-100px, -100px, 0);
  will-change: transform;
}

.contextual-view-cursor span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.82);
  transition: opacity 110ms linear, transform 150ms ease-out;
}

.contextual-view-cursor.is-visible span {
  opacity: 1;
  transform: scale(1);
}

@media (hover: hover) and (pointer: fine) {
  .contextual-cursor-source,
  .contextual-cursor-source * { cursor: none; }
}

.image-focus-viewer {
  position: fixed;
  inset: 0;
  z-index: 80;
  visibility: hidden;
  overflow: hidden;
  pointer-events: none;
}

.image-focus-viewer.is-mounted {
  visibility: visible;
  pointer-events: auto;
}

.image-focus-backdrop {
  position: absolute;
  inset: 0;
  background: var(--gallery);
  opacity: 0;
  transition: opacity 280ms linear;
}

.image-focus-viewer.is-open .image-focus-backdrop { opacity: 1; }

.image-focus-print {
  position: fixed;
  z-index: 1;
  margin: 0;
  padding: var(--focus-padding, 16px);
  overflow: hidden;
  background: var(--print);
  transform-origin: 0 0;
  transition: transform 420ms cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}

.image-focus-photograph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-focus-close {
  position: fixed;
  top: clamp(1.75rem, 3.87vh, 2.375rem);
  right: clamp(2rem, 4.1vw, 3.875rem);
  z-index: 2;
  padding: .35rem;
  color: var(--ink);
  background: none;
  border: 0;
  font-size: clamp(.72rem, 1.06vw, 1rem);
  opacity: 0;
  cursor: pointer;
  transition: opacity 140ms linear;
}

.image-focus-close::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: .25rem;
  background: currentColor;
  transition: width 180ms ease;
}

.image-focus-close:hover::after,
.image-focus-close:focus-visible::after { width: 100%; }

.image-focus-close:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.image-focus-viewer.is-open .image-focus-close { opacity: 1; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }

.desktop-journey {
  position: relative;
  height: 520vh;
  background: var(--gallery);
}

.sticky-viewport {
  position: sticky;
  inset-block-start: 0;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: var(--gallery);
  isolation: isolate;
}

.editorial-strip {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.gallery-ui {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: var(--ui-opacity);
  transition: opacity 90ms linear;
  pointer-events: none;
}

.gallery-ui a,
.gallery-ui button { pointer-events: auto; }

.identity {
  position: absolute;
  top: clamp(1.75rem, 3.77vh, 2.3125rem);
  left: clamp(2rem, 3.97vw, 3.75rem);
}

.wordmark {
  display: block;
  font-size: clamp(1.75rem, 2.65vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -.045em;
  line-height: 1.2;
}

.location {
  display: block;
  margin: clamp(.65rem, 1.63vh, 1rem) 0 0 clamp(6.75rem, 11.84vw, 11.1875rem);
  font-size: clamp(.7rem, 1.06vw, 1rem);
  line-height: 1;
  white-space: nowrap;
}

.session-link {
  position: absolute;
  top: clamp(1.75rem, 3.87vh, 2.375rem);
  right: clamp(2rem, 4.1vw, 3.875rem);
  padding: .35rem;
  font-size: clamp(.72rem, 1.06vw, 1rem);
}

.session-link::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: .25rem;
  background: currentColor;
  transition: width 180ms ease;
}

.session-link:hover::after,
.session-link:focus-visible::after { width: 100%; }

.index-link {
  position: absolute;
  top: clamp(19rem, 45.82vh, 28.125rem);
  right: clamp(2rem, 4.1vw, 3.875rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  padding: 0;
  color: inherit;
  background: none;
  border: 0;
  opacity: 1;
}

.index-link > span:last-child {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: .66rem;
}

.index-grid {
  display: grid;
  grid-template-columns: repeat(2, 4px);
  gap: 3px;
}

.index-grid i {
  width: 4px;
  height: 4px;
  border: 1px solid currentColor;
  border-radius: 1px;
}

.counter {
  position: absolute;
  right: clamp(2rem, 4.1vw, 3.875rem);
  bottom: clamp(6rem, 19.04vh, 11.6875rem);
  font-size: clamp(.72rem, 1.06vw, 1rem);
}

.scroll-onboarding {
  position: absolute;
  left: clamp(2rem, 3.97vw, 3.75rem);
  bottom: clamp(2.25rem, 6.82vh, 4.1875rem);
  z-index: 9;
  display: grid;
  gap: .35rem;
  width: 5.5rem;
  font-size: .62rem;
  opacity: var(--onboarding-opacity);
  color: #fff;
}

.scroll-track {
  display: block;
  width: 100%;
  height: 2px;
  background: rgb(255 255 255 / .35);
}

.scroll-track i {
  display: block;
  width: 58%;
  height: 100%;
  background: currentColor;
  animation: breathe 1.8s ease-in-out infinite alternate;
  transform-origin: left;
}

@keyframes breathe { to { transform: scaleX(.42); } }

@media (prefers-reduced-motion: reduce) {
  .opening-loader.is-flashing { background: var(--gallery); }
  .scroll-track i { animation: none; }
}

.photo-object {
  position: absolute;
  z-index: 3;
  left: var(--photo-left, calc(50vw - 21.40625rem));
  top: var(--photo-top, clamp(11.25rem, 26.48vh, 16.25rem));
  width: var(--photo-width, clamp(36.25rem, 45.3vw, 42.8125rem));
  height: var(--photo-height, clamp(24.55rem, 47.25vh, 29rem));
  margin: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.print-shell {
  position: absolute;
  inset: 0;
  padding: var(--print-padding, .55vw);
  overflow: hidden;
  background: var(--print);
}

.print-shell picture { display: contents; }

.photograph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 49%;
  background: #262523;
  transform-origin: 50% 50%;
  will-change: transform;
}

.photo-metadata {
  position: absolute;
  top: calc(100% + .9rem);
  left: .7rem;
  display: grid;
  gap: .32rem;
  width: max-content;
  font-size: .62rem;
  line-height: 1.1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.photo-metadata > span:nth-child(2) { font-weight: 700; }

.photo-object:hover .photo-metadata,
.photo-object:focus-within .photo-metadata {
  opacity: var(--metadata-opacity, 1);
}

.milestone-two-world {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 19500px;
  height: 100%;
  transform-origin: 0 0;
  will-change: transform;
}

/* The Detroit experiment owns a virtual position; the document never scrolls. */
.detroit-motion-experiment,
.detroit-motion-experiment #smooth-wrapper,
.detroit-motion-experiment #smooth-content {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.detroit-motion-experiment .desktop-journey { height: 100vh; }

.detroit-motion-experiment .sticky-viewport {
  position: fixed;
  inset: 0;
}

.frame40-intro-composition {
  position: absolute;
  top: 0;
  left: 0;
  width: 1260px;
  height: 982px;
}

.portrait-print-object {
  position: absolute;
  top: 174px;
  left: 72px;
  z-index: 3;
  width: 366px;
  height: 552px;
  margin: 0;
  transform-origin: center center;
  will-change: transform;
}

.portrait-print-shell {
  position: absolute;
  inset: 0;
  padding: 7px;
  overflow: hidden;
  background: var(--print);
}

.portrait-photograph {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 50%;
  will-change: transform;
}

.frame40-intro-copy {
  position: absolute;
  top: 224px;
  left: 492px;
  z-index: 1;
  width: 720px;
}

.frame40-intro-copy h2 {
  display: grid;
  gap: 0;
  margin: 0;
  font-size: 102px;
  font-weight: 300;
  line-height: .88;
  letter-spacing: -.055em;
}

.frame40-intro-copy h2 span:nth-child(2) { margin-left: 88px; }
.frame40-intro-copy h2 span:nth-child(3) { margin-left: 24px; }

.frame40-intro-copy p {
  width: 520px;
  margin: 54px 0 0 116px;
  font-size: 16px;
  line-height: 1.32;
}

.secondary-portrait {
  position: absolute;
  top: 136px;
  left: 1370px;
  z-index: 3;
  width: 380px;
  height: 570px;
  margin: 0;
}

.secondary-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.editorial-spread {
  position: absolute;
  top: 0;
  left: 1820px;
  z-index: 3;
  width: 544px;
  height: 884px;
}

.spread-print {
  position: absolute;
  left: 0;
  width: 543px;
  height: 363px;
  margin: 0;
  padding: 13px 18px;
  background: var(--print);
}

.spread-print-top { top: 136px; }
.spread-print-bottom { top: 521px; }

.spread-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.chapter-title {
  position: absolute;
  top: 340px;
  left: 2650px;
  z-index: 1;
  width: 3100px;
  margin: 0;
  font-size: 242px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 41px;
  white-space: nowrap;
}

.quiet-gallery-composition {
  position: absolute;
  top: 0;
  left: 5750px;
  z-index: 3;
  width: 1067px;
  height: 982px;
}

.quiet-photo {
  position: absolute;
  margin: 0;
  overflow: hidden;
}

.quiet-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quiet-photo-context {
  top: 155px;
  left: 0;
  width: 469px;
  height: 705px;
}

.quiet-photo-detail {
  top: 155px;
  left: 505px;
  width: 219px;
  height: 307px;
}

.quiet-photo-landscape {
  top: 485px;
  left: 505px;
  width: 562px;
  height: 375px;
}

.quiet-gallery-copy {
  position: absolute;
  top: 155px;
  left: 760px;
  width: 307px;
  font-size: 16px;
  line-height: 1.28;
}

.quiet-gallery-copy h2 {
  margin: 0 0 14px;
  font-size: inherit;
  font-weight: 700;
  line-height: inherit;
}

.quiet-gallery-copy p {
  margin: 0;
  font: inherit;
}

.quiet-gallery-metadata {
  position: absolute;
  top: 895px;
  left: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}

.quiet-gallery-metadata span:last-child { font-weight: 700; }

.quiet-photo-context:hover ~ .quiet-gallery-metadata { opacity: 1; }

.post-statement-strip {
  position: absolute;
  top: 0;
  left: 7300px;
  z-index: 3;
  width: 3700px;
  height: 982px;
}

.strip-print {
  position: absolute;
  margin: 0;
  overflow: hidden;
  background: var(--print);
}

.focusable-print {
  cursor: zoom-in;
}

.focusable-print:focus-visible {
  outline: 1px solid var(--ink);
  outline-offset: 5px;
}

.contextual-cursor-source:hover .photo-metadata,
.contextual-cursor-source:focus-within .photo-metadata {
  opacity: 1;
}

.strip-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.strip-print-landscape-primary {
  top: 201px;
  left: 0;
  width: 774px;
  height: 579px;
  padding: 18px 25px;
}

.strip-print-portrait {
  top: 151px;
  left: 850px;
  width: 328px;
  height: 480px;
  padding: 12px;
}

.strip-print-landscape-next {
  top: 300px;
  left: 1260px;
  width: 650px;
  height: 438px;
  padding: 14px 18px;
}

.strip-print-beach-portrait {
  top: 145px;
  left: 1990px;
  width: 390px;
  height: 585px;
  padding: 12px;
}

.strip-print-charro-portrait {
  top: 260px;
  left: 2460px;
  width: 350px;
  height: 525px;
  padding: 12px;
}

.strip-print-samuel-portrait {
  top: 120px;
  left: 2930px;
  width: 400px;
  height: 600px;
  padding: 13px;
}

.session-chapter-title {
  position: absolute;
  top: 340px;
  left: 11500px;
  z-index: 1;
  width: 4000px;
  margin: 0;
  font-size: 242px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 41px;
  white-space: nowrap;
}

.about-composition {
  position: absolute;
  top: 0;
  left: 15650px;
  z-index: 3;
  width: 1200px;
  height: 982px;
}

.about-print {
  position: absolute;
  top: 253px;
  left: 0;
  width: 477px;
  height: 477px;
  margin: 0;
  padding: 11px;
  background: var(--print);
}

.about-print img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.about-copy {
  position: absolute;
  top: 432px;
  left: 512px;
  width: 450px;
  font-size: 16px;
  line-height: 1.15;
}

.about-copy h2 {
  margin: 0 0 12px;
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}

.about-copy p { margin: 0; }

.about-copy .about-role {
  margin-bottom: 26px;
  font-size: 13px;
  font-weight: 600;
}

.closing-destination {
  position: absolute;
  top: 0;
  left: 17500px;
  z-index: 1;
  width: 1512px;
  height: 982px;
}

.closing-destination h2 {
  position: absolute;
  top: 425px;
  left: 0;
  width: 100%;
  margin: 0;
  font-size: 76px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 12px;
  text-align: center;
  white-space: nowrap;
}

.closing-cta {
  position: absolute;
  top: 566px;
  left: 50%;
  padding: .35rem;
  color: inherit;
  background: none;
  border: 0;
  font-size: clamp(.72rem, 1.06vw, 1rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  opacity: 1;
  cursor: pointer;
  transform: translateX(-50%);
}

.closing-cta::after {
  content: "";
  display: block;
  width: 0;
  height: 1px;
  margin-top: .25rem;
  background: currentColor;
  transition: width 180ms ease;
}

.closing-cta:hover::after,
.closing-cta:focus-visible::after { width: 100%; }

.mobile-journey { display: none; }

@media (max-width: 767px) {
  .detroit-motion-experiment { --gallery: #f3f3f1; }

  html,
  body,
  .detroit-motion-experiment,
  .detroit-motion-experiment #smooth-wrapper,
  .detroit-motion-experiment #smooth-content {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  body {
    overflow-x: clip;
    overflow-y: auto;
  }

  .desktop-journey { display: none; }

  .mobile-journey {
    display: block;
    min-height: 100vh;
    background: var(--gallery);
  }

  .mobile-opening-sequence {
    position: relative;
    height: 210svh;
    background: var(--gallery);
  }

  .mobile-opening-sticky {
    position: sticky;
    top: 0;
    height: 100svh;
    overflow: hidden;
    isolation: isolate;
    background: var(--gallery);
  }

  .mobile-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 12;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: max(1.3rem, env(safe-area-inset-top)) 1.15rem 0;
    font-size: .7rem;
    color: #fff;
    mix-blend-mode: difference;
    pointer-events: none;
  }

  .mobile-header > div { display: grid; gap: .6rem; }
  .mobile-wordmark { font-size: clamp(1.35rem, 6vw, 1.65rem); letter-spacing: -.045em; }
  .mobile-location { margin-left: 3.25rem; }
  .mobile-header a { pointer-events: auto; }

  .mobile-session-link {
    min-width: 44px;
    min-height: 44px;
    margin: -.55rem -.5rem 0 0;
    padding: .55rem .5rem;
    text-align: right;
  }

  .mobile-index-link {
    position: fixed;
    right: .55rem;
    top: 48%;
    z-index: 12;
    display: grid;
    place-items: center;
    gap: .38rem;
    width: 44px;
    min-height: 62px;
    padding: .45rem;
    color: #fff;
    background: none;
    border: 0;
    font-size: .55rem;
    mix-blend-mode: difference;
  }

  .mobile-index-link > span:last-child {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }

  .mobile-opening-print {
    position: absolute;
    top: var(--mobile-print-top, 34svh);
    left: var(--mobile-print-left, 1.15rem);
    width: var(--mobile-print-width, calc(100vw - 2.3rem));
    height: var(--mobile-print-height, auto);
    margin: 0;
    padding: var(--mobile-print-padding, 5px);
    background: var(--print);
    transform-origin: 0 0;
    will-change: transform;
  }

  .mobile-opening-print img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 49%;
    transform-origin: center center;
    will-change: transform;
  }

  .mobile-opening-meta {
    position: absolute;
    top: var(--mobile-meta-top, 70svh);
    left: var(--mobile-print-left, 1.15rem);
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr auto;
    width: var(--mobile-print-width, calc(100vw - 2.3rem));
    font-size: .58rem;
    line-height: 1.2;
    opacity: 0;
    pointer-events: none;
  }

  .mobile-opening-meta span:nth-child(2) {
    grid-row: 2;
    margin-top: .28rem;
    font-weight: 600;
  }

  .mobile-opening-meta span:nth-child(3) {
    grid-column: 2;
    grid-row: 1;
  }

  .mobile-scroll-onboarding {
    position: absolute;
    right: 1.15rem;
    bottom: max(1.35rem, env(safe-area-inset-bottom));
    z-index: 5;
    display: grid;
    justify-items: center;
    gap: .55rem;
    color: #fff;
    font-size: .55rem;
    letter-spacing: .14em;
    mix-blend-mode: difference;
    writing-mode: vertical-rl;
    pointer-events: none;
  }

  .mobile-scroll-track {
    position: relative;
    width: 1px;
    height: 4.8rem;
    overflow: hidden;
    background: rgb(255 255 255 / 35%);
  }

  .mobile-scroll-track i {
    position: absolute;
    inset: 0;
    background: currentColor;
    animation: breathe 1.55s ease-in-out infinite;
  }

  .mobile-personas-composition {
    position: relative;
    min-height: 192svh;
    overflow: hidden;
    background: var(--gallery);
  }

  .mobile-personas-copy {
    position: absolute;
    inset: 18svh 0 auto;
    z-index: 1;
    width: 100%;
  }

  .mobile-personas-copy h2 {
    display: grid;
    margin: 0;
    padding: 0 .9rem;
    font-size: clamp(3.35rem, 16.4vw, 4.65rem);
    font-weight: 300;
    line-height: .86;
    letter-spacing: -.065em;
  }

  .mobile-personas-copy h2 span {
    display: block;
    width: max-content;
    max-width: 100%;
  }

  .mobile-personas-copy h2 span:nth-child(2) {
    justify-self: end;
    margin-right: 3vw;
  }

  .mobile-personas-copy h2 span:nth-child(3) {
    margin-left: 7vw;
  }

  .mobile-personas-copy p {
    width: min(69vw, 18rem);
    margin: 13svh 8vw 0 auto;
    font-size: clamp(.8rem, 3.45vw, .94rem);
    line-height: 1.32;
  }

  .mobile-personas-print {
    position: absolute;
    margin: 0;
    padding: clamp(5px, 1.55vw, 7px);
    background: var(--print);
  }

  .mobile-personas-print img {
    display: block;
    width: 100%;
    height: auto;
  }

  .mobile-personas-beach {
    top: 97svh;
    right: 7vw;
    width: clamp(13.25rem, 59vw, 16.5rem);
  }

  .mobile-personas-folklorico {
    top: 138svh;
    left: -3vw;
    width: clamp(9.25rem, 43vw, 11.75rem);
  }

  .mobile-editorial-print,
  .mobile-about-print {
    position: absolute;
    margin: 0;
    padding: clamp(5px, 1.55vw, 7px);
    background: var(--print);
  }

  .mobile-editorial-print img,
  .mobile-about-print img {
    display: block;
    width: 100%;
    height: auto;
  }

  .mobile-print-number {
    position: absolute;
    top: calc(100% + .45rem);
    right: 0;
    color: var(--ink);
    font-size: .55rem;
    line-height: 1;
    white-space: nowrap;
  }

  .mobile-focus-source {
    cursor: zoom-in;
    touch-action: manipulation;
  }

  .mobile-play-spread {
    position: relative;
    min-height: 148svh;
    overflow: hidden;
    background: var(--gallery);
  }

  .mobile-play-primary {
    top: 17svh;
    left: 5vw;
    width: min(88vw, 24rem);
  }

  .mobile-play-secondary {
    top: 78svh;
    right: -4vw;
    width: min(72vw, 20rem);
  }

  .mobile-monument {
    position: relative;
    min-height: 126svh;
    overflow: hidden;
    background: var(--gallery);
  }

  .mobile-monument h2 {
    position: absolute;
    inset: 30svh 0 auto;
    display: grid;
    margin: 0;
    font-size: clamp(4.3rem, 21vw, 6rem);
    font-weight: 300;
    line-height: .83;
    letter-spacing: -.07em;
  }

  .mobile-donde h2 span:nth-child(1) { margin-left: -2vw; }
  .mobile-donde h2 span:nth-child(2) { justify-self: end; margin-right: 5vw; }
  .mobile-donde h2 span:nth-child(3) { margin-left: 13vw; }

  .mobile-quiet-composition {
    position: relative;
    min-height: 304svh;
    overflow: hidden;
    background: var(--gallery);
  }

  .mobile-quiet-copy {
    position: absolute;
    top: 16svh;
    left: 8vw;
    z-index: 1;
    width: 84vw;
  }

  .mobile-quiet-copy h2 {
    margin: 0;
    font-size: clamp(2.7rem, 13.2vw, 3.75rem);
    font-weight: 300;
    line-height: .91;
    letter-spacing: -.055em;
  }

  .mobile-quiet-copy p {
    width: min(71vw, 19rem);
    margin: 9svh 0 0 auto;
    font-size: clamp(.78rem, 3.35vw, .92rem);
    line-height: 1.33;
  }

  .mobile-quiet-context {
    top: 82svh;
    left: 4vw;
    width: min(78vw, 21rem);
  }

  .mobile-quiet-detail {
    top: 166svh;
    right: 5vw;
    width: min(39vw, 10.5rem);
  }

  .mobile-quiet-landscape {
    top: 225svh;
    left: 10vw;
    width: min(86vw, 23rem);
  }

  .mobile-photographic-sequence {
    position: relative;
    min-height: 544svh;
    overflow: hidden;
    background: var(--gallery);
  }

  .mobile-sequence-zumara {
    top: 18svh;
    left: 0;
    width: 96vw;
  }

  .mobile-sequence-folklorico {
    top: 106svh;
    right: 7vw;
    width: min(47vw, 12.5rem);
  }

  .mobile-sequence-triumph {
    top: 176svh;
    left: 4vw;
    width: min(79vw, 21rem);
  }

  .mobile-sequence-beach {
    top: 256svh;
    right: -5vw;
    width: min(93vw, 25rem);
  }

  .mobile-sequence-charro {
    top: 346svh;
    left: 7vw;
    width: min(52vw, 14rem);
  }

  .mobile-sequence-samuel {
    top: 435svh;
    right: 5vw;
    width: min(58vw, 15.5rem);
  }

  .mobile-session-title { min-height: 142svh; }

  .mobile-session-title h2 {
    top: 34svh;
    font-size: clamp(4rem, 19vw, 5.45rem);
  }

  .mobile-session-title h2 span:nth-child(1) { margin-left: 8vw; }
  .mobile-session-title h2 span:nth-child(2) { justify-self: end; margin-right: -1vw; }
  .mobile-session-title h2 span:nth-child(3) {
    margin: 4svh 0 0 4vw;
    font-size: .72em;
    letter-spacing: -.055em;
  }

  .mobile-about-composition {
    position: relative;
    min-height: 172svh;
    overflow: hidden;
    background: var(--gallery);
  }

  .mobile-about-print {
    top: 16svh;
    left: 7vw;
    width: min(78vw, 21rem);
  }

  .mobile-about-copy {
    position: absolute;
    top: 94svh;
    right: 8vw;
    width: min(77vw, 20rem);
    font-size: clamp(.82rem, 3.45vw, .96rem);
    line-height: 1.3;
  }

  .mobile-about-copy h2 {
    margin: 0 0 2.3rem;
    font-size: clamp(2.55rem, 12vw, 3.45rem);
    font-weight: 300;
    line-height: .9;
    letter-spacing: -.05em;
  }

  .mobile-about-copy p { margin: 0; }

  .mobile-about-copy .mobile-about-role {
    width: 70%;
    margin-bottom: 1.7rem;
    font-size: .82em;
    font-weight: 600;
  }

  .mobile-closing-destination {
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    min-height: 100svh;
    padding: 12svh 1rem;
    scroll-margin-top: 0;
    background: var(--gallery);
    text-align: center;
  }

  .mobile-closing-destination h2 {
    margin: 0;
    font-size: clamp(3.55rem, 17vw, 4.85rem);
    font-weight: 300;
    line-height: .88;
    letter-spacing: -.055em;
  }

  .mobile-closing-cta {
    min-height: 44px;
    margin-top: 3rem;
    padding: .7rem .2rem;
    color: inherit;
    background: none;
    border: 0;
    border-bottom: 1px solid currentColor;
    font-size: .78rem;
  }

  .contextual-view-cursor { display: none; }

  .index-viewer {
    padding: 0 1rem 14svh;
  }

  .index-header {
    min-height: 104px;
    padding: max(1.25rem, env(safe-area-inset-top)) 0 1.25rem;
  }

  .index-header h1 { font-size: 2rem; }
  .index-header span { margin-left: 2.6rem; font-size: .56rem; }

  .index-return {
    min-width: 58px;
    min-height: 44px;
    padding: .65rem 0;
  }

  .index-archive {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 12svh;
    margin-top: 4svh;
  }

  .index-item { padding: 5px; }
  .index-item:nth-child(6n + 1) { grid-column: 1 / span 4; }
  .index-item:nth-child(6n + 2) { grid-column: 5 / span 2; margin-top: 10svh; }
  .index-item:nth-child(6n + 3) { grid-column: 2 / span 4; margin-top: 0; }
  .index-item:nth-child(6n + 4) { grid-column: 1 / span 2; margin-top: 8svh; }
  .index-item:nth-child(6n + 5) { grid-column: 3 / span 4; margin-top: 0; }
  .index-item:nth-child(6n + 6) { grid-column: 4 / span 3; margin-top: 7svh; }

  .image-focus-close {
    top: max(.75rem, env(safe-area-inset-top));
    right: .75rem;
    min-width: 64px;
    min-height: 44px;
    padding: .75rem;
  }

  body.mobile-scroll-locked {
    position: fixed;
    top: var(--native-scroll-lock-top, 0);
    left: 0;
    width: 100%;
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce) {
  .index-viewer,
  #smooth-content,
  .contextual-view-cursor span,
  .image-focus-backdrop,
  .image-focus-print,
  .image-focus-close { transition-duration: 0ms; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-track i,
  .mobile-scroll-track i { animation: none; }
  .desktop-journey { height: 360vh; }
}