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

@font-face {
  font-family: "Friedl";
  src: url("../fonts/FriedlBETA1-Book.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Friedl";
  src: url("../fonts/FriedlBETA1-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

/* Metric overrides from FriedlBETA1-Book.woff2 / FriedlBETA1-Medium.woff2 vs Arial
   (average A–Z a–z 0–9 widths at 100px, plus font bounding-box ascent/descent).
   Atypical strings may still shift. */
@font-face {
  font-family: "Friedl Fallback";
  src: local("Arial");
  font-style: normal;
  font-weight: 400;
  size-adjust: 102.61%;
  ascent-override: 73.09%;
  descent-override: 24.36%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Friedl Fallback";
  src: local("Arial");
  font-style: normal;
  font-weight: 500;
  size-adjust: 102.61%;
  ascent-override: 73.09%;
  descent-override: 24.36%;
  line-gap-override: 0%;
}

:root {
  /* Shared spatial motion curve and content-wipe duration.
     Other durations stay local to each surface. */
  --motion-easing: cubic-bezier(0.35, 0, 0.2, 1);
  --motion-duration-content: 600ms;
  --media-layout-gap: 0.875rem;
  --site-menu-navigation-motion-duration: 250ms;
  --site-menu-dropdown-motion-duration: 400ms;
  --site-menu-dropdown-stagger: 100ms;
  /* Opening settles quickly; closing rows use the shared, gentler easing. */
  --site-menu-dropdown-easing: cubic-bezier(0.16, 1, 0.3, 1);
  --site-menu-dropdown-park-extra: 1rem;
  --projects-results-item-motion-duration: 220ms;
  --projects-results-filter-motion-duration: 300ms;
  --projects-results-filter-content-gap: calc(0.625rem * var(--ui-control-scale));
  /* Shared UI control geometry.
     --ui-control-scale multiplies layout dimensions (size, padding, icons).
     --ui-control-font-size is independent so type can be tuned separately.
     --ui-control-text-offset-y nudges label text inside pills, rectangles, and
     circles without changing control size. Positive moves text down.
     Scale via these tokens, not transform: thumbs measure real layout boxes. */
  --ui-control-scale: 1.2;
  --ui-control-font-size: 1rem;
  --ui-control-text-offset-y: 0rem;
  --ui-control-padding-block-start: calc(
    0.5rem * var(--ui-control-scale) + var(--ui-control-text-offset-y)
  );
  --ui-control-padding-block-end: calc(
    0.375rem * var(--ui-control-scale) - var(--ui-control-text-offset-y)
  );
  --ui-control-padding-inline-pill: calc(0.6rem * var(--ui-control-scale));
  --ui-control-padding-inline-rectangle: calc(0.625rem * var(--ui-control-scale));
  --index-filter-hit-extension-inline: calc(0.375rem * var(--ui-control-scale));
  --ui-control-size: calc(2rem * var(--ui-control-scale));
  --ui-circular-control-overshoot: calc(0.0625rem * var(--ui-control-scale));
  --ui-circular-control-size: calc(
    var(--ui-control-size) + var(--ui-circular-control-overshoot) +
      var(--ui-circular-control-overshoot)
  );
  --ui-radius-box: 0.125rem;
  --ui-radius-overlay: 0.2rem;
  --ui-radius-pill: calc(1.25rem * var(--ui-control-scale));
  --ui-icon-size: calc(0.875rem * var(--ui-control-scale));
  --ui-icon-offset-y: calc(0.1rem * var(--ui-control-scale));
  --global-link-color: #797979;
  --site-edge-space: 0.25rem;
  --site-menu-background: rgba(227, 227, 227, 0.6);
  --site-menu-background-active: rgba(60, 60, 60, 0.75);
  --site-menu-color: #1d1d1d;
  --site-menu-color-active: #f6f6f6;
  --site-menu-interaction-background: rgb(255, 72, 0);
  --site-menu-interaction-color: var(--site-menu-color);
  --site-menu-shadow: 0 0.0625rem 0.25rem rgba(0, 0, 0, 0.3);
  --site-menu-gap: 0.125rem;
  --font-family-body: "Friedl", "Friedl Fallback", Arial, sans-serif;
  --font-weight-ui-dark-text: 500;
  --font-weight-ui-light-text: 400;
  --font-size-display: 2.625rem;
  --line-height-display: 2.875rem;
  --font-size-body: 1.5rem;
  --line-height-body: 1.875rem;
  --font-size-small: 1rem;
  --line-height-small: 1.3125rem;
  --font-size-ui: 0.9rem;
  --line-height-ui: normal;
  --gallery-scroll-pill-padding-inline: calc(1.25rem * var(--ui-control-scale));
  --gallery-scroll-pill-width: calc(4rem * var(--ui-control-scale));
  --gallery-scroll-text-duration: 1.25s;
  --gallery-scroll-text-ease: linear(
    0,
    0.2 10%,
    0.38 20%,
    0.46 35%,
    0.5 50%,
    0.54 65%,
    0.62 80%,
    0.8 90%,
    1
  );
}

html {
  color-scheme: dark;
  background: #000;
  font-family: var(--font-family-body);
}

body {
  margin: 0;
  color: #000;
  background: #000;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

html:has([data-page-root][data-page-type='about']),
body:has([data-page-root][data-page-type='about']),
html:has([data-page-root][data-page-type='imprint']),
body:has([data-page-root][data-page-type='imprint']),
html:has([data-page-root][data-page-type='privacy']),
body:has([data-page-root][data-page-type='privacy']),
html:has([data-page-root][data-page-type='contact']),
body:has([data-page-root][data-page-type='contact']),
html:has([data-page-root][data-page-type='gallery']),
body:has([data-page-root][data-page-type='gallery']),
html:has([data-page-root][data-page-type='projects']),
body:has([data-page-root][data-page-type='projects']),
html:has([data-page-root][data-page-type='error']),
body:has([data-page-root][data-page-type='error']) {
  background: #000;
}

html:has([data-page-root][data-page-type='gallery']) {
  overscroll-behavior-x: none;
}

html:has([data-page-root][data-page-type='projects']) {
  overscroll-behavior: none;
}

@media (max-width: 47.999rem) {
  html:has(
      [data-page-root]:is(
        [data-page-type='gallery'],
        [data-page-type='projects']
      )
    ),
  body:has(
      [data-page-root]:is(
        [data-page-type='gallery'],
        [data-page-type='projects']
      )
    ) {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    overscroll-behavior: none;
  }

  [data-motion-root]:has(
      > [data-page-root]:is(
          [data-page-type='gallery'],
          [data-page-type='projects']
        )
    ),
  [data-page-root]:is([data-page-type='gallery'], [data-page-type='projects']),
  [data-page-root]:is([data-page-type='gallery'], [data-page-type='projects'])
    > [data-page-content],
  [data-page-root]:is([data-page-type='gallery'], [data-page-type='projects'])
    > [data-page-content]
    > main {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    overscroll-behavior: none;
  }

  [data-page-type='gallery']
    :is(
      [data-project-gallery-shell],
      [data-gallery-stage],
      [data-gallery-content],
      .project-gallery
    ) {
    width: 100%;
    height: 100%;
  }

  [data-page-type='projects'] .projects-results {
    height: 100%;
    overflow: auto;
    overscroll-behavior: none;
  }
}

html:has([data-page-root][data-page-type='project']),
body:has([data-page-root][data-page-type='project']),
.project-page-motion-page[data-page-type='project'] {
  background: #000;
  overscroll-behavior-y: none;
}

h1,
h2,
h3,
p {
  margin-block: 0;
}

h1 {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
}

h2,
h3 {
  font-size: inherit;
  line-height: inherit;
  font-weight: 400;
}

[data-motion-root] {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
}

[data-page-content] {
  min-height: 100vh;
  min-height: 100dvh;
}

[data-page-motion-surface] {
  background: #000;
}

[data-page-type]:has(> [data-page-motion-surface]) {
  background: transparent;
}

[data-motion-root].is-project-page-motion-active {
  min-height: var(--project-page-height, 100dvh);
}

[data-motion-root].is-project-page-motion-active .project-page-motion-page {
  overflow: clip;
}

[data-motion-root].is-project-page-motion-active
  .project-page-motion-page
  > [data-page-content] {
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

[data-motion-root].is-gallery-projects-motion-active {
  min-height: var(--gallery-projects-page-height, 100dvh);
}

[data-motion-root].is-projects-results-motion-active {
  overflow: clip;
}

[data-page-type='projects'].projects-results-motion-surface {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline: 0;
  width: 100%;
  min-height: 100%;
  color: var(--projects-ui-color);
  background: transparent;
  pointer-events: none;
}

.projects-results-motion-surface [data-page-motion-surface] {
  background: transparent;
}

.projects-results-motion-surface .site-footer {
  display: none;
}

.projects-results-motion-surface .projects-overview > li {
  will-change: transform;
}

.project-page-motion-page {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  background: #fff;
  transform-origin: bottom center;
}

.project-page-motion-page:is(
    [data-page-type='about'],
    [data-page-type='contact'],
    [data-page-type='imprint'],
    [data-page-type='privacy']
  ) {
  z-index: 1;
  transform-origin: bottom center;
  background: #000;
}

.project-page-motion-page[data-page-type='imprint'] {
  z-index: 2;
}

.project-page-motion-page[data-page-type='contact'] {
  z-index: 3;
}

.project-page-motion-page[data-page-type='about'] {
  z-index: 4;
}

.project-page-motion-page[data-page-type='gallery'],
.project-page-motion-page[data-page-type='projects'],
.project-page-motion-page[data-page-type='index'] {
  z-index: 5;
  background: #000;
  transform-origin: top center;
}

.project-page-motion-page:has(> [data-page-motion-surface]) {
  background: transparent;
}

.project-page-motion-page[data-page-type='project'] {
  z-index: 6;
  transform-origin: bottom center;
}

.project-page-motion-page[data-page-type='project']:has(> [data-page-motion-surface]) {
  background: transparent;
}

.project-page-motion-page--outgoing:is(
    [data-page-type='contact'],
    [data-page-type='imprint'],
    [data-page-type='privacy']
  )
  [data-page-content]
  > .site-footer {
  visibility: hidden;
}

[data-motion-root].is-project-page-motion-active:has(
    .project-page-motion-page--entering:is(
      [data-page-type='project'],
      [data-page-type='about'],
      [data-page-type='contact'],
      [data-page-type='imprint'],
      [data-page-type='privacy']
    )
  )
  .project-page-motion-page--outgoing {
  transform-origin: top center;
}

.project-page-motion-surface {
  will-change: transform;
}

.gallery-projects-motion-page {
  position: fixed;
  inset-block: 0;
  inset-inline: 0;
  width: 100%;
  overflow-x: hidden;
  overflow-y: hidden;
  background: #fff;
  pointer-events: none;
}

.gallery-projects-motion-page[data-page-type='gallery'] {
  transform-origin: left center;
}

.gallery-projects-motion-page:is(
    [data-page-type='projects'],
    [data-page-type='index']
  ) {
  transform-origin: right center;
}

[data-motion-root]:has(
    .gallery-projects-motion-page[data-page-type='index']
  )
  .gallery-projects-motion-page[data-page-type='projects'] {
  transform-origin: left center;
}

.gallery-projects-motion-page--outgoing {
  z-index: 1;
}

.gallery-projects-motion-page--entering {
  z-index: 2;
}

.gallery-projects-motion-surface {
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .project-page-motion-surface,
  .projects-results-motion-surface .projects-overview > li {
    animation: none;
    transition: none;
  }
}

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

a:focus-visible {
  outline: 0.2rem solid currentColor;
  outline-offset: 0.25rem;
}

.media-motion-control {
  position: absolute;
  z-index: 3;
  inset-inline-end: 0.5rem;
  inset-block-end: 0.5rem;
  display: grid;
  place-items: center;
  width: var(--ui-control-size);
  height: var(--ui-control-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--site-menu-color);
  background: var(--site-menu-background);
  box-shadow: var(--site-menu-shadow);
  cursor: pointer;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
}

.media-motion-control[hidden] {
  display: none;
}

.media-motion-control svg {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  fill: currentColor;
  pointer-events: none;
}

.media-motion-control[aria-pressed='false'] .media-motion-control__play,
.media-motion-control[aria-pressed='true'] .media-motion-control__pause {
  display: none;
}

.media-motion-control:active,
.site-menu .language-switch:active {
  color: var(--site-menu-interaction-color);
  background: var(--site-menu-interaction-background);
}

@media (hover: hover) and (pointer: fine) {
  .media-motion-control:hover,
  .site-menu .language-switch:hover {
    color: var(--site-menu-interaction-color);
    background: var(--site-menu-interaction-background);
  }
}

.media-motion-control:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}

/* Preview controls are siblings of the project link, never nested in it. */
.project-card:has(.media-motion-control) {
  position: relative;
}

.media-motion-control-positioner {
  position: absolute;
  inset: 0 0 auto;
  padding-block-start: var(--preview-media-height);
  pointer-events: none;
}

[data-page-type='projects'] .media-motion-control-positioner {
  padding-block-start: 60%;
}

.related-projects .media-motion-control-positioner {
  padding-block-start: calc(100% * 314 / 504);
}

.project-media--video {
  display: grid;
}

.project-media--video > :is(video, .project-media__poster, .media-motion-control) {
  grid-area: 1 / 1;
}

.project-media--video > .media-motion-control {
  position: relative;
  inset: auto;
  align-self: end;
  justify-self: end;
  margin: 0.5rem;
}

::selection {
  color: #000;
  background: var(--site-menu-interaction-background);
}

[data-page-focus]:focus {
  outline: none;
}

[data-page-focus]:focus-visible {
  outline: 0.2rem solid currentColor;
  outline-offset: 0.25rem;
}

img,
video {
  display: block;
  width: 100%;
  height: auto;
}

figure {
  margin: 0;
}

figcaption {
  margin-block-start: 0.5rem;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.skip-link {
  position: fixed;
  z-index: 40;
  inset-block-start: 0.5rem;
  inset-inline-start: 0.5rem;
  padding: 0.5rem;
  background: #fff;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: translateY(0);
}

main {
  width: min(100% - 2rem, 90rem);
  margin-inline: auto;
}

.site-header {
  position: fixed;
  z-index: 30;
  inset-block-start: calc(var(--site-edge-space) + env(safe-area-inset-top, 0rem));
  inset-inline: calc(var(--site-edge-space) + env(safe-area-inset-left, 0rem))
    calc(var(--site-edge-space) + env(safe-area-inset-right, 0rem));
  font-size: var(--ui-control-font-size);
  line-height: var(--line-height-ui);
}

.site-menu,
.site-menu__topbar,
.site-menu__dropdown,
.site-menu__panel,
.site-menu__left-navigation,
.site-menu__right-navigation,
.site-menu__group {
  display: flex;
  align-items: center;
}

.site-menu {
  position: relative;
  min-height: var(--ui-control-size);
  align-items: center;
  gap: var(--site-menu-gap);
}

.site-menu {
  --site-menu-ui-control-width: var(--ui-circular-control-size);
  --site-menu-ui-control-space: calc(
    var(--site-menu-ui-control-width) + var(--site-menu-gap)
  );
}

.site-menu__ui-toggle {
  position: absolute;
  z-index: 2;
  inset-block-start: calc(0rem - var(--ui-circular-control-overshoot));
  inset-inline-end: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--site-menu-ui-control-width);
  height: var(--ui-circular-control-size);
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--site-menu-color);
  background: var(--site-menu-background);
  box-shadow: var(--site-menu-shadow);
  font: var(--font-weight-ui-dark-text) var(--ui-control-font-size) / 1 var(--font-family-body);
  cursor: pointer;
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.site-menu__ui-eye {
  width: calc(1.375rem * var(--ui-control-scale));
  height: calc(1.03125rem * var(--ui-control-scale));
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}

.site-menu__ui-eye-pupil {
  transform-box: view-box;
  transform: translateY(0);
  transition: transform var(--site-menu-navigation-motion-duration) var(--site-menu-navigation-easing, var(--motion-easing));
}

.site-menu__ui-toggle[aria-checked='false'] .site-menu__ui-eye-pupil {
  transform: translateY(-100%);
}

.site-menu__ui-toggle[hidden] {
  display: none;
}

.site-menu__ui-toggle[aria-checked='false'],
.site-menu__ui-toggle:focus-visible {
  background: var(--site-menu-interaction-background);
}

.site-menu .site-menu__ui-toggle:focus-visible {
  position: absolute;
  z-index: 2;
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}

@media (hover: hover) and (pointer: fine) {
  .site-menu__ui-toggle:hover {
    background: var(--site-menu-interaction-background);
  }
}

@media (min-width: 48rem) {
  .site-menu:has([data-site-menu-ui-toggle]:not([hidden])) {
    padding-inline-end: var(--site-menu-ui-control-space);
  }
}

@media (max-width: 47.999rem) {
  .site-menu__ui-toggle {
    display: none;
  }
}

.site-menu__topbar {
  flex: none;
}

.site-menu__dropdown {
  flex: 1;
  min-width: 0;
  gap: var(--site-menu-gap);
}

.site-menu__dropdown-spacer {
  display: none;
}

.site-menu__left-navigation,
.site-menu__right-navigation {
  flex: 1;
  min-width: 0;
  gap: var(--site-menu-gap);
}

.site-menu__right-navigation {
  justify-content: flex-end;
}

.site-menu__group {
  gap: var(--site-menu-gap);
}

/* Switch controls use static gaps. Item padding follows the shared rectangle
   and pill button tokens so thumbs match regular controls. Stretch-to-rest is
   visual and must not change those gaps. */
[data-switch-control] {
  --switch-thumb-x: 0px;
  --switch-thumb-width: 0px;
  position: relative;
}

[data-switch-control] > a::before,
[data-switch-control] > li::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: transparent;
}

[data-switch-control][data-switch-thumb-ready]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--switch-thumb-width);
  border-radius: var(--switch-thumb-radius);
  background: var(--switch-thumb-background);
  transform: translateX(var(--switch-thumb-x));
  transform-origin: left center;
  pointer-events: none;
}

[data-switch-control][data-switch-thumb-ready][data-switch-thumb-css-transition]::before {
  transition: transform 0.25s var(--motion-easing), width 0.25s var(--motion-easing);
}

@keyframes index-compact-filter-content-in-forward {
  from {
    transform: translateX(
      calc(
        var(--index-compact-filter-travel-distance, 100%) +
          var(--projects-results-filter-content-gap)
      )
    );
  }

  to {
    transform: translateX(0);
  }
}

@keyframes index-compact-filter-content-out-forward {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(
      calc(-100% - var(--projects-results-filter-content-gap))
    );
  }
}

