/*
  Portfolio Other Works Exhibition
  Source order preserved from the final override region.
*/

/* 2026-06-02 07 other works v2: cinema hero, poster stage, exhibition scenes. */
#other-works.portfolio-other-works {
  --ow-stage-max: min(1680px, calc(100vw - 72px));
  --ow-gold: rgba(232, 211, 169, 0.88);
  --ow-gold-dim: rgba(232, 211, 169, 0.52);
  --ow-ink: rgba(255, 248, 232, 0.96);
  --ow-copy: rgba(247, 239, 225, 0.72);
  --ow-line: rgba(232, 211, 169, 0.18);
  scroll-margin-top: clamp(54px, 4.4vh, 96px);
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(232, 211, 169, 0.075), transparent 36%),
    linear-gradient(180deg, #050403, #010101 42%, #050403);
}

#other-works .portfolio-other-works__hero,
#other-works .portfolio-other-works__poster-stage,
#other-works .portfolio-other-works__light-table,
#other-works .portfolio-other-works__cinema-strips,
#other-works .portfolio-other-works__ai-wall,
#other-works .portfolio-other-works__thanks {
  position: relative;
  z-index: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
  height: auto !important;
  min-height: 100svh;
  padding: clamp(72px, 8vh, 118px) max(28px, calc((100vw - var(--page-wide)) / 2));
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

#other-works [data-other-scene] {
  --scene-y: 0px;
  --scene-spotlight: 0;
}

#other-works .portfolio-other-works__hero {
  align-content: center;
  justify-items: center;
  background:
    radial-gradient(ellipse at 50% 48%, rgba(232, 211, 169, 0.12), transparent 58%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.48), transparent 30%, rgba(0, 0, 0, 0.56));
}

#other-works .portfolio-other-works__hero::before,
#other-works .portfolio-other-works__poster-stage::before,
#other-works .portfolio-other-works__ai-wall::before,
#other-works .portfolio-other-works__thanks::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(232, 211, 169, 0.055), transparent 18%, transparent 82%, rgba(232, 211, 169, 0.04)),
    repeating-linear-gradient(90deg, transparent 0, transparent calc(16.666vw - 1px), rgba(232, 211, 169, 0.032) calc(16.666vw - 1px), rgba(232, 211, 169, 0.032) 16.666vw);
  opacity: 0.42;
  pointer-events: none;
}

#other-works .portfolio-other-works__hero-copy {
  position: absolute;
  left: max(28px, calc((100vw - var(--page-wide)) / 2));
  bottom: clamp(72px, 9vh, 132px);
  z-index: 3;
  width: min(620px, calc(100vw - 56px));
  padding-top: 18px;
  border-top: 1px solid rgba(232, 211, 169, 0.28);
}

#other-works .portfolio-other-works__hero-copy .portfolio-kicker,
#other-works .portfolio-other-works__scene-copy .portfolio-kicker,
#other-works .portfolio-other-works__finale-copy .portfolio-kicker,
#other-works .portfolio-other-works__thanks-copy .portfolio-kicker {
  margin: 0 0 12px;
  color: var(--ow-gold-dim);
  font-size: var(--type-caption);
  font-weight: var(--weight-nav);
  line-height: 1;
  letter-spacing: 0;
}

#other-works .portfolio-other-works__hero h2 {
  margin: 0;
  color: var(--ow-ink);
  font-size: clamp(4rem, 8vw, 9.6rem);
  font-weight: 570;
  line-height: 0.92;
  letter-spacing: 0;
  text-wrap: balance;
}

#other-works .portfolio-other-works__hero .portfolio-titleline {
  max-width: 42em !important;
  color: rgba(232, 211, 169, 0.86) !important;
}

#other-works .portfolio-other-works__hero .portfolio-subtitle {
  max-width: 38em !important;
  color: rgba(232, 211, 169, 0.74) !important;
}

#other-works .portfolio-other-works__hero-frame {
  position: relative;
  z-index: 1;
  width: min(100vw, 2360px);
  aspect-ratio: 235 / 100;
  margin: 0;
  overflow: hidden;
  border-top: 1px solid rgba(232, 211, 169, 0.2);
  border-bottom: 1px solid rgba(232, 211, 169, 0.16);
  background:
    linear-gradient(140deg, rgba(255, 248, 232, 0.08), rgba(255, 248, 232, 0.01)),
    rgba(12, 10, 7, 0.9);
  box-shadow:
    0 42px 140px rgba(0, 0, 0, 0.58),
    inset 0 1px 0 rgba(255, 248, 232, 0.06);
  transform: translate3d(0, var(--scene-y), 0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

#other-works .portfolio-other-works__hero-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.48), transparent 24%, transparent 68%, rgba(0, 0, 0, 0.34)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 34%, rgba(0, 0, 0, 0.36));
  pointer-events: none;
}

#other-works .portfolio-other-works__hero-frame img,
#other-works .portfolio-other-works__poster-card img,
#other-works .portfolio-other-works__light-media img,
#other-works .portfolio-other-works__strip-media img,
#other-works .portfolio-other-works__ai-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Exhibition-safe placeholders */
#other-works .portfolio-other-work__placeholder {
  grid-template-rows: 1fr auto auto 1fr;
  gap: clamp(8px, 0.75vw, 14px);
  background:
    radial-gradient(circle at 50% 32%, rgba(232, 211, 169, 0.1), transparent 38%),
    linear-gradient(145deg, rgba(255, 248, 232, 0.055), rgba(255, 248, 232, 0.006));
}

#other-works-posters .portfolio-other-work__placeholder {
  background:
    radial-gradient(circle at 50% 34%, rgba(232, 211, 169, 0.22), transparent 44%),
    linear-gradient(145deg, rgba(255, 248, 232, 0.13), rgba(255, 248, 232, 0.03));
}

#other-works .portfolio-other-work__placeholder::before,
#other-works .portfolio-other-work__placeholder::after {
  width: min(340px, 48%);
  background: linear-gradient(90deg, transparent, rgba(232, 211, 169, 0.26), transparent);
}

#other-works .portfolio-other-work__placeholder span,
#other-works .portfolio-other-works__ai-placeholder span {
  color: rgba(232, 211, 169, 0.56);
  font-size: var(--type-caption);
  font-weight: var(--weight-caption);
  line-height: 1.2;
}

#other-works .portfolio-other-work__placeholder strong {
  color: rgba(255, 248, 232, 0.9);
  font-size: var(--type-panel);
  font-weight: var(--weight-panel);
  line-height: 1;
}

#other-works .portfolio-other-work__placeholder em,
#other-works .portfolio-other-works__ai-placeholder em {
  max-width: none;
  color: rgba(247, 239, 225, 0.52);
  font-size: var(--type-caption);
  font-style: normal;
  font-weight: var(--weight-caption);
  line-height: 1.35;
  overflow-wrap: normal;
}

#other-works .portfolio-other-works__hero-label {
  position: absolute;
  right: max(28px, calc((100vw - var(--page-wide)) / 2));
  bottom: clamp(42px, 5vh, 82px);
  z-index: 3;
  display: grid;
  justify-items: end;
  gap: 8px;
  color: var(--ow-gold-dim);
  font-size: var(--type-caption);
  font-weight: var(--weight-caption);
  text-align: right;
}

#other-works .portfolio-other-works__hero-label strong {
  color: rgba(255, 248, 232, 0.9);
  font-size: var(--type-title);
  font-weight: var(--weight-title);
}

#other-works .portfolio-other-works__poster-stage {
  grid-template-rows: auto minmax(0, 1fr);
  gap: clamp(28px, 4vh, 56px);
  align-content: center;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(232, 211, 169, 0.16), transparent 47%),
    radial-gradient(ellipse at 14% 54%, rgba(232, 211, 169, 0.055), transparent 35%),
    radial-gradient(ellipse at 86% 54%, rgba(232, 211, 169, 0.048), transparent 35%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.34));
}

