#exhibition-motion {
  font:
    14px/1.45 Manrope,
    Arial,
    sans-serif;
  color: light-dark(#22313b, #e4eaf0);
}
#exhibition-motion * {
  box-sizing: border-box;
}
#exhibition-motion .controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0;
}
#exhibition-motion button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid #8c9aa57a;
  padding: 9px 13px;
  min-height: 44px;
  cursor: pointer;
}
#exhibition-motion button:disabled {
  opacity: 0.45;
  cursor: default;
}
#exhibition-motion .journey-control {
  flex: 1;
  min-width: 170px;
}
#exhibition-motion input {
  width: 100%;
  accent-color: #698aa1;
  min-height: 30px;
}
#exhibition-motion .grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
#exhibition-motion .study {
  min-width: 0;
}
#exhibition-motion .frame {
  width: 100%;
  aspect-ratio: 390/660;
  position: relative;
  overflow: hidden;
  background: #d3e3ee;
  touch-action: pan-x;
}
#exhibition-motion .stage {
  position: absolute;
  width: 390px;
  height: 660px;
  transform-origin: 0 0;
  color: #16242f;
  overflow: hidden;
  font-family: "Helvetica Neue", Arial, sans-serif;
}
#exhibition-motion .sky {
  position: absolute;
  inset: 0;
  width: 390px;
  height: 660px;
}
#exhibition-motion .view {
  position: absolute;
  inset: 0;
  perspective: 800px;
  transform-style: preserve-3d;
  perspective-origin: 50% 45%;
}
#exhibition-motion .panel {
  position: absolute;
  left: 55px;
  top: 325px;
  width: 280px;
  height: 280px;
  transform-style: preserve-3d;
  transform-origin: center center;
  will-change: transform;
}
#exhibition-motion .panel::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 0;
  width: 5px;
  height: 100%;
  background: #bbc3c7;
  transform: rotateY(90deg);
  transform-origin: left center;
}
#exhibition-motion .panel svg {
  width: 100%;
  height: 100%;
  display: block;
  backface-visibility: hidden;
  box-shadow: 0 1px 1px #71859628;
}
#exhibition-motion .name {
  position: absolute;
  top: 25px;
  left: 25px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.4px;
}
#exhibition-motion .folio {
  position: absolute;
  top: 28px;
  right: 25px;
  font-size: 11px;
}
#exhibition-motion .copy {
  position: absolute;
  top: 111px;
  left: 25px;
  width: 340px;
  pointer-events: none;
}
#exhibition-motion .copy h2 {
  font-size: 61px;
  line-height: 1.02;
  font-weight: 300;
  letter-spacing: -3px;
  margin: 0;
}
#exhibition-motion .intro {
  text-align: center;
  top: 132px;
}
#exhibition-motion .copy .project {
  font-size: 17px;
  letter-spacing: -0.6px;
  margin: 0 0 16px;
}
#exhibition-motion .copy h3 {
  font-size: 26px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -1.1px;
  margin: 0 0 12px;
  max-width: 330px;
}
#exhibition-motion .copy p {
  font-size: 13px;
  margin: 0;
}
#exhibition-motion .foot {
  position: absolute;
  bottom: 19px;
  left: 25px;
  right: 25px;
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.2px;
}
#exhibition-motion .caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  margin-top: 9px;
}
#exhibition-motion .caption button {
  padding: 7px 10px;
}
#exhibition-motion .caption strong {
  font-weight: 500;
}
#exhibition-motion .sub {
  font-size: 12px;
  margin: 4px 0 0;
  min-height: 35px;
  opacity: 0.8;
}
#exhibition-motion .back[hidden] {
  display: none;
}
#exhibition-motion .grid.focus {
  display: block;
  max-width: 390px;
  margin: 0 auto;
}
#exhibition-motion .grid.focus .study:not(.chosen) {
  display: none;
}
#exhibition-motion .state {
  min-width: 70px;
  font-size: 12px;
}
#exhibition-motion .still {
  font-size: 12px;
}
#exhibition-motion .still[hidden] {
  display: none;
}
@media (max-width: 560px) {
  #exhibition-motion .grid {
    grid-template-columns: 1fr;
    max-width: 390px;
    margin: auto;
  }
  #exhibition-motion .sub {
    min-height: 0;
    margin-bottom: 20px;
  }
}
#exhibition-motion select {
  font: inherit;
  font-size: 16px;
  color: inherit;
  background: light-dark(#f4f6f7, #24292e);
  border: 1px solid #8c9aa57a;
  min-height: 44px;
  max-width: 100%;
  padding: 8px;
  width: 100%;
}
#exhibition-motion .projectcopy {
  top: 92px;
}
#exhibition-motion .copy .role {
  font-size: 11px;
  line-height: 1.4;
  margin-top: 10px;
  color: #415461;
}
#exhibition-motion .copy .project {
  margin-bottom: 12px;
}
#exhibition-motion .foot a {
  color: #16242f;
  font-size: 13px;
  text-underline-offset: 4px;
  pointer-events: auto;
}
#exhibition-motion .foot a[hidden] {
  display: none;
}
#exhibition-motion .foot .arrow {
  display: none;
}
#exhibition-motion .panel.phone::after,
#exhibition-motion .panel.landscape-phone::after,
#exhibition-motion .panel.computer::after,
#exhibition-motion .panel.object::after {
  display: none;
}
#exhibition-motion .panel svg {
  position: relative;
  transform: translateZ(1px);
  box-shadow: none;
}
#exhibition-motion .device-back {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, #c7d1d8, #6f818f);
  backface-visibility: hidden;
  transform: rotateY(180deg) translateZ(1px);
  border-radius: 8px;
}
#exhibition-motion .phone .device-back {
  border-radius: 24px;
  background: linear-gradient(130deg, #778792, #243644);
}
#exhibition-motion .landscape-phone .device-back {
  border-radius: 23px;
}
#exhibition-motion .computer .device-back {
  clip-path: polygon(
    4% 0,
    96% 0,
    96% 91%,
    100% 97%,
    100% 100%,
    0 100%,
    0 97%,
    4% 91%
  );
}
#exhibition-motion .object svg {
  backface-visibility: visible;
  filter: drop-shadow(0 7px 6px #243e5025);
}
#exhibition-motion .panel.monitor::after,
#exhibition-motion .panel.tablet::after {
  display: none;
}
#exhibition-motion .device-back {
  transform: rotateY(180deg) translateZ(4px);
}
#exhibition-motion .panel svg {
  transform: translateZ(4px);
}
#exhibition-motion .device-rim {
  position: absolute;
  inset: 0;
  background: #8899a5;
  transform: translateZ(0);
  border-radius: 8px;
  box-shadow: 0 0 0 1px #b9c5ce;
}
#exhibition-motion .phone .device-rim {
  border-radius: 24px;
}
#exhibition-motion .landscape-phone .device-rim {
  border-radius: 23px;
}
#exhibition-motion .tablet .device-rim,
#exhibition-motion .tablet .device-back {
  border-radius: 14px;
}
#exhibition-motion .monitor .device-back,
#exhibition-motion .monitor .device-rim {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 85%,
    54% 85%,
    56% 95%,
    64% 95%,
    68% 99%,
    32% 99%,
    36% 95%,
    44% 95%,
    46% 85%,
    0 85%
  );
}
#exhibition-motion .computer .device-rim {
  clip-path: polygon(
    4% 0,
    96% 0,
    96% 91%,
    100% 97%,
    100% 100%,
    0 100%,
    0 97%,
    4% 91%
  );
}
#exhibition-motion .support-photo {
  position: absolute;
  margin: 0;
  display: block;
  transform-style: preserve-3d;
  will-change: transform;
  color: #243745;
  text-decoration: none;
}
#exhibition-motion .support-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 4px solid #fffdf6;
  box-shadow: 0 3px 5px #36516925;
  backface-visibility: visible;
}
#exhibition-motion .support-photo span {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: block;
  padding: 5px 0;
  font-size: 11px;
  line-height: 1.2;
  white-space: nowrap;
}
#exhibition-motion .photo-sources {
  margin: 16px 0;
  font-size: 12px;
}
#exhibition-motion .photo-sources a {
  color: inherit;
}
#exhibition-motion .photo-sources li {
  margin: 7px 0;
}
#exhibition-motion .photo-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0 18px;
  font-size: 12px;
}
#exhibition-motion .photo-tools label {
  flex: 1;
  min-width: 180px;
}
#exhibition-motion .photo-files {
  display: block;
  max-width: 100%;
  font: inherit;
  width: 100%;
  min-height: 35px;
}
#exhibition-motion .photo-note {
  opacity: 0.65;
}
#exhibition-motion .photo-tools[hidden] {
  display: none;
}
#exhibition-motion .view {
  perspective: none;
  transform-style: flat;
}
#exhibition-motion .depth-slot {
  position: absolute;
  inset: 0;
  perspective: 800px;
  perspective-origin: 50% 45%;
  transform-style: flat;
  pointer-events: none;
  isolation: isolate;
}
#exhibition-motion .depth-slot .support-photo {
  pointer-events: auto;
}
#exhibition-motion .intro {
  will-change: transform;
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}
#exhibition-motion .presence-note {
  font-size: 12px;
  opacity: 0.75;
  margin: 8px 0 16px;
}
#exhibition-motion .person {
  position: absolute;
  width: 112px;
  height: 148px;
  left: 245px;
  top: 478px;
  pointer-events: none;
  transform-origin: 50% 90%;
  mask-image: linear-gradient(black 0%, black 76%, transparent 99%);
}
#exhibition-motion .pose {
  position: absolute;
  inset: 0;
  filter: sepia(0.12);
  opacity: 0;
}
#exhibition-motion .pose-rest {
  background-position: 0% 50%;
}
#exhibition-motion .pose-think {
  background-position: 50% 50%;
}
#exhibition-motion .pose-point {
  background-position: 100% 50%;
}
#exhibition-motion .person-0 {
  top: 430px;
}
#exhibition-motion .person-1 {
  left: 8px;
  top: 475px;
  width: 116px;
  height: 153px;
}
#exhibition-motion .person-2 {
  left: 250px;
  top: 479px;
  width: 112px;
  height: 148px;
}
#exhibition-motion .pose svg {
  width: 100%;
  height: 100%;
  display: block;
}
#exhibition-motion .grid {
  display: block;
  max-width: 390px;
  margin: auto;
}
#exhibition-motion .caption button,
#exhibition-motion .back {
  display: none;
}
#exhibition-motion .study-options {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 16px;
}
#exhibition-motion .study-options label {
  flex: 1;
  min-width: 155px;
  font-size: 12px;
}
#exhibition-motion .study-options select {
  margin-top: 5px;
}
#exhibition-motion .support-photo.press-piece {
  background: #fffdf5;
  padding: 13px;
  color: #242b30;
  box-shadow: 1px 4px 8px #35516b22;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#exhibition-motion .press-piece .publication {
  font:
    500 15px/1.05 Georgia,
    serif;
  border-bottom: 1px solid #657482;
  padding-bottom: 7px;
}
#exhibition-motion .press-piece .press-title {
  font:
    400 17px/1.08 Georgia,
    serif;
  margin: 10px 0;
}
#exhibition-motion .press-piece .press-date {
  font:
    10px/1.3 Arial,
    sans-serif;
}
#exhibition-motion .front-cloud {
  position: absolute;
  left: -80px;
  top: 160px;
  width: 550px;
  height: 420px;
  pointer-events: none;
  mask-image: radial-gradient(
    ellipse at 50% 60%,
    black 10%,
    #000b 35%,
    transparent 70%
  );
  filter: blur(2px);
  background-size: 550px 978px;
  background-position: center bottom;
  will-change: transform, opacity;
}
#exhibition-motion .thought {
  position: absolute;
  left: 128px;
  top: 475px;
  max-width: 155px;
  padding: 12px 16px;
  border-radius: 50%;
  background: #fffdf6ed;
  font:
    italic 15px/1.18 Georgia,
    serif;
  color: #263845;
  pointer-events: none;
  transform-origin: 85% 95%;
}
#exhibition-motion .thought:after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: -11px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fffdf6;
}
#exhibition-motion .thought:before {
  content: "";
  position: absolute;
  right: 10px;
  bottom: -21px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fffdf6;
}
#exhibition-motion .thought.speech {
  border-radius: 16px;
  font-style: normal;
}
#exhibition-motion .thought.speech:after {
  width: 16px;
  height: 17px;
  bottom: -10px;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  border-radius: 0;
}
#exhibition-motion .thought.speech:before {
  display: none;
}
#exhibition-motion .ending {
  position: absolute;
  left: 30px;
  top: 150px;
  width: 325px;
  color: #253b4b;
  pointer-events: auto;
}
#exhibition-motion .ending[hidden] {
  display: none;
}
#exhibition-motion .ending h3 {
  font:
    400 32px/1.1 Georgia,
    serif;
  margin: 0 0 34px;
}
#exhibition-motion .discovery {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 185px;
  height: 105px;
  text-align: center;
  color: #314855;
  font:
    italic 17px/1.2 Georgia,
    serif;
  text-decoration: none;
  isolation: isolate;
}
#exhibition-motion .discovery:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 50%,
    #fffdfbee 40%,
    transparent 72%
  );
}
#exhibition-motion .ending p {
  font:
    12px/1.5 Arial,
    sans-serif;
  max-width: 230px;
  margin-top: 20px;
}
#exhibition-motion .ending a:focus-visible {
  outline: 2px solid #223a4b;
  outline-offset: 5px;
}