@keyframes index-compact-filter-content-in-backward {
  from {
    transform: translateX(
      calc(
        0px - var(--index-compact-filter-travel-distance, 100%) -
          var(--projects-results-filter-content-gap)
      )
    );
  }

  to {
    transform: translateX(0);
  }
}

@keyframes index-compact-filter-content-out-backward {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(
      calc(
        var(--index-compact-filter-travel-distance, 100%) +
          var(--projects-results-filter-content-gap)
      )
    );
  }
}

@keyframes index-compact-filter-clear-in-forward {
  from {
    transform: translateY(-0.02rem) translateX(
      calc(
        var(--index-compact-filter-travel-distance, 100%) +
          var(--projects-results-filter-content-gap)
      )
    );
  }

  to {
    transform: translateY(-0.02rem) translateX(0);
  }
}

@keyframes index-compact-filter-clear-in-backward {
  from {
    transform: translateY(-0.02rem) translateX(
      calc(
        0px - var(--index-compact-filter-travel-distance, 100%) -
          var(--projects-results-filter-content-gap)
      )
    );
  }

  to {
    transform: translateY(-0.02rem) translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-switch-control][data-switch-thumb-ready]::before,
  [data-switch-control][data-switch-thumb-ready][data-switch-thumb-css-transition]::before {
    transition: none;
  }
}

.works-view-switch[data-switch-control] {
  --switch-thumb-radius: var(--ui-radius-box);
  --switch-thumb-background: var(--site-menu-interaction-background);
  display: flex;
  height: var(--ui-control-size);
  align-items: center;
  gap: 0;
  padding: 0;
  flex: none;
  border-radius: var(--ui-radius-box);
  background: var(--site-menu-background);
  box-shadow: var(--site-menu-shadow);
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
}

.works-view-switch[data-switch-control]::before {
  opacity: 0;
  transition: opacity 0.1s ease-in-out;
}

.works-view-switch[data-switch-control][data-switch-thumb-ready]::before {
  opacity: 1;
}