#other-works .portfolio-other-works__scene-copy,
#other-works .portfolio-other-works__finale-copy,
#other-works .portfolio-other-works__thanks-copy {
  position: relative;
  z-index: 4;
  width: min(680px, 100%);
}

#other-works .portfolio-other-works__scene-copy h3,
#other-works .portfolio-other-works__finale-copy h3,
#other-works .portfolio-other-works__thanks-copy h3 {
  margin: 0;
  color: var(--ow-ink);
  font-size: clamp(2rem, 4.2vw, 4.8rem);
  font-weight: 540;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

#other-works .portfolio-other-works__scene-copy p:not(.portfolio-kicker),
#other-works .portfolio-other-works__finale-copy p:not(.portfolio-kicker),
#other-works .portfolio-other-works__thanks-copy p:not(.portfolio-kicker) {
  max-width: 38em;
  margin: 12px 0 0;
  color: var(--ow-copy);
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: 1.68;
  text-wrap: pretty;
}

#other-works .portfolio-other-works__poster-viewport {
  --poster-caption-gap: clamp(18px, 2.2svh, 30px);
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  align-content: center;
  gap: var(--poster-caption-gap);
  min-height: min(68svh, 720px);
  outline: 1px solid transparent;
  outline-offset: 6px;
}

#other-works .portfolio-other-works__poster-viewport:focus-visible {
  outline-color: rgba(255, 248, 232, 0.86);
}

#other-works .portfolio-other-works__poster-rail {
  position: relative;
  block-size: clamp(430px, 50svh, 560px);
  min-height: 0;
  display: grid;
  place-items: center;
  perspective: 1200px;
  pointer-events: none;
}

#other-works .portfolio-other-works__poster-card {
  --poster-offset: 0;
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 1;
  width: clamp(240px, 20vw, 390px);
  aspect-ratio: 3 / 4;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 211, 169, 0.16);
  border-radius: 7px;
  background: rgba(12, 10, 7, 0.92);
  box-shadow:
    0 30px 82px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 248, 232, 0.05);
  opacity: 0.4;
  filter: brightness(0.78) saturate(0.92) blur(0.45px);
  transform:
    translate3d(-50%, -50%, 0)
    translateX(calc(var(--poster-offset) * clamp(132px, 15vw, 268px)))
    scale(0.76)
    rotateY(calc(var(--poster-offset) * -2deg));
  transition:
    opacity 560ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 560ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1),
    border-color 300ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, filter, opacity;
  pointer-events: none;
}

#other-works .portfolio-other-works__poster-card[data-poster-state="near"] {
  z-index: 2;
  opacity: 0.76;
  filter: brightness(0.94) saturate(0.96) blur(0);
  transform:
    translate3d(-50%, -50%, 0)
    translateX(calc(var(--poster-offset) * clamp(132px, 15vw, 268px)))
    scale(0.84)
    rotateY(calc(var(--poster-offset) * -1.4deg));
}

#other-works .portfolio-other-works__poster-card.is-active {
  z-index: 4;
  opacity: 1;
  border-color: rgba(232, 211, 169, 0.34);
  filter: brightness(1) saturate(0.98) blur(0);
  transform: translate3d(-50%, -50%, 0) translateX(0) scale(1) rotateY(0);
  box-shadow:
    0 44px 130px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(232, 211, 169, 0.08),
    inset 0 1px 0 rgba(255, 248, 232, 0.1);
}

#other-works .portfolio-other-works__poster-card[data-poster-state="hidden"] {
  z-index: 0;
  opacity: 0;
  filter: brightness(0.7) saturate(0.88) blur(1px);
}

#other-works .portfolio-other-works__poster-control {
  position: absolute;
  top: calc(48% - 52px);
  z-index: 7;
  display: grid;
  place-items: center;
  width: clamp(38px, 3.2vw, 48px);
  height: clamp(38px, 3.2vw, 48px);
  padding: 0;
  border: 1px solid rgba(232, 211, 169, 0.28);
  border-radius: 999px;
  color: rgba(255, 248, 232, 0.9);
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 248, 232, 0.14), transparent 46%),
    rgba(8, 7, 5, 0.74);
  box-shadow:
    0 18px 54px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 248, 232, 0.08);
  cursor: pointer;
  transform: translateY(-50%);
  pointer-events: auto;
  transition:
    border-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
  backdrop-filter: blur(12px);
}

#other-works .portfolio-other-works__poster-control--prev {
  left: calc(50% - clamp(120px, 10vw, 195px) - clamp(28px, 2.2vw, 36px) - clamp(38px, 3.2vw, 48px));
}

#other-works .portfolio-other-works__poster-control--next {
  right: calc(50% - clamp(120px, 10vw, 195px) - clamp(28px, 2.2vw, 36px) - clamp(38px, 3.2vw, 48px));
}

#other-works .portfolio-other-works__poster-control::before {
  content: "";
  width: 10px;
  height: 10px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: translateX(-1.5px) rotate(45deg);
}

#other-works .portfolio-other-works__poster-control--prev::before {
  transform: translateX(1.5px) rotate(-135deg);
}

@media (hover: hover) and (pointer: fine) {
  #other-works .portfolio-other-works__poster-control:hover {
    border-color: rgba(232, 211, 169, 0.52);
    color: rgba(255, 248, 232, 1);
    background:
      radial-gradient(circle at 50% 22%, rgba(255, 248, 232, 0.18), transparent 48%),
      rgba(15, 12, 8, 0.82);
    transform: translateY(-50%) scale(1.04);
  }
}

#other-works .portfolio-other-works__poster-control:active {
  transform: translateY(-50%) scale(0.96);
}

#other-works .portfolio-other-works__poster-control:focus-visible {
  outline: 1px solid rgba(255, 248, 232, 0.9);
  outline-offset: 4px;
}

#other-works .portfolio-other-works__pedestal {
  position: relative;
  left: auto;
  bottom: auto;
  z-index: 5;
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(520px, 100%);
  margin: 0 auto;
  min-height: clamp(58px, 6svh, 68px);
  padding: 6px 24px 0;
  color: var(--ow-copy);
  text-align: center;
  transform: none;
}

#other-works .portfolio-other-works__pedestal::before {
  content: "";
  width: min(360px, 76%);
  height: 1px;
  margin-bottom: 4px;
  background: linear-gradient(90deg, transparent, rgba(232, 211, 169, 0.46), transparent);
}

#other-works .portfolio-other-works__pedestal span {
  color: var(--ow-gold-dim);
  font-size: var(--type-caption);
  font-weight: var(--weight-caption);
}

#other-works .portfolio-other-works__pedestal strong {
  color: var(--ow-ink);
  font-size: var(--type-title);
  font-weight: 520;
}

#other-works .portfolio-other-works__pedestal p {
  margin: 0;
  font-size: var(--type-caption);
  font-weight: var(--weight-caption);
}

#other-works .portfolio-other-works__light-table,
#other-works .portfolio-other-works__cinema-strips {
  grid-template-rows: auto auto;
  gap: clamp(30px, 5vh, 72px);
  align-content: start;
}

#other-works .portfolio-other-works__light-table {
  grid-template-rows: auto auto auto;
  row-gap: clamp(22px, 3.6vh, 48px);
}

#other-works .portfolio-other-works__light-controls {
  position: relative;
  order: 3;
  right: auto;
  bottom: auto;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 0;
  margin-top: clamp(-22px, -1.8vh, -10px);
  margin-right: 0;
  padding: 5px;
  border: 1px solid rgba(232, 211, 169, 0.22);
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0.07), rgba(255, 248, 232, 0.018)),
    rgba(5, 7, 8, 0.78);
  box-shadow:
    0 16px 52px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 248, 232, 0.11);
  transform: translateX(calc((min(100vw, 1920px) / 2) - 50% - clamp(28px, 3vw, 72px)));
  backdrop-filter: blur(16px);
}