#exhibition-motion .thought {
  display: none !important;
}
#exhibition-motion .support-photo.press-piece {
  padding: 0;
  border-radius: 9px;
  overflow: hidden;
  background: #fff;
  display: grid;
  grid-template-columns: 58px 1fr;
  gap: 0;
  box-shadow: 0 2px 7px #243f5324;
  align-items: center;
}
#exhibition-motion .press-piece img {
  width: 58px;
  height: 100%;
  object-fit: cover;
  border: 0;
  box-shadow: none;
}
#exhibition-motion .press-piece .link-copy {
  padding: 8px 9px;
  min-width: 0;
}
#exhibition-motion .press-piece .publication {
  font:
    10px/1.15 Arial,
    sans-serif;
  color: #64727d;
  border: 0;
  padding: 0;
  margin-bottom: 5px;
  text-transform: lowercase;
}
#exhibition-motion .press-piece .press-title {
  font:
    500 12px/1.18 Arial,
    sans-serif;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
#exhibition-motion .press-piece .press-date {
  display: none;
}
#exhibition-motion .phone .device-back,
#exhibition-motion .phone .device-rim,
#exhibition-motion .landscape-phone .device-back,
#exhibition-motion .landscape-phone .device-rim {
  border-radius: 22px;
  background: linear-gradient(120deg, #c9cdd1, #858f99);
  box-shadow: none;
}
#exhibition-motion .tablet .device-back,
#exhibition-motion .tablet .device-rim {
  border-radius: 15px;
  background: linear-gradient(120deg, #bfc5cb, #81909e);
  box-shadow: none;
}
#exhibition-motion .panel svg {
  transform: translateZ(2px);
}
#exhibition-motion .device-back {
  transform: rotateY(180deg) translateZ(2px);
}

