:root {
  color-scheme: dark;
  --background: #020202;
  --foreground: #eeeeeb;
  --muted: #989895;
  --line: rgba(255, 255, 255, 0.2);
  --gutter: clamp(24px, 2.2vw, 42px);
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 250ms;
  --motion-medium: 450ms;
  --motion-slow: 700ms;
  --ease-cinema: var(--motion-ease-out);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: #020202;
}

body {
  position: fixed;
  inset: 0;
  color: var(--foreground);
  font-family: "Helvetica Neue", Helvetica, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  touch-action: none;
}

button {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit;
  font: inherit;
  background: transparent;
  cursor: pointer;
}

button:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 5px;
}

button.is-programmatic-focus:focus {
  outline: none;
}

button:disabled {
  cursor: default;
}

img {
  display: block;
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

.app {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--background);
  color: var(--foreground);
  isolation: isolate;
  transition: background-color 360ms ease, color 360ms ease;
}

.app::after {
  position: absolute;
  z-index: 100;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.2;
  background:
    radial-gradient(circle at 50% 45%, transparent 0, transparent 52%, rgba(0, 0, 0, 0.18) 100%),
    linear-gradient(115deg, rgba(255, 255, 255, 0.012), transparent 42%);
}

.app[data-theme="light"] {
  color-scheme: light;
  --background: #f2f0eb;
  --foreground: #171716;
  --muted: #66635e;
  --line: rgba(18, 18, 17, 0.22);
}

.site-header {
  position: absolute;
  z-index: 90;
  top: max(24px, env(safe-area-inset-top));
  right: var(--gutter);
  left: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  pointer-events: none;
}

.site-name {
  font-size: clamp(15px, 1.25vw, 20px);
  font-weight: 400;
  letter-spacing: 0.015em;
  pointer-events: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: clamp(22px, 2.4vw, 42px);
  pointer-events: auto;
}

.locale-switcher {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.15vw, 20px);
  color: #8d8d8a;
  font-size: 11px;
  letter-spacing: 0.025em;
}

.locale-switcher button {
  position: relative;
  min-width: 28px;
  min-height: 44px;
  transition: color 160ms ease, opacity 160ms ease;
}

.locale-switcher button::after {
  position: absolute;
  right: 2px;
  bottom: 8px;
  left: 2px;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.55);
  transition: opacity 160ms ease, transform 160ms ease;
}

.locale-switcher button:hover,
.locale-switcher button[aria-pressed="true"] {
  color: var(--foreground);
}

.locale-switcher button[aria-pressed="true"]::after {
  opacity: 0.75;
  transform: scaleX(1);
}

.detail-close {
  width: 44px;
  height: 44px;
  margin-right: -12px;
  font-size: 31px;
  font-weight: 200;
  line-height: 1;
  pointer-events: auto;
  transition: opacity 180ms ease;
}

.detail-close:hover {
  opacity: 0.56;
}

.viewport,
.viewer-shell,
.detail-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.viewer-shell {
  background: #020202;
  opacity: 1;
  transition: opacity 240ms var(--motion-ease-out);
}

.viewer-shell.is-detail-hidden {
  opacity: 0;
  pointer-events: none;
}

.viewer-shell.is-detail-returning {
  pointer-events: none;
  transition-duration: 320ms;
}

.portfolio-viewport {
  position: absolute;
  z-index: 10;
  top: 9.5vh;
  right: 0;
  bottom: 16.5vh;
  left: 0;
  overflow: visible;
}

.project-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  width: max-content;
  height: 100%;
  gap: clamp(48px, 4vw, 80px);
  opacity: 0;
  will-change: transform;
  transform: translateX(0);
  transition: opacity 440ms ease;
}

.viewer-shell.is-ready .project-track {
  opacity: 1;
}

.project-item {
  --project-opacity: 0.28;
  --project-scale: 0.8;
  --caption-collage-bottom: 90%;
  --caption-inline-start: 0%;
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  height: 100%;
  min-width: 230px;
  min-height: 44px;
  opacity: var(--project-opacity);
  transform: scale(var(--project-scale));
  transform-origin: center center;
}

.project-item[aria-current="true"] {
  z-index: 14;
}

.project-item.is-hovered,
.project-item:focus-visible {
  z-index: 20;
}