.site-menu .works-view-switch[data-switch-control] a {
  position: relative;
  z-index: 1;
  height: 100%;
  padding-block: var(--ui-control-padding-block-start)
    var(--ui-control-padding-block-end);
  border-radius: var(--ui-radius-box);
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-menu
  .works-view-switch[data-switch-control]:not([data-switch-thumb-ready])
  > a[aria-current='page']::before {
  background: var(--site-menu-interaction-background);
}

.site-menu
  .works-view-switch[data-switch-control][data-switch-thumb-ready]
  > a.is-thumb-target {
  color: var(--site-menu-interaction-color);
  font-weight: var(--font-weight-ui-dark-text);
  background: transparent;
}

.site-menu__brand-mobile,
.site-menu__toggle {
  display: none;
}

/* Keep the full desktop menu while giving its controls more room on laptops. */
@media (max-width: 95.999rem) {
  .site-menu a.site-menu__brand {
    position: relative;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0 calc(0.5rem * var(--ui-control-scale));
  }

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

  .site-menu__brand-mobile {
    display: block;
    line-height: 1;
    letter-spacing: 0.05em;
    text-box: trim-both cap alphabetic;
    margin-inline-end: -0.05em;
  }

  @media (min-width: 48rem) {
    .site-menu a.site-menu__brand {
      padding-block: var(--ui-control-padding-block-start)
        var(--ui-control-padding-block-end);
    }

    .site-menu__brand-mobile {
      text-box: normal;
    }
  }
}

.site-menu__swap-region,
.site-menu__primary-navigation,
.site-menu__primary-navigation-inner,
.site-menu__secondary-navigation-inner,
.site-menu__dropdown-stack,
.site-menu__dropdown-line,
.site-menu__dropdown-line-inner {
  display: contents;
}

.site-menu__context-viewport {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.site-menu__context-viewport > .site-menu__page-controls {
  pointer-events: auto;
}

.site-menu__page-controls {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 50%;
  display: flex;
  align-items: center;
  transform: translateX(-50%);
}

.site-menu__page-controls[data-projects-index-context] {
  position: fixed;
  z-index: 31;
  inset-block-start: auto;
  inset-block-end: calc(
    var(--site-edge-space) + env(safe-area-inset-bottom, 0rem)
  );
  inset-inline-start: 50vw;
  height: auto;
  margin: 0;
  transform: translateX(-50%);
  justify-content: center;
}

@media (min-width: 48rem) {
  .site-menu__page-controls[data-projects-index-context] {
    position: absolute;
    z-index: auto;
    inset-block: 0;
    inset-inline-start: 50%;
    height: var(--ui-control-size);
    transform: translateX(
      calc(-50% + var(--site-menu-context-inline-offset, 0px))
    );
  }
}

.site-menu__page-controls.page-motion-associated--outgoing {
  z-index: 1;
}

.site-menu__page-controls.page-motion-associated--outgoing[
    data-context-page-type='project'
  ] {
  visibility: hidden;
}

/* Without JS the Overview filter list is always visible, so it sits on a
   second header row. html.js is set in the document head, so this fallback
   must not paint when JS is available. */
html:not(.js)
  .site-menu:not([data-site-menu-enhanced]):has([data-projects-index-context]) {
  flex-wrap: wrap;
}

html:not(.js)
  .site-menu:not([data-site-menu-enhanced])
  .site-menu__context-viewport:has([data-projects-index-context]) {
  position: static;
  display: flex;
  flex: 0 0 100%;
  justify-content: center;
  order: 2;
}

@media (max-width: 47.999rem) {
  html:not(.js)
    .site-menu:not([data-site-menu-enhanced])
    .site-menu__context-viewport:has([data-projects-index-context]) {
    position: static;
    display: flex;
    flex: none;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
    order: unset;
  }
}

@media (min-width: 48.001rem) {
  html:not(.js)
    .site-menu:not([data-site-menu-enhanced])
    .site-menu__page-controls[data-projects-index-context] {
    position: static;
    max-width: 100%;
    overflow-x: auto;
    transform: none;
  }
}

.site-menu .site-menu__gallery-controls {
  position: fixed;
  z-index: 31;
  inset-block-start: calc(
    var(--site-edge-space) + env(safe-area-inset-top, 0rem)
  );
  inset-block-end: auto;
  inset-inline-start: 50vw;
  inset-inline-end: auto;
  display: flex;
  width: auto;
  justify-content: initial;
  gap: var(--site-menu-gap);
  margin: 0;
  transform: translateX(-50%);
  pointer-events: auto;
}

.site-menu__page-controls:has(.site-menu__gallery-controls) {
  position: static;
  transform: none;
}

.site-menu__gallery-controls[hidden] {
  display: none;
}

@keyframes gallery-scroll-text {
  0% {
    transform: translateX(
      calc(50cqw + var(--gallery-scroll-pill-padding-inline) + 50%)
    );
  }
  100% {
    transform: translateX(
      calc(-50cqw - var(--gallery-scroll-pill-padding-inline) - 50%)
    );
  }
}

@keyframes project-scroll-text {
  0% {
    transform: translateY(
      calc(-50cqh - var(--ui-control-padding-block-start) - 50%)
    );
  }
  100% {
    transform: translateY(
      calc(50cqh + var(--ui-control-padding-block-end) + 50%)
    );
  }
}

.gallery-scroll-pill {
  appearance: none;
  position: relative;
  container-type: inline-size;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--gallery-scroll-pill-width);
  height: var(--ui-control-size);
  margin: 0;
  padding-block: var(--ui-control-padding-block-start)
    var(--ui-control-padding-block-end);
  padding-inline: var(--gallery-scroll-pill-padding-inline);
  border: 0;
  border-radius: var(--ui-radius-pill);
  background: var(--site-menu-background);
  color: var(--site-menu-color);
  font: inherit;
  font-size: var(--ui-control-font-size);
  font-weight: var(--font-weight-ui-dark-text);
  line-height: 1;
  text-box: trim-both cap alphabetic;
  box-shadow: var(--site-menu-shadow);
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
  white-space: nowrap;
  overflow: hidden;
  pointer-events: auto;
  transition:
    width 0.4s ease-in-out,
    opacity 0.4s ease-in-out,
    background-color 0.1s ease-in-out,
    color 0.1s ease-in-out,
    display 0s 0.4s;
}

.gallery-scroll-pill:has(.gallery-scroll-pill__hit) {
  cursor: pointer;
}

.gallery-scroll-pill__hit {
  appearance: none;
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.site-menu .gallery-scroll-pill__hit:focus-visible {
  position: absolute;
}

.gallery-scroll-pill:is(
  [data-gallery-transitioning],
  [data-scroll-pill-dismissed]
) {
  width: 0;
  padding-inline: 0;
  opacity: 0;
  display: none;
}

.gallery-scroll-pill__text {
  display: inline-block;
  animation: gallery-scroll-text var(--gallery-scroll-text-duration)
    var(--gallery-scroll-text-ease) infinite;
}

.gallery-scroll-pill[data-project-scroll-pill] {
  container-type: size;
}

.gallery-scroll-pill[data-project-scroll-pill] .gallery-scroll-pill__text {
  animation-name: project-scroll-text;
}

body:has([data-page-root][data-project-view='present'])
  .site-menu__project-scroll {
  display: none;
}

.site-menu__page-controls[data-context-page-type='project'] {
  position: fixed;
  z-index: 31;
  inset-block-start: auto;
  inset-block-end: calc(
    var(--site-edge-space) + env(safe-area-inset-bottom, 0rem)
  );
  inset-inline-start: 50vw;
  height: auto;
  gap: var(--site-menu-gap);
  transform: translateX(-50%);
  pointer-events: none;
}

.site-menu .site-menu__project-scroll {
  display: flex;
  justify-content: center;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-scroll-pill,
  .gallery-scroll-pill__text {
    animation: none;
    transition: none;
  }
}

.site-menu__project-present-controls {
  display: flex;
  align-items: center;
  height: var(--ui-control-size);
  overflow: hidden;
  border-radius: var(--ui-radius-pill);
  background: var(--site-menu-background);
  box-shadow: var(--site-menu-shadow);
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
}

.site-menu__project-present-controls[hidden] {
  display: none;
}

.site-menu__project-present-controls output {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
  min-width: calc(3.25rem * var(--ui-control-scale));
  padding-inline: calc(0.25rem * var(--ui-control-scale));
  color: #000;
  font-size: var(--ui-control-font-size);
  font-weight: var(--font-weight-ui-dark-text);
  text-align: center;
  white-space: nowrap;
}

.site-menu__project-present-controls output > span {
  display: block;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  transform: translateY(var(--ui-control-text-offset-y));
}

.site-menu a,
.site-footer a,
.site-menu__toggle {
  --site-menu-button-background: var(--site-menu-background);
  padding: var(--ui-control-padding-block-start)
    var(--ui-control-padding-inline-rectangle)
    var(--ui-control-padding-block-end);
  border: 0;
  border-radius: var(--ui-radius-box);
  color: var(--site-menu-color);
  background: var(--site-menu-button-background);
  box-shadow: var(--site-menu-shadow);
  font: inherit;
  font-weight: var(--font-weight-ui-dark-text);
  line-height: 1;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
  transition: color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

.site-menu a,
.site-footer a {
  display: inline-flex;
  height: var(--ui-control-size);
  align-items: center;
}

.site-menu__toggle {
  height: var(--ui-control-size);
  align-items: center;
}

.site-menu a:not(.language-switch),
.site-footer a {
  font-size: var(--ui-control-font-size);
}

.site-menu .language-switch {
  display: inline-grid;
  width: var(--ui-circular-control-size);
  height: var(--ui-circular-control-size);
  align-items: center;
  justify-items: center;
  margin: calc(0rem - var(--ui-circular-control-overshoot));
  margin-inline: 0;
  padding: 0;
  border-radius: 50%;
  color: var(--site-menu-color);
  background: var(--site-menu-background);
}

.site-menu .language-switch > span {
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  line-height: 1;
  text-box: trim-both cap alphabetic;
  transform: translateY(
    calc((var(--ui-control-padding-block-start) - var(--ui-control-padding-block-end)) / 2)
  );
}

/* Keep About/Contact as separate pills. Colour and frost share one layer so
   adjacent backdrop-filter + box-shadow do not composite a seam into the
   next button, or filter the button's own changing background in Safari. */
.site-menu a.site-menu__page-link {
  position: relative;
  isolation: isolate;
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.site-menu a.site-menu__page-link::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--site-menu-button-background);
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
  transition: background-color 0.1s ease-in-out;
}

:is(.site-menu, .site-footer)
  a:is([aria-current='page'], [data-navigation-active]) {
  --site-menu-button-background: var(--site-menu-background-active);
  color: var(--site-menu-color-active);
  font-weight: var(--font-weight-ui-light-text);
}

/* aria-current is persistent; :active only represents a pointer/touch press.
   Page pills use the same dark-grey treatment as hover/current. Orange stays
   on language switch, close, and similar controls. */
:is(.site-menu, .site-footer) a:not(.language-switch):active {
  --site-menu-button-background: var(--site-menu-background-active);
  color: var(--site-menu-color-active);
  font-weight: var(--font-weight-ui-light-text);
}

.site-menu__toggle--close:active {
  color: var(--site-menu-interaction-color);
  font-weight: var(--font-weight-ui-dark-text);
  background: var(--site-menu-interaction-background);
}

.site-menu a:focus-visible,
.site-footer a:focus-visible,
.site-menu button:focus-visible {
  position: relative;
  z-index: 1;
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}

@media (hover: hover) and (pointer: fine) {
  :is(.site-menu, .site-footer)
    a:not(.language-switch):not([aria-current='page']):not([data-navigation-active]):hover {
    --site-menu-button-background: var(--site-menu-background-active);
    color: var(--site-menu-color-active);
    font-weight: var(--font-weight-ui-light-text);
  }

  .gallery-scroll-pill:has(.gallery-scroll-pill__hit):hover {
    color: var(--site-menu-interaction-color);
    background: var(--site-menu-interaction-background);
  }
}



.site-menu
  .works-view-switch[data-switch-control]:not([data-switch-thumb-ready])
  > a[aria-current='page'] {
  color: var(--site-menu-interaction-color);
  font-weight: var(--font-weight-ui-dark-text);
  background: var(--site-menu-interaction-background);
}

.site-menu
  .works-view-switch[data-switch-control][data-switch-thumb-ready]
  > a:is(:link, :visited, :hover, :focus-visible, :active) {
  color: var(--site-menu-color);
  font-weight: var(--font-weight-ui-dark-text);
  background: transparent;
}

.site-menu
  .works-view-switch[data-switch-control][data-switch-thumb-ready]
  > a.is-thumb-target:is(:link, :visited, :hover, :focus-visible, :active) {
  color: var(--site-menu-interaction-color);
  font-weight: var(--font-weight-ui-dark-text);
}

@media (max-width: 47.999rem) {
  .site-header {
    inset-inline: var(--site-edge-space);
  }

  .site-footer {
    margin-inline: calc(var(--site-menu-gap) + env(safe-area-inset-left, 0rem))
      calc(var(--site-menu-gap) + env(safe-area-inset-right, 0rem));
  }

  [data-page-type='project'] > [data-page-content] > .site-footer {
    padding-block-start: var(--site-menu-gap);
  }

  .site-header,
  .site-menu {
    overflow: visible;
  }

  .site-menu {
    position: relative;
    align-items: stretch;
    justify-content: flex-start;
    width: 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
  }

  .site-menu:not([data-site-menu-open]) {
    --site-menu-dropdown-motion-duration: 350ms;
    --site-menu-dropdown-stagger: 35ms;
  }

  .site-menu__topbar {
    position: relative;
    z-index: 1;
    flex: none;
    width: 100%;
  }

  .site-menu__left-navigation {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .site-menu__dropdown {
    position: static;
    order: -1;
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    overflow: visible;
  }

  /* Height lives on an empty spacer. The bars are taken out of that box so
     WebKit cannot clip their slide. Without JS the links stay in flow. */
  html.js .site-menu[data-site-menu-enhanced] .site-menu__dropdown {
    display: contents;
  }

  html.js .site-menu[data-site-menu-enhanced] .site-menu__dropdown-spacer {
    display: block;
    order: -1;
    flex: none;
    width: 100%;
    height: 0;
    overflow: hidden;
    pointer-events: none;
  }

  html.js .site-menu[data-site-menu-enhanced][data-site-menu-motion-ready] .site-menu__dropdown-spacer {
    transition:
      height var(--site-menu-dropdown-motion-duration) var(--site-menu-dropdown-easing),
      margin-block-end var(--site-menu-dropdown-motion-duration) var(--site-menu-dropdown-easing);
  }

  html.js .site-menu:not([data-site-menu-enhanced]):not([data-site-menu-open])
    .site-menu__dropdown {
    height: 0;
    overflow: hidden;
  }

  html:not(.js) .site-menu__dropdown,
  html.js .site-menu[data-site-menu-enhanced][data-site-menu-open]
    .site-menu__dropdown-spacer {
    height: var(--site-menu-dropdown-layout-height, auto);
    margin-block-end: var(--site-menu-gap);
  }

  .site-menu__dropdown-stack {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--site-menu-gap);
  }

  html.js .site-menu[data-site-menu-enhanced] .site-menu__dropdown-stack {
    position: absolute;
    z-index: 0;
    inset-inline: 0;
    inset-block-start: 0;
    width: 100%;
    transform: translateY(0);
  }

  html.js .site-menu[data-site-menu-enhanced] :is(
    .site-menu__dropdown-stack > .site-menu__dropdown-line,
    .site-menu__panel
  ) {
    transform: translateY(0);
  }

  html.js .site-menu[data-site-menu-enhanced][data-site-menu-motion-ready] :is(
    .site-menu__dropdown-stack > .site-menu__dropdown-line,
    .site-menu__panel
  ) {
    transition: transform var(--site-menu-dropdown-motion-duration) var(--site-menu-dropdown-easing) var(--site-menu-row-delay, calc(2 * var(--site-menu-dropdown-stagger)));
  }

  html.js .site-menu[data-site-menu-enhanced] .site-menu__panel {
    --site-menu-row-delay: var(--site-menu-dropdown-stagger);
    --site-menu-row-park-height: var(--site-menu-dropdown-layout-height, 8rem);
  }

  /* Each row parks independently, including before the module is ready. */
  html.js .site-menu:not([data-site-menu-open]) :is(
    .site-menu__dropdown-stack > .site-menu__dropdown-line,
    .site-menu__panel
  ) {
    transform: translateY(calc(
      0px - var(--site-menu-row-park-height, 100%)
      - var(--site-edge-space) - env(safe-area-inset-top, 0rem)
      - var(--site-menu-dropdown-park-extra)
    ));
  }

  html.js .site-menu[data-site-menu-enhanced][data-site-menu-motion-ready]:not([data-site-menu-open]) :is(
    .site-menu__dropdown-stack > .site-menu__dropdown-line,
    .site-menu__panel
  ) {
    transition-delay: var(--site-menu-row-exit-delay, 0ms);
    transition-timing-function: var(--motion-easing);
  }

  html.js .site-menu[data-site-menu-enhanced] .site-menu__panel {
    --site-menu-row-exit-delay: var(--site-menu-dropdown-stagger);
  }

  html.js .site-menu[data-site-menu-enhanced][data-site-menu-motion-ready]:not([data-site-menu-open]) .site-menu__dropdown-spacer {
    transition-delay: calc(2 * var(--site-menu-dropdown-stagger));
  }

  .media-motion-control {
    display: none;
  }

  html.js .site-menu:not([data-site-menu-enhanced]) .site-menu__dropdown,
  html.js .site-menu:not([data-site-menu-enhanced]) .site-menu__dropdown-spacer,
  html.js .site-menu:not([data-site-menu-enhanced]) .site-menu__dropdown-stack {
    transition: none;
  }

  .site-menu__swap-region,
  .site-menu__primary-navigation,
  .site-menu__primary-navigation-inner {
    display: flex;
    align-items: center;
    width: 100%;
  }

  .site-menu__swap-region {
    justify-content: flex-start;
    gap: var(--site-menu-gap);
    min-height: var(--ui-control-size);
  }

  .site-menu__primary-navigation {
    flex: 0 0 50%;
    width: 50%;
    justify-content: flex-end;
  }

  .site-menu__primary-navigation-inner {
    flex: none;
    width: auto;
  }

  .site-menu__dropdown-line,
  .site-menu__dropdown-line-inner {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 100%;
  }

  .site-menu__right-navigation,
  .site-menu__panel {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
  }

  .site-menu__panel > .site-menu__dropdown-line {
    width: auto;
  }

  .site-menu[data-site-menu-enhanced]
    [data-site-menu-line]:not([data-site-menu-line-visible]) {
    pointer-events: none;
  }

  /* Frost on an isolated layer so icon transforms and newly painted
     dropdown pills do not re-composite the circular button. */
  .site-menu__toggle {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    flex: none;
    width: var(--ui-circular-control-size);
    height: var(--ui-circular-control-size);
    min-height: var(--ui-circular-control-size);
    margin: calc(0rem - var(--ui-circular-control-overshoot));
    padding: 0;
    border-radius: 50%;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-menu__toggle::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--site-menu-background);
    pointer-events: none;
    -webkit-backdrop-filter: blur(0.78125rem);
    backdrop-filter: blur(0.78125rem);
    transform: translateZ(0);
  }

  .site-menu__toggle--open {
    align-items: center;
    justify-content: center;
    margin-inline-start: 0;
    margin-inline-end: 0;
  }

  .site-menu__toggle-icon {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  .site-menu__toggle-icon-line {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    width: calc(1rem * var(--ui-control-scale));
    height: calc(0.08rem * var(--ui-control-scale));
    background: currentColor;
    transform: translate(-50%, -50%);
  }

  .site-menu__toggle-icon-line {
    transition:
      opacity var(--site-menu-dropdown-motion-duration) ease-in-out,
      transform var(--site-menu-dropdown-motion-duration) ease-in-out;
  }

  .site-menu__toggle-icon-line:nth-child(1) {
    transform: translate(-50%, -50%) translateY(calc(-0.325rem * var(--ui-control-scale)));
  }

  .site-menu__toggle-icon-line:nth-child(3) {
    transform: translate(-50%, -50%) translateY(calc(0.325rem * var(--ui-control-scale)));
  }

  .site-menu__toggle--open[aria-expanded='true']
    .site-menu__toggle-icon-line:nth-child(1) {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .site-menu__toggle--open[aria-expanded='true']
    .site-menu__toggle-icon-line:nth-child(2) {
    opacity: 0;
    transform: translate(-50%, -50%) scaleX(0);
  }

  .site-menu__toggle--open[aria-expanded='true']
    .site-menu__toggle-icon-line:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  html.js .site-menu__toggle--open,
  .site-menu[data-site-menu-enhanced] .site-menu__toggle--open {
    display: flex;
  }

  .site-menu[data-site-menu-enhanced] .site-menu__toggle--close {
    display: none;
  }

  .works-view-switch[data-switch-control] {
    min-width: 0;
    overflow: clip;
    overflow-clip-margin: var(--ui-circular-control-overshoot);
  }

  .site-menu__toggle--close {
    align-items: center;
    justify-content: center;
    margin-inline-start: var(--ui-circular-control-overshoot);
    margin-inline-end: 0;
    color: var(--site-menu-interaction-color);
    background: var(--site-menu-interaction-background);
  }

  .site-menu__toggle--close > span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }

  .site-menu__toggle--close img {
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    display: block;
    width: calc(0.08rem * var(--ui-control-scale));
    height: calc(1.25rem * var(--ui-control-scale));
  }

  .site-menu__toggle--close img:first-child {
    transform: translate(-50%, -50%) rotate(45deg);
  }

  .site-menu__toggle--close img:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  .site-menu__page-controls {
    position: static;
    flex: none;
    transform: none;
  }

  .site-menu__context-viewport {
    position: static;
    display: flex;
    flex: none;
    width: 0;
    height: 0;
    overflow: visible;
    pointer-events: none;
  }

  .site-menu__context-viewport:has(.site-menu__gallery-controls),
  .site-menu__context-viewport:has(.site-menu__project-scroll) {
    position: static;
    flex: none;
    order: unset;
    width: 0;
    height: 0;
    overflow: visible;
  }

  .site-menu .site-menu__gallery-controls {
    position: fixed;
    z-index: 31;
    inset-block-start: auto;
    inset-block-end: calc(
      var(--site-edge-space) + env(safe-area-inset-bottom, 0rem)
    );
    inset-inline-start: 50vw;
    inset-inline-end: auto;
    width: auto;
    margin: 0;
    transform: translateX(-50%);
    justify-content: center;
  }

  .site-menu__page-controls[data-projects-index-context] {
    position: fixed;
    z-index: 31;
    inset-block-start: auto;
    inset-block-end: calc(
      var(--site-edge-space) + env(safe-area-inset-bottom, 0rem)
    );
    inset-inline: var(--site-edge-space);
    width: auto;
    max-width: none;
    margin: 0;
    transform: none;
    justify-content: center;
    pointer-events: auto;
  }

  .site-menu__page-controls.page-motion-associated--outgoing {
    position: absolute;
  }
}

@media (min-width: 48rem) {
  /* Match mobile menu entry and exit curves without its row stagger. */
  .site-menu {
    --site-menu-navigation-easing: var(--site-menu-dropdown-easing);
  }

  .site-menu:is([data-site-menu-ui-hidden], [data-site-menu-navigation-hidden]) {
    --site-menu-navigation-easing: var(--motion-easing);
  }

  .site-menu__topbar,
  .site-menu__dropdown {
    transition: transform var(--site-menu-navigation-motion-duration) var(--site-menu-navigation-easing);
  }

  /* Gallery gestures hide only the global, top navigation. Context controls
     remain fixed independently. */
  .site-menu[data-site-menu-navigation-hidden] :is(
    .site-menu__topbar,
    .site-menu__dropdown
  ) {
    transform: translateY(calc(-100% - var(--site-edge-space) - 0.5rem));
  }
}

/* Scroll pills keep their independent visibility. The manual switch parks
   navigation and other context controls, while its own button stays in place. */
.site-menu__topbar,
.site-menu__context-viewport,
[data-project-present-controls] {
  transition: transform var(--site-menu-navigation-motion-duration) var(--site-menu-navigation-easing, var(--motion-easing));
}

.site-menu[data-site-menu-ui-hidden] :is(
  .site-menu__topbar,
  .site-menu__dropdown,
  .site-menu__context-viewport:not(:has([data-gallery-scroll-pill], [data-project-scroll-pill])),
  [data-project-present-controls]
) {
  transform: translateY(calc(-100% - var(--site-edge-space) - 0.5rem));
}

@media (max-width: 47.999rem) {
  .site-menu[data-site-menu-ui-hidden] :is(
    .site-menu__topbar,
    .site-menu__context-viewport:not(:has([data-gallery-scroll-pill], [data-project-scroll-pill])),
    [data-project-present-controls]
  ) {
    transform: translateY(calc(-100vh - 1rem));
  }

  html.js .site-menu[data-site-menu-enhanced][data-site-menu-ui-hidden] .site-menu__dropdown-stack {
    transform: translateY(calc(-100vh - var(--site-menu-dropdown-park-extra)));
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu a,
  .site-menu a.site-menu__page-link::before,
  .site-menu__toggle,
  .site-menu,
  .site-menu__topbar,
  .site-menu__dropdown,
  .site-menu__panel,
  html.js .site-menu[data-site-menu-enhanced][data-site-menu-motion-ready] .site-menu__dropdown-spacer,
  html.js .site-menu[data-site-menu-enhanced] .site-menu__dropdown-stack,
  html.js .site-menu[data-site-menu-enhanced][data-site-menu-motion-ready] :is(
    .site-menu__dropdown-stack > .site-menu__dropdown-line,
    .site-menu__panel
  ),
  [data-switch-control]::before,
  .site-menu[data-site-menu-enhanced] [data-site-menu-line],
  .site-menu[data-site-menu-enhanced] .site-menu__context-viewport,
  .site-menu[data-site-menu-enhanced] .site-menu__gallery-controls,
  .works-view-switch[data-switch-control],
  .site-menu__toggle-icon-line,
  .site-menu__ui-eye-pupil,
  [data-project-present-controls] {
    transition: none;
  }
}

@media (max-width: 47.999rem) and (prefers-reduced-motion: reduce) {
  html.js .site-menu[data-site-menu-enhanced][data-site-menu-motion-ready]:not([data-site-menu-open]) :is(
    .site-menu__dropdown-stack > .site-menu__dropdown-line,
    .site-menu__panel,
    .site-menu__dropdown-spacer
  ) {
    transition: none;
  }
}

.site-footer {
  width: auto;
  margin-inline: calc(var(--site-edge-space) + env(safe-area-inset-left, 0rem))
    calc(var(--site-edge-space) + env(safe-area-inset-right, 0rem));
  padding-block: 3rem calc(var(--site-edge-space) + env(safe-area-inset-bottom, 0rem));
  font-size: var(--ui-control-font-size);
  line-height: var(--line-height-ui);
}

[data-page-root]:has(> [data-page-content] > .site-footer)
  > [data-page-content] {
  display: flex;
  flex-direction: column;
}

[data-page-root]:has(> [data-page-content] > .site-footer)
  > [data-page-content]
  > main {
  flex: 1 0 auto;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--site-menu-gap);
}

@media (min-width: 48.001rem) {
  .site-footer__links {
    justify-content: flex-start;
  }
}

.projects-page__title {
  margin-block-end: 2rem;
}

.projects-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.projects-filters {
  flex: 1 1 40rem;
}

.projects-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.projects-filters a {
  display: inline-block;
  padding-block: 0.25rem;
  text-decoration: none;
}

.projects-filters a:hover,
.projects-filters a[aria-current='page'] {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.projects-search {
  flex: 0 1 24rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.5rem;
}

.projects-search label {
  grid-column: 1 / -1;
}

.projects-search input,
.projects-search button {
  min-width: 0;
  padding: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 0;
  color: inherit;
  background: #fff;
  font: inherit;
}

.projects-search button {
  cursor: pointer;
}

.projects-search input:focus-visible,
.projects-search button:focus-visible {
  outline: 0.2rem solid currentColor;
  outline-offset: 0.25rem;
}

.projects-results {
  margin-block-start: 2rem;
}

.projects-results__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.projects-results__header h2,
.projects-results__header p,
.projects-results__empty {
  margin: 0;
}

.projects-results__header p {
  flex: none;
}

.projects-results__empty {
  margin-block-start: 1rem;
}

.projects-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.projects-overview > li {
  min-width: 0;
}

.project-card__surface {
  display: grid;
  gap: 0.5rem;
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
  text-decoration: none;
}

.project-card__information,
.project-card__heading {
  display: grid;
  gap: 0.25rem 0.5rem;
}

.project-card__heading {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
}

.project-card h2,
.project-card h3,
.project-card p {
  margin: 0;
}

.project-card h2,
.project-card h3 {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.project-card__year {
  white-space: nowrap;
}

.project-card__categories {
  font-size: var(--font-size-ui);
  opacity: 0.65;
}

.project-card a:hover h2,
.project-card a:hover h3 {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.related-projects {
  margin-block-start: 3rem;
}

.related-projects > h2 {
  margin: 0;
}

.related-projects__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.related-projects__list > li {
  min-width: 0;
}

.related-projects__list > li:nth-child(n + 3) {
  display: none;
}

.project-gallery {
  display: grid;
  gap: 1rem;
}

[data-gallery-controls] {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-block-end: 1rem;
}

[data-gallery-controls][hidden] {
  display: none;
}

[data-project-gallery-shell] [data-gallery-stage] {
  display: grid;
}

html:not(.js) .project-gallery [data-gallery-slide]:not(:first-child) {
  display: list-item;
}

.project-gallery--desktop {
  display: none;
}

.project-gallery--mobile {
  grid-template-rows: repeat(3, minmax(0, auto));
}

.project-gallery__group {
  min-width: 0;
}

.project-gallery__track {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline proximity;
  margin: 0;
  padding: 0;
  list-style: none;
}

.project-gallery__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
}

[data-gallery-enhanced] {
  --project-gallery-motion-duration: var(--motion-duration-content);
  --project-gallery-motion-easing: var(--motion-easing);
}

[data-gallery-view][data-gallery-enhanced] {
  touch-action: pan-y pinch-zoom;
}

[data-gallery-enhanced] [data-gallery-track] {
  display: grid;
  overflow: hidden;
  scroll-snap-type: none;
}

/* Before enhancement, each group is an overflow row. Hide non-first slides so
   the parser does not lazy-load neighbours. html:not(.js) restores the native track.
   Progressive navigation may mark the restored index with data-active before the
   gallery module enhances the view. */
.project-gallery [data-gallery-slide]:not(:first-child) {
  display: none;
}

.project-gallery:not([data-gallery-enhanced]) [data-gallery-slide][data-active="true"] {
  display: list-item;
}

.project-gallery:not([data-gallery-enhanced])
  [data-gallery-group]:has([data-gallery-slide][data-active="true"])
  [data-gallery-slide]:not([data-active="true"]) {
  display: none;
}

[data-gallery-enhanced] [data-gallery-slide] {
  grid-area: 1 / 1;
  flex: initial;
  visibility: hidden;
  pointer-events: none;
  transform: scaleX(0);
  scroll-snap-align: none;
}

/* Stacked inactive slides still intersect the viewport if only visibility is
   hidden, so keep them out of layout unless they are active, preloading, or in
   a scaleX pair. */
[data-gallery-enhanced]
  [data-gallery-slide]:not([data-active="true"]):not([data-gallery-motion-role]):not([data-gallery-preload]) {
  display: none;
}

[data-gallery-enhanced] [data-gallery-slide][data-gallery-preload] {
  display: list-item;
}

[data-gallery-enhanced] [data-gallery-slide][data-active="true"] {
  display: list-item;
  visibility: visible;
  pointer-events: auto;
  transform: scaleX(1);
}

[data-gallery-enhanced] [data-gallery-slide][data-gallery-motion-role] {
  display: list-item;
  visibility: visible;
  transition-property: transform;
  transition-duration: var(--project-gallery-motion-duration);
  transition-timing-function: var(--project-gallery-motion-easing);
  transition-delay: var(--project-gallery-motion-delay, 0ms);
}

[data-gallery-enhanced] [data-gallery-slide][data-gallery-motion-role="outgoing"] {
  z-index: 1;
  pointer-events: none;
}

[data-gallery-enhanced] [data-gallery-slide][data-gallery-motion-role="incoming"] {
  z-index: 2;
  pointer-events: auto;
}

[data-gallery-enhanced][data-gallery-motion-direction="forward"]
  [data-gallery-motion-role="outgoing"] {
  transform-origin: left center;
}

[data-gallery-enhanced][data-gallery-motion-direction="forward"]
  [data-gallery-motion-role="incoming"] {
  transform-origin: right center;
}

[data-gallery-enhanced][data-gallery-motion-direction="backward"]
  [data-gallery-motion-role="outgoing"] {
  transform-origin: right center;
}

[data-gallery-enhanced][data-gallery-motion-direction="backward"]
  [data-gallery-motion-role="incoming"] {
  transform-origin: left center;
}

[data-gallery-enhanced][data-gallery-motion-phase="staged"]
  [data-gallery-motion-role="outgoing"] {
  transform: scaleX(1);
}

[data-gallery-enhanced][data-gallery-motion-phase="staged"]
  [data-gallery-motion-role="incoming"] {
  transform: scaleX(0);
}

[data-gallery-enhanced][data-gallery-motion-phase="running"]
  [data-gallery-motion-role="outgoing"] {
  transform: scaleX(0);
}

[data-gallery-enhanced][data-gallery-motion-phase="running"]
  [data-gallery-motion-role="incoming"] {
  transform: scaleX(1);
}

[data-gallery-enhanced]:is([data-gallery-motion-phase="dragging"], [data-gallery-motion-phase="settling"])
  [data-gallery-motion-role="outgoing"] {
  transform: scaleX(calc(1 - var(--project-gallery-gesture-progress, 0)));
}

[data-gallery-enhanced]:is([data-gallery-motion-phase="dragging"], [data-gallery-motion-phase="settling"])
  [data-gallery-motion-role="incoming"] {
  transform: scaleX(var(--project-gallery-gesture-progress, 0));
}

[data-gallery-enhanced][data-gallery-motion-phase="dragging"]
  [data-gallery-motion-role] {
  transition: none;
  pointer-events: none;
}

[data-gallery-enhanced][data-gallery-motion-phase="settling"]
  [data-gallery-motion-role] {
  transition-duration: var(--project-gallery-settle-duration);
  transition-delay: 0ms;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-gallery-enhanced] [data-gallery-slide] {
    transition: none;
  }

}

.project-preview__surface {
  display: grid;
  gap: 0.5rem;
  text-decoration: none;
}

.project-preview h2,
.project-preview p {
  margin: 0;
}

/* Filter gallery (projects page) */
[data-page-type='projects'] {
  --projects-ui-color: #fff;

  min-height: 100vh;
  min-height: 100dvh;
  color: var(--projects-ui-color);
  background: #000;
}

[data-page-type='projects'] main {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

[data-page-type='projects'] .projects-results {
  height: 100vh;
  height: 100dvh;
  margin-block-start: 0;
  overflow: auto;
}

[data-page-type='projects'] .projects-page__title,
[data-page-type='projects'] .projects-results__header {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

[data-page-type='projects'] .projects-results__empty {
  margin: 0;
  padding: calc(
      var(--site-edge-space) + env(safe-area-inset-top, 0rem) +
        var(--ui-control-size) + 0.75rem
    )
    calc(var(--site-edge-space) + env(safe-area-inset-left, 0rem));
}

[data-page-type='projects'] .projects-overview {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 0;
}

[data-page-type='projects'] .projects-overview__placeholder {
  aspect-ratio: 5 / 3;
}

[data-page-type='projects'] .projects-overview .project-card__surface {
  display: block;
  position: relative;
  overflow: hidden;
  aspect-ratio: 5 / 3;
  text-decoration: none;
}

[data-page-type='projects'] .projects-overview .project-card figure {
  position: relative;
  height: 100%;
  background-color: #000;
}

[data-page-type='projects'] .projects-overview .project-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

[data-page-type='projects'] .projects-overview video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  visibility: hidden;
}

@media (min-width: 48rem) {
  [data-page-type='projects'] .projects-overview video:is([data-media-playing], [data-media-motion-held]) {
    visibility: visible;
  }
}

[data-page-type='projects'] .projects-overview .project-card {
  position: relative;
}

[data-page-type='projects'] .projects-overview .project-preview__meta {
  position: absolute;
  z-index: 3;
  inset-block-end: 0.3rem;
  inset-inline-start: 0.3rem;
  display: flex;
  align-items: flex-end;
  gap: 0.1rem;
  max-width: calc(100% - 0.6rem);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  pointer-events: none;
}

@media (min-width: 48rem) {
  [data-page-type='projects'] .projects-overview .project-preview__meta {
    inset-inline-end: 0.3rem;
  }
}

[data-page-type='projects']
  .projects-overview
  :is(.project-gallery__meta-title, .project-gallery__meta-category) {
  display: inline-flex;
  height: var(--ui-control-size);
  min-width: 0;
  align-items: center;
  padding-block: var(--ui-control-padding-block-start)
    var(--ui-control-padding-block-end);
  overflow: hidden;
  border: 0;
  border-radius: var(--ui-radius-box);
  color: var(--site-menu-color);
  font-size: var(--ui-control-font-size);
  font-weight: var(--font-weight-ui-dark-text);
  line-height: 1;
  text-box: trim-both cap alphabetic;
  white-space: nowrap;
  background: var(--site-menu-background);
  box-shadow: var(--site-menu-shadow);
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
  pointer-events: auto;
  transition:
    color 0.1s ease-in-out,
    background-color 0.1s ease-in-out;
}

:is([data-page-type='projects'] .projects-overview, [data-page-type='gallery'])
  .project-gallery__meta-title {
  flex: 1 1 auto;
  min-width: 0;
  max-width: max-content;
  padding-inline: var(--ui-control-padding-inline-rectangle);
}

:is([data-page-type='projects'] .projects-overview, [data-page-type='gallery'])
  .project-gallery__meta-title > span {
  min-width: 0;
  padding-block: var(--ui-control-padding-block-start)
    var(--ui-control-padding-block-end);
  margin-block: calc(-1 * var(--ui-control-padding-block-start))
    calc(-1 * var(--ui-control-padding-block-end));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}

:is([data-page-type='projects'] .projects-overview, [data-page-type='gallery'])
  .project-gallery__meta-category {
  flex: 0 0 auto;
  min-width: 0;
  max-width: 58%;
  padding-inline: var(--ui-control-padding-inline-pill);
  border-radius: var(--ui-radius-pill);
}

[data-page-type='projects']
  .projects-overview
  :is(.project-gallery__meta-title, .project-gallery__meta-category):focus-visible {
  color: var(--site-menu-color-active);
  font-weight: var(--font-weight-ui-light-text);
  background: var(--site-menu-background-active);
}

@media (hover: hover) and (pointer: fine) {
  [data-page-type='projects'] .projects-overview .project-preview__meta {
    opacity: 0;
    transition: opacity 0.1s ease-in-out;
  }

  [data-page-type='projects']
    .projects-overview
    .project-preview__meta
    > * {
    pointer-events: none;
  }

  [data-page-type='projects']
    .projects-overview
    .project-card:is(:hover, :has(:focus-visible)) {
    z-index: 1;
  }

  [data-page-type='projects']
    .projects-overview
    .project-card:is(:hover, :has(:focus-visible))
    .project-preview__meta {
    opacity: 1;
  }

  [data-page-type='projects']
    .projects-overview
    .project-card:is(:hover, :has(:focus-visible))
    .project-preview__meta
    > * {
    pointer-events: auto;
  }

  [data-page-type='projects'] .projects-overview a.project-gallery__meta-title:hover {
    color: var(--site-menu-color-active);
    font-weight: var(--font-weight-ui-light-text);
    background: var(--site-menu-background-active);
  }

  [data-page-type='projects']
    .projects-overview
    a.project-gallery__meta-category:hover {
    color: var(--site-menu-interaction-color);
    background: var(--site-menu-interaction-background);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-page-type='projects'] .projects-overview .project-preview__meta,
  [data-page-type='projects']
    .projects-overview
    :is(.project-gallery__meta-title, .project-gallery__meta-category) {
    transition: none;
  }
}

@media (max-width: 47.999rem) {
  [data-page-type='projects'] .projects-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-page-type='projects'] .projects-overview .project-preview__meta {
    display: none;
  }

  [data-page-type='projects'] .projects-overview__placeholder {
    display: none;
  }
}

/* Project index */
html:has([data-page-root][data-page-type='index']),
body:has([data-page-root][data-page-type='index']) {
  background: #000;
}

[data-projects-index-context] {
  --index-ui-background: var(--site-menu-background);
  --index-ui-background-active: var(--site-menu-interaction-background);
  --index-ui-color: var(--site-menu-color);
  --index-ui-close-color: #000;
  --index-ui-close-color-hover: #000;
  --index-ui-shadow: var(--site-menu-shadow);
  --index-close-icon-width: 1cap;
  --index-close-icon-height: 1cap;
  --index-close-icon-offset-y: -0.04rem;
  --index-clear-text-gap: calc(var(--ui-control-padding-inline-pill) * 0.5);
}

.site-menu [data-projects-index-context] :is(a, button, input) {
  font-weight: var(--font-weight-ui-dark-text);
}

[data-page-type='index'] {
  --index-color: #c9c9c9;
  --index-color-muted: #797979;
  --index-divider: #797979;
  --index-row-active: #2a2a2a;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--index-color);
  background: #000;
}

[data-page-type='index'] main {
  width: 100%;
  max-width: none;
  margin: 0;
}

[data-projects-index-context] .index-toolbar {
  display: flex;
  width: max-content;
  min-width: 0;
  height: var(--ui-control-size);
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  max-width: var(--site-menu-context-max-width, 50rem);
  gap: var(--site-menu-gap);
  font-size: var(--ui-control-font-size);
  line-height: var(--line-height-ui);
  pointer-events: auto;
}

[data-projects-index-context]
  .index-toolbar[data-index-toolbar-mode='filter'] {
  max-width: var(--site-menu-context-max-width, 50rem);
}

[data-projects-index-context]
  :is(.index-filter-toggle, .index-search-toggle) {
  display: none;
}

[data-projects-index-context] .projects-filters {
  --projects-filter-fade-size: var(--ui-control-size);
  position: relative;
  min-width: 0;
  border-radius: var(--ui-radius-pill);
}

[data-projects-index-context] .projects-filters__viewport {
  position: relative;
  z-index: 1;
  overflow-x: auto;
  overflow-anchor: none;
  scrollbar-width: none;
}

[data-projects-index-context] .projects-filters__viewport::-webkit-scrollbar {
  display: none;
}

[data-projects-index-context] .projects-filters [data-switch-control] {
  --switch-thumb-radius: var(--ui-radius-pill);
  --switch-thumb-background: var(--index-ui-background-active);
  flex: none;
  flex-wrap: nowrap;
  height: var(--ui-control-size);
  align-items: center;
  gap: 0;
  padding-block: 0;
  padding-inline: 0;
  overflow-x: clip;
  border-radius: var(--ui-radius-pill);
  color: var(--index-ui-color);
  background: var(--index-ui-background);
  box-shadow: var(--index-ui-shadow);
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
}

[data-projects-index-context] .projects-filters li {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  border-radius: var(--ui-radius-pill);
}

[data-projects-index-context] .projects-filters li + li {
  margin-inline-start: -0.25rem;
}

[data-projects-index-context] .projects-filters li.is-active {
  background: transparent;
}

[data-projects-index-context]
  .projects-filters
  [data-switch-control]:not([data-switch-thumb-ready])
  > li.is-active::before {
  background: var(--index-ui-background-active);
}

[data-projects-index-context]
  .projects-filters
  [data-switch-control][data-switch-thumb-ready]
  > li.is-active {
  background: transparent;
}

[data-projects-index-context]
  .projects-filters
  [data-switch-control][data-switch-thumb-ready]
  > li:is(.is-active, :hover, :focus-within),
[data-projects-index-context]
  .projects-filters
  [data-switch-control][data-switch-thumb-ready]
  a:is(:link, :visited, :hover, :focus-visible, :active) {
  background: transparent;
}

[data-projects-index-context]
  .projects-filters[data-filter-overflow-enhanced]
  .projects-filters__viewport {
  --projects-filter-mask-start: #000 0;
  --projects-filter-mask-end: #000 100%;
  -webkit-mask-image: linear-gradient(
    to right,
    var(--projects-filter-mask-start),
    #000 var(--projects-filter-fade-size),
    #000 calc(100% - var(--projects-filter-fade-size)),
    var(--projects-filter-mask-end)
  );
  mask-image: linear-gradient(
    to right,
    var(--projects-filter-mask-start),
    #000 var(--projects-filter-fade-size),
    #000 calc(100% - var(--projects-filter-fade-size)),
    var(--projects-filter-mask-end)
  );
}

[data-projects-index-context]
  .projects-filters[data-filter-overflow-start]
  .projects-filters__viewport {
  --projects-filter-mask-start: transparent 0;
}

[data-projects-index-context]
  .projects-filters[data-filter-overflow-end]
  .projects-filters__viewport {
  --projects-filter-mask-end: transparent 100%;
}

[data-projects-index-context] .projects-filters a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  height: var(--ui-control-size);
  align-items: center;
  padding-block: var(--ui-control-padding-block-start)
    var(--ui-control-padding-block-end);
  border-radius: var(--ui-radius-pill);
  color: inherit;
  background: transparent;
  box-shadow: none;
  font-size: inherit;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

[data-projects-index-context] .projects-filters a::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline: calc(0rem - var(--index-filter-hit-extension-inline));
}

.works-view-switch[data-switch-control] > a {
  padding-inline: var(--ui-control-padding-inline-rectangle);
}

[data-projects-index-context]
  .projects-filters
  [data-switch-control]
  > li
  > a {
  padding-inline: var(--ui-control-padding-inline-pill);
}

[data-projects-index-context]
  .projects-filters
  [data-switch-control]
  > li.is-active:has([data-index-filter-clear])
  > a[aria-current='page'] {
  padding-inline-end: 0;
}

[data-projects-index-context]
  .projects-filters
  [data-switch-control]
  > li
  > a.projects-filters__clear {
  position: relative;
  z-index: 2;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  transform: translateY(-0.02rem);
  width: auto;
  min-width: 0;
  padding-inline-start: var(--index-clear-text-gap);
  padding-inline-end: var(--ui-control-padding-inline-pill);
}

[data-projects-index-context]
  .projects-filters
  [data-switch-control]
  > li
  > a.projects-filters__clear[data-index-filter-clear-transition] {
  opacity: 0;
  pointer-events: none;
}

[data-projects-index-context]
  .projects-filters
  [data-switch-control]
  > li
  > a.projects-filters__clear[data-index-filter-clear-transition].is-entering {
  animation: index-filter-clear-fade-in 90ms var(--motion-easing) both;
  pointer-events: auto;
}

[data-projects-index-context]
  .projects-filters
  [data-switch-control]
  > li
  > a.projects-filters__clear::after {
  content: none;
}

[data-projects-index-context] .projects-filters__clear-icon {
  flex: none;
  width: var(--index-close-icon-width);
  height: var(--index-close-icon-height);
  color: var(--index-ui-close-color);
  background: currentColor;
  transform: translateY(var(--index-close-icon-offset-y));
  -webkit-mask: url('../icons/close_icon.svg') center / contain no-repeat;
  mask: url('../icons/close_icon.svg') center / contain no-repeat;
  transition: color 0.1s ease-in-out;
}

@keyframes index-filter-clear-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-projects-index-context]
    .projects-filters__clear:is(:hover, :focus-visible)
    .projects-filters__clear-icon {
    color: var(--index-ui-close-color-hover);
  }
}

