@font-face {
  font-family: "Baskervville";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("https://cdn.jsdelivr.net/fontsource/fonts/baskervville:vf@latest/latin-wght-normal.woff2") format("woff2-variations");
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --fg: #333333;
  --muted: #7f7f7f;
  --line: #d8d8d8;
  --panel: #e5e5e5;
  --case-copy-color: #333333;
  --case-copy-size: clamp(18px, 1.29vw, 24.4px);
  --case-copy-line: 1.34;
  --case-copy-gap: clamp(14px, 1.15vw, 22px);
  --menu-panel: #f8f8f8;
  --menu-text: #b1b1b1;
  --menu-active: #000000;
  --gap: clamp(10px, 1.45vw, 28px);
  --media-grid-gap-x: clamp(18px, 1.85vw, 36px);
  --pad: clamp(18px, 3.125vw, 60px);
  --home-bottom-pad: calc(var(--pad) * 1.6);
  --header-y: clamp(24px, 1.9vw, 36px);
  --control-bottom: clamp(18px, 2.5vw, 48px);
  --case-control-gap: clamp(39.6px, 4.95vw, 94.6px);
  --font: "Inter Display", "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050505;
  --fg: #e6e6e6;
  --muted: #9b9b9b;
  --line: #2e2e2e;
  --panel: #111111;
  --case-copy-color: #e6e6e6;
  --menu-panel: #252525;
  --menu-text: #7f7f7f;
  --menu-active: #ffffff;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.12;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  letter-spacing: 0;
  transition: background-color 180ms ease, color 180ms ease;
}

body,
button,
input {
  font: inherit;
}

body.is-search-open {
  overflow: hidden;
}

body.is-search-open .site-header {
  z-index: 100;
  transform: none;
  opacity: 1;
  visibility: visible;
}

body.is-menu-open {
  overflow: hidden;
}

body.home-body {
  overflow-y: hidden;
}

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

button,
input {
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
}

button {
  padding: 0;
  cursor: pointer;
  text-transform: uppercase;
}

img,
video {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
}

video::-webkit-media-controls {
  display: none !important;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

.site-header {
  position: fixed;
  z-index: 50;
  top: 0;
  left: max(var(--pad), calc((100vw - 1920px) / 2 + var(--pad)));
  right: max(var(--pad), calc((100vw - 1920px) / 2 + var(--pad)));
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--header-y) 0 0;
  pointer-events: none;
  background: transparent;
  isolation: isolate;
  transition: transform 180ms ease, opacity 180ms ease, visibility 180ms ease;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.site-header::before {
  content: "";
  position: absolute;
  inset: -1px calc(-1 * max(var(--pad), calc((100vw - 1920px) / 2 + var(--pad)))) auto;
  height: calc(var(--header-y) + clamp(25px, 2.7vw, 52px) + var(--header-y) + 2px);
  background: var(--bg);
  z-index: -1;
  transform: translateZ(0);
  transition: background-color 180ms ease;
}

.site-header.is-hidden {
  transform: translateY(calc(-100% - 140px));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.brand,
.site-nav,
.theme-switch {
  pointer-events: auto;
}

.brand {
  position: relative;
  width: clamp(134px, 14.6vw, 280px);
  height: clamp(25px, 2.7vw, 52px);
}

.brand-logo {
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left top;
}

.brand-logo--night,
:root[data-theme="dark"] .brand-logo--day {
  opacity: 0;
}

:root[data-theme="dark"] .brand-logo--night {
  opacity: 1;
}

.site-nav {
  display: flex;
  gap: clamp(12px, 1.18vw, 23px);
  color: var(--muted);
  font-size: clamp(12px, 0.78vw, 15px);
  line-height: 1.08;
  text-transform: uppercase;
}

.menu-toggle {
  display: none;
  pointer-events: auto;
}

.site-nav a,
.site-nav button,
.theme-switch,
.nav-theme-toggle,
.small-label,
.index-link,
.back-top {
  font-size: clamp(12px, 0.78vw, 15px);
  line-height: 1.08;
  text-transform: uppercase;
}

.site-nav a:hover,
.site-nav button:hover,
.work-card__caption a:hover,
.back-top:hover {
  color: var(--fg);
}

.page-controls {
  width: min(100%, 1920px);
  margin: 0 auto;
  padding: 0 var(--pad) var(--control-bottom);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap);
}

.home-body .page-controls {
  display: none;
}

.site-footer {
  width: min(100%, 1920px);
  margin: 0 auto;
  padding: 0 var(--pad) clamp(18px, 2.2vw, 42px);
}

.site-footer p {
  margin: 0;
  color: var(--muted);
  font-size: clamp(12px, 0.874vw, 16px);
  line-height: 1.08;
  text-transform: uppercase;
}

.home-body .site-footer {
  position: fixed;
  z-index: 12;
  left: 50%;
  bottom: clamp(12px, 1.5vw, 28px);
  transform: translateX(-50%);
  padding-bottom: 0;
  pointer-events: none;
}

.nav-theme-toggle {
  display: none;
}

.home-body .nav-theme-toggle {
  display: inline-block;
  min-width: 5.2ch;
  margin-left: 0;
  text-align: left;
}

.menu-social {
  display: none;
}

.theme-switch,
.back-top {
  position: static;
  z-index: auto;
  display: block;
  width: max-content;
  margin: 0;
  color: var(--fg);
  font-size: clamp(14px, 0.94vw, 18px);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.page-controls .back-top,
.page-controls .theme-switch {
  font-size: var(--case-copy-size);
  line-height: var(--case-copy-line);
}

.index-page {
  width: 100%;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  padding: calc(var(--header-y) + clamp(25px, 2.7vw, 52px) + var(--pad)) 0 var(--home-bottom-pad);
}

.index-intro {
  padding-left: var(--pad);
  margin-bottom: clamp(18px, 2.45vw, 47px);
}

@media (min-width: 821px) {
  .index-intro {
    width: min(100%, 1920px);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--pad);
    transform: translateY(clamp(3px, 0.32vw, 7px));
  }
}

.index-intro p {
  margin: 0 0 9px;
  color: var(--muted);
  font-size: clamp(12px, 0.874vw, 16px);
  line-height: 1.08;
  text-transform: uppercase;
  white-space: nowrap;
}

.label-separator {
  display: inline-block;
  margin: 0 0.46em;
}

.index-intro h1 {
  width: min(730px, calc(100vw - var(--pad) * 2));
  margin: 0;
  color: #000000;
  font-family: "Baskervville", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 1.586vw, 30px);
  line-height: 1.12;
  font-weight: 500;
}