.project-item--wide {
  width: clamp(350px, 30vw, 460px);
}

.project-item--medium {
  width: clamp(285px, 23vw, 360px);
}

.project-item--narrow {
  width: clamp(245px, 20vw, 310px);
}

.project-item:focus-visible {
  outline-color: rgba(255, 255, 255, 0.68);
  outline-offset: 10px;
}

.project-composition {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.project-frame {
  position: absolute;
  display: block;
  overflow: hidden;
  background: #080808;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.3);
}

.project-frame img {
  width: 100%;
  height: 100%;
  opacity: 0;
  object-fit: cover;
  user-select: none;
  transition: opacity 180ms ease-out;
}

.project-frame img.is-ready {
  opacity: 1;
}

.project-item[aria-current="true"] .project-frame {
  box-shadow: 0 20px 58px rgba(0, 0, 0, 0.4);
}

.project-hover-meta {
  position: absolute;
  z-index: 30;
  top: calc(var(--caption-collage-bottom) + 16px);
  left: var(--caption-inline-start);
  display: none;
  width: min(92%, 300px);
  max-width: 300px;
  color: var(--foreground);
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease-out;
}

.project-hover-title,
.project-hover-details {
  display: block;
}

.project-hover-title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: 0;
  text-wrap: pretty;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.project-hover-details {
  margin-top: 4px;
  color: rgba(242, 242, 242, 0.62);
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.025em;
}

.project-item[data-layout="0"] .project-frame[data-frame="0"] {
  z-index: 5;
  top: 21%;
  left: 12%;
  width: 76%;
  height: 57%;
}

.project-item[data-layout="0"] {
  --caption-collage-bottom: 78%;
  --caption-inline-start: 0%;
}

.project-item[data-layout="0"] .project-frame[data-frame="1"] {
  z-index: 2;
  top: 11%;
  left: 0;
  width: 41%;
  height: 47%;
}

.project-item[data-layout="0"] .project-frame[data-frame="2"] {
  z-index: 4;
  top: 36%;
  right: 0;
  width: 35%;
  height: 42%;
}

.project-item[data-layout="1"] .project-frame[data-frame="0"] {
  z-index: 4;
  top: 17%;
  left: 5%;
  width: 70%;
  height: 65%;
}

.project-item[data-layout="1"] {
  --caption-collage-bottom: 88%;
  --caption-inline-start: 5%;
}

.project-item[data-layout="1"] .project-frame[data-frame="1"] {
  z-index: 5;
  top: 9%;
  right: 0;
  width: 47%;
  height: 47%;
}

.project-item[data-layout="1"] .project-frame[data-frame="2"] {
  z-index: 3;
  right: 7%;
  bottom: 12%;
  width: 46%;
  height: 38%;
}

.project-item[data-layout="2"] .project-frame[data-frame="0"] {
  z-index: 4;
  top: 13%;
  left: 12%;
  width: 74%;
  height: 70%;
}

.project-item[data-layout="2"] {
  --caption-collage-bottom: 90%;
  --caption-inline-start: 0%;
}

.project-item[data-layout="2"] .project-frame[data-frame="1"] {
  z-index: 2;
  top: 6%;
  left: 0;
  width: 42%;
  height: 40%;
}

.project-item[data-layout="2"] .project-frame[data-frame="2"] {
  z-index: 5;
  right: 0;
  bottom: 10%;
  width: 43%;
  height: 44%;
}

.project-item[data-layout="3"] .project-frame[data-frame="0"] {
  z-index: 5;
  top: 24%;
  left: 0;
  width: 78%;
  height: 54%;
}

.project-item[data-layout="3"] {
  --caption-collage-bottom: 90%;
  --caption-inline-start: 0%;
}

.project-item[data-layout="3"] .project-frame[data-frame="1"] {
  z-index: 3;
  top: 9%;
  right: 0;
  width: 55%;
  height: 43%;
}

.project-item[data-layout="3"] .project-frame[data-frame="2"] {
  z-index: 4;
  right: 5%;
  bottom: 10%;
  width: 57%;
  height: 40%;
}

.project-meta,
.view-details {
  position: absolute;
  z-index: 40;
  bottom: max(30px, 4.1vh);
  opacity: 0;
  transform: translateY(7px);
  transition: opacity 420ms ease 180ms, transform 520ms var(--ease-cinema) 180ms;
}

.viewer-shell.is-ready .project-meta,
.viewer-shell.is-ready .view-details {
  opacity: 1;
  transform: translateY(0);
}

.project-meta {
  display: none;
  left: var(--gutter);
  max-width: min(58vw, 560px);
}

.project-meta h1,
.detail-meta h1 {
  margin: 0;
  font-size: clamp(24px, 2.05vw, 34px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.project-meta p,
.detail-meta p {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75;
}

.view-details {
  right: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 144px;
  min-height: 44px;
  gap: 18px;
  color: #c6c6c3;
  font-size: 11px;
  letter-spacing: 0.025em;
}

.view-details span:last-child {
  font-size: 17px;
  transition: transform 240ms ease;
}

.view-details:hover span:last-child,
.view-details:focus-visible span:last-child {
  transform: translate(3px, -3px);
}

.detail-shell {
  opacity: 0;
  background: var(--background);
  pointer-events: none;
  transform: translate3d(0, 6px, 0);
  transition:
    opacity 340ms var(--motion-ease-out),
    transform 340ms var(--motion-ease-out);
}

.detail-shell.is-ready {
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(0, 0, 0);
}

.detail-shell.is-closing {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 4px, 0);
  transition-duration: 300ms;
}

.detail-meta {
  position: absolute;
  z-index: 20;
  top: 17vh;
  left: var(--gutter);
  width: 17vw;
  max-width: 245px;
}

.detail-meta h1 {
  font-size: clamp(22px, 1.75vw, 30px);
}

.detail-content {
  position: absolute;
  z-index: 10;
  top: 11.5vh;
  right: 6.5vw;
  bottom: 13.5vh;
  left: 22vw;
  overflow: hidden;
  background: var(--background);
  opacity: 1;
  isolation: isolate;
}

.section-motion-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--background);
  will-change: opacity, transform;
}