html,
body {
  margin: 0;
  height: 100%;
  background: #cbdfee;
  color: #16242f;
  font-family: Arial, sans-serif;
  color-scheme: light;
}
body {
  overflow: hidden;
}
#exhibition-motion .opening-window .device-back,
#exhibition-motion .opening-window .device-rim {
  display: none;
}
#exhibition-motion .stage {
  overflow: visible;
}
#exhibition-motion .grid,
#exhibition-motion .grid.focus {
  width: 100%;
  max-width: none;
  margin: 0;
}
#exhibition-motion .frame {
  height: 100svh;
  width: 100%;
  aspect-ratio: auto;
  background: transparent;
}
#exhibition-motion .controls {
  position: fixed;
  z-index: 30000;
  top: 17px;
  right: 24px;
  margin: 0;
  width: 210px;
}
#exhibition-motion select {
  background: #eaf3f9dd;
  border: 0;
  border-radius: 4px;
  font-size: 12px;
  width: 210px;
  padding: 8px;
  min-height: 40px;
}
#exhibition-motion .controls > *:not(select),
#exhibition-motion .study-options,
#exhibition-motion .photo-tools,
#exhibition-motion .presence-note,
#exhibition-motion .caption,
#exhibition-motion .sub,
#exhibition-motion .photo-sources {
  display: none;
}
#exhibition-motion .person-2 {
  width: 82px;
  height: 109px;
  left: 284px;
  top: 516px;
}
#exhibition-motion .projectcopy {
  top: 83px;
}
#exhibition-motion .copy .project {
  font-size: 17px;
  margin: 0 0 5px;
}
#exhibition-motion .copy .role {
  font-size: 10px;
  margin: 0 0 19px;
  letter-spacing: 0.4px;
}
#exhibition-motion .copy h3 {
  font-size: 29px;
  line-height: 1.12;
  letter-spacing: -0.9px;
  margin-bottom: 14px;
}
#exhibition-motion .copy .description {
  font-size: 13px;
  line-height: 1.5;
  max-width: 325px;
}
#exhibition-motion .copy .impact {
  font-size: 11px;
  line-height: 1.45;
  margin-top: 12px;
  max-width: 305px;
  color: #354f60;
}
#exhibition-motion .support-photo.press-piece {
  grid-template-columns: 32px 1fr;
  background: #edf5f966;
  border-radius: 0;
  border-top: 1px solid #60798755;
  box-shadow: none;
  padding: 8px 0;
  gap: 8px;
}
#exhibition-motion .press-piece img {
  width: 32px;
  height: 40px;
}
#exhibition-motion .press-piece .link-copy {
  padding: 0;
}
#exhibition-motion .press-piece .publication {
  font-size: 10px;
  margin-bottom: 4px;
}
#exhibition-motion .press-piece .press-title {
  font-size: 11px;
  -webkit-line-clamp: 2;
}
#exhibition-motion .ending {
  top: 175px;
}
#exhibition-motion .ending h3 {
  font:
    300 45px/1.07 "Helvetica Neue",
    Arial,
    sans-serif;
  letter-spacing: -1.8px;
}
#exhibition-motion .contact {
  color: inherit;
  font-size: 15px;
  text-underline-offset: 6px;
}
#exhibition-motion .step-nav {
  position: fixed;
  bottom: 18px;
  right: 24px;
  z-index: 30000;
  display: flex;
  align-items: center;
  gap: 9px;
}
#exhibition-motion .step-nav button {
  background: #eaf3f9bb;
  border: 0;
  border-radius: 50%;
  width: 42px;
  font-size: 19px;
}
#exhibition-motion .step-nav a {
  font-size: 12px;
  color: #223b4b;
  text-underline-offset: 4px;
  margin-left: 12px;
}
#exhibition-motion .panel.print .device-back,
#exhibition-motion .panel.print .device-rim {
  display: none;
}
#exhibition-motion .panel.print:after {
  display: none;
}
.still {
  position: fixed;
  bottom: 0;
  font-size: 11px;
  z-index: 31000;
  background: #eaf3f9;
}
#exhibition-motion .sky {
  opacity: 0;
}
.page-sky {
  position: fixed;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 1;
  pointer-events: none;
  will-change: transform;
}
.scroll-hint {
  position: fixed;
  left: 24px;
  bottom: 25px;
  font-size: 11px;
  color: #324e62;
  z-index: 30000;
}
@media (max-width: 600px) {
  #exhibition-motion .controls {
    top: 10px;
    right: 12px;
    width: 160px;
  }
  #exhibition-motion select {
    width: 160px;
    font-size: 11px;
  }
  #exhibition-motion .step-nav {
    bottom: 10px;
    right: 12px;
  }
  .scroll-hint {
    left: 18px;
    bottom: 22px;
  }
  #exhibition-motion .step-nav a {
    display: none;
  }
  #exhibition-motion .name {
    top: 27px;
  }
  .still {
    max-width: 220px;
  }
}