:root[data-theme="dark"] .index-intro h1 {
  color: #ffffff;
}

.index-rail-wrap {
  width: 100%;
  min-width: 0;
  overflow: visible;
}

.index-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(208px, 25.7vw, 494px);
  gap: clamp(11px, 0.95vw, 19px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 clamp(90px, 17vw, 326px) 0 var(--pad);
  margin-left: 0;
  scroll-padding-left: var(--pad);
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.index-rail::-webkit-scrollbar {
  height: 0;
}

.index-rail:hover,
.index-rail:focus-within {
  scrollbar-width: thin;
}

.index-rail:hover::-webkit-scrollbar,
.index-rail:focus-within::-webkit-scrollbar {
  height: 8px;
}

.index-rail::-webkit-scrollbar-thumb {
  background: var(--fg);
}

.index-card {
  min-width: 0;
}

.index-card[hidden],
.work-card[hidden] {
  display: none;
}

.index-card__media,
.work-card__media {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--panel);
}

.preview-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 220ms ease;
}

.preview-frame.is-active {
  opacity: 1;
}

.work-page,
.plain-page,
.case-page {
  width: min(100%, 1920px);
  margin: 0 auto;
  padding: clamp(92px, 8.1vw, 156px) var(--pad) clamp(36px, 4.5vw, 86px);
}

.page-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  min-height: 0;
  border-bottom: 1px solid var(--line);
  padding-bottom: clamp(28px, 2.15vw, 42px);
  margin-bottom: clamp(30px, 2.3vw, 44px);
}

.page-title--plain {
  grid-template-columns: 1fr;
}

.work-kicker {
  margin: 0 0 clamp(6px, 0.5vw, 10px);
  font-size: clamp(41px, 2.88vw, 57px);
  line-height: 1;
  font-weight: 600;
}

.page-title h1 {
  margin: 0;
  color: var(--muted);
  font-family: "Baskervville", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 1.586vw, 30px);
  line-height: 1.12;
  font-weight: 500;
}

.category-filter {
  position: relative;
  --category-menu-pad-x: clamp(13px, 1.08vw, 20px);
  --category-menu-pad-y: clamp(18px, 1.42vw, 26px);
  justify-self: end;
  align-self: end;
  display: grid;
  justify-items: end;
  gap: clamp(8px, 0.8vw, 15px);
  color: var(--muted);
  font-size: clamp(15px, 1.02vw, 20px);
  line-height: 1.12;
  font-weight: 400;
  text-transform: uppercase;
}

.category-filter > button::after {
  content: "";
}