.section-motion-layer--outgoing {
  z-index: 1;
  pointer-events: none;
}

.section-motion-layer--incoming {
  z-index: 2;
  opacity: 0;
  transform: translate3d(0, 6px, 0);
}

.detail-tabs {
  position: absolute;
  z-index: 30;
  right: 6.5vw;
  bottom: max(22px, 3.2vh);
  left: 22vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
}

.detail-tabs button {
  position: relative;
  min-width: 74px;
  min-height: 44px;
  padding: 0 8px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.025em;
  transition: color var(--motion-fast) var(--motion-ease-out);
}

.detail-tabs button::after {
  position: absolute;
  right: 9px;
  bottom: 3px;
  left: 9px;
  height: 1px;
  content: "";
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity var(--motion-fast) var(--motion-ease-out), transform var(--motion-fast) var(--motion-ease-out);
}

.detail-tabs button[aria-selected="true"] {
  color: var(--foreground);
}

.detail-tabs button[aria-selected="true"]::after {
  opacity: 1;
  transform: scaleX(1);
}

.film-frame,
.text-image-layout,
.stills-layout,
.process-board,
.series-layout,
.credits-layout {
  width: 100%;
  height: 100%;
  margin: 0;
}

.film-frame {
  position: relative;
}

.film-frame--youtube,
.film-frame--video,
.film-frame--invalid {
  display: grid;
  place-items: center;
  background: #000;
}

.film-media {
  width: 100%;
  max-height: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #000;
}

.film-media iframe,
.film-media video {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.film-media video {
  object-fit: contain;
  object-position: center;
}

.film-media--invalid {
  display: grid;
  place-items: center;
}

.film-media--invalid p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.04em;
}

.film-frame > img,
.film-frame > video {
  width: 100%;
  height: calc(100% - 28px);
  object-fit: cover;
  border: 1px solid var(--line);
}

.section-empty,
.empty-portfolio {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.04em;
}