/* Visitor controls and accessible focus states. */
a:focus-visible,
button:focus-visible,
select:focus-visible {
  outline: 2px solid #142f46;
  outline-offset: 4px;
}
#exhibition-motion .stage {
  overflow: visible;
}
#exhibition-motion .name {
  font-weight: 500;
}
#exhibition-motion .projectcopy .impact {
  color: #233f52;
}
#exhibition-motion .step-nav {
  gap: 8px;
}
#exhibition-motion .panel svg {
  image-rendering: auto;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 50000;
  background: white;
  color: #17334a;
  padding: 12px;
}
.skip-link:focus {
  top: 12px;
}
@media (max-width: 600px) {
  #exhibition-motion .step-nav a[href="/projects/"] {
    display: block;
    font-size: 11px;
  }
  #exhibition-motion .step-nav {
    bottom: 12px;
  }
  .scroll-hint {
    max-width: 125px;
    font-size: 10px;
  }
}

/* Camera-space cloud banks: soft edges, no stage-sized clipping. */
.cloud-world {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.cloud-bank {
  position: absolute;
  top: 0;
  left: 50%;
  width: max(85vw, 680px);
  height: 65vh;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 22%, transparent 69%);
  will-change: transform, opacity;
}
.cloud-bank svg { width: 100%; height: 100%; display: block; }
.cloud-world-front { z-index: 19000; }
@media (prefers-reduced-motion: reduce) {
  .cloud-world { display: none; }
}