.category-filter > button {
  font-weight: 400;
  line-height: 1.08;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  transition: opacity 160ms ease;
}

.category-filter.is-category-open > button {
  opacity: 0;
}

.category-filter__menu {
  position: absolute;
  z-index: 4;
  top: calc(-1 * var(--category-menu-pad-y));
  right: calc(-1 * var(--category-menu-pad-x));
  width: max-content;
  min-width: 0;
  max-width: min(160px, calc(100vw - var(--pad) * 2));
  display: grid;
  justify-items: end;
  gap: clamp(11px, 0.902vw, 17.6px);
  padding: var(--category-menu-pad-y) var(--category-menu-pad-x);
  border-radius: 10px;
  background: var(--menu-panel);
  color: var(--menu-text);
  opacity: 0;
  transform: none;
  transform-origin: top right;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 220ms ease, visibility 0s linear 220ms;
  will-change: opacity;
}

.category-filter__menu[hidden] {
  display: none;
}

.category-filter__menu.is-open {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 220ms ease, visibility 0s;
}

.category-filter__menu button {
  display: block;
  width: auto;
  padding: 0;
  color: var(--menu-text);
  text-align: right;
  font-size: inherit;
  line-height: 1.08;
  font-weight: 400;
  text-transform: none;
  white-space: nowrap;
}

.category-filter__menu button[hidden] {
  display: none;
}

.category-filter__menu button:hover,
.category-filter__menu button:focus-visible {
  color: var(--menu-active);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.category-filter__menu button[aria-current="true"] {
  color: var(--menu-active);
  font-weight: 400;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(29px, 2.8vw, 55px) var(--media-grid-gap-x);
}

@media (min-width: 1180px) {
  .work-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: clamp(14px, 1.15vw, 22px);
  }
}

.work-card__media img,
.work-card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-card__caption {
  margin-top: clamp(18px, 1.65vw, 32px);
  font-size: clamp(25px, 1.74vw, 35px);
  line-height: 0.82;
}

.work-card__caption a {
  display: block;
  font-weight: 500;
}

.work-card__caption p {
  margin: clamp(5px, 0.46vw, 9px) 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.14vw, 23px);
  line-height: 1.06;
  font-weight: 400;
}

.index-link {
  display: inline-block;
  margin: 0 0 clamp(26px, 3vw, 58px);
  color: var(--muted);
}

.case-copy p,
.case-copy .credits {
  margin: 0;
  color: var(--case-copy-color);
  font-size: var(--case-copy-size);
  line-height: var(--case-copy-line);
  font-weight: 400;
}

.case-copy .credits {
  color: var(--muted);
}

.case-copy {
  width: calc((100% - var(--media-grid-gap-x)) / 2);
  margin-bottom: clamp(42px, 4.2vw, 80px);
}

.case-copy p {
  margin: 0;
}

.case-copy p + p {
  margin-top: var(--case-copy-gap);
}

.case-contact-lines {
  margin-top: var(--case-copy-gap);
}

.case-contact-lines p {
  margin: 0;
}

.case-contact-lines p + p {
  margin-top: 0;
}

.case-contact-lines--mobile {
  display: none;
}

.case-contact-lines a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.14em;
  transition: color 160ms ease;
}

.case-contact-lines a:hover,
.case-contact-lines a:focus-visible {
  color: var(--muted);
}

.case-copy a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.case-copy__more p + p,
.case-copy__more p + .case-tags {
  margin-top: var(--case-copy-gap);
}

.case-copy__more .case-contact-lines p + p {
  margin-top: 0;
}

.case-copy__more {
  margin-top: 0;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  transition:
    grid-template-rows 420ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 260ms ease,
    visibility 0s linear 420ms;
}

.case-copy:not(.is-collapsed) .case-copy__more {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  transition:
    grid-template-rows 480ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 260ms ease 80ms,
    visibility 0s;
}

.case-copy__more-inner {
  min-height: 0;
  overflow: hidden;
}

.case-copy__more-inner > p:first-child {
  margin-top: var(--case-copy-gap);
}

.case-copy__more-inner > .case-copy__column:first-child {
  margin-top: var(--case-copy-gap);
}

.case-copy p + .case-tags {
  margin-top: calc(var(--case-copy-gap) * 2);
}

.case-copy .case-tags {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.75em;
  row-gap: 0.35em;
  color: #b1b1b1;
  font-size: var(--case-copy-size);
  line-height: var(--case-copy-line);
  font-weight: 400;
}

.case-copy .case-tags span {
  display: inline-block;
}