.film-frame figcaption {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 28px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.text-image-layout {
  display: grid;
  grid-template-columns: minmax(210px, 0.72fr) minmax(360px, 1.28fr);
  gap: clamp(40px, 6vw, 110px);
  align-items: center;
}

.section-copy {
  max-width: 365px;
}

.section-kicker {
  margin: 0 0 26px !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.04em;
}

.section-copy blockquote {
  max-width: 350px;
  margin: 0 0 32px;
  font-size: clamp(20px, 1.65vw, 29px);
  font-weight: 400;
  line-height: 1.22;
  letter-spacing: -0.018em;
}

.section-copy > p:last-child {
  max-width: 340px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
  white-space: pre-line;
}

.text-image-layout figure {
  width: 100%;
  height: 86%;
  margin: 0;
  overflow: hidden;
}

.text-image-layout img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stills-layout {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) 54px;
  gap: clamp(12px, 2vw, 30px);
  align-items: center;
}

.still-arrow {
  width: 44px;
  height: 44px;
  font-size: 25px;
  font-weight: 200;
  transition: opacity 180ms ease, transform 180ms ease;
}

.still-arrow:not(:disabled):hover {
  transform: translateX(-3px);
}

.still-arrow--next:not(:disabled):hover {
  transform: translateX(3px);
}

.still-arrow:disabled {
  opacity: 0.18;
}

.still-frame {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 25px;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.stills-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
  isolation: isolate;
}

.stills-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  opacity: 1;
  pointer-events: none;
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: center center;
  will-change: opacity, transform;
  transition: opacity 440ms var(--motion-ease-out), transform 500ms var(--motion-ease-out);
}

.stills-image--current {
  z-index: 1;
}

.stills-image--incoming {
  z-index: 2;
  opacity: 0;
}

.stills-image--incoming[data-direction="next"] {
  transform: translate3d(20px, 0, 0) scale(1.015);
}

.stills-image--incoming[data-direction="previous"] {
  transform: translate3d(-20px, 0, 0) scale(1.015);
}

.stills-image--incoming.is-entering {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.stills-image--current.is-exiting {
  opacity: 0;
}

.stills-image--current.is-exiting[data-direction="next"] {
  transform: translate3d(-20px, 0, 0) scale(0.985);
}

.stills-image--current.is-exiting[data-direction="previous"] {
  transform: translate3d(20px, 0, 0) scale(0.985);
}

.still-frame figcaption {
  height: 25px;
  padding-top: 8px;
  color: var(--muted);
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.05em;
}

.still-count {
  opacity: 1;
  transition: opacity 180ms ease;
}

.still-count.is-updating {
  opacity: 0;
}

.series-layout figure {
  margin: 0;
  overflow: hidden;
}

.series-layout img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.process-board {
  position: relative;
  isolation: isolate;
}

.process-board-item {
  position: absolute;
  display: block;
  overflow: hidden;
  background: #050505;
  cursor: zoom-in;
  opacity: 0.94;
  transition: opacity 320ms var(--motion-ease-out), transform 320ms var(--motion-ease-out);
}

.process-board-item img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.process-board-item:nth-child(1) {
  z-index: 3;
  top: 18%;
  left: 5%;
  width: 36%;
  height: 55%;
}

.process-board-item:nth-child(2) {
  z-index: 2;
  top: 3%;
  left: 43%;
  width: 28%;
  height: 37%;
}

.process-board-item:nth-child(3) {
  z-index: 4;
  top: 25%;
  right: 2%;
  width: 31%;
  height: 44%;
}

.process-board-item:nth-child(4) {
  z-index: 6;
  bottom: 0;
  left: 32%;
  width: 37%;
  height: 47%;
}

.process-board-item:nth-child(5) {
  z-index: 5;
  bottom: 2%;
  left: 0;
  width: 25%;
  height: 29%;
}

.process-board-item:nth-child(6) {
  z-index: 7;
  right: 0;
  bottom: 0;
  width: 24%;
  height: 29%;
}

.process-board-item:nth-child(7) {
  z-index: 4;
  top: 48%;
  right: 0;
  width: 21%;
  height: 25%;
}

.process-board-item:nth-child(8) {
  z-index: 5;
  bottom: 0;
  left: 48%;
  width: 28%;
  height: 27%;
}

.process-board-item:nth-child(9) {
  z-index: 8;
  right: 2%;
  bottom: 1%;
  width: 18%;
  height: 20%;
}

.process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(1) {
  top: 15%;
  left: 2%;
  width: 28%;
  height: 34%;
}

.process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(2) {
  top: 1%;
  left: 30%;
  width: 18%;
  height: 25%;
}

.process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(3) {
  top: 12%;
  right: 2%;
  width: 27%;
  height: 34%;
}

.process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(4) {
  top: 27%;
  bottom: auto;
  left: 33%;
  width: 38%;
  height: 48%;
}

.process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(5) {
  bottom: 14%;
  left: 0;
  width: 20%;
  height: 24%;
}

.process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(6) {
  right: auto;
  bottom: 0;
  left: 20%;
  width: 27%;
  height: 31%;
}

.process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(7) {
  top: 50%;
  right: 0;
  width: 21%;
  height: 25%;
}

.process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(8) {
  bottom: 0;
  left: 50%;
  width: 27%;
  height: 27%;
}

.process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(9) {
  right: 2%;
  bottom: 2%;
  width: 18%;
  height: 19%;
}

.process-board[data-process-count="1"] .process-board-item:nth-child(1) {
  top: 7%;
  left: 10%;
  width: 80%;
  height: 86%;
}

.process-board[data-process-count="2"] .process-board-item:nth-child(1) {
  top: 10%;
  left: 7%;
  width: 52%;
  height: 72%;
}

.process-board[data-process-count="2"] .process-board-item:nth-child(2) {
  top: auto;
  right: 5%;
  bottom: 6%;
  left: auto;
  width: 43%;
  height: 55%;
}

.process-board[data-process-count="3"] .process-board-item:nth-child(1) {
  top: 18%;
  left: 3%;
  width: 43%;
  height: 64%;
}

.process-board[data-process-count="3"] .process-board-item:nth-child(2) {
  top: 3%;
  left: 45%;
  width: 31%;
  height: 39%;
}

.process-board[data-process-count="3"] .process-board-item:nth-child(3) {
  top: auto;
  right: 0;
  bottom: 3%;
  width: 40%;
  height: 54%;
}

@media (hover: hover) and (pointer: fine) {
  .project-hover-meta {
    display: block;
  }

  .project-item.is-hovered .project-hover-meta,
  .project-item:focus-visible .project-hover-meta {
    opacity: 1;
  }

  .process-board:hover .process-board-item {
    opacity: 0.72;
  }

  .process-board .process-board-item:hover,
  .process-board .process-board-item:focus-visible {
    z-index: 30;
    opacity: 1;
    transform: translateY(-6px) scale(1.025);
  }
}

.process-viewer {
  position: fixed;
  z-index: 140;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.96);
  cursor: zoom-out;
  outline: none;
  opacity: 0;
  touch-action: none;
  transition: opacity 600ms var(--motion-ease-out);
}