/* The browser scrolls the document; the exhibition is a fixed viewport onto it. */
html { overflow-y: scroll; }
body { overflow: visible; }
#exhibition-motion .frame {
  position: fixed;
  inset: 0;
  height: 100svh;
  touch-action: auto;
}

.cloud-bank.cloud-bitmap { mask-image: none; -webkit-mask-image: none; }
.cloud-bitmap img { display:block; width:100%; height:100%; }
/* A composited <img> hands its bitmap straight to the compositor. The banks then
   share one texture instead of each painting a large backing store. */
.cloud-bitmap img { will-change: opacity; }

/* Opt-in organic frame studies. Keep the existing scroll and cloud motion. */
.frame-study-control {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  z-index: 60001; display: flex; align-items: center; gap: 10px;
  padding: 9px 13px; border: 1px solid #b5c2c8; border-radius: 12px;
  background: #fffdf4; color: #233f52; font: 12px/1.4 system-ui;
  white-space: nowrap;
}
.frame-study-control select { font: inherit; padding: 6px; color: inherit; background: transparent; }
#exhibition-motion .panel.soft-frame { background: none; box-shadow: none; }
#exhibition-motion .panel.soft-frame::after { display: none; }
#exhibition-motion .panel.soft-frame > svg { overflow: visible; backface-visibility: visible; }
#exhibition-motion .panel.soft-frame svg svg { transform: none; }
#exhibition-motion .support-photo.ink-photo {
  background: transparent; border: 0; padding: 0; box-shadow: none;
}
#exhibition-motion .support-photo.ink-photo > svg {
  width: 100%; height: 100%; display: block; overflow: visible;
}
/* Small paper links with a visible action and an irregular ink edge. */
#exhibition-motion .support-photo.press-piece {
  background: transparent; border: 0; border-radius: 0;
  padding: 10px; grid-template-columns: 30px 1fr; gap: 7px;
  box-shadow: none; overflow: visible;
}
#exhibition-motion .press-piece > .paper-outline {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: -1; overflow: visible;
}
#exhibition-motion .press-piece img { width: 30px; height: 38px; border: 0; box-shadow: none; border-radius: 2px; }
#exhibition-motion .press-piece.text-only-link { grid-template-columns: 1fr; }
#exhibition-motion .press-piece .publication { font-size: 9px; margin-bottom: 3px; }
#exhibition-motion .press-piece .press-title { font-size: 10px; line-height: 1.15; -webkit-line-clamp: 2; }
#exhibition-motion .press-piece .paper-link-action {
  font-size: 11px; line-height: 1.3; margin-top: 5px;
  text-decoration: underline; text-underline-offset: 3px; font-weight: 500;
}
#exhibition-motion .press-piece:focus-visible { outline: 2px solid #173e61; outline-offset: 4px; }
#exhibition-motion .press-piece:hover .paper-link-action { text-decoration-thickness: 2px; }
#exhibition-motion .support-photo.press-piece {
  padding: 13px 15px; gap: 6px;
}
#exhibition-motion .press-piece img { border-radius: 9px 7px 10px 6px; }
#exhibition-motion .press-piece .paper-link-action { font-weight: 600; }
#exhibition-motion .press-piece > .paper-outline {
  transition: transform 180ms ease;
  transform-origin: center;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  #exhibition-motion .press-piece:hover > .paper-outline { transform: scale(1.035, 1.06) rotate(-1deg); }
}
/* Opt-in paper cloud materials; all layers use the existing native-scroll camera. */
body[data-paper] .page-sky { background-image: none !important; background-color: #b9d3df; }
body[data-paper="torn"] .page-sky { background-color: #aebfc5; }
body[data-paper="vellum"] .page-sky { background-color: #a9c7d6; }
body[data-paper] .sky { visibility: hidden; }
body[data-paper] .cloud-bank.paper-cloud { mask-image: none; -webkit-mask-image: none; }
body[data-paper] .opening-window .device-back,
body[data-paper] .opening-window .device-rim { display: none !important; }
.paper-study-control {
  position: fixed; top: 65px; right: 16px; z-index: 60002;
  padding: 9px 12px; background: #fffdf1; border: 1px solid #68808a;
  border-radius: 17px 13px 18px 12px; color: #233f52;
  font: 12px/1.4 system-ui; display: flex; gap: 8px; align-items: center;
}
.paper-study-control select { background: transparent; color: inherit; font: inherit; padding: 5px; }
body[data-paper] .paper-cloud svg { overflow: visible; }
.paper-horizon { position: absolute; inset: 0; overflow: hidden; }
.paper-horizon svg { position: absolute; width: 120%; height: 65%; bottom: -27%; left: -25%; }
.paper-horizon svg + svg { left: 30%; bottom: -35%; transform: rotate(-12deg); }
body[data-paper="collage"] .page-sky {
  background-color: #ded5bf;
  background-image: repeating-linear-gradient(0deg, transparent 0 5px, #8c7d6510 5px 6px) !important;
}
body[data-paper="emo"] .page-sky { background-color: #171923; }
body[data-paper="emo"] #exhibition-motion .name,
body[data-paper="emo"] #exhibition-motion .copy,
body[data-paper="emo"] #exhibition-motion .copy .role,
body[data-paper="emo"] #exhibition-motion .copy .impact,
body[data-paper="emo"] #exhibition-motion .foot,
body[data-paper="emo"] .scroll-hint,
body[data-paper="emo"] #exhibition-motion .step-nav > a { color: #f1e5df; }
body[data-paper="emo"] #exhibition-motion .copy h3 { font-family: Georgia, serif; font-style: italic; }
body[data-paper="pixel"] .page-sky { background-color: #7a86ba; }
body[data-paper="pixel"] #exhibition-motion .name,
body[data-paper="pixel"] #exhibition-motion .project,
body[data-paper="pixel"] #exhibition-motion .role { font-family: ui-monospace, monospace; }
body[data-paper="pixel"] .paper-study-control { border-radius: 0; box-shadow: 3px 3px 0 #484568; }
body[data-paper="photo-pixel"] .page-sky,
body[data-paper="photo-pixel-fine"] .page-sky,
body[data-paper="photo-pixel"] .cloud-bitmap img,
body[data-paper="photo-pixel-fine"] .cloud-bitmap img { image-rendering: pixelated; }
body[data-paper="cyanotype"] #exhibition-motion .copy,
body[data-paper="cyanotype"] #exhibition-motion .copy .role,
body[data-paper="cyanotype"] #exhibition-motion .copy .impact,
body[data-paper="cyanotype"] #exhibition-motion .name,
body[data-paper="cyanotype"] #exhibition-motion .foot { color: #fffdf3; text-shadow: 0 1px 3px #143469; }
body[data-paper="engraving"] #exhibition-motion .copy h3,
body[data-paper="tonal"] #exhibition-motion .copy h3 { font-family: Georgia, serif; font-weight: 400; letter-spacing: -1px; }
.depth-study-control {
  position: fixed; top: 118px; right: 16px; z-index: 60002;
  padding: 9px 12px; border: 1px solid #68808a; border-radius: 12px 17px 12px 18px;
  background: #fffdf1; color: #233f52; font: 12px/1.4 system-ui;
  display: flex; gap: 8px; align-items: center;
}
.depth-study-control select { font: inherit; background: transparent; color: inherit; padding: 5px; }
body[data-cloud-depth] .cloud-bank { transform-origin: center; }
/* The photographic exterior stays smooth; pixels begin inside the portal. */
body[data-paper="photo-pixel"] .page-sky,
body[data-paper="photo-pixel-fine"] .page-sky { image-rendering: auto; }
.pixel-sky-world { position: absolute; inset: 0; background-size: cover; background-position: center; image-rendering: pixelated; opacity: 0; }
/* Its own layer, so the entrance fade does not repaint the whole sky each frame. */
.pixel-sky-world { will-change: opacity; }
#exhibition-motion .pixel-portal-image { image-rendering: pixelated; }
#exhibition-motion .portal-cloud { image-rendering: pixelated; }
.cloud-bank .cloud-photo-exterior { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto !important; }

/* Entrance study: a photographic break in the clouds, without a device shell. */
body[data-entrance="clouds"] #exhibition-motion .intro {
  top: 130px;
  left: 26px;
  width: 310px;
  text-align: left;
}
body[data-entrance="clouds"] #exhibition-motion .intro h2 {
  font-size: 42px;
  line-height: 1.06;
  letter-spacing: -1.7px;
  max-width: 310px;
  font-weight: 400;
}
body[data-entrance="clouds"] #exhibition-motion .invitation-identity {
  margin: 0 0 16px;
  font-size: 13px;
}
body[data-entrance="clouds"] .invitation-scroll {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 23px;
  min-height: 44px;
  font-size: 13px;
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

body[data-entrance="clouds"] .invitation-scroll:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
body[data-entrance="clouds"] .opening-window { filter: none !important; }
body[data-entrance="clouds"] .invitation-glimpse image { image-rendering: auto; }
body.at-cloud-entrance .scroll-hint,
body.at-cloud-entrance .paper-study-control,
body.at-cloud-entrance .depth-study-control,
body.at-cloud-entrance .frame-study-control { visibility: hidden; }

body[data-entrance="clouds"] .invitation-scroll {
  border: 0;
  padding: 0;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
body[data-entrance="clouds"] { overflow-anchor: none; }
body[data-entrance="clouds"] #exhibition-motion .invitation-scroll {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Quiet perimeter: the work and invitation carry navigation. */
#exhibition-motion .controls,
#exhibition-motion .foot,
#exhibition-motion .folio,
.scroll-hint,
.frame-study-control,
.paper-study-control,
.depth-study-control,
#exhibition-motion .step-nav button,
#exhibition-motion .step-nav a:not([href="/projects/"]) { display: none !important; }
#exhibition-motion .step-nav {
  right: max(16px, env(safe-area-inset-right));
  bottom: max(8px, env(safe-area-inset-bottom));
  gap: 0;
}
#exhibition-motion .step-nav a[href="/projects/"] {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 400;
  color: #3d5666;
  background: transparent;
  border: 0;
  box-shadow: none;
  text-decoration: none;
}
#exhibition-motion .step-nav a[href="/projects/"]:hover { text-decoration: underline; }

/* A small, steady portrait replaces the guide beside each project. */
#exhibition-motion .portrait-header {
  position: fixed;
  inset: max(8px, env(safe-area-inset-top)) auto auto max(16px, env(safe-area-inset-left));
  width: 56px;
  height: 72px;
  perspective: none;
  z-index: 50000 !important;
}
#exhibition-motion .portrait-header .person {
  position: absolute;
  left: 0;
  top: 0;
  width: 56px;
  height: 72px;
  opacity: 1 !important;
  transform: none !important;
}
#exhibition-motion .portrait-header .pose { opacity: 0 !important; }
#exhibition-motion .portrait-header .pose-rest { opacity: 1 !important; }
#exhibition-motion > .name {
  position: fixed;
  top: max(25px, env(safe-area-inset-top));
  right: max(24px, env(safe-area-inset-right));
  left: auto;
  margin: 0;
  font-size: 14px;
  z-index: 50000;
}

#exhibition-motion .portrait-header {
  left: var(--project-left);
  top: max(16px, env(safe-area-inset-top));
  width: 44px;
  height: 44px;
}
#exhibition-motion .portrait-header .person { display: none; }
#exhibition-motion .header-avatar {
  display: block;
  width: 44px;
  height: 44px;
  object-fit: cover;
  border-radius: 50%;
}
#exhibition-motion > .name {
  top: max(30px, env(safe-area-inset-top));
  right: calc(100% - var(--project-left) - var(--project-width));
}