#other-works .portfolio-other-works__light-controls button,
#other-works .portfolio-other-works__light-controls output {
  min-width: 52px;
  height: 32px;
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--type-caption);
  font-weight: var(--weight-caption);
  line-height: 1;
}

#other-works .portfolio-other-works__light-controls button {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 10px;
  border: 0;
  border-right: 1px solid rgba(232, 211, 169, 0.12);
  color: rgba(247, 239, 225, 0.82);
  background: transparent;
  cursor: pointer;
  transition:
    background-color 180ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

#other-works .portfolio-other-works__light-controls button span {
  min-width: 0.8em;
  color: rgba(232, 211, 169, 0.9);
  font-size: 1rem;
  font-weight: 520;
}

#other-works .portfolio-other-works__light-controls button b {
  font: inherit;
  letter-spacing: 0;
}

#other-works .portfolio-other-works__light-controls button:hover {
  color: rgba(255, 248, 232, 0.96);
  background: rgba(255, 248, 232, 0.075);
}

#other-works .portfolio-other-works__light-controls button:focus-visible {
  outline: 1px solid rgba(255, 248, 232, 0.9);
  outline-offset: 3px;
}

#other-works .portfolio-other-works__light-controls button:disabled {
  cursor: default;
  opacity: 0.38;
}

#other-works .portfolio-other-works__light-controls output {
  display: inline-grid;
  place-items: center;
  min-width: 50px;
  padding: 0 8px;
  color: rgba(232, 211, 169, 0.62);
}

#other-works .portfolio-other-works__light-viewport {
  position: relative;
  order: 2;
  width: min(100vw, 1920px);
  max-width: 100vw;
  justify-self: center;
  overflow: hidden;
}

#other-works .portfolio-other-works__light-viewport::before,
#other-works .portfolio-other-works__light-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: clamp(28px, 4.8vw, 96px);
  pointer-events: none;
}

#other-works .portfolio-other-works__light-viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgba(5, 4, 3, 0.84), rgba(5, 4, 3, 0.26) 58%, rgba(5, 4, 3, 0));
}

#other-works .portfolio-other-works__light-viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgba(5, 4, 3, 0.84), rgba(5, 4, 3, 0.26) 58%, rgba(5, 4, 3, 0));
}

#other-works .portfolio-other-works__light-deck {
  --light-loop-distance: 0px;
  --light-loop-duration: 1s;
  --light-loop-delay: 0s;
  display: flex;
  gap: clamp(18px, 2vw, 32px);
  width: max-content;
  max-width: none;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

#other-works .portfolio-other-works__light-deck.is-running {
  animation: portfolioOtherWorksLightLoop var(--light-loop-duration) linear infinite;
  animation-delay: var(--light-loop-delay);
}

#other-works .portfolio-other-works__light-deck.is-paused {
  animation-play-state: paused;
}

#other-works .portfolio-other-works__light-set {
  display: flex;
  flex: 0 0 auto;
  gap: clamp(18px, 2vw, 32px);
}

@keyframes portfolioOtherWorksLightLoop {
  to {
    transform: translate3d(calc(var(--light-loop-distance) * -1), 0, 0);
  }
}

#other-works .portfolio-other-works__light-card {
  flex: 0 0 clamp(420px, 44vw, 1040px);
  display: grid;
  gap: 14px;
  margin: 0;
  opacity: 0.78;
  filter: brightness(0.78) saturate(0.9);
  transition:
    opacity 420ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

#other-works .portfolio-other-works__light-card:nth-child(2n) {
  opacity: 0.96;
  filter: brightness(0.96) saturate(0.96);
}

#other-works .portfolio-other-works__light-media,
#other-works .portfolio-other-works__strip-media {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 211, 169, 0.16);
  border-radius: 7px;
  background:
    linear-gradient(140deg, rgba(255, 248, 232, 0.075), rgba(255, 248, 232, 0.012)),
    rgba(12, 10, 7, 0.88);
  box-shadow:
    0 30px 92px rgba(0, 0, 0, 0.44),
    inset 0 1px 0 rgba(255, 248, 232, 0.06);
}

#other-works .portfolio-other-works__light-media {
  aspect-ratio: 16 / 9;
}

#other-works .portfolio-other-works__light-card div,
#other-works .portfolio-other-works__strip div {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  color: var(--ow-copy);
}

#other-works .portfolio-other-works__light-card span,
#other-works .portfolio-other-works__strip span {
  color: var(--ow-gold-dim);
  font-size: var(--type-caption);
}

#other-works .portfolio-other-works__light-card strong,
#other-works .portfolio-other-works__strip strong {
  margin-left: auto;
  color: var(--ow-ink);
  font-size: var(--type-caption);
  font-weight: var(--weight-title);
  text-align: right;
}

#other-works .portfolio-other-works__light-card strong {
  color: rgba(255, 248, 232, 0.82);
  font-size: clamp(0.72rem, 0.64vw, 0.88rem);
  font-weight: 420;
  line-height: 1.45;
}

#other-works .portfolio-other-works__strip-stack {
  display: grid;
  grid-template-columns: minmax(0, 100vw);
  gap: clamp(22px, 4vh, 48px);
  width: calc(100vw - 32px);
  margin-inline: calc(50% - 50vw + 16px);
  justify-self: center;
  overflow: visible;
}

#other-works .portfolio-other-works__strip {
  --strip-shift: 0px;
  display: grid;
  gap: 12px;
  width: min(76vw, 1560px);
  max-width: none;
  margin: 0;
  transform: translate3d(var(--strip-shift), calc(var(--scene-y) * 0.45), 0);
  transition:
    transform 520ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

#other-works .portfolio-other-works__strip--left {
  justify-self: start;
}

#other-works .portfolio-other-works__strip--right {
  justify-self: end;
}

#other-works .portfolio-other-works__strip-media {
  aspect-ratio: 235 / 100;
}

#other-works .portfolio-other-works__strip-media::after,
#other-works .portfolio-other-works__light-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, calc(0.24 - var(--scene-spotlight, 0) * 0.1)), rgba(0, 0, 0, calc(0.42 - var(--scene-spotlight, 0) * 0.16))),
    linear-gradient(90deg, rgba(232, 211, 169, 0.06), transparent 28%, transparent 72%, rgba(232, 211, 169, 0.04));
  pointer-events: none;
}

#other-works .portfolio-other-works__ai-wall {
  min-height: clamp(1520px, 184svh, 2440px);
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: clamp(26px, 4.2vh, 64px);
  background:
    radial-gradient(ellipse at 16% 20%, rgba(122, 89, 61, 0.2), transparent 30%),
    radial-gradient(ellipse at 86% 44%, rgba(63, 93, 88, 0.16), transparent 32%),
    radial-gradient(ellipse at 48% 68%, rgba(232, 211, 169, calc(0.08 + var(--scene-spotlight, 0) * 0.08)), transparent 40%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.86));
}