[data-projects-index-context]
  .projects-filters
  a:is(:hover, [aria-current='page'], :focus-visible) {
  color: var(--index-ui-color);
  background: transparent;
  text-decoration: none;
}

.site-menu
  [data-projects-index-context]
  .projects-filters
  [data-switch-control]
  > li
  > a:is(:link, :visited, :hover, :focus-visible, :active) {
  color: var(--index-ui-color);
  font-weight: var(--font-weight-ui-dark-text);
}

[data-projects-index-context] .projects-filters a:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}

[data-projects-index-context] .index-filter-toggle:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}

[data-projects-index-context] .index-search-control {
  display: flex;
  flex: none;
  align-items: center;
  gap: 0;
  border-radius: var(--ui-radius-pill);
  color: var(--index-ui-color);
  background: var(--index-ui-background);
  box-shadow: var(--index-ui-shadow);
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
}

[data-projects-index-context] .index-search-toggle img {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  filter: none;
}

[data-projects-index-context] .index-search-toggle:focus-visible {
  outline: none;
  background: var(--site-menu-interaction-background);
}

[data-projects-index-context] .projects-search {
  --projects-search-width-buffer: calc(0.25rem * var(--ui-control-scale));
  --projects-search-clear-size: calc(1.1rem * var(--ui-control-scale));
  --projects-search-clear-inset: calc(0.225rem * var(--ui-control-scale));
  --projects-search-clear-offset: calc(0.4rem * var(--ui-control-scale));
  position: relative;
  display: inline-flex;
  flex: none;
  width: calc(var(--projects-search-width, 8rem) + var(--projects-search-width-buffer));
  overflow: clip;
}