#exhibition-motion .header-avatar {
  border-radius: 0;
  object-fit: contain;
  transform-origin: 50% 80%;
  animation: avatar-breathe 8s ease-in-out infinite;
}
@keyframes avatar-breathe {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-2px) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  #exhibition-motion .header-avatar { animation: none; }
}
body:has(#exhibition-motion .still:not([hidden])) #exhibition-motion .header-avatar { animation: none; }

/* Header study: name left, cutout portrait right. */
#exhibition-motion .portrait-header {
  left: auto;
  right: calc(100% - var(--project-left) - var(--project-width));
}
#exhibition-motion > .name {
  left: var(--project-left);
  right: auto;
}
#exhibition-motion .header-avatar { border-radius: 0 0 12px 12px; }

/* Quiet utility link, separate from the project content. */
#exhibition-motion .step-nav {
  display: flex;
  left: var(--project-left);
  right: auto;
}
#exhibition-motion .step-nav a[href="/projects/"] {
  font-size: 12px;
  color: #4c6270;
  padding-left: 0;
}
#exhibition-motion .ending { left: 25px; width: 340px; }
#exhibition-motion .step-nav { gap: 0; width: var(--project-width); }
#exhibition-motion .step-nav a { margin-left: 0; }
#exhibition-motion .step-nav a[href="/projects/"] { margin-left: auto; margin-right: 0; padding-right: 0; }
#exhibition-motion .step-nav a.footer-social {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  color: #4c6270;
  background: transparent;
  border: 0;
  box-shadow: none;
}
#exhibition-motion .footer-social svg { width: 18px; height: 18px; }
#exhibition-motion .step-nav a:hover { color: #172e3d; }
#exhibition-motion .step-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