#other-works .portfolio-other-works__ai-grid {
  --ai-columns: 12;
  --ai-gutters: 11;
  --ai-gap: clamp(4px, 0.34vw, 8px);
  --ai-grid-width: min(var(--ow-stage-max), calc(100vw - clamp(40px, 6vw, 96px)));
  --ai-col: calc((var(--ai-grid-width) - (var(--ai-gutters) * var(--ai-gap))) / var(--ai-columns));
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--ai-columns), minmax(0, 1fr));
  grid-auto-flow: row;
  grid-auto-rows: calc((var(--ai-col) * 0.72) - (var(--ai-gap) * 0.16));
  gap: var(--ai-gap);
  width: var(--ai-grid-width);
  padding-block: clamp(7px, 0.58vw, 12px);
  border-top: 1px solid rgba(232, 211, 169, 0.24);
  border-bottom: 1px solid rgba(232, 211, 169, 0.2);
  justify-self: center;
  align-items: stretch;
  transform: translate3d(0, calc(var(--scene-y) * 0.34), 0);
  transition: transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 2600px) {
  #other-works .portfolio-other-works__ai-grid {
    --ai-gap: clamp(6px, 0.28vw, 10px);
    --ai-grid-width: min(2600px, calc(100vw - 280px));
  }
}

@media (min-width: 1800px) and (max-width: 2599px) {
  #other-works .portfolio-other-works__ai-grid {
    --ai-gap: clamp(5px, 0.3vw, 9px);
    --ai-grid-width: min(2080px, calc(100vw - 128px));
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #other-works .portfolio-other-works__ai-grid {
    --ai-columns: 12;
    --ai-gutters: 11;
    --ai-gap: clamp(3px, 0.44vw, 6px);
    --ai-grid-width: calc(100vw - 56px);
  }
}

#other-works .portfolio-other-works__ai-card {
  --ai-card-opacity: 0.94;
  --ai-card-brightness: 0.92;
  --ai-card-saturate: 0.96;
  --masonry-x: 0px;
  --masonry-y: 0px;
  --masonry-rotate: 0deg;
  --masonry-scale: 1;
  --masonry-hover-scale: 1;
  --masonry-opacity: 1;
  --masonry-blur: 0px;
  --masonry-delay: 0ms;
  --masonry-duration: 860ms;
  position: relative;
  display: grid;
  grid-column: var(--ai-col-start) / span var(--ai-col-span);
  grid-row: var(--ai-row-start) / span var(--ai-row-span);
  min-height: 0;
  margin: 0;
  opacity: calc(var(--ai-card-opacity) * var(--masonry-opacity));
  filter:
    brightness(var(--ai-card-brightness))
    saturate(var(--ai-card-saturate))
    blur(var(--masonry-blur));
  transform:
    translate3d(var(--masonry-x), var(--masonry-y), 0)
    rotate(var(--masonry-rotate))
    scale(calc(var(--masonry-scale) * var(--masonry-hover-scale)));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--masonry-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--masonry-delay),
    filter var(--masonry-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--masonry-delay),
    transform var(--masonry-duration) cubic-bezier(0.16, 1, 0.3, 1) var(--masonry-delay);
}

#other-works .portfolio-other-works__ai-card.is-featured {
  --ai-card-opacity: 1;
  --ai-card-brightness: 1;
  --ai-card-saturate: 1;
}

#other-works .portfolio-other-works__ai-card figure {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(232, 211, 169, 0.18);
  background:
    radial-gradient(circle at 50% 28%, var(--ai-tone-a, rgba(232, 211, 169, 0.2)), transparent 42%),
    linear-gradient(145deg, var(--ai-tone-b, rgba(24, 20, 15, 0.96)), rgba(2, 2, 2, 0.96));
  box-shadow:
    0 24px 76px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 248, 232, 0.1);
}

#other-works .portfolio-other-works__ai-card.is-featured figure {
  border-color: rgba(232, 211, 169, 0.28);
  box-shadow:
    0 32px 104px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(232, 211, 169, 0.06),
    inset 0 1px 0 rgba(255, 248, 232, 0.12);
}

#other-works .portfolio-other-works__ai-card img {
  filter: brightness(0.98) contrast(1.03) saturate(0.96);
}

#other-works .portfolio-other-works__ai-card figure::before,
#other-works .portfolio-other-works__ai-card figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

#other-works .portfolio-other-works__ai-card figure::before {
  background:
    linear-gradient(140deg, rgba(255, 248, 232, 0.08), transparent 36%),
    radial-gradient(ellipse at 62% 18%, rgba(255, 248, 232, 0.1), transparent 22%),
    linear-gradient(180deg, transparent 58%, rgba(0, 0, 0, 0.2));
  mix-blend-mode: screen;
  opacity: 0.44;
}

#other-works .portfolio-other-works__ai-card figure::after {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 28%, transparent 76%, rgba(0, 0, 0, 0.2)),
    linear-gradient(180deg, rgba(0, 0, 0, 0.1), transparent 36%, rgba(0, 0, 0, 0.24));
}

#other-works .portfolio-other-works__ai-placeholder {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: end;
  gap: 6px;
  padding: clamp(10px, 1.1vw, 18px);
  color: rgba(255, 248, 232, 0.78);
}

#other-works .portfolio-other-works__ai-card > span {
  color: rgba(232, 211, 169, 0.48);
  font-size: var(--type-micro);
  font-weight: var(--weight-caption);
  line-height: 1;
}

#other-works .portfolio-other-works__ai-placeholder strong {
  color: rgba(255, 248, 232, 0.88);
  font-size: var(--type-title);
  font-weight: var(--weight-title);
  line-height: 1.04;
}

#other-works .portfolio-other-works__ai-card > span {
  position: absolute;
  left: clamp(9px, 0.8vw, 14px);
  top: clamp(9px, 0.8vw, 14px);
  z-index: 4;
  opacity: 0.34;
}

#other-works .portfolio-other-works__ai-card figure.is-placeholder + span {
  display: none;
}

/* 2026-06-08: remove slot-top numbering labels across Other Works. */
#other-works .portfolio-other-work__placeholder > span,
#other-works .portfolio-other-works__ai-placeholder > span,
#other-works .portfolio-other-works__ai-card > span {
  display: none !important;
}

#other-works .portfolio-other-works__ai-card--pearl {
  --ai-tone-a: rgba(235, 231, 218, 0.28);
  --ai-tone-b: rgba(38, 34, 28, 0.96);
}

#other-works .portfolio-other-works__ai-card--gold {
  --ai-tone-a: rgba(232, 211, 169, 0.34);
  --ai-tone-b: rgba(43, 32, 17, 0.96);
}

#other-works .portfolio-other-works__ai-card--copper {
  --ai-tone-a: rgba(177, 102, 74, 0.28);
  --ai-tone-b: rgba(36, 20, 16, 0.96);
}

#other-works .portfolio-other-works__ai-card--rose {
  --ai-tone-a: rgba(183, 105, 123, 0.24);
  --ai-tone-b: rgba(33, 18, 24, 0.96);
}

#other-works .portfolio-other-works__ai-card--jade {
  --ai-tone-a: rgba(93, 148, 128, 0.24);
  --ai-tone-b: rgba(13, 31, 27, 0.96);
}

#other-works .portfolio-other-works__ai-card--mineral {
  --ai-tone-a: rgba(96, 132, 151, 0.24);
  --ai-tone-b: rgba(16, 26, 34, 0.96);
}

#other-works .portfolio-other-works__ai-card--carbon {
  --ai-tone-a: rgba(176, 176, 164, 0.18);
  --ai-tone-b: rgba(10, 10, 10, 0.98);
}

#other-works .portfolio-other-works__ai-card--obsidian {
  --ai-tone-a: rgba(232, 211, 169, 0.18);
  --ai-tone-b: rgba(5, 4, 3, 0.98);
}

/* T-153: keep the archive title above the image wall; the wall itself is image-only again. */
#other-works .portfolio-other-works__ai-wall {
  grid-template-rows: auto auto;
  align-content: start;
  gap: clamp(34px, 4.4vh, 68px);
  padding-top: clamp(96px, 10vh, 142px);
}