[data-projects-index-context] .projects-search input {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--ui-control-size);
  min-width: 0;
  /* Center the native selection as well as the input's text line. */
  padding-block: calc(
    (var(--ui-control-padding-block-start) + var(--ui-control-padding-block-end)) / 2
  );
  padding-inline: var(--ui-control-padding-inline-pill);
  border: 0;
  border-radius: 0;
  outline: 0;
  color: inherit;
  caret-color: currentColor;
  background: transparent;
  box-shadow: none;
  font: inherit;
  line-height: 1;
}

[data-projects-index-context] .projects-search input::placeholder {
  color: inherit;
  opacity: 0.65;
}

[data-projects-index-context] .projects-search input::selection {
  color: #000;
  background: #ddd;
}

[data-projects-index-context]
  .projects-search[data-search-enhanced]
  input::-webkit-search-cancel-button {
  display: none;
  -webkit-appearance: none;
}

[data-projects-index-context]
  .projects-search[data-search-enhanced]
  button[type='submit'] {
  display: none;
}

[data-projects-index-context] .projects-search__clear {
  display: none;
}

[data-projects-index-context]
  .projects-search[data-search-enhanced]
  .projects-search__clear {
  all: unset;
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: var(--projects-search-clear-offset);
  width: var(--projects-search-clear-size);
  height: var(--projects-search-clear-size);
  color: var(--index-ui-close-color);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: color 0.1s ease-in-out, opacity 0.1s ease-in-out,
    visibility 0s linear 0.1s;
}

[data-projects-index-context] .projects-search__clear::before {
  content: '';
  position: absolute;
  inset: var(--projects-search-clear-inset);
  background: currentColor;
  -webkit-mask: url('../icons/close_icon.svg') center / contain no-repeat;
  mask: url('../icons/close_icon.svg') center / contain no-repeat;
}

[data-projects-index-context] .projects-search[data-has-value] input {
  /* The form's width buffer and the icon inset also contribute to the gap. */
  padding-inline-end: calc(
    var(--index-clear-text-gap) + var(--projects-search-clear-size)
    + var(--projects-search-clear-offset) - var(--projects-search-clear-inset)
    - var(--projects-search-width-buffer)
  );
}