#exhibition-motion .project-website {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  font-size: 12px;
  color: #253b4b;
  text-underline-offset: 4px;
  pointer-events: auto;
}
#exhibition-motion .project-website[hidden] { display: none; }

#exhibition-motion .contact-cta,
body[data-entrance="clouds"] #exhibition-motion .invitation-scroll.contact-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 26px;
  min-height: 64px;
  padding: 16px 27px;
  color: #253b4b;
  font-size: 19px;
  text-decoration: none;
  isolation: isolate;
}
#exhibition-motion .cta-paper {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: visible;
  pointer-events: none;
}
#exhibition-motion .cta-arrow { width: 27px; height: 27px; }
#exhibition-motion .cta-label { text-decoration: underline; text-underline-offset: 5px; }
#exhibition-motion .contact-cta:hover .cta-label { text-decoration-thickness: 2px; }

body[data-entrance="clouds"] #exhibition-motion .invitation-bio {
  margin: 20px 0 0;
  max-width: 295px;
  font-size: 13px;
  line-height: 1.55;
  color: #253b4b;
}
body[data-entrance="clouds"] #exhibition-motion .invitation-bio span { display: block; margin-bottom: 7px; }
body[data-entrance="clouds"] #exhibition-motion .invitation-scroll { margin-top: 18px; }