.case-copy--bilingual {
  --case-preview-lines: 8;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--media-grid-gap-x);
  width: 100%;
  font-size: calc(var(--case-copy-size) * 0.9);
  line-height: var(--case-copy-line);
}

.case-copy--bilingual p {
  font-size: inherit;
  line-height: inherit;
}

.case-copy--bilingual .case-tags {
  grid-column: 1 / -1;
  font-size: inherit;
}

.case-copy--single-language .case-copy__column {
  grid-column: 1 / 2;
}

.case-copy--bilingual .case-copy__more {
  transition:
    grid-template-rows 220ms ease,
    opacity 220ms ease,
    visibility 0s linear 220ms;
}

.case-copy--bilingual:not(.is-collapsed) .case-copy__more {
  transition:
    grid-template-rows 220ms ease,
    opacity 220ms ease,
    visibility 0s;
}

.case-tags--mobile {
  display: none;
}

.case-read-less--mobile,
.case-read-less--mobile:not([hidden]) {
  display: none;
}

.case-copy--bilingual .case-copy__column--zh {
  font-size: 0.924em;
  line-height: calc(var(--case-copy-line) * 1.1);
  max-height: 1200px;
  overflow: hidden;
  opacity: 1;
  visibility: visible;
  transition: opacity 220ms ease, max-height 220ms ease, visibility 0s;
}

.case-copy--bilingual.is-collapsed .case-copy__column--zh {
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms ease, max-height 220ms ease, visibility 0s linear 220ms;
}

@media (min-width: 821px) {
  .case-copy--bilingual .case-copy__column--zh {
    font-size: 0.9em;
    line-height: calc(var(--case-copy-line) * 1.32);
  }

  .case-copy--bilingual .case-tags--desktop {
    display: flex;
  }

  .case-copy--bilingual .case-tags--mobile {
    display: none;
  }
}

.case-read-more {
  display: block;
  width: max-content;
  margin-top: calc(var(--case-copy-gap) * 2);
  color: #b1b1b1;
  font-size: var(--case-copy-size);
  line-height: var(--case-copy-line);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-transform: none;
}

.case-read-more[hidden] {
  display: none;
}

.case-copy__more .case-read-more {
  margin-top: calc(var(--case-copy-gap) * 2);
}

.case-read-more:hover,
.case-read-more:focus-visible {
  color: var(--case-copy-color);
}

.case-copy__ellipsis {
  color: var(--case-copy-color);
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--media-grid-gap-x);
  row-gap: clamp(21px, 2.1vw, 40px);
  width: 100%;
}

.studio-gallery {
  margin-top: clamp(34px, 3.9vw, 74px);
}

.case-media {
  margin: 0;
  background: transparent;
}

.case-media img,
.case-media video {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  background: transparent;
}

.case-video-frame {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: transparent;
}

.case-video-frame video {
  height: 100%;
  transform: scale(1.006);
  transform-origin: center;
}

.studio-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: #e6e6e6;
}

.case-media figcaption {
  margin-top: clamp(18px, 1.35vw, 26px);
  color: var(--muted);
  font-size: var(--case-copy-size);
  line-height: var(--case-copy-line);
  font-weight: 400;
}

.case-next {
  display: none;
}

.related-projects {
  margin-top: var(--case-control-gap);
  border-top: 1px solid var(--line);
  padding-top: var(--case-control-gap);
}

.related-projects h2 {
  margin: 0 0 clamp(38px, 4.1vw, 78px);
  color: var(--case-copy-color);
  font-size: clamp(41px, 2.88vw, 57px);
  line-height: 1;
  font-weight: 600;
}

.page-controls.case-page-controls {
  width: 100%;
  padding: var(--case-control-gap) 0 0;
}

.case-page-controls .back-top,
.case-page-controls .theme-switch {
  font-size: var(--case-copy-size);
  line-height: var(--case-copy-line);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--media-grid-gap-x);
  row-gap: clamp(34px, 3.2vw, 62px);
}

.related-card__caption {
  margin: 0 0 clamp(18px, 1.65vw, 32px);
}

.studio-copy {
  width: calc((100% - var(--media-grid-gap-x)) / 2);
  margin-top: clamp(34px, 3.9vw, 74px);
}

.studio-label,
.studio-statement,
.studio-body p,
.contact-email {
  margin: 0;
  font-size: var(--case-copy-size);
  line-height: var(--case-copy-line);
}

.studio-label {
  margin-bottom: 2px;
  text-transform: uppercase;
}

.studio-label span {
  display: inline-block;
  margin: 0 0.42em;
}

.studio-statement {
  font-weight: 600;
  margin-bottom: clamp(30px, 3vw, 58px);
}