#other-works .portfolio-other-works__ai-wall > .portfolio-other-works__finale-copy {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  justify-self: center;
  width: min(var(--ow-stage-max), calc(100vw - clamp(40px, 6vw, 96px)));
  max-width: min(var(--ow-stage-max), calc(100vw - clamp(40px, 6vw, 96px)));
  margin: 0;
  text-align: center;
  transform: translate3d(0, calc(var(--scene-y) * -0.1), 0);
}

@media (min-width: 2600px) {
  #other-works .portfolio-other-works__ai-wall > .portfolio-other-works__finale-copy {
    width: min(2600px, calc(100vw - 280px));
    max-width: min(2600px, calc(100vw - 280px));
  }
}

@media (min-width: 1800px) and (max-width: 2599px) {
  #other-works .portfolio-other-works__ai-wall > .portfolio-other-works__finale-copy {
    width: min(2080px, calc(100vw - 128px));
    max-width: min(2080px, calc(100vw - 128px));
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #other-works .portfolio-other-works__ai-wall > .portfolio-other-works__finale-copy {
    width: calc(100vw - 56px);
    max-width: calc(100vw - 56px);
  }
}

#other-works .portfolio-other-works__thanks {
  place-items: center;
  min-height: 100svh;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(232, 211, 169, 0.1), transparent 34%),
    radial-gradient(ellipse at 62% 56%, rgba(72, 99, 91, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(5, 4, 3, 0.8), #010101 62%, #050403);
}

#other-works .portfolio-other-works__thanks::after {
  content: "THANK YOU";
  position: absolute;
  left: 50%;
  top: calc(50% + clamp(72px, 8.4vh, 122px));
  z-index: -1;
  color: rgba(232, 211, 169, 0.05);
  font-size: clamp(8rem, 20vw, 28.5rem);
  font-weight: 560;
  line-height: 0.82;
  white-space: nowrap;
  transform: translate3d(-50%, 0, 0);
  pointer-events: none;
}

#other-works .portfolio-other-works__thanks-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  width: min(860px, 100%);
  text-align: center;
  transform: translate3d(-50%, -50%, 0);
}

#other-works .portfolio-other-works__thanks-copy h3 {
  width: auto;
  font-size: clamp(4.6rem, 9vw, 10.8rem);
  font-weight: 560;
  line-height: 0.92;
}

#other-works .portfolio-other-works__thanks-signature {
  position: absolute;
  right: max(42px, calc((100vw - var(--page-wide)) / 2));
  bottom: clamp(42px, 6.2vh, 88px);
  z-index: 4;
  display: grid;
  justify-items: end;
  gap: 12px;
  color: rgba(247, 239, 225, 0.36);
  font-size: clamp(0.78rem, 0.64vw, 0.92rem);
  font-weight: 360;
  line-height: 1.18;
  letter-spacing: 0;
  text-align: right;
}

#other-works .portfolio-other-works__thanks-signature::before {
  content: "";
  display: block;
  width: clamp(74px, 7.2vw, 124px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 211, 169, 0.26));
}

#other-works .portfolio-other-works__thanks-signature span {
  display: block;
  white-space: nowrap;
}

@media (hover: hover) and (pointer: fine) {
  #other-works .portfolio-other-works__ai-card:hover {
    --ai-card-opacity: 1;
    --ai-card-brightness: 1.07;
    --ai-card-saturate: 1.04;
    --masonry-hover-scale: 1;
  }

  #other-works .portfolio-other-works__ai-card:hover figure {
    border-color: rgba(232, 211, 169, 0.46);
    box-shadow:
      0 30px 92px rgba(0, 0, 0, 0.42),
      0 0 0 1px rgba(232, 211, 169, 0.1),
      0 0 34px rgba(217, 180, 108, 0.16),
      inset 0 1px 0 rgba(255, 248, 232, 0.16);
  }

  #other-works .portfolio-other-works__ai-card:hover figure::before {
    opacity: 0.68;
  }

  #other-works .portfolio-other-works__ai-card:hover > span {
    opacity: 0.78;
  }
}

@media (max-width: 900px) {
  #other-works.portfolio-other-works {
    --ow-stage-max: calc(100vw - 36px);
  }

  #other-works .portfolio-other-works__hero,
  #other-works .portfolio-other-works__poster-stage,
  #other-works .portfolio-other-works__light-table,
  #other-works .portfolio-other-works__cinema-strips,
  #other-works .portfolio-other-works__ai-wall {
    min-height: auto;
    padding: 84px 18px 64px;
    overflow: visible;
  }

  #other-works .portfolio-other-works__hero {
    min-height: 100svh;
    align-content: center;
    gap: 22px;
  }

  #other-works .portfolio-other-works__hero-copy,
  #other-works .portfolio-other-works__hero-label {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    justify-self: stretch;
    text-align: left;
  }

  #other-works .portfolio-other-works__hero-copy {
    order: 1;
  }

  #other-works .portfolio-other-works__hero-frame {
    order: 2;
    width: 100%;
    transform: none !important;
  }

  #other-works .portfolio-other-works__hero-label {
    order: 3;
    justify-items: start;
  }

  #other-works .portfolio-other-works__hero h2 {
    font-size: clamp(3.1rem, 17vw, 5.8rem);
  }

  #other-works .portfolio-other-works__poster-viewport {
    --poster-caption-gap: 16px;
    min-height: auto;
  }

  #other-works .portfolio-other-works__poster-rail {
    position: relative;
    inset: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    block-size: auto;
    gap: 12px;
    perspective: none;
  }

  #other-works .portfolio-other-works__poster-card,
  #other-works .portfolio-other-works__poster-card[data-poster-state="near"],
  #other-works .portfolio-other-works__poster-card.is-active {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    opacity: 1;
    filter: brightness(0.9) saturate(0.94);
    transform: none !important;
    will-change: auto;
  }

  #other-works .portfolio-other-works__pedestal {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: 0;
    transform: none;
  }

  #other-works .portfolio-other-works__poster-control {
    display: none;
  }

  #other-works .portfolio-other-works__light-controls {
    position: relative;
    right: auto;
    bottom: auto;
    justify-self: start;
    margin-top: -2px;
    margin-right: 0;
    transform: none;
    flex-wrap: wrap;
    max-width: 100%;
  }

  #other-works .portfolio-other-works__light-viewport {
    width: 100%;
    overflow: visible;
  }

  #other-works .portfolio-other-works__light-deck {
    display: grid;
    width: 100%;
    gap: 22px;
    transform: none !important;
    will-change: auto;
  }

  #other-works .portfolio-other-works__light-set {
    display: grid;
    gap: 22px;
    width: 100%;
  }

  #other-works .portfolio-other-works__light-card {
    width: 100%;
    flex-basis: auto;
    opacity: 1;
    filter: brightness(0.92) saturate(0.94);
  }

  #other-works .portfolio-other-works__light-set--clone {
    display: none;
  }

  #other-works .portfolio-other-works__strip-stack {
    width: 100%;
  }

  #other-works .portfolio-other-works__strip {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    transform: none !important;
    will-change: auto;
  }

  #other-works .portfolio-other-works__ai-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    width: 100%;
    gap: 12px;
    transform: none !important;
  }

  #other-works .portfolio-other-works__ai-card,
  #other-works .portfolio-other-works__ai-card--portrait45,
  #other-works .portfolio-other-works__ai-card--poster,
  #other-works .portfolio-other-works__ai-card--square,
  #other-works .portfolio-other-works__ai-card--landscape,
  #other-works .portfolio-other-works__ai-card--vertical916 {
    grid-column: 1 / -1;
    grid-row: auto;
    opacity: 0.9;
    filter: brightness(0.86) saturate(0.92);
    transform: none !important;
    will-change: auto;
  }

  #other-works .portfolio-other-works__ai-card:nth-child(n) {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #other-works .portfolio-other-works__ai-card figure {
    height: auto;
    min-height: auto;
  }

  #other-works .portfolio-other-works__ai-card--portrait45 figure {
    aspect-ratio: 4 / 5;
  }

  #other-works .portfolio-other-works__ai-card--poster figure {
    aspect-ratio: 3 / 4;
  }

  #other-works .portfolio-other-works__ai-card--square figure {
    aspect-ratio: 1 / 1;
  }

  #other-works .portfolio-other-works__ai-card--landscape figure {
    aspect-ratio: 16 / 9;
  }

  #other-works .portfolio-other-works__ai-card--vertical916 figure {
    aspect-ratio: 9 / 16;
  }
}