/* The two small text surfaces fade without being re-rasterized mid-handoff. */
#exhibition-motion .intro,
#exhibition-motion .projectcopy { will-change: opacity; }

/* Keep the exhibition's layout stable when Safari changes toolbar height,
   but let moving artwork use the extra visible space below the small viewport. */
#exhibition-motion .frame { overflow: visible; }
/* The browser clips the sky; toolbar animation must not resize its texture. */
.page-sky { height: 100lvh; bottom: auto; }

/* Screens and photographs share simple, solid edges; the sky supplies texture. */
body[data-frames="screens"] #exhibition-motion .press-piece {
  background: #f7f9fa;
  border: 1px solid #82939e;
  border-radius: 7px;
  padding: 10px;
  box-shadow: 0 2px 4px #19354712;
}
body[data-frames="screens"] #exhibition-motion .press-piece > .paper-outline { display: none; }
body[data-frames="screens"] #exhibition-motion .press-piece img { border-radius: 2px; }
body[data-frames="screens"] #exhibition-motion .contact-cta {
  background: #f7f9fa;
  border: 1px solid #82939e;
  border-radius: 7px;
}
body[data-frames="screens"] #exhibition-motion .contact-cta .cta-paper { display: none; }
body[data-entrance="clouds"] #exhibition-motion .invitation-scroll {
  font-size: 14px;
  text-decoration: none;
  min-height: 44px;
}

/* Touch screens: the exhibition is its own scroller and the document stays
   still, so Safari's toolbar keeps one size. Safari clips position: fixed
   layers at the top of its toolbar and shows the page background below them,
   so the sky layers become absolute and extend past the bottom of the screen. */
html[data-scroll="inner"] {
  --overscan: 120px;
  overflow: hidden;
}
html[data-scroll="inner"] .page-sky,
html[data-scroll="inner"] .cloud-world {
  position: absolute;
  /* Fixed layers form stacking contexts; keep bank z-indexes inside this one. */
  isolation: isolate;
  bottom: auto;
  height: calc(100lvh + var(--overscan));
}
html[data-scroll="inner"] #exhibition-motion {
  position: absolute;
  inset: 0 0 auto;
  height: calc(100lvh + var(--overscan));
  overflow: hidden auto;
  overscroll-behavior: none;
}
html[data-scroll="inner"] #exhibition-motion .grid { height: 100%; }
html[data-scroll="inner"] #exhibition-motion .study {
  height: calc(100% + var(--journey-length, 0px));
  /* Artwork flying past the camera is transformed far outside the frame.
     Without a clip it adds to the scroll height and the page scrolls past
     the final call to action. clip, unlike hidden, is not a scroller. */
  overflow: clip;
}
html[data-scroll="inner"] #exhibition-motion .frame {
  position: sticky;
  inset: 0 auto auto;
  /* Safari 27 fills the area behind its toolbar with a flat color when a
     fixed or sticky box about the viewport's size touches the bottom edge.
     It skips boxes more than 5% taller than the viewport, so extend the
     transparent frame below the screen. */
  height: calc(100svh + var(--overscan));
}