[data-projects-index-context]
  .projects-search[data-search-enhanced][data-has-value]
  .projects-search__clear {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (hover: hover) and (pointer: fine) {
  [data-projects-index-context]
    .projects-search[data-search-enhanced]
    .projects-search__clear:is(:hover, :focus-visible) {
    color: var(--index-ui-close-color-hover);
  }
}

[data-projects-index-context] .projects-search button:focus-visible,
[data-projects-index-context] .projects-search[data-search-enhanced] .projects-search__clear:focus-visible {
  outline: none;
  background: var(--site-menu-interaction-background);
  opacity: 1;
}

[data-projects-index-context] .projects-search input:focus-visible {
  box-shadow: none;
}

[data-projects-index-context]
  .index-toolbar[data-index-toolbar-mode='search']
  .index-search-control:focus-within {
  box-shadow: var(--site-menu-shadow);
}

/* Filter/Search Context Menu. Index reuses the filter portion.
   Compact styles apply once JS will enhance the toolbar. html.js is set in
   the document head, so desktop first paint does not wait for app.js. */
:is(
  html.js [data-projects-index-context] .index-toolbar,
  [data-projects-index-context] .index-toolbar[data-index-toolbar-ready]
) {
  :is(.index-filter-control, .index-search-control) {
    display: flex;
    flex: none;
    align-items: center;
    gap: 0;
    overflow: clip;
    border-radius: var(--ui-radius-pill);
    color: var(--index-ui-color);
    background: var(--index-ui-background);
    box-shadow: var(--site-menu-shadow);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
  }

  .index-search-control {
    overflow: visible;
  }

  .index-search-toggle {
    display: grid;
    flex: none;
    width: var(--ui-circular-control-size);
    height: var(--ui-circular-control-size);
    margin: calc(0rem - var(--ui-circular-control-overshoot));
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    color: inherit;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
  }

  &[data-index-toolbar-mode='search'] .index-search-toggle {
    width: var(--ui-control-size);
    height: var(--ui-control-size);
    margin-right: -0.25rem;
  }

  @media (hover: hover) and (pointer: fine) {
    &:not([data-index-toolbar-mode='search']) .index-search-toggle:hover {
      background: var(--site-menu-interaction-background);
    }
  }

  .index-filter-control {
    max-width: calc(
      var(--site-menu-context-max-width, 50rem) - var(--ui-control-size) -
        var(--site-menu-gap)
    );
  }

  &[data-index-toolbar-mode='filter'] .index-filter-control {
    max-width: calc(
      var(--site-menu-context-max-width, 50rem) - var(--ui-control-size) -
        var(--site-menu-gap)
    );
    color: var(--index-ui-color);
    background: var(--index-ui-background);
  }

  .index-filter-toggle {
    display: inline-flex;
    flex: none;
    width: auto;
    height: var(--ui-control-size);
    max-width: none;
    min-width: 0;
    overflow: visible;
    align-items: center;
    padding-block: var(--ui-control-padding-block-start)
      var(--ui-control-padding-block-end);
    padding-inline: var(--ui-control-padding-inline-pill);
    border: 0;
    border-radius: var(--ui-radius-pill);
    opacity: 1;
    color: inherit;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-weight: var(--font-weight-ui-dark-text);
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    visibility: visible;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  &[data-index-toolbar-mode='filter'] .index-filter-toggle {
    width: 0;
    padding-inline: 0;
    opacity: 0;
    visibility: hidden;
  }

  @media (hover: hover) and (pointer: fine) {
    .index-filter-toggle:hover {
      color: var(--site-menu-interaction-color);
      background: var(--site-menu-interaction-background);
    }
  }

  .projects-filters {
    display: block;
    flex: 0 1 auto;
    width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
  }

  &[data-index-toolbar-mode='filter'] .projects-filters {
    width: var(--index-filter-width, max-content);
    max-width: var(--index-filter-width, max-content);
    overflow: hidden;
    opacity: 1;
    visibility: visible;
  }

  &[data-index-toolbar-mode='filter'] .projects-filters__viewport {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  &[data-index-toolbar-compact] {
    gap: 0;

    .index-filter-control {
      clip-path: inset(-0.5rem 0);
      background: transparent;
      box-shadow: none;
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .index-search-control {
      display: none;
    }

    .projects-filters li:not(.is-active) {
      pointer-events: none;
      visibility: hidden;
    }

    .projects-filters__viewport {
      -webkit-mask-image: none;
      mask-image: none;
    }

    &[data-index-toolbar-compact-transitioning] {
      .projects-filters__label {
        display: inline-block;
        white-space: nowrap;
      }

      .projects-filters__label--incoming:not(.is-entering) {
        visibility: hidden;
      }

      .projects-filters__clear:not(.is-entering) {
        visibility: hidden;
      }

      .projects-filters__label-stage {
        position: relative;
        display: inline-block;
        line-height: 1;
      }

      .projects-filters__label--outgoing {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
      }

      .projects-filters
        a[data-index-compact-filter-transition='forward']
        .projects-filters__label--incoming.is-entering {
        animation: index-compact-filter-content-in-forward
          var(--projects-results-filter-content-in-duration, 150ms) var(--motion-easing)
          both;
      }

      .projects-filters
        a[data-index-compact-filter-transition='forward']
        .projects-filters__label--outgoing {
        animation: index-compact-filter-content-out-forward
          var(--projects-results-filter-content-out-duration, 150ms) var(--motion-easing)
          both;
      }

      .projects-filters
        .projects-filters__clear[data-index-compact-filter-transition='forward'].is-entering {
        animation: index-compact-filter-clear-in-forward
          var(--projects-results-filter-content-in-duration, 150ms) var(--motion-easing)
          both;
      }

      .projects-filters
        a[data-index-compact-filter-transition='backward']
        .projects-filters__label--incoming.is-entering {
        animation: index-compact-filter-content-in-backward
          var(--projects-results-filter-content-in-duration, 150ms) var(--motion-easing)
          both;
      }

      .projects-filters
        a[data-index-compact-filter-transition='backward']
        .projects-filters__label--outgoing {
        animation: index-compact-filter-content-out-backward
          var(--projects-results-filter-content-out-duration, 150ms) var(--motion-easing)
          both;
      }

      .projects-filters
        .projects-filters__clear[data-index-compact-filter-transition='backward'].is-entering {
        animation: index-compact-filter-clear-in-backward
          var(--projects-results-filter-content-in-duration, 150ms) var(--motion-easing)
          both;
      }
    }

  }

  .projects-filters [data-switch-control] {
    width: max-content;
    max-width: none;
  }

  .projects-filters ul {
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  &[data-index-toolbar-mode='search'] .index-search-control {
    color: var(--index-ui-color);
    background: var(--index-ui-background);
    box-shadow: var(--site-menu-shadow);
    -webkit-backdrop-filter: blur(0.5rem);
    backdrop-filter: blur(0.5rem);
  }

  .projects-search {
    width: 0;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
  }

  &[data-index-toolbar-mode='search'] .projects-search {
    width: calc(
      var(--projects-search-width, 8rem) + (0.25rem * var(--ui-control-scale))
    );
    max-width: min(14rem, calc(100vw - (2 * var(--ui-control-size))));
    overflow: visible;
    opacity: 1;
    visibility: visible;
    color: inherit;
    background: var(--site-menu-interaction-background);
    border-radius: var(--ui-radius-pill);
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

}

@media (min-width: 48rem) {
  /* The desktop filter list stays open. Its compact Filter control remains
     available while Search is open so the user can return to the filters. */
  :is(
    html.js [data-projects-index-context] .index-toolbar,
    [data-projects-index-context] .index-toolbar[data-index-toolbar-ready]
  ) {
    &[data-index-toolbar-mode='closed'] .index-filter-toggle {
      display: none;
    }
  }
}

.site-menu__page-controls[data-projects-index-context]:has(
  .index-toolbar[data-index-toolbar-enhanced]
) {
  transition: transform var(--projects-results-item-motion-duration)
    var(--motion-easing);
}

[data-projects-index-context]
  .index-toolbar[data-index-toolbar-enhanced]
  :is(.index-filter-control, .index-search-control, .index-filter-toggle) {
  transition: width var(--projects-results-item-motion-duration) var(--motion-easing),
    padding var(--projects-results-item-motion-duration) var(--motion-easing),
    opacity 0.1s ease-in-out,
    visibility 0s linear var(--projects-results-item-motion-duration),
    color 0.1s ease-in-out, background-color 0.1s ease-in-out;
}

[data-projects-index-context]
  .index-toolbar[data-index-toolbar-enhanced]
  .index-search-toggle {
  transition: width var(--projects-results-item-motion-duration) var(--motion-easing),
    height var(--projects-results-item-motion-duration) var(--motion-easing),
    margin var(--projects-results-item-motion-duration) var(--motion-easing),
    background-color 0.1s ease-in-out;
}

[data-projects-index-context]
  .index-toolbar[data-index-toolbar-enhanced]
  .projects-filters {
  transition: width var(--site-menu-navigation-motion-duration) var(--motion-easing),
    max-width var(--site-menu-navigation-motion-duration) var(--motion-easing),
    opacity 0.1s ease-in-out,
    visibility 0s linear var(--projects-results-item-motion-duration);
}

[data-projects-index-context]
  .index-toolbar[data-index-toolbar-enhanced][data-index-toolbar-mode='filter']
  .projects-filters {
  transition: width var(--site-menu-navigation-motion-duration) var(--motion-easing),
    max-width var(--site-menu-navigation-motion-duration) var(--motion-easing),
    opacity 0.1s ease-in-out 0.1s, visibility 0s linear 0s;
}

[data-projects-index-context]
  .index-toolbar[data-index-toolbar-enhanced][data-index-toolbar-compact-transitioning]
  .projects-filters {
  transition: width var(--projects-results-filter-content-total-duration, var(--projects-results-item-motion-duration)) var(--motion-easing),
    max-width var(--projects-results-filter-content-total-duration, var(--projects-results-item-motion-duration)) var(--motion-easing),
    opacity 0.1s ease-in-out 0.1s, visibility 0s linear 0s;
}

@media (prefers-reduced-motion: reduce) {
  [data-projects-index-context]
    .projects-filters
    [data-switch-control]
    > li
    > a.projects-filters__clear[data-index-filter-clear-transition] {
    opacity: 1;
    pointer-events: auto;
  }

  [data-index-toolbar-compact-transitioning]
    .projects-filters__label {
    animation: none !important;
  }

  [data-index-toolbar-compact-transitioning]
    .projects-filters__label--outgoing {
    display: none;
  }

  [data-index-toolbar-compact-transitioning]
    .projects-filters__label--incoming {
    visibility: visible;
  }

  [data-index-toolbar-compact-transitioning]
    .projects-filters__clear {
    visibility: visible;
  }
}

[data-projects-index-context]
  .index-toolbar[data-index-toolbar-enhanced]
  .projects-search {
  transition: width var(--projects-results-item-motion-duration) var(--motion-easing),
    max-width var(--projects-results-item-motion-duration) var(--motion-easing),
    opacity 0.1s ease-in-out,
    visibility 0s linear var(--projects-results-item-motion-duration);
}

[data-projects-index-context]
  .index-toolbar[data-index-toolbar-enhanced][data-index-toolbar-mode='search']
  .projects-search {
  transition: width var(--projects-results-item-motion-duration) var(--motion-easing),
    max-width var(--projects-results-item-motion-duration) var(--motion-easing),
    opacity 0.1s ease-in-out 0.1s, visibility 0s linear 0s;
}

[data-page-type='index'] .index-page {
  padding: 4.75rem 0.875rem 2rem;
}

[data-page-type='index'] .index-table {
  width: 100%;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--index-color);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: 0.02em;
  text-align: start;
}

[data-page-type='index'] .index-table th {
  position: sticky;
  z-index: 2;
  inset-block-start: 3.75rem;
  padding: 0 0.5rem 0.25rem 0;
  color: var(--index-color-muted);
  background: #000;
  font-size: var(--font-size-small);
  font-weight: 400;
  line-height: var(--line-height-small);
  text-align: start;
  vertical-align: top;
}

[data-page-type='index'] .index-table th::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-inline: 0;
  inset-block-end: 100%;
  height: 100vh;
  height: 100dvh;
  background: #000;
}

[data-page-type='index'] .index-table__sort {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  min-height: var(--line-height-small);
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-align: inherit;
  cursor: pointer;
}

[data-page-type='index'] th.index-table__year .index-table__sort {
  justify-content: flex-end;
}

[data-page-type='index'] .index-table__sort-chevron {
  display: none;
  width: 0.5625rem;
  height: 0.5rem;
  flex: 0 0 auto;
  background: #f50;
  -webkit-mask: url('../icons/Chevron.svg') center / contain no-repeat;
  mask: url('../icons/Chevron.svg') center / contain no-repeat;
}

[data-page-type='index'] th[aria-sort] .index-table__sort-chevron {
  display: block;
}

[data-page-type='index'] th[aria-sort='ascending'] .index-table__sort-chevron {
  transform: rotate(180deg);
}

[data-page-type='index'] th[aria-sort='descending'] .index-table__sort-chevron {
  transform: none;
}

[data-page-type='index'] .index-table__sort > span:first-child:hover,
[data-page-type='index'] .index-table__sort:focus-visible {
  color: var(--index-color);
}

[data-page-type='index'] .index-table__sort:focus-visible {
  outline: 0.125rem solid currentColor;
  outline-offset: 0.125rem;
}

[data-page-type='index'] .index-table tbody tr {
  position: relative;
  cursor: pointer;
}

[data-page-type='index'] .index-table tbody td {
  transition: background-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

[data-page-type='index'] .index-table tbody tr.is-pressed td,
[data-page-type='index'] .index-table tbody tr:active td {
  background: var(--index-row-active);
}

@media (hover: hover) and (pointer: fine) {
  [data-page-type='index'] .index-table tbody tr:hover td,
  [data-page-type='index'] .index-table tbody tr:has(:focus-visible) td {
    background: var(--index-row-active);
  }
}

[data-page-type='index'] .index-table td {
  padding: 0.25rem 0.875rem 1.25rem 0;
  border-block-start: 0.0625rem solid var(--index-divider);
  overflow-wrap: break-word;
  hyphens: none;
  -webkit-hyphens: none;
  vertical-align: top;
}

[data-page-type='index'] .index-table__title-word {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
  -webkit-hyphenate-limit-before: 4;
  -webkit-hyphenate-limit-after: 4;
}

[data-page-type='index'] .index-table__service {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: manual;
  -webkit-hyphens: manual;
}

[data-page-type='index'] .index-table :is(th, td):last-child {
  padding-inline-end: 0.125rem;
}

@media (min-width: 48rem) {
  [data-page-type='index'] .index-table,
  [data-page-type='index'] .index-table :is(thead, tbody) {
    display: block;
    width: 100%;
  }

  [data-page-type='index'] .index-table colgroup {
    display: none;
  }

  [data-page-type='index'] .index-table tr {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  [data-page-type='index'] .index-table thead {
    position: sticky;
    z-index: 2;
    inset-block-start: 3.75rem;
    background: #000;
  }

  [data-page-type='index'] .index-table th {
    position: relative;
    inset-block-start: auto;
  }

  [data-page-type='index'] .index-table :is(th, td).index-table__approach {
    order: -1;
    padding-inline-start: 0.125rem;
  }
}

[data-page-type='index'] .index-table th.index-table__year,
[data-page-type='index'] .index-table td.index-table__year {
  text-align: end;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

[data-page-type='index'] .index-table__year-range {
  white-space: nowrap;
}

[data-page-type='index'] .index-table td a {
  -webkit-tap-highlight-color: transparent;
}

[data-page-type='index'] .index-table td a::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
}

[data-page-type='index'] .index-table tbody td:not(.index-table__title) {
  pointer-events: none;
}

[data-page-type='index'] .index-table td a:focus-visible {
  position: relative;
  z-index: 2;
  outline-width: 0.125rem;
  outline-offset: 0.125rem;
}

[data-page-type='index'] .index-empty {
  padding-block-start: 0.25rem;
  border-block-start: 0.0625rem solid var(--index-divider);
}

@media (max-width: 47.999rem) {
  [data-page-type='index'] {
    --index-inline-space: 0.875rem;
  }

  [data-page-type='index'] .index-page {
    width: 100%;
    min-width: 0;
    padding-inline: var(--index-inline-space);
    padding-block-end: calc(
      2rem + var(--ui-control-size) + var(--site-edge-space) +
        env(safe-area-inset-bottom, 0rem)
    );
  }

  /* Keep one semantic table; the project page exposes the full details.
     Rows use grid so each title link overlay is contained to its row —
     table-row positioning does not create a containing block. */
  [data-page-type='index'] .index-table,
  [data-page-type='index'] .index-table :is(thead, tbody) {
    display: block;
    width: 100%;
  }

  [data-page-type='index'] .index-table colgroup,
  [data-page-type='index'] .index-table :is(
    .index-table__approach,
    .index-table__client,
    .index-table__role
  ) {
    display: none;
  }

  /* Match the original title column: 65% of the available table width
     minus the original 5.5rem year column. Resolve against the viewport
     because fixed table layout does not resolve percentage calc() widths. */
  [data-page-type='index'] .index-table tr {
    display: grid;
    grid-template-columns:
      calc(65vw - 1.3 * var(--index-inline-space) - 5.5rem)
      minmax(0, 1fr)
      3.25rem;
  }

  [data-page-type='index'] .index-table thead {
    position: sticky;
    z-index: 2;
    inset-block-start: 3.75rem;
    background: #000;
  }

  [data-page-type='index'] .index-table th {
    position: relative;
    inset-block-start: auto;
  }

  [data-page-type='index'] .index-table :is(th, td).index-table__year {
    white-space: normal;
  }

  [data-page-type='index'] .index-table__sort {
    min-height: 2.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu__page-controls[data-projects-index-context]:has(
    .index-toolbar[data-index-toolbar-enhanced]
  ) {
    transition: none;
  }

  .site-menu__context-navigation[data-context-page-type='projects']
    .index-toolbar[data-index-toolbar-enhanced]
    :is(
      .projects-filters,
      .index-filter-toggle,
      .index-search-control,
      .index-search-toggle img,
      .projects-search
    ) {
    transition: none;
  }

  [data-page-type='index'] .index-table tbody td {
    transition: none;
  }
}

@media (max-width: 47.999rem) {
  .site-menu__context-navigation[data-projects-index-context] {
    max-width: 100%;
  }

  [data-projects-index-context] .projects-filters {
    max-width: calc(100vw - 7rem);
  }

  [data-projects-index-context] .index-toolbar {
    max-width: 100%;
  }

  /* Keep the server-visible filter list until app.js enhances the toolbar.
     html.js compact styles above would otherwise hide it on first paint. */
  html.js [data-projects-index-context]
    .index-toolbar:not([data-index-toolbar-ready])
    :is(.index-filter-toggle, .index-search-toggle) {
    display: none;
  }

  html.js [data-projects-index-context]
    .index-toolbar:not([data-index-toolbar-ready])
    .index-filter-control {
    max-width: none;
    overflow: visible;
    background: transparent;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  html.js [data-projects-index-context]
    .index-toolbar:not([data-index-toolbar-ready])
    .projects-filters {
    width: auto;
    max-width: calc(100vw - 7rem);
    overflow: visible;
    opacity: 1;
    visibility: visible;
  }

  html.js [data-projects-index-context]
    .index-toolbar:not([data-index-toolbar-ready])
    .projects-search {
    width: calc(
      var(--projects-search-width, 8rem) + (0.25rem * var(--ui-control-scale))
    );
    max-width: none;
    overflow: clip;
    opacity: 1;
    visibility: visible;
  }

  [data-projects-index-context]
    .index-toolbar[data-index-toolbar-ready]
    .index-filter-control {
    max-width: calc(100vw - 3.625rem);
  }

  [data-projects-index-context]
    .index-toolbar[data-index-toolbar-ready][data-index-toolbar-mode='filter']
    .index-filter-control {
    max-width: 100%;
  }
}

/* Home project gallery */
[data-page-type='gallery'],
.related-projects {
  --gallery-ui-background: rgba(70, 70, 70, 0.5);
  --gallery-ui-background-active: #000;
  --gallery-ui-color: #fff;
  --gallery-ui-radius: var(--ui-radius-overlay);
  --gallery-ui-shadow: 0.03rem 0.06rem 0.25rem rgba(0, 0, 0, 0.25);
  --gallery-ui-blur: 0.6rem;
  --gallery-ui-transition: background-color 0.1s ease-in-out;
}

[data-page-type='gallery'] {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  background: #000;
}

[data-page-type='gallery'] .project-gallery__meta-overlay > :where(:not(.media-motion-control)),
:is([data-page-type='gallery'], .related-projects)
  .project-preview__meta > :where(:not(.media-motion-control)) {
  border: 0;
  border-radius: var(--gallery-ui-radius);
  color: var(--gallery-ui-color);
  background: var(--gallery-ui-background);
  box-shadow: var(--gallery-ui-shadow);
  -webkit-backdrop-filter: blur(var(--gallery-ui-blur));
  backdrop-filter: blur(var(--gallery-ui-blur));
}

:is([data-page-type='gallery'], .related-projects)
  :is(.project-gallery__meta-title, .project-gallery__meta-category) {
  border-radius: var(--ui-radius-box);
  color: var(--site-menu-color);
  font-weight: var(--font-weight-ui-dark-text);
  background: var(--site-menu-background);
  box-shadow: var(--site-menu-shadow);
  -webkit-backdrop-filter: blur(0.78125rem);
  backdrop-filter: blur(0.78125rem);
}

:is([data-page-type='gallery'], .related-projects)
  .project-gallery__meta-title {
  padding-inline: var(--ui-control-padding-inline-rectangle);
}

:is([data-page-type='gallery'], .related-projects)
  .project-gallery__meta-category {
  padding-inline: var(--ui-control-padding-inline-pill);
  border-radius: var(--ui-radius-pill);
}

[data-page-type='gallery']
  :is(
    .project-gallery__meta-title,
    .project-gallery__meta-category
  ),
.related-projects
  :is(.project-gallery__meta-title, .project-gallery__meta-category) {
  transition:
    color 0.1s ease-in-out,
    var(--gallery-ui-transition),
    opacity 0.15s ease-in-out;
}

[data-page-type='gallery']
  :is(
    .project-gallery__meta-title,
    .project-gallery__meta-category
  ):is([aria-current='page'], [aria-pressed='true'], :focus-visible) {
  color: var(--gallery-ui-color);
  font-weight: var(--font-weight-ui-light-text);
  background: var(--gallery-ui-background-active);
}

.related-projects
  :is(.project-gallery__meta-title, .project-gallery__meta-category):focus-visible {
  color: var(--site-menu-color-active);
  font-weight: var(--font-weight-ui-light-text);
  background: var(--gallery-ui-background-active);
}

[data-page-type='gallery'] main {
  width: 100%;
  margin: 0;
}

[data-page-type='gallery'] [data-project-gallery-shell] > h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

[data-page-type='gallery'] [data-gallery-stage],
[data-page-type='gallery'] [data-gallery-content],
[data-page-type='gallery'] .project-gallery {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

[data-page-type='gallery'] [data-gallery-content] {
  margin-block-start: 0;
}

[data-page-type='gallery'] .project-gallery {
  gap: 0;
  background: transparent;
}

[data-page-type='gallery'] .project-gallery--mobile {
  grid-template-rows: repeat(3, minmax(0, 1fr));
}

[data-page-type='gallery'] .project-gallery__group,
[data-page-type='gallery'] .project-gallery__track,
[data-page-type='gallery'] .project-gallery__slide,
[data-page-type='gallery'] .project-preview,
[data-page-type='gallery'] .project-preview__surface {
  height: 100%;
}

[data-page-type='gallery'] .project-gallery__group {
  position: relative;
}

[data-page-type='gallery'] .project-gallery__slide {
  min-height: 0;
}

[data-page-type='gallery'] .project-gallery__track {
  gap: 0;
}

[data-page-type='gallery'] .project-preview__surface {
  position: relative;
  display: block;
  overflow: hidden;
}

[data-page-type='gallery'] .project-preview {
  position: relative;
}

[data-page-type='gallery'] .project-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #000;
}

html[data-img-reveal] .project-card img:not([data-img-ready]),
html[data-img-reveal] .project-preview img:not([data-img-ready]),
html[data-img-reveal] .project-media img:not([data-img-ready]) {
  opacity: 0;
}

html[data-img-reveal] .project-card img[data-img-ready],
html[data-img-reveal] .project-preview img[data-img-ready],
html[data-img-reveal] .project-media img[data-img-ready] {
  opacity: 1;
  transition: opacity 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  html[data-img-reveal] .project-card img[data-img-ready],
  html[data-img-reveal] .project-preview img[data-img-ready],
  html[data-img-reveal] .project-media img[data-img-ready] {
    transition: none;
  }
}

[data-page-type='gallery'] .project-preview__surface:has(video) img {
  position: relative;
  z-index: 0;
}

[data-page-type='gallery'] .project-preview video {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

:is([data-page-type='gallery'], .related-projects) .project-preview__meta {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  position: absolute;
  inset-block-end: 0.3rem;
  inset-inline-start: 0.3rem;
  display: flex;
  align-items: flex-end;
  gap: 0.1rem;
  max-width: calc(100% - 0.6rem);
  opacity: 1;
  pointer-events: none;
}

[data-page-type='gallery'] .project-preview__meta {
  inset-block-start: 0.3rem;
  inset-block-end: auto;
  align-items: flex-start;
}

[data-page-type='gallery'] .project-gallery__meta-overlay {
  position: absolute;
  z-index: 3;
  inset-block-start: 0.3rem;
  inset-inline-start: 0.3rem;
  display: flex;
  align-items: flex-start;
  gap: 0.1rem;
  max-width: calc(100% - 0.6rem);
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  pointer-events: none;
}

@media (min-width: 48rem) {
  [data-page-type='gallery'] [data-gallery-view='desktop']
    :is(.project-preview__meta, .project-gallery__meta-overlay) {
    inset-block-start: auto;
    inset-block-end: 0.3rem;
    inset-inline-start: 0.3rem;
    inset-inline-end: 0.3rem;
    align-items: flex-end;
  }
}

[data-page-type='projects'] .projects-overview .project-preview__meta > .media-motion-control,
[data-page-type='gallery'] [data-gallery-view='desktop']
  :is(.project-preview__meta, .project-gallery__meta-overlay)
  > .media-motion-control {
  margin-inline-start: auto;
}

[data-page-type='gallery']
  :is(.project-gallery__meta-title, .project-gallery__meta-category) {
  pointer-events: auto;
}

.related-projects
  :is(.project-gallery__meta-title, .project-gallery__meta-category) {
  pointer-events: auto;
}

[data-page-type='gallery'] .project-gallery__meta-overlay > :where(:not(.media-motion-control)),
:is([data-page-type='gallery'], .related-projects)
  .project-preview__meta > :where(:not(.media-motion-control)) {
  display: inline-flex;
  height: var(--ui-control-size);
  min-width: 0;
  align-items: center;
  padding-block: var(--ui-control-padding-block-start)
    var(--ui-control-padding-block-end);
  overflow: hidden;
  font-size: var(--ui-control-font-size);
  line-height: 1;
  text-box: trim-both cap alphabetic;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-page-type='projects'] .projects-overview .project-preview__meta > .media-motion-control,
[data-page-type='gallery']
  :is(.project-preview__meta, .project-gallery__meta-overlay)
  > .media-motion-control {
  position: relative;
  inset: auto;
  flex: none;
  padding: 0;
}

[data-page-type='gallery']
  :is(.project-preview__meta, .project-gallery__meta-overlay)
  > .media-motion-control[hidden] {
  display: none;
}

@media (min-width: 48rem) and (hover: hover) and (pointer: fine) {
  [data-page-type='gallery'] [data-gallery-view='desktop']
    .project-gallery__meta-overlay {
    visibility: hidden;
  }

  [data-page-type='gallery']
    [data-gallery-view='desktop']:not([data-gallery-hover-suppressed])
    .project-gallery__group:hover .project-gallery__meta-overlay,
  [data-page-type='gallery']
    [data-gallery-view='desktop']:not(:has(.project-gallery__group:hover))
    .project-gallery__group:focus-within .project-gallery__meta-overlay {
    visibility: visible;
  }
}

[data-page-type='gallery'] [data-gallery-enhanced] .project-preview__meta {
  opacity: 0;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  [data-page-type='gallery']
    [data-gallery-view]:not([data-gallery-enhanced])
    .project-preview__meta {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s ease-in-out;
  }

  [data-page-type='gallery'] .project-gallery__meta-overlay {
    transition: opacity 0.1s ease-in-out;
  }

  [data-page-type='gallery']
    [data-gallery-view]:not([data-gallery-enhanced])
    .project-preview__surface:hover
    + .project-preview__meta,
  [data-page-type='gallery']
    [data-gallery-view]:not([data-gallery-enhanced])
    .project-preview__surface:focus-visible
    + .project-preview__meta,
  [data-page-type='gallery']
    [data-gallery-view]:not([data-gallery-enhanced])
    .project-preview__meta:focus-within {
    opacity: 1;
  }

  .related-projects .project-preview__meta {
    opacity: 0;
    pointer-events: none;
  }

  .related-projects .project-card:is(:hover, :focus-within)
    .project-preview__meta {
    opacity: 1;
  }

  [data-page-type='gallery'] .project-gallery__meta-overlay {
    opacity: 0;
  }

  [data-page-type='gallery']
    [data-gallery-view]:not([data-gallery-hover-suppressed])
    .project-gallery__group:hover
    .project-gallery__meta-overlay,
  [data-page-type='gallery']
    .project-gallery:not(:has(.project-gallery__group:hover))
    .project-gallery__group:focus-within
    .project-gallery__meta-overlay {
    opacity: 1;
  }

  :is([data-page-type='gallery'], .related-projects)
    a.project-gallery__meta-title:hover {
    color: var(--site-menu-color-active);
    font-weight: var(--font-weight-ui-light-text);
    background: var(--site-menu-background-active);
  }

  :is([data-page-type='gallery'], .related-projects)
    a.project-gallery__meta-category:hover {
    color: var(--site-menu-interaction-color);
    background: var(--site-menu-interaction-background);
  }
}

[data-page-type='gallery']
  [data-gallery-enhanced][data-gallery-motion-phase]
  .project-gallery__meta-overlay {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

[data-page-type='gallery'] .site-footer {
  display: none;
}

.error-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 1rem;
  color: rgb(192, 191, 191);
  background: #000;
  text-align: center;
}

.error-page__text {
  width: min(55vw, 50rem);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.error-page__text a {
  color: #f50;
}

/* Shared content system */
:root {
  --content-max-width: 46.5rem;
  --content-label-width: 22%;
  --content-label-width-small: 31%;
  --content-row-padding: 0.65rem;
  --content-section-space: 2.3rem;
  --content-section-space-small: 1.3rem;
  --content-rule-width: 1px;
}

.content-layout {
  width: min(calc(53vw - 1.2rem), var(--content-max-width));
  margin-inline: auto;
  min-width: 0;
}

.content-flow {
  display: flex;
  flex-direction: column;
  gap: var(--content-section-space);
}

.content-title,
.content-heading {
  margin: 0;
  font-weight: 400;
}

.content-title {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.content-heading,
.content-label {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 400;
}

.content-body,
.content-label,
.content-value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.content-body,
.content-value {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.content-body p {
  margin-block: 1em;
}

.content-body :is(ul, ol):not(.content-list--plain) {
  margin-block: 1em;
  padding-inline-start: 2.5rem;
}

.content-body > :first-child {
  margin-block-start: 0;
}

.content-body > :last-child {
  margin-block-end: 0;
}

.content-table {
  margin: 0;
  border-block-end: var(--content-rule-width) solid currentColor;
}

.content-row {
  display: grid;
  grid-template-columns: var(--content-label-width) minmax(0, 1fr);
  column-gap: 0;
  padding-block: var(--content-row-padding);
  border-block-start: var(--content-rule-width) solid currentColor;
}

.content-row > .content-label {
  grid-column: 1;
  grid-row: 1 / -1;
}

.content-row > :not(.content-label) {
  grid-column: 2;
}

.content-label,
.content-value {
  margin: 0;
}

.content-list--plain {
  padding: 0;
  list-style: none;
}

.project {
  display: grid;
  gap: 0;
}

.project-present[hidden],
.project-present__slide[hidden] {
  display: none;
}

[data-page-root][data-project-view='present'] {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

[data-page-root][data-project-view-motion] > [data-page-content] {
  pointer-events: none;
}

[data-page-root][data-project-view='present'] .project > :not(.project-present),
[data-page-root][data-project-view='present']
  > [data-page-content]
  > .site-footer {
  display: none;
}

.project-present,
.project-present__slides,
.project-present__slide {
  width: 100%;
  height: 100vh;
  height: 100dvh;
}

.project-present {
  position: relative;
  overflow: hidden;
  color: #c9c9c9;
  background: #000;
}

.project-present__slide {
  position: absolute;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
}

.project-present__slides {
  --project-present-motion-duration: var(--motion-duration-content);
  --project-present-motion-easing: var(--motion-easing);
}

.project-present__slide[data-project-present-motion-role] {
  visibility: visible;
  will-change: transform;
}

[data-project-present-motion-phase='running']
  .project-present__slide[data-project-present-motion-role] {
  transition-property: transform;
  transition-duration: var(--project-present-motion-duration);
  transition-timing-function: var(--project-present-motion-easing);
}

.project-present__slide[data-project-present-motion-role='outgoing'] {
  z-index: 1;
  pointer-events: none;
}

.project-present__slide[data-project-present-motion-role='incoming'] {
  z-index: 2;
}

[data-project-present-motion-direction='forward']
  [data-project-present-motion-role='outgoing'] {
  transform-origin: left center;
}

[data-project-present-motion-direction='forward']
  [data-project-present-motion-role='incoming'] {
  transform-origin: right center;
}

[data-project-present-motion-direction='backward']
  [data-project-present-motion-role='outgoing'] {
  transform-origin: right center;
}

[data-project-present-motion-direction='backward']
  [data-project-present-motion-role='incoming'] {
  transform-origin: left center;
}

[data-project-present-motion-phase='staged']
  [data-project-present-motion-role='outgoing'] {
  transform: scaleX(1);
}

[data-project-present-motion-phase='staged']
  [data-project-present-motion-role='incoming'] {
  transform: scaleX(0);
}

[data-project-present-motion-phase='running']
  [data-project-present-motion-role='outgoing'] {
  transform: scaleX(0);
}

[data-project-present-motion-phase='running']
  [data-project-present-motion-role='incoming'] {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .project-present__slide[data-project-present-motion-role] {
    transition: none;
  }
}

.project-present__slide > .project-intro {
  width: min(calc(100% - 2rem), 57.5rem);
  height: 100%;
  min-height: 0;
  padding-block: 2.5rem;
}

.project-present__slide > .project-hero,
.project-present__slide > .media-layout {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  width: calc(100vw - 1.75rem);
  height: auto;
  max-width: calc(100vw - 1.75rem);
  padding: 0;
  margin: 0;
  transform: translate(-50%, -50%)
    scale(var(--project-present-content-scale, 1));
  transform-origin: center;
}

.project-present__slide > .project-hero {
  overflow: visible;
}

.project-present__slide > .project-hero .project-hero__media,
.project-present__slide > .project-hero .project-hero__media picture {
  height: auto;
}

.project-present__slide > .media-layout {
  gap: 0.875rem;
  align-items: start;
}

.project-present__slide .media-column {
  display: grid;
  grid-column: span var(--column-span);
  min-width: 0;
  height: auto;
  align-items: start;
}

.project-present__slide .project-media {
  display: grid;
  width: 100%;
  height: auto;
  margin: 0;
  place-items: center;
}

.project-present__slide .project-hero__media :is(img, video),
.project-present__slide .project-media :is(img, video) {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: var(--media-focus, 50% 50%);
}

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

.project-present__slide .media-layout--row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.project-present__slide .media-layout--row .media-column {
  grid-column: span 1;
}

:is([data-page-root], [data-motion-page])[data-page-type='project'] {
  color: #c9c9c9;
  background: #000;
}

[data-page-type='project'] main {
  width: 100%;
  margin-inline: 0;
}

.project-header,
.project-hero,
.project-hero__media {
  min-width: 0;
}

.project-hero {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.project-hero__media,
.project-hero__media picture,
.project-hero__media :is(img, video) {
  width: 100%;
  height: 100%;
}

.project-hero__media picture {
  display: block;
}

.project-hero__media--mobile {
  display: none;
}

@media (max-width: 47.999rem) {
  .project-hero__media--desktop {
    display: none;
  }

  .project-hero__media--mobile {
    display: block;
  }
}

.project-hero__media :is(img, video),
.project-media--cropped img {
  object-fit: cover;
  object-position: var(--media-focus, 50% 50%);
}

.project-media--ratio-4-3 img {
  aspect-ratio: 4 / 3;
}

.project-media--ratio-7-5 img {
  aspect-ratio: 7 / 5;
}

.media-layout--full
  .project-media--portrait:not(.project-media--cropped)
  img {
  width: auto;
  max-width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  margin-inline: auto;
}

.project-media--viewport-height :is(img, video) {
  width: auto;
  max-width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  margin-inline: auto;
  object-fit: contain;
  object-position: var(--media-focus, 50% 50%);
}

.project-present__slide .project-media--viewport-height :is(img, video) {
  width: auto;
  max-width: 100%;
  max-height: 100vh;
  max-height: 100dvh;
}

.project-media--viewport-height.project-media--video {
  display: grid;
  justify-content: center;
}

.project-documentation .project-media--viewport-height.project-media--video {
  grid-template-columns: minmax(0, min(100%, var(--viewport-height-media-width, 100%)));
}

.project-documentation .project-media--viewport-height.project-media--video :is(img, video) {
  width: 100%;
}

.project-media--viewport-height.project-media--video :is(
  .project-media__poster,
  video
) {
  grid-area: 1 / 1;
}

.project-media--viewport-height.project-media--video .project-media__poster {
  position: relative;
  inset: auto;
  z-index: 0;
  width: auto;
  height: auto;
}

.project-media--viewport-height.project-media--video video {
  z-index: 1;
}

.project-media--viewport-height.project-media--video .project-media__caption {
  grid-column: 1;
}

.project-media--viewport-height.project-media--image .project-media__caption {
  inline-size: min(100%, var(--viewport-height-media-width));
  margin-inline: auto;
}

.project-media__caption {
  display: grid;
  gap: 0.25rem;
  padding-block-start: 0.625rem;
  margin: 0;
  margin-block-end: -0.125rem;
  transform: none;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
}

.project-media__caption-text,
.project-media__credit {
  display: block;
}

.about-page {
  width: 100%;
  padding: 2.5rem 0.875rem 8.75rem;
  color: #c9c9c9;
  background: #000;
}

.about-page__layout {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
}

.about-page__layout > * {
  min-width: 0;
}

.about-page__prose {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 0.875rem;
  padding-block-start: 2.25rem;
}

.about-page__bio,
.about-page__intro {
  min-width: 0;
  text-align: left;
}

.about-page__portrait {
  margin-block-end: 0.375rem;
}

.about-page__portrait .project-media__caption {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.about-page__bio:only-child,
.about-page__intro:only-child {
  width: 50vw;
  max-width: 100%;
  justify-self: center;
  grid-column: 1 / -1;
}

.about-page__bio,
.about-page__intro,
.project-description {
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: 0.01em;
}

.project-description {
  text-align: left;
}

.project-detail-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.875rem;
}

.about-page__description {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 0.875rem;
  align-items: start;
}

@media (min-width: 48.001rem) {
  .about-page__prose {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .about-page__bio {
    grid-column: 1 / span 2;
    grid-row: 1;
  }

  .about-page__bio:only-child {
    grid-column: 3 / span 2;
    width: 100%;
  }

  .about-page__intro:not(:only-child) {
    grid-column: 4 / span 3;
    grid-row: 1;
  }

  .about-page__bio .content-body {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    letter-spacing: 0.02em;
  }
}

.about-page__teaching,
.about-page__education,
.about-page__work-experience,
.about-page__services,
.about-page__clients,
.about-page__awards {
  min-width: 0;
}

.about-section :is(.content-label, .content-value) {
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: 0.02em;
}

.about-section .content-label {
  color: #797979;
}

.about-section :is(h2, ul, dl),
.about-section p {
  margin-block: 0;
}

.about-section li {
  overflow-wrap: anywhere;
}

.about-section .about-entries {
  display: flex;
  flex-direction: column;
  gap: 1.25em;
}

.contact-page {
  width: 100%;
  margin: 0;
  padding: 4.625rem 0.875rem 2rem;
  color: #c9c9c9;
  background: #000;
}

.contact-page__content {
  width: calc((100% - 2 * var(--media-layout-gap)) / 3);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: 0.01em;
}

.contact-page__images {
  display: grid;
  margin-block-start: 2.25rem;
  min-width: 0;
  gap: 0.75rem;
}

.contact-page__images .project-media__caption {
  padding-block-start: 0.375rem;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
}

.contact-page__intro {
  margin-block-end: 1.6875rem;
}

.contact-page__intro a {
  text-decoration: none;
}

.contact-page__address {
  font-style: normal;
}

.contact-page__address span {
  display: block;
}

.contact-page__address a {
  color: inherit;
  text-decoration: none;
}

@media (max-width: 47.999rem) {
  .contact-page {
    padding: 4.625rem 0.5rem 2rem;
  }

  .contact-page__content {
    width: 100%;
    max-width: 34rem;
  }

  .contact-page__intro {
    margin-block-end: 1.4rem;
  }

  .contact-page__images {
    margin-block-start: calc(var(--line-height-body) + 0.25rem);
  }
}

.site-footer--about {
  padding-block-start: 0;
}

@media (min-width: 48.001rem) {
  .site-footer a.site-footer__contact {
    display: none;
  }
}

.legal-page {
  width: 100%;
  padding: 4.625rem 0.875rem 2rem;
  color: #c9c9c9;
  background: #000;
  letter-spacing: 0.01em;
}

.legal-page__article {
  width: 100%;
  min-width: 0;
}

.legal-page__columns {
  align-items: start;
}

.legal-page__title {
  margin: 0 0 1.6875rem;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
}

.legal-page__prose {
  min-width: 0;
  overflow-wrap: anywhere;
}

.legal-page__prose :is(p, ul, ol, li) {
  margin: 0;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  font-weight: 400;
}

.legal-page__prose h2 {
  margin: 0;
  color: #797979;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.legal-page__prose h2:not(:first-child) {
  margin-block-start: 1.6875rem;
}

.legal-page__prose :is(p, ul, ol) + :is(p, ul, ol) {
  margin-block-start: 1em;
}

.legal-page__prose :is(ul, ol) {
  padding-inline-start: 2.5rem;
}

.project-intro {
  display: grid;
  width: calc((100% - 2.625rem) / 2);
  margin-inline: auto;
  padding-block: 5rem;
  place-content: center;
  color: #c9c9c9;
  text-align: center;
  gap: 0.25rem;
}

.project-intro h1,
.project-descriptor {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 400;
}

.project-intro h1 {
  color: #797979;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  letter-spacing: 0.01em;
}

.project-descriptor {
  font-size: var(--font-size-display);
  line-height: var(--line-height-display);
  letter-spacing: -0.02em;
}

.project-information {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.875rem;
  padding: 0 0.875rem 0.625rem;
}

.project-details {
  padding: 1.375rem 0.875rem 0;
}

.project-meta {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.875rem;
  margin: 0;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  letter-spacing: 0.01em;
}

.project-meta__column {
  display: flex;
  flex-direction: column;
  gap: var(--font-size-small);
  min-width: 0;
  margin: 0;
}

.project-meta__column--left {
  grid-column: 1;
}

.project-meta__column--right {
  grid-column: 2;
}

.project-meta__column--credits {
  grid-column: 6;
}

.project-meta__item,
.project-meta dt,
.project-meta dd,
.project-meta p {
  margin: 0;
  overflow-wrap: anywhere;
}

.project-meta dt {
  color: #797979;
}

.project-description {
  grid-column: 2 / span 2;
  align-self: start;
}

.project-description--background {
  grid-column: 1 / span 2;
}

.project-description__label {
  margin: 0 0 0.25rem;
  color: #797979;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  font-weight: 400;
}

.project-description--approach {
  grid-column: 3 / span 2;
}

.project-documentation {
  display: grid;
  width: calc(100% - 1.75rem);
  margin-inline: auto;
  gap: 0.75rem;
}

.media-layout {
  display: grid;
  gap: var(--media-layout-gap);
}

.media-column,
.project-media,
.project-media :is(img, video) {
  min-width: 0;
}

.project-hero__media--video,
.project-media--video {
  position: relative;
}

.project-hero__media--video .project-media__poster,
.project-media--video .project-media__poster {
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  z-index: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}

.project-hero__media--video .project-media__poster {
  height: 100%;
}

.project-hero__media--video video,
.project-media--video video {
  position: relative;
  z-index: 1;
}

.project-media--video video {
  object-position: var(--media-focus, 50% 50%);
}

.related-projects {
  --gallery-ui-background: var(--site-menu-background);
  --gallery-ui-background-active: var(--site-menu-background-active);
  --gallery-ui-color: var(--site-menu-color);
  --gallery-ui-radius: var(--ui-radius-box);
  --gallery-ui-shadow: var(--site-menu-shadow);
  --gallery-ui-blur: 0.78125rem;
  --related-meta-tile-space: var(--site-edge-space);

  width: 100vw;
  margin-block-start: 0;
  margin-inline-start: calc(50% - 50vw);
  padding-block-start: 0;
}

.related-projects > h2 {
  display: block;
  margin: 0;
  padding: 3.375rem 1rem 3.375rem;
  color: #c9c9c9;
  background: transparent;
  box-shadow: none;
  font-size: var(--font-size-display);
  font-weight: 400;
  line-height: var(--line-height-display);
  letter-spacing: -0.01em;
  text-align: center;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.related-projects__list {
  gap: 0;
  margin-block-start: 0.625rem;
}

.related-projects .project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--related-meta-tile-space);
}

.related-projects .project-card__surface {
  gap: 0;
}

.related-projects .project-card figure {
  aspect-ratio: 504 / 314;
  margin: 0;
  overflow: hidden;
}

.related-projects .project-card :is(img, video) {
  height: 100%;
  object-fit: cover;
}

.related-projects .project-preview__meta {
  position: static;
  order: -1;
  gap: var(--site-menu-gap);
  min-width: 0;
  max-width: calc(100% - (2 * var(--related-meta-tile-space)));
  margin-inline-start: var(--related-meta-tile-space);
  align-items: flex-start;
  font: inherit;
  font-size: var(--font-size-small);
  line-height: var(--line-height-small);
  opacity: 1;
  pointer-events: none;
}

.related-projects__list > li:not(:nth-child(odd)) .project-preview__meta {
  margin-inline-start: 0;
}

.related-projects .project-gallery__meta-title {
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}

.related-projects .project-gallery__meta-title > span {
  min-width: 0;
  /* Let glyphs use the button padding without moving the text or its ellipsis. */
  padding-block: var(--ui-control-padding-block-start)
    var(--ui-control-padding-block-end);
  margin-block: calc(-1 * var(--ui-control-padding-block-start))
    calc(-1 * var(--ui-control-padding-block-end));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1;
}

.related-projects .project-gallery__meta-category {
  flex-shrink: 0;
}

[data-page-type='project'] > [data-page-content] > .site-footer {
  padding-block-start: var(--site-edge-space);
}

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


@media (min-width: 30rem) {
  .projects-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 48rem) {
  :root {
    --font-size-display: 1.625rem;
    --line-height-display: 1.75rem;
    --font-size-body: 1.15rem;
    --line-height-body: 1.4rem;
    --font-size-small: 0.9rem;
    --line-height-small: 1.15rem;
    --font-size-ui: 0.9rem;
    --line-height-ui: normal;
  }

  .content-layout {
    width: 100%;
    max-width: 93vw;
  }

  .content-flow {
    gap: var(--content-section-space-small);
  }

  .content-row {
    grid-template-columns: var(--content-label-width-small) minmax(0, 1fr);
  }

  .project-present__slide > .project-intro {
    width: min(calc(100% - 2rem), 34rem);
    padding-block: 3.5rem;
  }

  .project-present__slide > .media-layout {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0.25rem;
  }

  .project-hero {
    height: 100vh;
    /* Large viewport: fills the screen with or without browser chrome
       without recropping when the toolbar collapses. */
    height: 100lvh;
  }

  .project-hero__media,
  .project-hero__media :is(img, video) {
    height: 100%;
  }

  .project-intro {
    width: 93vw;
  }

  .project-information {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.125rem;
    padding: 0 3.5vw 0.5rem;
  }

  .project-description {
    grid-column: 1;
  }

  .project-details {
    padding: 1.375rem 3.5vw 0;
  }

  .project-meta {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: min-content 1fr;
    align-items: start;
    row-gap: var(--line-height-small);
  }

  .project-meta__column {
    gap: var(--line-height-small);
  }

  .project-meta__column--left {
    grid-row: 1;
  }

  .project-meta__column--right {
    grid-column: 1;
    grid-row: 2;
  }

  .project-meta__column--credits {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

  .project-documentation {
    width: 93vw;
    gap: 0.75rem;
  }

  :root {
    --media-layout-gap: 0.75rem;
  }

  .project-media__caption {
    padding-block-start: 0.4rem;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
  }

  .related-projects {
    padding-block-start: 0;
  }

  .related-projects > h2 {
    padding: 6rem 1rem 2rem;
  }

  .related-projects .project-gallery__meta-category {
    display: none;
  }

  .related-projects .project-preview__meta {
    min-width: 0;
    width: 100%;
  }

  .about-page {
    padding: 4.25rem 0.5rem 2.4375rem;
  }

  .about-page__layout {
    gap: 2.75rem;
  }

  .about-page__prose {
    grid-template-columns: minmax(0, 1fr);
    padding: 0;
    row-gap: 1.5rem;
  }

  .about-page__bio,
  .about-page__intro {
    width: 100%;
  }

  .about-page__description {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 1rem;
  }

  .about-page__education {
    order: 1;
  }

  .about-page__work-experience {
    order: 2;
  }

  .about-page__services {
    order: 3;
  }

  .about-page__clients {
    order: 4;
  }

  .about-page__awards {
    order: 5;
  }

  .about-page__teaching {
    order: 6;
  }

  .about-section :is(.content-label, .content-value) {
    letter-spacing: 0.01em;
    font-weight: 400;
  }

  .site-footer--about {
    padding-block: var(--site-menu-gap) 2.3125rem;
  }

  .legal-page {
    padding: 4.625rem 0.5rem 2rem;
  }

  .legal-page .project-detail-columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.6875rem;
  }

  .legal-page__prose h2 {
    letter-spacing: 0.01em;
    font-weight: 400;
  }

}

@media (min-width: 48rem) {
  .related-projects__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .related-projects__list > li:nth-child(n + 3) {
    display: block;
  }

  .related-projects__list > li:nth-child(3n + 1) .project-preview__meta {
    margin-inline-start: var(--related-meta-tile-space);
  }

  .related-projects__list > li:not(:nth-child(3n + 1)) .project-preview__meta {
    margin-inline-start: 0;
  }

  .project-gallery--desktop {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .project-gallery--mobile {
    display: none;
  }

  [data-page-type='gallery']
    .project-gallery--desktop
    [data-gallery-group^='top-']
    :is(.project-preview__meta, .project-gallery__meta-overlay) {
    inset-block-start: auto;
    inset-block-end: 0.3rem;
    align-items: flex-end;
  }

  .media-layout {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .project-documentation .media-layout--split > .media-column:first-child {
    --split-media-margin-start: auto;
    --split-media-margin-end: 0;
    --split-media-alignment: end;
  }

  .project-documentation .media-layout--split > .media-column:last-child {
    --split-media-margin-start: 0;
    --split-media-margin-end: auto;
    --split-media-alignment: start;
  }

  .project-documentation .media-layout--split
    .project-media--viewport-height :is(img, video, .project-media__caption) {
    margin-inline: var(--split-media-margin-start) var(--split-media-margin-end);
  }

  .project-documentation .media-layout--split
    .project-media--viewport-height.project-media--video {
    justify-content: var(--split-media-alignment);
  }

  .media-layout--row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .media-column {
    grid-column: span var(--column-span);
    min-width: 0;
  }

  .media-layout--row .media-column {
    grid-column: span 1;
  }
}

@media (max-width: 47.999rem) {
  .error-page__text {
    width: 100%;
  }

  [data-gallery-view='mobile'][data-gallery-enhanced] {
    --project-gallery-motion-duration: 450ms;
  }

  [data-page-type='gallery']
    :is(.project-preview__meta, .project-gallery__meta-overlay) {
    display: none;
  }
}

@media (min-width: 64rem) {
  .projects-overview {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

:is(
  .content-body,
  .content-value,
  .project-meta dd,
  .project-media__caption,
  .contact-page__content,
  .legal-page__prose,
  .error-page__text
) a {
  color: var(--global-link-color);
}

:is(
  .content-body,
  .content-value,
  .project-meta dd,
  .project-media__caption,
  .contact-page__content,
  .legal-page__prose,
  .error-page__text
) a:focus-visible {
  color: inherit;
}

@media (hover: hover) and (pointer: fine) {
  :is(
      .content-body,
      .content-value,
      .project-meta dd,
      .project-media__caption,
      .contact-page__content,
      .legal-page__prose,
      .error-page__text
    )
    a:hover {
    color: inherit;
  }
}

/* A pending project retains its preview without offering project navigation. */
:is([data-page-type='projects'] .projects-overview, [data-page-type='gallery'], .related-projects)
  .project-gallery__meta-status {
  flex: 0 0 auto;
  max-width: none;
}

.project-gallery__meta-status-text {
  animation: project-coming-soon-blink 1s ease-in-out infinite;
}

@keyframes project-coming-soon-blink {
  0%, 100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-gallery__meta-status-text {
    animation: none;
  }
}

.project-card__coming-soon {
  margin: 0;
  font-size: var(--font-size-ui);
}

.index-table__coming-soon {
  display: block;
  font-size: var(--font-size-small);
}

@media (max-width: 47.999rem) {
  [data-page-type='projects'] .projects-overview
    .project-card--coming-soon .project-preview__meta {
    display: flex;
    opacity: 1;
  }

  [data-page-type='projects'] .projects-overview
    .project-card--coming-soon .project-preview__meta > :not(.project-gallery__meta-status) {
    display: none;
  }
}

@media (max-width: 47.999rem) {
  [data-page-type='gallery']
    :is(.project-preview__meta, .project-gallery__meta-overlay):has(.project-gallery__meta-status) {
    display: flex;
    inset-block-start: auto;
    inset-block-end: 0.3rem;
  }

  [data-page-type='gallery'] .project-gallery__meta-overlay:has(.project-gallery__meta-status),
  [data-page-type='gallery'] [data-gallery-view]:not([data-gallery-enhanced])
    .project-preview__meta:has(.project-gallery__meta-status),
  .related-projects .project-card--coming-soon .project-preview__meta {
    opacity: 1;
  }

  [data-page-type='gallery']
    :is(.project-preview__meta, .project-gallery__meta-overlay):has(.project-gallery__meta-status)
    > :not(.project-gallery__meta-status),
  .related-projects .project-card--coming-soon .project-gallery__meta-title {
    display: none;
  }

  .related-projects .project-card--coming-soon .project-gallery__meta-status {
    display: inline-flex;
  }
}