@media (max-width: 430px) {
  #other-works .portfolio-other-works__poster-rail,
  #other-works .portfolio-other-works__ai-grid {
    gap: 10px;
  }

  #other-works .portfolio-other-works__scene-copy h3,
  #other-works .portfolio-other-works__finale-copy h3 {
    font-size: clamp(1.8rem, 10vw, 3rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  #other-works [data-other-scene],
  #other-works .portfolio-other-works__hero-frame,
  #other-works .portfolio-other-works__poster-card,
  #other-works .portfolio-other-works__light-card,
  #other-works .portfolio-other-works__light-deck,
  #other-works .portfolio-other-works__strip,
  #other-works .portfolio-other-works__ai-grid,
  #other-works .portfolio-other-works__ai-card {
    transform: none !important;
    filter: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }

  #other-works .portfolio-other-works__poster-card:not(.is-active) {
    opacity: 0 !important;
    pointer-events: none;
  }

  #other-works .portfolio-other-works__light-set--clone {
    display: none !important;
  }
}

/* T-174: restore the material-studies carousel as a full-bleed horizontal stage. */
@media (min-width: 901px) {
  #other-works .portfolio-other-works__light-viewport {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
  }

  #other-works .portfolio-other-works__light-deck,
  #other-works .portfolio-other-works__light-set {
    gap: clamp(22px, 2.2vw, 44px);
  }

  #other-works .portfolio-other-works__light-card {
    flex-basis: clamp(680px, 56vw, 1680px);
  }

  #other-works .portfolio-other-works__light-controls {
    transform: translateX(calc((100vw / 2) - 50% - clamp(28px, 3vw, 72px)));
  }
}

/* T-175: restrained closing sequence for the final thanks screen. */
#other-works .portfolio-other-works__thanks::before {
  content: none;
  display: none;
}

#other-works .portfolio-other-works__thanks::after {
  opacity: 1;
  will-change: opacity, transform, filter;
}

#other-works .portfolio-other-works__thanks-copy h3,
#other-works .portfolio-other-works__thanks-signature {
  will-change: opacity, transform, filter;
}

#other-works .portfolio-other-works__thanks.is-in-view::after {
  animation: portfolioThanksEnglishIn 920ms cubic-bezier(0.16, 1, 0.3, 1) 520ms both;
}

#other-works .portfolio-other-works__thanks.is-in-view .portfolio-other-works__thanks-copy h3 {
  animation: portfolioThanksChineseIn 680ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}

#other-works .portfolio-other-works__thanks.is-in-view .portfolio-other-works__thanks-signature {
  animation: portfolioThanksSignatureIn 640ms cubic-bezier(0.16, 1, 0.3, 1) 980ms both;
}

@keyframes portfolioThanksChineseIn {
  from {
    opacity: 0;
    filter: blur(8px);
    transform: translate3d(0, 12px, 0);
  }

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

@keyframes portfolioThanksEnglishIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(-50%, 18px, 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes portfolioThanksSignatureIn {
  from {
    opacity: 0;
    filter: blur(5px);
    transform: translate3d(0, 8px, 0);
  }

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

@media (prefers-reduced-motion: reduce) {
  #other-works .portfolio-other-works__thanks::after,
  #other-works .portfolio-other-works__thanks-copy h3,
  #other-works .portfolio-other-works__thanks-signature {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  #other-works .portfolio-other-works__thanks::after {
    transform: translate3d(-50%, 0, 0) !important;
  }
}

/* T-260: thanks screen split out from GAO DESIGN into final About closing. */
#about-thanks.portfolio-about-thanks {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 44%, rgba(232, 211, 169, 0.1), transparent 34%),
    radial-gradient(ellipse at 62% 56%, rgba(72, 99, 91, 0.12), transparent 38%),
    linear-gradient(180deg, rgba(5, 4, 3, 0.8), #010101 62%, #050403);
  isolation: isolate;
}

#about-thanks.portfolio-about-thanks::before {
  content: none;
  display: none;
}

#about-thanks.portfolio-about-thanks::after {
  content: "THANK YOU";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  color: rgba(232, 211, 169, 0.05);
  font-size: clamp(8rem, 20vw, 28.5rem);
  font-weight: 560;
  line-height: 0.82;
  white-space: nowrap;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
  will-change: opacity, transform, filter;
}

#about-thanks .portfolio-other-works__thanks-copy {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 4;
  display: grid;
  justify-items: center;
  width: min(860px, 100%);
  text-align: center;
  transform: translate3d(-50%, -50%, 0);
}

#about-thanks .portfolio-other-works__thanks-copy h3 {
  width: auto;
  font-size: clamp(4.6rem, 9vw, 10.8rem);
  font-weight: 560;
  line-height: 0.92;
  will-change: opacity, transform, filter;
}

#about-thanks .portfolio-other-works__thanks-signature {
  position: absolute;
  right: max(42px, calc((100vw - var(--page-wide)) / 2));
  bottom: clamp(42px, 6.2vh, 88px);
  z-index: 4;
  display: grid;
  justify-items: end;
  gap: 12px;
  color: rgba(247, 239, 225, 0.36);
  font-size: clamp(0.78rem, 0.64vw, 0.92rem);
  font-weight: 360;
  line-height: 1.18;
  letter-spacing: 0;
  text-align: right;
  will-change: opacity, transform, filter;
}

#about-thanks .portfolio-other-works__thanks-signature::before {
  content: "";
  display: block;
  width: clamp(74px, 7.2vw, 124px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 211, 169, 0.26));
}

#about-thanks .portfolio-other-works__thanks-signature span {
  display: block;
  white-space: nowrap;
}

#about-thanks.portfolio-about-thanks.is-in-view::after {
  animation: portfolioAboutThanksEnglishIn 920ms cubic-bezier(0.16, 1, 0.3, 1) 520ms both;
}

#about-thanks.portfolio-about-thanks.is-in-view .portfolio-other-works__thanks-copy h3 {
  animation: portfolioThanksChineseIn 680ms cubic-bezier(0.16, 1, 0.3, 1) 90ms both;
}

#about-thanks.portfolio-about-thanks.is-in-view .portfolio-other-works__thanks-signature {
  animation: portfolioThanksSignatureIn 640ms cubic-bezier(0.16, 1, 0.3, 1) 980ms both;
}

@keyframes portfolioAboutThanksEnglishIn {
  from {
    opacity: 0;
    filter: blur(10px);
    transform: translate3d(-50%, calc(-50% + 18px), 0);
  }

  to {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(-50%, -50%, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #about-thanks.portfolio-about-thanks::after,
  #about-thanks .portfolio-other-works__thanks-copy h3,
  #about-thanks .portfolio-other-works__thanks-signature {
    animation: none !important;
    filter: none !important;
    transform: none !important;
  }

  #about-thanks.portfolio-about-thanks::after {
    transform: translate3d(-50%, -50%, 0) !important;
  }
}