.studio-body {
  width: 100%;
}

.studio-body p + p {
  margin-top: var(--case-copy-gap);
}

.about-page .studio-body p,
.contact-page .studio-body p,
.contact-page .contact-email,
.contact-page .contact-email span {
  color: var(--case-copy-color);
  font-size: var(--case-copy-size);
  line-height: var(--case-copy-line);
  font-weight: 400;
}

.about-page .page-title,
.contact-page .page-title {
  margin-bottom: clamp(28px, 2.15vw, 42px);
}

.about-page .studio-copy,
.contact-page .studio-copy {
  margin-top: 0;
}

.contact-email {
  display: flex;
  gap: clamp(16px, 1.35vw, 26px);
  margin-top: clamp(28px, 2.8vw, 54px);
}

.contact-email span {
  font-weight: 600;
}

.contact-email a {
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.search-panel {
  position: fixed;
  z-index: 40;
  inset: 0;
  overflow-y: auto;
  background: var(--bg);
  color: var(--fg);
  padding: 0;
}

.search-panel[hidden] {
  display: none;
}

.search-panel__body {
  width: min(100%, 1920px);
  margin: 0 auto;
  padding: clamp(92px, 8.1vw, 156px) var(--pad) clamp(36px, 4.5vw, 86px);
}

.search-panel label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(14px, 1.2vw, 24px);
  align-items: end;
  border-bottom: 1px solid var(--line);
  padding-top: 0;
}

.search-panel__field button {
  padding: 0 0 8px;
  color: var(--muted);
  font-size: clamp(17px, 1.275vw, 24px);
  line-height: 1.22;
  font-weight: 400;
  text-transform: uppercase;
  white-space: nowrap;
}

.search-panel__field button:hover {
  color: var(--fg);
}

.search-panel input {
  width: 100%;
  outline: 0;
  font-size: clamp(17px, 1.275vw, 24px);
  line-height: 1.22;
  font-weight: 400;
  padding: 0 0 8px;
}

.search-panel input::-webkit-search-cancel-button,
.search-panel input::-webkit-search-decoration {
  appearance: none;
  display: none;
}

.search-panel__results {
  margin-top: clamp(34px, 3.9vw, 74px);
  width: 100%;
}

.search-panel__controls {
  padding-left: 0;
  padding-right: 0;
  margin-top: clamp(34px, 3.9vw, 74px);
}

.search-panel__controls[hidden] {
  display: none;
}

.empty-state {
  color: var(--muted);
  font-size: clamp(20px, 1.43vw, 27px);
  line-height: 1.32;
  font-weight: 400;
}