.process-viewer.is-ready {
  opacity: 1;
}

.process-viewer.is-leaving {
  opacity: 0;
  transition-duration: 600ms;
}

.process-viewer-frame {
  display: grid;
  place-items: center;
  width: 100vw;
  height: 100dvh;
  margin: 0;
  opacity: 1;
  transition: opacity 120ms ease-out;
  pointer-events: none;
}

.process-viewer-frame.is-changing {
  opacity: 0;
}

.process-viewer-frame img {
  width: auto;
  height: auto;
  max-width: 88vw;
  max-height: 88dvh;
  object-fit: contain !important;
  object-position: center !important;
}

.shared-media-transition {
  position: fixed;
  z-index: 170;
  overflow: hidden;
  background: #000;
  pointer-events: none;
  transform-origin: top left;
  will-change: transform, opacity;
}

.shared-media-transition img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.is-motion-source,
.is-motion-target {
  opacity: 0 !important;
}

.is-motion-target {
  pointer-events: none !important;
}

.series-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.25fr 0.82fr;
  gap: clamp(14px, 2.2vw, 40px);
  align-items: center;
  padding: 2vh 0;
}

.series-layout figure {
  height: 60%;
}

.series-layout figure[data-series-slot="1"] {
  height: 90%;
}

.series-layout figure[data-series-slot="0"] img {
  object-position: 12% center;
}

.series-layout figure[data-series-slot="2"] img {
  object-position: 88% center;
}

.credits-layout {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  max-width: 640px;
  padding-left: min(9vw, 140px);
}

.credits-layout dl {
  width: min(100%, 520px);
  margin: 0;
}

img[data-fit="cover"],
video[data-fit="cover"] {
  object-fit: cover !important;
}