/* T-193: material-studies content returns to the canonical frame. */
@media (min-width: 901px) {
  #other-works .portfolio-other-works__light-table {
    width: var(--page-standard) !important;
    max-width: var(--page-standard) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    justify-content: stretch !important;
    justify-items: stretch !important;
  }

  #other-works .portfolio-other-works__light-viewport {
    width: var(--page-standard) !important;
    max-width: var(--page-standard) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #other-works .portfolio-other-works__light-deck,
  #other-works .portfolio-other-works__light-set {
    gap: clamp(18px, 1.55vw, 32px) !important;
  }

  #other-works .portfolio-other-works__light-card {
    flex-basis: clamp(620px, 42vw, 1120px) !important;
  }

  #other-works .portfolio-other-works__light-controls {
    transform: none !important;
  }
}

/* T-212: reserve GAO DESIGN image heights before lazy media decode. */
#other-works .portfolio-other-works__ai-card figure {
  aspect-ratio: 16 / 9;
}

#other-works .portfolio-other-works__ai-card--portrait45 figure {
  aspect-ratio: 4 / 5;
}

#other-works .portfolio-other-works__ai-card--poster figure {
  aspect-ratio: 3 / 4;
}

#other-works .portfolio-other-works__ai-card--square figure {
  aspect-ratio: 1 / 1;
}

#other-works .portfolio-other-works__ai-card--landscape figure {
  aspect-ratio: 16 / 9;
}

#other-works .portfolio-other-works__ai-card--vertical916 figure {
  aspect-ratio: 9 / 16;
}

@media (min-width: 901px) {
  #other-works .portfolio-other-works__ai-card figure {
    aspect-ratio: auto;
  }
}

/* T-213: PC frame reset for GAO DESIGN exhibition modules. */
@media (min-width: 901px) {
  #other-works.portfolio-other-works {
    --ow-stage-max: var(--page-standard);
  }

  #other-works .portfolio-other-works__hero-frame,
  #other-works .portfolio-other-works__light-table,
  #other-works .portfolio-other-works__light-viewport,
  #other-works .portfolio-other-works__ai-grid,
  #other-works .portfolio-other-works__ai-wall > .portfolio-other-works__finale-copy {
    width: var(--page-standard) !important;
    max-width: var(--page-standard) !important;
  }

  #other-works .portfolio-other-works__ai-grid {
    --ai-grid-width: var(--page-standard) !important;
  }
}

/* T-242: make the GAO poster rail read as layered cards instead of a spread-out carousel. */
@media (min-width: 901px) {
  #other-works .portfolio-other-works__poster-rail {
    isolation: isolate;
  }

  #other-works .portfolio-other-works__poster-card {
    z-index: 0;
    opacity: 0;
    filter: brightness(0.54) saturate(0.82) blur(0.8px);
    transform:
      translate3d(-50%, -50%, -96px)
      translateX(calc(var(--poster-offset) * clamp(54px, 4.9vw, 92px)))
      scale(0.7)
      rotateY(calc(var(--poster-offset) * -4deg));
  }

  #other-works .portfolio-other-works__poster-card[data-poster-state="near"] {
    z-index: 3;
    opacity: 0.58;
    filter: brightness(0.72) saturate(0.9) blur(0.18px);
    transform:
      translate3d(-50%, -50%, -34px)
      translateX(calc(var(--poster-offset) * clamp(76px, 6.2vw, 118px)))
      scale(0.88)
      rotateY(calc(var(--poster-offset) * -3deg));
  }

  #other-works .portfolio-other-works__poster-card[data-poster-state="far"] {
    z-index: 1;
    opacity: 0.22;
    filter: brightness(0.55) saturate(0.84) blur(0.7px);
    transform:
      translate3d(-50%, -50%, -88px)
      translateX(calc(var(--poster-offset) * clamp(54px, 4.9vw, 92px)))
      scale(0.72)
      rotateY(calc(var(--poster-offset) * -4deg));
  }

  #other-works .portfolio-other-works__poster-card.is-active {
    z-index: 5;
    opacity: 1;
    filter: brightness(1) saturate(0.98) blur(0);
    transform: translate3d(-50%, -50%, 0) translateX(0) scale(1) rotateY(0);
  }

  #other-works .portfolio-other-works__poster-card[data-poster-state="hidden"] {
    z-index: 0;
    opacity: 0;
  }
}

/* T-243: tune the GAO archive wall row height to the declared image ratios. */
@media (min-width: 901px) {
  #other-works .portfolio-other-works__ai-grid {
    grid-auto-rows: calc((var(--ai-col) * 0.753) - (var(--ai-gap) * 0.16));
  }
}

/* T-251: widen poster gallery to a seven-card exhibition band and restore material-story brightness. */
@media (min-width: 901px) {
  #other-works #other-works-posters .portfolio-other-works__poster-viewport,
  #other-works #other-works-posters .portfolio-other-works__poster-rail {
    width: var(--ow-gallery-wide, min(1920px, calc(100vw - clamp(72px, 5vw, 128px)))) !important;
    max-width: var(--ow-gallery-wide, min(1920px, calc(100vw - clamp(72px, 5vw, 128px)))) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-viewport {
    --poster-caption-gap: clamp(14px, 1.8svh, 24px);
    align-self: start;
    align-content: start;
    min-height: 0;
    height: clamp(590px, 56svh, 720px);
  }

  #other-works .portfolio-other-works__poster-rail {
    isolation: isolate;
    block-size: clamp(360px, 40svh, 480px);
  }

  #other-works .portfolio-other-works__poster-card {
    width: clamp(230px, 15vw, 360px);
    z-index: 0;
    opacity: 0;
    filter: brightness(0.64) saturate(0.86) blur(0.7px);
    transform:
      translate3d(-50%, -50%, -110px)
      translateX(calc(var(--poster-offset) * clamp(176px, 9vw, 230px)))
      scale(0.58)
      rotateY(calc(var(--poster-offset) * -2.8deg));
  }

  #other-works .portfolio-other-works__poster-card[data-poster-state="outer"] {
    z-index: 1;
    opacity: 0.34;
    filter: brightness(0.68) saturate(0.88) blur(0.48px);
    transform:
      translate3d(-50%, -50%, -88px)
      translateX(calc(var(--poster-offset) * clamp(176px, 9vw, 230px)))
      scale(0.62)
      rotateY(calc(var(--poster-offset) * -2.4deg));
  }

  #other-works .portfolio-other-works__poster-card[data-poster-state="far"] {
    z-index: 2;
    opacity: 0.56;
    filter: brightness(0.78) saturate(0.9) blur(0.28px);
    transform:
      translate3d(-50%, -50%, -54px)
      translateX(calc(var(--poster-offset) * clamp(176px, 9vw, 230px)))
      scale(0.72)
      rotateY(calc(var(--poster-offset) * -1.9deg));
  }

  #other-works .portfolio-other-works__poster-card[data-poster-state="near"] {
    z-index: 3;
    opacity: 0.82;
    filter: brightness(0.9) saturate(0.94) blur(0.08px);
    transform:
      translate3d(-50%, -50%, -24px)
      translateX(calc(var(--poster-offset) * clamp(176px, 9vw, 230px)))
      scale(0.84)
      rotateY(calc(var(--poster-offset) * -1.2deg));
  }

  #other-works .portfolio-other-works__poster-card.is-active {
    z-index: 5;
    opacity: 1;
    filter: brightness(1) saturate(0.98) blur(0);
    transform: translate3d(-50%, -50%, 0) translateX(0) scale(1) rotateY(0);
  }

  #other-works .portfolio-other-works__poster-card[data-poster-state="hidden"] {
    z-index: 0;
    opacity: 0;
    filter: brightness(0.62) saturate(0.84) blur(0.8px);
  }

  #other-works #other-works-light-table .portfolio-other-works__scene-copy {
    justify-self: start !important;
    width: var(--page-standard, var(--page-wide)) !important;
    max-width: var(--page-standard, var(--page-wide)) !important;
    margin-inline-start: calc((100% - var(--page-standard, var(--page-wide))) / 2 + 7px) !important;
    margin-inline-end: auto !important;
  }

  #other-works #other-works-light-table .portfolio-other-works__light-card,
  #other-works #other-works-light-table .portfolio-other-works__light-card:nth-child(2n) {
    opacity: 1;
    filter: brightness(1) saturate(1);
  }

  #other-works #other-works-light-table .portfolio-other-works__light-card img {
    filter: none !important;
  }
}