@media (max-width: 820px) {
  :root {
    --mobile-brand-height: clamp(37.5px, 9.6vw, 42px);
    --mobile-header-y: 20px;
  }

  body.home-body {
    overflow-y: auto;
  }

  .home-body .page-controls {
    display: flex;
    padding-top: 16px;
    padding-bottom: 22px;
  }

  .home-body .site-footer {
    position: static;
    left: auto;
    bottom: auto;
    transform: none;
    padding-bottom: clamp(18px, 5.2vw, 26px);
    pointer-events: auto;
  }

  .site-header {
    --header-y: var(--mobile-header-y);
    left: 0;
    right: 0;
    display: flex;
    align-items: flex-start;
    padding: var(--header-y) var(--pad) 0;
  }

  .site-header::before {
    inset: -1px 0 auto;
    height: calc(var(--header-y) + var(--mobile-brand-height) + var(--header-y) + 2px);
  }

  .brand {
    width: clamp(201px, 51.5vw, 235px);
    height: var(--mobile-brand-height);
  }

  body.is-menu-open .site-header {
    transform: none;
    opacity: 1;
    visibility: visible;
  }

  body.is-menu-open .site-header::before {
    background: transparent;
  }

  body.is-menu-open .brand-logo--day {
    opacity: 0;
  }

  body.is-menu-open .brand-logo--night {
    opacity: 1;
  }

  .menu-toggle {
    display: grid;
    align-content: center;
    gap: 7px;
    width: 30px;
    height: var(--mobile-brand-height);
    margin-top: 0;
    color: var(--fg);
    transition: color 180ms ease;
  }

  .menu-toggle span {
    display: block;
    height: 1px;
    background: var(--fg);
    transform-origin: center;
    transition: transform 220ms cubic-bezier(0.4, 0, 0.2, 1), background-color 180ms ease;
  }

  body.is-menu-open .menu-toggle {
    color: #ffffff;
  }

  body.is-menu-open .menu-toggle span {
    background: #ffffff;
  }

  body.is-menu-open .menu-toggle span:first-child {
    transform: translateY(4px) rotate(45deg);
  }

  body.is-menu-open .menu-toggle span:last-child {
    transform: translateY(-4px) rotate(-45deg);
  }

  .site-nav {
    position: fixed;
    z-index: 49;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    display: grid;
    align-content: start;
    justify-content: stretch;
    gap: 0;
    width: 100vw;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(var(--mobile-header-y) + var(--mobile-brand-height) + var(--mobile-header-y) + 56px) var(--pad) 28px;
    background: transparent;
    color: #ffffff;
    isolation: isolate;
    overflow: hidden;
    visibility: hidden;
    transition: visibility 0s linear 360ms;
    pointer-events: none;
  }

  .site-nav::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    background: #050505;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 360ms cubic-bezier(0.76, 0, 0.24, 1);
    backface-visibility: hidden;
    will-change: transform;
  }

  .site-nav::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: var(--pad);
    right: var(--pad);
    top: calc(var(--mobile-header-y) + var(--mobile-brand-height) + var(--mobile-header-y));
    height: 1px;
    background: #2e2e2e;
    opacity: 0;
    transition: opacity 160ms ease;
  }

  .home-body .nav-theme-toggle {
    display: none;
  }

  body.is-menu-open .site-nav {
    visibility: visible;
    transition: visibility 0s;
    pointer-events: auto;
  }

  body.is-menu-open .site-nav::before {
    transform: scaleY(1);
  }

  body.is-menu-open .site-nav::after {
    opacity: 1;
    transition-delay: 140ms;
  }

  body.is-menu-open .brand,
  body.is-menu-open .menu-toggle {
    z-index: 52;
  }

  .site-nav a,
  .site-nav button {
    position: relative;
    z-index: 1;
    display: block;
    border-top: 0;
    padding: 7.69px 0 9.6px;
    color: #ffffff;
    text-align: left;
    font-size: clamp(27px, 1.92vw, 38px);
    line-height: 1.05;
    font-weight: 400;
    opacity: 0;
    transform: translateY(-10px);
    transition: color 160ms ease, opacity 220ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-social {
    position: absolute;
    z-index: 1;
    left: var(--pad);
    right: var(--pad);
    bottom: 56px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-top: 20px;
    border-top: 1px solid #2e2e2e;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 220ms ease, transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  .menu-social a {
    display: block;
    width: auto;
    height: auto;
    padding: 7.69px 0 9.6px;
    color: #ffffff;
    font-size: calc(clamp(27px, 1.92vw, 38px) * 0.798);
    line-height: 1.05;
    font-weight: 400;
    opacity: 1;
    transform: none;
    transition: color 160ms ease;
  }

  .menu-social a:hover {
    color: #8f8f8f;
  }

  body.is-menu-open .menu-social {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 310ms;
  }

  .site-nav a:hover,
  .site-nav button:hover {
    color: #8f8f8f;
  }

  body.is-menu-open .site-nav a,
  body.is-menu-open .site-nav button {
    opacity: 1;
    transform: translateY(0);
  }

  body.is-menu-open .site-nav a:nth-child(1) {
    transition-delay: 150ms;
  }

  body.is-menu-open .site-nav a:nth-child(2) {
    transition-delay: 180ms;
  }

  body.is-menu-open .site-nav a:nth-child(3) {
    transition-delay: 210ms;
  }

  body.is-menu-open .site-nav button:nth-child(4) {
    transition-delay: 240ms;
  }

  body.is-menu-open .site-nav button:nth-child(5) {
    transition-delay: 270ms;
  }

  .index-page {
    min-height: 0;
    height: auto;
    padding: 104px var(--pad) 29px;
    overflow: visible;
  }

  .index-intro {
    padding-left: 0;
    margin-bottom: 35.09px;
  }

  .index-intro p {
    font-size: clamp(13.86px, 1.009vw, 18.48px);
  }

  .index-intro h1 {
    width: 100%;
    font-size: clamp(21.945px, 1.594vw, 30.03px);
    line-height: 1.254;
  }

  .index-rail {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    gap: var(--pad);
    padding: 0;
    max-height: none;
    overflow: visible;
  }

  .index-rail-wrap {
    width: 100%;
    margin-left: 0;
  }

  .index-card--loop,
  .index-card:nth-child(n + 6) {
    display: none;
  }

  .work-page,
  .plain-page,
  .case-page {
    padding-top: 106px;
  }

  .work-grid,
  .case-gallery,
  .placeholder-grid,
  .news-grid,
  .related-grid {
    grid-template-columns: 1fr;
  }

  .work-grid {
    gap: clamp(24px, 2.7vw, 52px) var(--media-grid-gap-x);
  }

  .related-grid {
    row-gap: clamp(24px, 2.7vw, 52px);
  }

  .case-copy,
  .case-tags,
  .studio-copy {
    width: 100%;
  }

  .case-copy--bilingual {
    grid-template-columns: 1fr;
  }

  .case-copy--bilingual:not(.is-collapsed) {
    cursor: pointer;
  }

  .case-copy--bilingual .case-copy__column--zh {
    max-height: 0;
  }

  .case-copy--bilingual:not(.is-collapsed) .case-copy__column--zh {
    max-height: 1200px;
    margin-top: calc(var(--case-copy-gap) * 1.86);
  }

  .case-copy--bilingual .case-copy__column--zh {
    font-size: 0.924em;
    line-height: calc(var(--case-copy-line) * 1.21);
  }

  .case-copy--bilingual .case-copy__column--zh p + p {
    margin-top: calc(var(--case-copy-gap) * 1.1);
  }

  .case-contact-lines--desktop {
    display: none;
  }

  .case-contact-lines--mobile {
    display: block;
    margin-top: calc(var(--case-copy-gap) * 2.2);
  }

  .case-copy--bilingual .case-copy__column--zh p + .case-contact-lines--mobile {
    margin-top: calc(var(--case-copy-gap) * 2.2);
  }

  .case-copy--bilingual .case-contact-lines--mobile p + p {
    margin-top: 0;
  }

  .case-copy--bilingual .case-copy__column--zh p + .case-tags--mobile {
    margin-top: calc(var(--case-copy-gap) * 2.2);
  }

  .case-copy--bilingual .case-tags--desktop {
    display: none;
  }

  .case-copy--bilingual .case-tags--mobile {
    display: flex;
  }

  .case-copy--bilingual .case-read-less--desktop {
    display: none;
  }

  .case-copy--bilingual .case-read-less--mobile {
    display: block;
  }

  .page-controls {
    padding-top: 16px;
  }

  :root {
    --case-control-gap: clamp(48px, 12.3vw, 72px);
  }

  .page-controls.case-page-controls {
    padding-top: var(--case-control-gap);
  }

  .related-projects {
    margin-top: var(--case-control-gap);
    padding-top: var(--case-control-gap);
  }

  .work-card__caption {
    margin-top: 17.42px;
    font-size: clamp(20px, 6vw, 25px);
    line-height: 0.86;
  }

  .work-card__caption p {
    margin: 5px 0 0;
    font-size: clamp(14px, 4.1vw, 17px);
    line-height: 1.02;
  }

  .search-panel label {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
  }

  .search-panel input,
  .search-panel__field button {
    padding-bottom: 4px;
  }

  .page-title {
    grid-template-columns: 1fr;
    gap: 21.6px;
    padding-bottom: clamp(22px, 1.65vw, 32px);
    margin-bottom: clamp(22px, 1.65vw, 32px);
  }

  .work-kicker {
    margin-bottom: 7px;
    font-size: clamp(27px, 1.92vw, 38px);
  }

  .page-title h1 {
    font-size: clamp(21.945px, 1.594vw, 30.03px);
    line-height: 1.254;
    font-weight: 500;
  }

  .related-projects h2 {
    font-size: clamp(27px, 1.92vw, 38px);
    line-height: 1;
    font-weight: 600;
  }

  .category-filter {
    justify-self: start;
    justify-items: start;
    width: 100%;
    font-size: clamp(15.73px, 4.474vw, 18.68px);
  }

  .category-filter > button {
    width: 100%;
    padding: 0.132em 0;
    text-align: left;
  }

  .category-filter__menu {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--pad));
    right: auto;
    width: 100vw;
    min-width: 0;
    max-width: none;
    justify-items: start;
    gap: 16px;
    margin-top: 0;
    transform-origin: top left;
    transform: translateY(-8px);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 260ms;
    padding: 22px var(--pad) 28px;
    border-radius: 0;
    background: var(--bg);
  }

  .category-filter__menu.is-open {
    transform: translateY(0);
    transition: opacity 220ms ease, transform 260ms cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
  }

  .category-filter.is-category-open > button {
    opacity: 1;
  }

  .category-filter__menu button {
    width: 100%;
    padding: 0.14em 0;
    text-align: left;
    font-size: clamp(17.6px, 5.005vw, 20.9px);
    line-height: 1.34;
  }

  .category-filter__menu button[aria-current="true"] {
    display: none;
  }

  .search-result {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

@media (min-width: 821px) and (max-aspect-ratio: 3 / 2) {
  .index-page {
    justify-content: flex-end;
    padding-top: calc(var(--header-y) + clamp(25px, 2.7vw, 52px) + 24px);
    padding-bottom: var(--home-bottom-pad);
  }

  .index-intro {
    margin-bottom: clamp(18px, 2vw, 28px);
  }

  .index-rail {
    grid-auto-flow: column;
    grid-template-rows: none;
    grid-auto-columns: min(39.69vw, calc((100svh - 230px) * 0.709));
    height: auto;
    min-height: 0;
  }

  .index-card__media {
    height: auto;
  }
}

@media (min-width: 821px) and (max-aspect-ratio: 6 / 5) {
  .index-rail {
    grid-auto-columns: min(42.53vw, calc((100svh - 220px) * 0.709));
  }
}

@media (min-width: 821px) and (min-aspect-ratio: 3 / 2) and (max-aspect-ratio: 8 / 5) {
  .index-page {
    justify-content: flex-end;
    padding-bottom: var(--home-bottom-pad);
  }

  .index-intro {
    margin-bottom: clamp(18px, 2vw, 28px);
  }

  .index-rail {
    grid-auto-columns: min(35.91vw, calc((100svh - 230px) * 0.709));
  }
}

@media (min-width: 821px) and (min-aspect-ratio: 8 / 5) and (max-aspect-ratio: 7 / 4) {
  .index-page {
    justify-content: flex-end;
    padding-bottom: var(--home-bottom-pad);
  }

  .index-intro {
    margin-bottom: clamp(18px, 2vw, 28px);
  }

  .index-rail {
    grid-auto-columns: min(33.08vw, calc((100svh - 230px) * 0.709));
  }
}

@media (min-width: 1920px) and (min-aspect-ratio: 7 / 4) {
  .index-page {
    padding-bottom: calc(var(--home-bottom-pad) * 1.1);
  }

  .index-intro {
    padding-left: var(--pad);
    padding-right: var(--pad);
    margin-bottom: clamp(34.65px, 3.85vw, 53.87px);
  }

  .index-intro p {
    font-size: clamp(12px, 0.874vw, 16px);
  }

  .index-intro h1 {
    font-size: clamp(22px, 1.586vw, 30px);
    width: max-content;
    max-width: calc(100% - var(--pad) * 2);
    white-space: nowrap;
  }

  .index-rail {
    grid-auto-columns: calc((min(100vw, 1920px) - (var(--pad) * 2) - (clamp(14px, 1.15vw, 22px) * 2)) / 3);
    padding-left: max(var(--pad), calc((100vw - 1920px) / 2 + var(--pad)));
  }
}

@media (min-width: 821px) and (max-width: 1400px) and (max-aspect-ratio: 3 / 2) {
  body.home-body {
    overflow-y: auto;
  }

  .index-page {
    width: min(100%, 1920px);
    height: auto;
    min-height: 0;
    margin: 0 auto;
    padding: clamp(118px, 13vw, 146px) var(--pad) clamp(34px, 4.2vw, 46px);
    overflow: visible;
  }

  .index-intro {
    padding: 0;
    margin-bottom: clamp(35px, 4.8vw, 52px);
  }

  .index-intro p {
    font-size: clamp(15px, 1.75vw, 18px);
  }

  .index-intro h1 {
    width: 100%;
    font-size: clamp(24px, 2.72vw, 30px);
    line-height: 1.254;
  }

  .index-rail-wrap {
    width: 100%;
    margin-left: 0;
    overflow: visible;
  }

  .index-rail {
    display: grid;
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: 1fr;
    gap: var(--pad);
    padding: 0;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .index-card--loop,
  .index-card:nth-child(n + 6) {
    display: none;
  }
}

@media (max-width: 520px) and (min-height: 700px) {
  body.home-body {
    overflow-y: auto;
  }

  .index-page {
    height: auto;
    padding-top: 104px;
    padding-bottom: 29px;
    overflow: visible;
  }

  .index-intro {
    margin-bottom: 35.09px;
  }

  .index-intro p {
    margin-bottom: 6px;
  }

  .index-intro h1 {
    line-height: 1.254;
  }

  .index-rail {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-columns: auto;
    gap: var(--pad);
    height: auto;
    overflow: visible;
  }

  .index-card--loop,
  .index-card:nth-child(n + 6) {
    display: none;
  }

  .index-card__media {
    height: auto;
  }
}

@media (max-width: 420px) {
  :root {
    --pad: 16px;
  }

  .site-nav {
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
  }
}