img[data-fit="contain"],
video[data-fit="contain"] {
  object-fit: contain !important;
  object-position: center !important;
}

.credits-layout dl div {
  display: grid;
  grid-template-columns: minmax(130px, 0.75fr) 1fr;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.credits-layout dt,
.credits-layout dd {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 17px);
  font-weight: 400;
}

.credits-layout dt {
  color: var(--muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.noscript-message {
  position: fixed;
  z-index: 200;
  right: 24px;
  bottom: 24px;
  left: 24px;
  margin: 0;
  color: #ddd;
  text-align: center;
}

@media (max-width: 760px) {
  :root {
    --gutter: max(18px, calc(env(safe-area-inset-left) + 14px));
  }

  .site-header {
    top: max(14px, env(safe-area-inset-top));
    height: 42px;
  }

  .site-name {
    font-size: 14px;
  }

  .header-actions {
    gap: 10px;
  }

  .locale-switcher {
    gap: 2px;
    font-size: 9px;
  }

  .locale-switcher button {
    min-width: 27px;
    min-height: 44px;
  }

  .detail-close {
    margin-right: -10px;
    font-size: 28px;
  }

  .portfolio-viewport {
    top: 10.5vh;
    bottom: 18.5vh;
  }

  .project-track {
    gap: 10vw;
  }

  .project-item--wide {
    width: min(76vw, 330px);
  }

  .project-item--medium {
    width: min(66vw, 290px);
  }

  .project-item--narrow {
    width: min(60vw, 265px);
  }

  .project-meta,
  .view-details {
    bottom: max(18px, calc(env(safe-area-inset-bottom) + 13px));
  }

  .project-meta {
    display: block;
    max-width: 62vw;
  }

  .project-meta h1 {
    font-size: clamp(20px, 6vw, 26px);
    line-height: 1.05;
  }

  .project-meta p {
    margin-top: 8px;
    font-size: 10px;
    line-height: 1.55;
  }

  .view-details {
    min-width: 118px;
    min-height: 44px;
    gap: 10px;
    font-size: 9px;
  }

  .detail-meta {
    top: 10.5vh;
    right: 5vw;
    left: 5vw;
    width: auto;
    max-width: none;
  }

  .detail-meta h1 {
    max-width: 67vw;
    font-size: clamp(18px, 5.4vw, 23px);
  }

  .detail-meta p {
    margin-top: 7px;
    font-size: 9px;
    line-height: 1.45;
  }

  .detail-content {
    top: 20vh;
    right: 5vw;
    bottom: 15vh;
    left: 5vw;
  }

  .detail-tabs {
    right: 3vw;
    bottom: max(9px, calc(env(safe-area-inset-bottom) + 5px));
    left: 3vw;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    min-height: 42px;
  }

  .detail-tabs button {
    min-width: 0;
    min-height: 42px;
    padding: 0 3px;
    font-size: clamp(8px, 2.35vw, 10px);
  }

  .detail-tabs button::after {
    right: 5px;
    left: 5px;
  }

  .film-frame > img,
  .film-frame > video {
    height: calc(100% - 23px);
  }

  .film-frame figcaption {
    height: 23px;
    font-size: 8px;
  }

  .text-image-layout {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
  }

  .section-copy {
    max-width: none;
  }

  .section-kicker {
    margin-bottom: 10px !important;
    font-size: 8px !important;
  }

  .section-copy blockquote {
    max-width: 92%;
    margin-bottom: 12px;
    font-size: clamp(17px, 5vw, 22px);
  }

  .section-copy > p:last-child {
    max-width: 96%;
    font-size: 10px;
    line-height: 1.5;
  }

  .text-image-layout figure {
    height: 100%;
    min-height: 0;
  }

  .stills-layout {
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    gap: 3px;
  }

  .still-arrow {
    width: 38px;
    height: 44px;
    font-size: 21px;
  }

  .process-board-item:nth-child(1) {
    top: 2%;
    bottom: auto;
    left: 0;
    right: auto;
    width: 58%;
    height: 48%;
  }

  .process-board-item:nth-child(2) {
    top: 5%;
    right: 0;
    bottom: auto;
    left: auto;
    width: 41%;
    height: 33%;
  }

  .process-board-item:nth-child(3) {
    top: 34%;
    right: 2%;
    bottom: auto;
    left: auto;
    width: 53%;
    height: 42%;
  }

  .process-board-item:nth-child(4) {
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    width: 45%;
    height: 35%;
  }

  .process-board-item:nth-child(5) {
    top: auto;
    right: 0;
    bottom: 1%;
    left: auto;
    width: 42%;
    height: 28%;
  }

  .process-board-item:nth-child(6) {
    top: 43%;
    right: auto;
    bottom: auto;
    left: 24%;
    width: 33%;
    height: 27%;
  }

  .process-board-item:nth-child(7) {
    top: 54%;
    right: 0;
    bottom: auto;
    left: auto;
    width: 31%;
    height: 25%;
  }

  .process-board-item:nth-child(8) {
    top: auto;
    right: auto;
    bottom: 3%;
    left: 49%;
    width: 36%;
    height: 24%;
  }

  .process-board-item:nth-child(9) {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    width: 24%;
    height: 18%;
  }

  .process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(1) {
    top: 8%;
    left: 0;
    width: 44%;
    height: 31%;
  }

  .process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(2) {
    top: 1%;
    right: auto;
    left: 38%;
    width: 29%;
    height: 20%;
  }

  .process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(3) {
    top: 13%;
    right: 0;
    width: 36%;
    height: 28%;
  }

  .process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(4) {
    top: 29%;
    right: auto;
    bottom: auto;
    left: 23%;
    width: 53%;
    height: 37%;
  }

  .process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(5) {
    top: auto;
    right: auto;
    bottom: 20%;
    left: 0;
    width: 30%;
    height: 23%;
  }

  .process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(6) {
    top: auto;
    right: auto;
    bottom: 1%;
    left: 18%;
    width: 39%;
    height: 29%;
  }

  .process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(7) {
    top: 54%;
    right: 0;
    width: 31%;
    height: 25%;
  }

  .process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(8) {
    bottom: 3%;
    left: 49%;
    width: 36%;
    height: 24%;
  }

  .process-board:is([data-process-count="7"], [data-process-count="8"], [data-process-count="9"]) .process-board-item:nth-child(9) {
    right: 0;
    bottom: 0;
    width: 24%;
    height: 18%;
  }

  .process-board[data-process-count="1"] .process-board-item:nth-child(1) {
    top: 4%;
    left: 5%;
    width: 90%;
    height: 92%;
  }

  .process-board[data-process-count="2"] .process-board-item:nth-child(1) {
    top: 3%;
    left: 0;
    width: 68%;
    height: 62%;
  }

  .process-board[data-process-count="2"] .process-board-item:nth-child(2) {
    top: auto;
    right: 0;
    bottom: 3%;
    left: auto;
    width: 52%;
    height: 47%;
  }

  .process-board[data-process-count="3"] .process-board-item:nth-child(1) {
    top: 7%;
    left: 0;
    width: 59%;
    height: 55%;
  }

  .process-board[data-process-count="3"] .process-board-item:nth-child(2) {
    top: 2%;
    right: 0;
    left: auto;
    width: 40%;
    height: 34%;
  }

  .process-board[data-process-count="3"] .process-board-item:nth-child(3) {
    top: auto;
    right: 3%;
    bottom: 2%;
    width: 56%;
    height: 50%;
  }

  .process-viewer-frame {
    width: 100vw;
    height: 100dvh;
    margin: 0;
  }

  .process-viewer-frame img {
    max-width: 88vw;
    max-height: 88dvh;
  }

  .series-layout {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    grid-template-rows: 1fr 1fr;
    gap: 7px;
    padding: 0;
  }

  .series-layout figure,
  .series-layout figure[data-series-slot="1"] {
    height: 100%;
  }

  .series-layout figure[data-series-slot="0"] {
    grid-row: 1 / 3;
  }

  .credits-layout {
    padding: 0 5vw;
  }

  .credits-layout dl div {
    grid-template-columns: 0.9fr 1fr;
    padding: 12px 0;
  }
}

@media (max-height: 620px) and (min-width: 761px) {
  .portfolio-viewport {
    top: 12vh;
    bottom: 18vh;
  }

  .detail-meta {
    top: 18vh;
  }

  .detail-content {
    top: 14vh;
    bottom: 16vh;
  }

  .detail-tabs {
    bottom: 2vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}