/* T-266: let the poster gallery content use the same wide exhibition band as material story. */
@media (min-width: 901px) {
  #other-works #other-works-posters {
    row-gap: clamp(24px, 3svh, 42px);
  }

  #other-works #other-works-posters .portfolio-other-works__scene-copy {
    justify-self: start !important;
    width: var(--page-standard, var(--page-wide)) !important;
    max-width: var(--page-standard, var(--page-wide)) !important;
    margin-inline-start: calc((100% - var(--page-standard, var(--page-wide))) / 2 + 7px) !important;
    margin-inline-end: auto !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-viewport,
  #other-works #other-works-posters .portfolio-other-works__poster-rail {
    justify-self: center !important;
    width: var(--ow-gallery-wide, min(1920px, calc(100vw - clamp(72px, 5vw, 128px)))) !important;
    max-width: var(--ow-gallery-wide, min(1920px, calc(100vw - clamp(72px, 5vw, 128px)))) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-viewport {
    --poster-caption-gap: clamp(12px, 1.35svh, 20px);
    height: clamp(610px, 58svh, 750px);
    align-content: center;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-rail {
    block-size: clamp(405px, 42svh, 520px);
  }

  #other-works #other-works-posters .portfolio-other-works__poster-card {
    width: clamp(250px, 14.1vw, 350px);
    transform:
      translate3d(-50%, -50%, -120px)
      translateX(calc(var(--poster-offset) * clamp(220px, 11.4vw, 286px)))
      scale(0.78)
      rotateY(calc(var(--poster-offset) * -2.4deg));
  }

  #other-works #other-works-posters .portfolio-other-works__poster-card[data-poster-state="outer"] {
    opacity: 0.32;
    filter: brightness(0.64) saturate(0.86) blur(0.46px);
    transform:
      translate3d(-50%, -50%, -86px)
      translateX(calc(var(--poster-offset) * clamp(220px, 11.4vw, 286px)))
      scale(0.82)
      rotateY(calc(var(--poster-offset) * -2deg));
  }

  #other-works #other-works-posters .portfolio-other-works__poster-card[data-poster-state="far"] {
    opacity: 0.52;
    filter: brightness(0.76) saturate(0.9) blur(0.24px);
    transform:
      translate3d(-50%, -50%, -52px)
      translateX(calc(var(--poster-offset) * clamp(220px, 11.4vw, 286px)))
      scale(0.88)
      rotateY(calc(var(--poster-offset) * -1.55deg));
  }

  #other-works #other-works-posters .portfolio-other-works__poster-card[data-poster-state="near"] {
    opacity: 0.8;
    filter: brightness(0.9) saturate(0.94) blur(0.06px);
    transform:
      translate3d(-50%, -50%, -22px)
      translateX(calc(var(--poster-offset) * clamp(220px, 11.4vw, 286px)))
      scale(0.94)
      rotateY(calc(var(--poster-offset) * -1deg));
  }

  #other-works #other-works-posters .portfolio-other-works__poster-card.is-active {
    width: clamp(270px, 15.35vw, 370px);
    transform: translate3d(-50%, -50%, 0) translateX(0) scale(1) rotateY(0);
  }
}

/* T-268: recenter GAO exhibition pages as full-screen modules. */
@media (min-width: 901px) {
  #other-works #other-works-posters,
  #other-works #other-works-light-table {
    min-height: 100svh !important;
    padding-top: clamp(96px, 8.2svh, 128px) !important;
    padding-bottom: clamp(96px, 8.2svh, 128px) !important;
    align-content: center !important;
  }

  #other-works #other-works-posters {
    grid-template-rows: auto auto !important;
    row-gap: clamp(54px, 5.2svh, 78px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-viewport {
    align-self: center !important;
    align-content: center !important;
    height: clamp(640px, 60svh, 760px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-rail {
    block-size: clamp(430px, 43svh, 540px) !important;
  }

  #other-works #other-works-light-table {
    grid-template-rows: auto auto auto !important;
    row-gap: clamp(28px, 3svh, 42px) !important;
  }

  #other-works #other-works-light-table .portfolio-other-works__scene-copy,
  #other-works #other-works-posters .portfolio-other-works__scene-copy {
    align-self: end !important;
  }

  #other-works #other-works-light-table .portfolio-other-works__light-viewport {
    align-self: center !important;
  }

  #other-works #other-works-light-table .portfolio-other-works__light-controls {
    margin-top: clamp(-12px, -0.8svh, -6px) !important;
  }
}

/* T-269: give the archive wall and final thanks screen their closing scale. */
@media (min-width: 901px) {
  #other-works #other-works-wall.portfolio-other-works__ai-wall {
    min-height: clamp(1780px, 218svh, 2920px) !important;
    padding-top: clamp(132px, 12svh, 190px) !important;
    padding-bottom: clamp(156px, 13.5svh, 230px) !important;
    gap: clamp(58px, 5.2svh, 86px) !important;
  }

  #other-works #other-works-wall .portfolio-other-works__ai-grid {
    --ai-gap: clamp(7px, 0.42vw, 12px) !important;
    grid-auto-rows: calc((var(--ai-col) * 0.82) - (var(--ai-gap) * 0.12)) !important;
    padding-block: clamp(11px, 0.8vw, 18px) !important;
  }

  #about-thanks .portfolio-other-works__thanks-copy > p.portfolio-titleline.portfolio-titleline--main {
    display: none !important;
  }

  #about-thanks .portfolio-other-works__thanks-copy h3.portfolio-main-title {
    font-size: clamp(7.2rem, 13.2vw, 17.5rem) !important;
    font-weight: 570 !important;
    line-height: 0.86 !important;
  }
}

/* T-270: lock the final Chinese thanks title to the page center. */
#about-thanks .portfolio-other-works__thanks-copy {
  left: 50% !important;
  width: 100vw !important;
  max-width: 100vw !important;
  justify-items: center !important;
  text-align: center !important;
  transform: translate3d(-50%, -50%, 0) !important;
}

#about-thanks .portfolio-other-works__thanks-copy h3.portfolio-main-title {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin-inline: auto !important;
  padding-inline: clamp(32px, 4vw, 96px) !important;
  text-align: center !important;
  text-wrap: nowrap !important;
}

/* T-282: reduce the final Chinese thanks title by 15% while preserving center lock. */
#about-thanks .portfolio-other-works__thanks-copy h3.portfolio-main-title {
  font-size: clamp(6.12rem, 11.22vw, 14.875rem) !important;
}

/* T-299: pause GAO DESIGN continuous motion when the relevant scene is offscreen. */
#other-works #other-works-posters.is-motion-paused .portfolio-other-works__poster-card,
#other-works #other-works-light-table.is-motion-paused .portfolio-other-works__light-deck,
#other-works #other-works-light-table.is-motion-paused .portfolio-other-works__light-card {
  animation-play-state: paused !important;
}

/* T-310: bring poster gallery heading slightly closer to the exhibition band. */
@media (min-width: 901px) {
  #other-works #other-works-posters {
    row-gap: clamp(36px, 3.8svh, 58px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__scene-copy {
    transform: translate3d(0, clamp(18px, 2svh, 30px), 0) !important;
  }
}