@font-face {
  font-family: "Akzidenz-Grotesk";
  src: url("/font/Akzidenz-grotesk-light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Akzidenz-Grotesk";
  src: url("/font/Akzidenz-grotesk-roman.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Akzidenz-Grotesk";
  src: url("/font/Akzidenz-grotesk-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Akzidenz-Grotesk";
  src: url("/font/Akzidenz-grotesk-black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --fg: #000000;
  --muted: rgba(0, 0, 0, 0.6);
  --line: rgba(0, 0, 0, 0.14);
  --type-scale-max: 1.65;
  --type-scale-min: 1.38;
  --type-scale: clamp(
    var(--type-scale-min),
    calc(
      var(--type-scale-min) +
        (var(--type-scale-max) - var(--type-scale-min)) * ((100vw - 20rem) / 60rem)
    ),
    var(--type-scale-max)
  );
  --font-size-micro: clamp(0.5625rem, 2.4vmin, calc(10px * var(--type-scale-max)));
  --font-size-xs: clamp(0.625rem, 2.65vmin, calc(11px * var(--type-scale-max)));
  --font-size-sm: clamp(0.6875rem, 2.9vmin, calc(12px * var(--type-scale-max)));
  --font-size-base: clamp(0.75rem, 3.15vmin, calc(13px * var(--type-scale-max)));
  --font-size-title: clamp(1rem, 4vmin, calc(1.2rem * var(--type-scale-max)));
  --header-x: clamp(1rem, 4vw, 1.5rem);
  --header-y: clamp(0.85rem, 3.2vw, 1.2rem);
  --site-header-clearance: calc(var(--header-y) * 2 + 2.75rem);
  --content-width: min(100%, 56rem);
  --index-row-gutter: 2.25ch;
  --index-preview-width: min(44vw, 34rem);
  --index-preview-aspect: 4 / 3;
  --index-preview-gap: clamp(1rem, 2vw, 1.5rem);
  --index-preview-reserve: calc(var(--index-preview-width) + var(--index-preview-gap));
  --index-column-gap: clamp(1.25rem, 2.5vw, 2rem);
  --index-service-col: clamp(9.5rem, 14vw, 12.5rem);
  --layout-mobile-max: 960px;
  --project-grid-gutter: clamp(0.8rem, 2.2vw, 2rem);
  --project-grid-content-max: 72rem;
  --project-grid-editorial-max: 46rem;
  --project-grid-editorial-columns: 12;
  --project-grid-editorial-gap: clamp(0.6rem, 1.5vw, 1.25rem);
  --image-reveal-start-opacity: 0.0001;
  --image-reveal-duration: 760ms;
  --image-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --cursor-size: 4px;
  --cursor-ring: 1px;
  --text-invert-color: #ffffff;
  --text-invert-blend: difference;
  --font: "Akzidenz-Grotesk", Helvetica, Arial, sans-serif;
  --selection-glow: var(--fg);
  /* urbaines.ch nav/button hover: muted at rest, full on hover */
  --interactive-opacity: 0.58;
  --interactive-opacity-secondary: 0.42;
  --interactive-opacity-tertiary: 0.28;
  --interactive-hover-opacity: 1;
  --interactive-transition: opacity 0.2s ease;
}

* {
  box-sizing: border-box;
}

::selection {
  color: transparent;
  text-shadow: 0 0 0.15em var(--selection-glow);
  background: transparent;
}

::-moz-selection {
  color: transparent;
  text-shadow: 0 0 0.15em var(--selection-glow);
  background: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: var(--font-size-sm);
  font-weight: 400;
  font-optical-sizing: auto;
  font-style: normal;
  line-height: 1.6;
  text-transform: uppercase;
  -webkit-user-select: text;
  user-select: text;
}

/* Non-home routes: solid black text (no difference/invert blend, no muted opacity). */
body.route-project .site-header,
body.route-project .site-header__brand,
body.route-project .site-header__nav,
body.route-project .site-header__link,
body.route-project .site-header__brand:hover,
body.route-project .site-header__brand:focus-visible,
body.route-project .site-header__brand:active,
body.route-project .site-header__brand:visited,
body.route-project .site-header__link:hover,
body.route-project .site-header__link:focus-visible,
body.route-project .site-header__link:active,
body.route-project .site-header__link:visited,
body.route-project .site-header__link[aria-expanded="true"],
body.route-project .project-title-rail,
body.route-project .project-title-rail__text,
body.route-project .project-service-rail,
body.route-project .project-service-rail__text,
body.route-index .site-header,
body.route-index .site-header__brand,
body.route-index .site-header__nav,
body.route-index .site-header__link,
body.route-index .site-header__brand:hover,
body.route-index .site-header__brand:focus-visible,
body.route-index .site-header__brand:active,
body.route-index .site-header__brand:visited,
body.route-index .site-header__link:hover,
body.route-index .site-header__link:focus-visible,
body.route-index .site-header__link:active,
body.route-index .site-header__link:visited,
body.route-index .site-header__link[aria-expanded="true"],
body.route-index .index-view,
body.route-index .index-view__columns,
body.route-index .index-view__columns-cell,
body.route-index .index-view__title,
body.route-index .index-view__title-primary,
body.route-index .index-view__category,
body.route-index .index-view__row,
body.route-index .index-view__row::before,
body.route-about .site-header,
body.route-about .site-header__brand,
body.route-about .site-header__nav,
body.route-about .site-header__link,
body.route-about .site-header__brand:hover,
body.route-about .site-header__brand:focus-visible,
body.route-about .site-header__brand:active,
body.route-about .site-header__brand:visited,
body.route-about .site-header__link:hover,
body.route-about .site-header__link:focus-visible,
body.route-about .site-header__link:active,
body.route-about .site-header__link:visited,
body.route-about .site-header__link[aria-expanded="true"],
body.route-about .about-panel,
body.route-about .about-panel__inner,
body.route-about .about-panel__inner *,
body.route-about .about-panel__title,
body.route-about .about-panel__body,
body.route-about .about-panel__label,
body.route-about .about-panel__practice,
body.route-about .about-panel__content,
body.route-about .about-panel__credits,
body.route-about .about-panel__credit-link {
  color: #000000 !important;
  mix-blend-mode: normal !important;
}

/* Project pages: BACK control only — adaptive invert against imagery. */
body.route-project .project-back-cursor {
  color: var(--text-invert-color) !important;
  -webkit-text-fill-color: var(--text-invert-color) !important;
  mix-blend-mode: var(--text-invert-blend) !important;
}

body.route-index .index-view__columns,
body.route-index .index-view__title-primary,
body.route-index .index-view__category,
body.route-index .index-view__row::before,
body.route-about .about-panel__title,
body.route-about .about-panel__body,
body.route-about .about-panel__label,
body.route-about .about-panel__practice,
body.route-about .about-panel__credits,
body.route-about .about-panel__credit-link {
  opacity: 1 !important;
}

/* Keep photos, video, and overlay surfaces in normal compositing. */
.hero-area,
.hero-area__layer,
.hero-area__video,
.hero-area__morph,
.ambient-cinema,
.ambient-cinema__layer,
.ambient-cinema__fog,
.project-view__media,
.project-view__item,
.project-view__image-layer,
.project-view__item--video,
video,
.index-view__media-slot,
.index-view__media,
.entry-gate,
.entry-gate__surface,
.loader,
.cursor-point__inner {
  mix-blend-mode: normal;
}

.entry-gate__progress,
.site-header,
.about-panel__inner,
.index-view__list,
.project-title-rail__text,
.project-service-rail__text,
.image-counter,
.loader__percent {
  -webkit-user-select: text;
  user-select: text;
}

.index-view__row,
.site-header__brand,
.site-header__link {
  -webkit-user-select: text;
  user-select: text;
}

.hero-area,
.home-cursor-title,
.project-title-rail,
.project-service-rail,
.project-back-cursor,
.cursor-point,
.ambient-cinema,
.ambient-cinema *,
.hero-area__layer,
.hero-area__video,
.project-view__media,
.project-view__item,
.project-view__image-layer,
.project-view__item--video,
.index-view__media-slot,
.index-view__media,
.entry-gate__surface {
  -webkit-user-select: none;
  user-select: none;
}

body.entry-gate-open,
body.loading {
  overflow: hidden;
  mix-blend-mode: normal;
}

.entry-gate__progress,
body.loading .loader__percent {
  mix-blend-mode: normal;
  color: var(--fg);
}

body.entry-gate-open .home-cursor-title,
body.entry-gate-open .project-back-cursor,
body.entry-gate-open .home-arrow-nav {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

body.entry-gate-open .cursor-point {
  z-index: 110;
}

.entry-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  transition: opacity 420ms var(--image-reveal-ease), visibility 420ms;
}

.entry-gate[hidden] {
  display: none !important;
}

.entry-gate.is-dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.entry-gate__surface {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 2rem;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: center;
  cursor: wait;
}

.entry-gate__progress {
  margin: 0;
  font-size: var(--font-size-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}

.entry-gate.is-preloading .entry-gate__surface,
.entry-gate.is-ready .entry-gate__surface {
  cursor: wait;
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
}

body:not(.loading) .loader {
  display: none;
}

.loader__percent {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  opacity: 0.72;
}

body.route-home {
  overflow: hidden;
}

/* Let homepage chrome blend per-pixel with hero media (including video layers). */
body.route-home .app {
  isolation: auto;
}

body.route-project,
body.route-index,
body.route-about {
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--fg);
}

body.route-index ::selection,
body.route-index ::-moz-selection,
body.route-about ::selection,
body.route-about ::-moz-selection {
  color: var(--fg);
  text-shadow: none;
  background: rgba(0, 0, 0, 0.1);
}

body.route-index .home-view,
body.route-index .cursor-point,
body.route-index .home-cursor-title,
body.route-about .home-view,
body.route-about .cursor-point,
body.route-about .home-cursor-title {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.cursor-point {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.route-home .ambient-cinema {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0 !important;
}

body.route-project .ambient-cinema,
body.route-index .ambient-cinema,
body.route-about .ambient-cinema {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0 !important;
}

body.route-home .home-view::after {
  opacity: 0 !important;
}

body.route-index .index-view.is-active,
body.route-about .about-panel.is-active {
  display: block !important;
  visibility: visible;
  pointer-events: auto;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--header-y) var(--header-x);
  pointer-events: none;
  background: transparent;
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.site-header__brand,
.site-header__nav {
  pointer-events: auto;
}

/* Index (list) + project routes — Apple-style frosted glass at the nav top.
   Semi-transparent from pixel 0 (never solid), light blur, short flat zone,
   smooth fade. Readable without calling attention to itself. */
body.route-index .site-header::before,
body.route-project .site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: auto;
  height: calc(var(--site-header-clearance) * 1.7);
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.78) 5%,
    rgba(255, 255, 255, 0.60) 30%,
    rgba(255, 255, 255, 0.30) 55%,
    rgba(255, 255, 255, 0.08) 74%,
    rgba(255, 255, 255, 0.00) 88%,
    rgba(255, 255, 255, 0.00) 100%
  );
  -webkit-backdrop-filter: blur(13px) saturate(1.6);
  backdrop-filter: blur(13px) saturate(1.6);
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 5%,
    rgba(0, 0, 0, 0.78) 30%,
    rgba(0, 0, 0, 0.40) 55%,
    rgba(0, 0, 0, 0.10) 74%,
    transparent 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0%,
    #000 5%,
    rgba(0, 0, 0, 0.78) 30%,
    rgba(0, 0, 0, 0.40) 55%,
    rgba(0, 0, 0, 0.10) 74%,
    transparent 88%,
    transparent 100%
  );
  transition: background 0.25s ease;
}

/* Project route — same frosted veil as the header, flipped to the bottom rails. */
.project-footer-veil {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: auto;
  height: calc(var(--site-header-clearance) * 1.7);
  z-index: 45;
  pointer-events: none;
}

body.route-project .project-footer-veil {
  display: block;
}

body.route-project .project-footer-veil::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 0.78) 0%,
    rgba(255, 255, 255, 0.78) 5%,
    rgba(255, 255, 255, 0.60) 30%,
    rgba(255, 255, 255, 0.30) 55%,
    rgba(255, 255, 255, 0.08) 74%,
    rgba(255, 255, 255, 0.00) 88%,
    rgba(255, 255, 255, 0.00) 100%
  );
  -webkit-backdrop-filter: blur(13px) saturate(1.6);
  backdrop-filter: blur(13px) saturate(1.6);
  -webkit-mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 5%,
    rgba(0, 0, 0, 0.78) 30%,
    rgba(0, 0, 0, 0.40) 55%,
    rgba(0, 0, 0, 0.10) 74%,
    transparent 88%,
    transparent 100%
  );
  mask-image: linear-gradient(
    to top,
    #000 0%,
    #000 5%,
    rgba(0, 0, 0, 0.78) 30%,
    rgba(0, 0, 0, 0.40) 55%,
    rgba(0, 0, 0, 0.10) 74%,
    transparent 88%,
    transparent 100%
  );
}

.site-header__brand,
.site-header__link,
.home-arrow-nav__btn,
.about-panel__credit-link,
.index-view__title-primary,
.index-view__category {
  transition: var(--interactive-transition);
}

.site-header__brand,
.site-header__link {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: var(--font-size-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  color: var(--fg);
  mix-blend-mode: normal;
  opacity: 1;
}

.site-header__link[aria-expanded="true"] {
  opacity: var(--interactive-hover-opacity);
}

.site-header__brand:focus-visible,
.site-header__link:focus-visible {
  opacity: var(--interactive-hover-opacity);
  outline: 1px solid currentColor;
  outline-offset: 0.22rem;
}

@media (pointer: fine) and (hover: hover) {
  .site-header__brand:hover,
  .site-header__link:hover,
  .home-arrow-nav__btn:hover:not([aria-disabled="true"]),
  .about-panel__credit-link:hover,
  .index-view__row:hover .index-view__title-primary,
  .index-view__row:focus-visible .index-view__title-primary,
  .index-view__row:hover .index-view__category,
  .index-view__row:focus-visible .index-view__category {
    opacity: var(--interactive-hover-opacity);
  }

  .index-view__row:hover::before,
  .index-view__row:focus-visible::before {
    opacity: 0.5;
  }
}

@media (pointer: coarse) {
  .site-header__brand:active,
  .site-header__link:active,
  .home-arrow-nav__btn:active:not([aria-disabled="true"]),
  .about-panel__credit-link:active,
  .index-view__row:active .index-view__title-primary,
  .index-view__row:active .index-view__category {
    opacity: var(--interactive-hover-opacity);
  }

  .index-view__row:active::before {
    opacity: 0.5;
  }
}

.site-header__nav {
  display: flex;
  align-items: center;
  gap: clamp(0.65rem, 3vw, 1.2rem);
}

.app {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  z-index: 1;
}

.ambient-cinema {
  --ambient-strength: 0;
  --ambient-g1-x: 46%;
  --ambient-g1-y: 44%;
  --ambient-g2-x: 58%;
  --ambient-g2-y: 56%;
  --ambient-g3-x: 50%;
  --ambient-g3-y: 54%;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.55s ease;
  overflow: hidden;
  contain: layout style paint;
}

.ambient-cinema.is-visible {
  opacity: var(--ambient-strength);
}

.ambient-cinema__layer {
  position: absolute;
  inset: -14% -12%;
  background:
    radial-gradient(62% 50% at var(--ambient-g1-x) var(--ambient-g1-y), rgb(var(--ambient-c1, 132 124 120) / 0.92) 0%, rgba(0, 0, 0, 0) 74%),
    radial-gradient(48% 38% at var(--ambient-g2-x) var(--ambient-g2-y), rgb(var(--ambient-c2, 168 156 148) / 0.72) 0%, rgba(0, 0, 0, 0) 76%),
    radial-gradient(86% 76% at var(--ambient-g3-x) var(--ambient-g3-y), rgb(var(--ambient-c3, 84 78 82) / 0.58) 0%, rgba(0, 0, 0, 0) 88%);
  opacity: 0;
  transition: opacity 1.05s ease;
  filter: blur(42px) saturate(1.62) brightness(0.96);
  transform: scale(1.1);
  mix-blend-mode: soft-light;
  will-change: opacity, filter;
}

.ambient-cinema__fog {
  position: absolute;
  inset: -22% -18%;
  background:
    radial-gradient(88% 72% at var(--ambient-g3-x) var(--ambient-g3-y), rgb(var(--ambient-c3, 84 78 82) / 0.42) 0%, rgba(0, 0, 0, 0) 80%),
    radial-gradient(54% 44% at calc(var(--ambient-g1-x) + 2%) calc(var(--ambient-g1-y) - 2%), rgb(var(--ambient-c1, 132 124 120) / 0.28) 0%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(46% 36% at calc(var(--ambient-g2-x) - 1%) calc(var(--ambient-g2-y) + 1%), rgb(var(--ambient-c2, 168 156 148) / 0.22) 0%, rgba(0, 0, 0, 0) 70%);
  opacity: 0;
  filter: blur(48px) saturate(1.48) brightness(1.04);
  mix-blend-mode: screen;
  transform: scale(1.08);
  will-change: transform, opacity;
  animation: ambientFogDrift 20s ease-in-out infinite alternate;
}

.ambient-cinema.is-visible .ambient-cinema__fog {
  opacity: 0.68;
}

.ambient-cinema--index {
  --ambient-strength: 0.54;
  z-index: 1;
}

body.route-index .ambient-cinema--index::before,
body.route-index .ambient-cinema--index::after {
  opacity: 0.48;
}

.ambient-cinema--index .ambient-cinema__layer {
  inset: -6% -5%;
  background:
    radial-gradient(26% 22% at var(--ambient-g1-x) var(--ambient-g1-y), rgb(var(--ambient-c1, 132 124 120) / 0.96) 0%, rgba(0, 0, 0, 0) 66%),
    radial-gradient(20% 16% at var(--ambient-g2-x) var(--ambient-g2-y), rgb(var(--ambient-c2, 168 156 148) / 0.8) 0%, rgba(0, 0, 0, 0) 68%),
    radial-gradient(30% 24% at var(--ambient-g3-x) var(--ambient-g3-y), rgb(var(--ambient-c3, 84 78 82) / 0.64) 0%, rgba(0, 0, 0, 0) 70%);
  filter: blur(20px) saturate(1.7) brightness(0.98);
  transform: scale(1.02);
  transition: opacity 1.45s ease, filter 1.2s ease;
}

.ambient-cinema--index .ambient-cinema__fog {
  inset: -8% -6%;
  background:
    radial-gradient(32% 26% at var(--ambient-g3-x) var(--ambient-g3-y), rgb(var(--ambient-c3, 84 78 82) / 0.36) 0%, rgba(0, 0, 0, 0) 66%),
    radial-gradient(22% 18% at calc(var(--ambient-g1-x) + 1%) calc(var(--ambient-g1-y) - 1%), rgb(var(--ambient-c1, 132 124 120) / 0.24) 0%, rgba(0, 0, 0, 0) 62%),
    radial-gradient(18% 14% at calc(var(--ambient-g2-x) - 1%) calc(var(--ambient-g2-y) + 1%), rgb(var(--ambient-c2, 168 156 148) / 0.18) 0%, rgba(0, 0, 0, 0) 60%);
  opacity: 0.66;
  filter: blur(24px) saturate(1.46) brightness(1.04);
  transform: scale(1.02);
}

.ambient-cinema--index .ambient-cinema__layer,
.ambient-cinema--index .ambient-cinema__fog {
  -webkit-mask-image: none;
  mask-image: none;
}

.ambient-cinema--home {
  --ambient-strength: 0.72;
}

.ambient-cinema--home .ambient-cinema__layer {
  background:
    radial-gradient(48% 40% at var(--ambient-g1-x) var(--ambient-g1-y), rgb(var(--ambient-c1, 132 124 120) / 0.98) 0%, rgba(0, 0, 0, 0) 68%),
    radial-gradient(40% 32% at var(--ambient-g2-x) var(--ambient-g2-y), rgb(var(--ambient-c2, 168 156 148) / 0.84) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(64% 54% at var(--ambient-g3-x) var(--ambient-g3-y), rgb(var(--ambient-c3, 84 78 82) / 0.68) 0%, rgba(0, 0, 0, 0) 82%);
  filter: blur(36px) saturate(1.74) brightness(1.02);
  -webkit-mask-image: radial-gradient(ellipse 82% 68% at 50% 50%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 82% 68% at 50% 50%, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.72) 62%, rgba(0, 0, 0, 0) 100%);
}

.ambient-cinema--home .ambient-cinema__fog {
  background:
    radial-gradient(72% 58% at var(--ambient-g3-x) var(--ambient-g3-y), rgb(var(--ambient-c3, 84 78 82) / 0.52) 0%, rgba(0, 0, 0, 0) 78%),
    radial-gradient(44% 36% at calc(var(--ambient-g1-x) + 2%) calc(var(--ambient-g1-y) - 2%), rgb(var(--ambient-c1, 132 124 120) / 0.36) 0%, rgba(0, 0, 0, 0) 68%),
    radial-gradient(38% 30% at calc(var(--ambient-g2-x) - 1%) calc(var(--ambient-g2-y) + 1%), rgb(var(--ambient-c2, 168 156 148) / 0.3) 0%, rgba(0, 0, 0, 0) 66%);
  opacity: 0.86;
  filter: blur(44px) saturate(1.58) brightness(1.08);
  -webkit-mask-image: radial-gradient(ellipse 88% 72% at 50% 52%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.58) 64%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 88% 72% at 50% 52%, rgba(0, 0, 0, 0.96) 0%, rgba(0, 0, 0, 0.58) 64%, rgba(0, 0, 0, 0) 100%);
}

.ambient-cinema--home::after {
  opacity: 0.72;
}

@keyframes ambientFogDrift {
  0% {
    transform: scale(1.14) translate(-1.4%, -0.8%);
    opacity: 0.58;
  }
  100% {
    transform: scale(1.24) translate(1.1%, 1.3%);
    opacity: 0.76;
  }
}

.ambient-cinema__layer.is-visible {
  opacity: 1;
}

.ambient-cinema--about {
  --ambient-strength: 0.14;
}

.ambient-cinema::before,
.ambient-cinema::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient-cinema::before {
  background:
    radial-gradient(40% 32% at var(--ambient-g1-x) var(--ambient-g1-y), rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0) 70%),
    radial-gradient(32% 24% at var(--ambient-g2-x) var(--ambient-g2-y), rgba(0, 0, 0, 0.14) 0%, rgba(0, 0, 0, 0) 72%),
    radial-gradient(78% 62% at var(--ambient-g3-x) var(--ambient-g3-y), rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 84%);
  mix-blend-mode: soft-light;
  opacity: 0.92;
}

.ambient-cinema::after {
  background:
    radial-gradient(92% 76% at 50% 52%, rgba(255, 255, 255, 0) 46%, rgba(255, 255, 255, 0.2) 100%),
    radial-gradient(40% 30% at 52% 46%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: multiply;
  opacity: 0.88;
}

.ambient-cinema .ambient-cinema__layer {
  -webkit-mask-image: radial-gradient(ellipse 58% 46% at 50% 50%, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.78) 50%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 58% 46% at 50% 50%, rgba(0, 0, 0, 0.97) 0%, rgba(0, 0, 0, 0.78) 50%, rgba(0, 0, 0, 0) 100%);
}

.ambient-cinema .ambient-cinema__fog {
  -webkit-mask-image: radial-gradient(ellipse 72% 58% at 50% 52%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0) 100%);
  mask-image: radial-gradient(ellipse 72% 58% at 50% 52%, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 58%, rgba(0, 0, 0, 0) 100%);
}

.home-view {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: block;
  padding: 0;
  transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: center;
}

body.route-home .home-view {
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

.home-view::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(62% 54% at 50% 48%, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0) 72%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.08) 100%);
  transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

body.route-project .home-view {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

body.route-index .home-view,
body.route-about .home-view {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.index-view {
  position: relative;
  z-index: 2;
  display: none;
  min-height: 100vh;
  padding: 0;
  background: transparent;
  color: var(--fg);
  overflow: visible;
}

.index-view.is-active {
  display: block;
}

/* Index list — With Rust desktop: full-size preview to the right of the list on hover. */
.index-view__list {
  --index-row-number-width: var(--index-row-gutter);
  --index-row-number-gap: 0.5rem;
  --index-row-number-space: calc(var(--index-row-number-width) + var(--index-row-number-gap));
  position: relative;
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: calc(var(--site-header-clearance) + clamp(1.6rem, 3.6vw, 2.8rem)) var(--header-x) 3.5rem;
  overflow: visible;
  counter-reset: index-row;
  text-transform: uppercase;
}

.index-view__list :where(
  .index-view__columns,
  .index-view__columns-cell,
  .index-view__row,
  .index-view__title,
  .index-view__title-primary,
  .index-view__category
) {
  text-transform: uppercase;
}

@media (min-width: 961px) {
  .index-view__list {
    padding-right: calc(var(--index-preview-reserve) + var(--header-x));
  }
}

.index-view__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--index-service-col);
  align-items: start;
  gap: var(--index-column-gap);
  margin: 0 0 0.7rem;
  padding: 0 0 0.3rem var(--index-row-number-space);
  border-bottom: 1px solid var(--line);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  opacity: 0.58;
}

.index-view__columns::before {
  content: none;
  display: none;
}

.index-view__columns-cell {
  display: block;
}

.index-view__columns-cell--project {
  grid-column: 1;
}

.index-view__columns-cell--category {
  grid-column: 2;
  justify-self: start;
  text-align: left;
  padding-left: 0;
}

.index-view__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--index-service-col);
  align-items: start;
  gap: var(--index-column-gap);
  width: 100%;
  margin: 0;
  padding: 0.45rem 0 0.45rem var(--index-row-number-space);
  border: 0;
  background: transparent;
  box-shadow: none;
  color: inherit;
  font: inherit;
  text-align: left;
  text-decoration: none;
  appearance: none;
  -webkit-appearance: none;
  overflow: visible;
  cursor: pointer;
  counter-increment: index-row;
  transition: none;
}

.index-view__row::before {
  content: counter(index-row, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: var(--index-row-number-width);
  min-width: var(--index-row-number-width);
  text-align: right;
  opacity: var(--interactive-opacity-tertiary);
  font-size: var(--font-size-micro);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.2;
  transition: var(--interactive-transition);
}

.index-view__row:hover,
.index-view__row:focus-visible {
  z-index: 9;
}

.index-view__title {
  display: block;
  min-width: 0;
  grid-column: 1;
}

.index-view__title-primary {
  display: block;
  opacity: 0.88;
  font-size: clamp(0.5625rem, calc(0.52rem + 0.28vw), var(--font-size-xs));
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.index-view__category {
  display: block;
  min-width: 0;
  grid-column: 2;
  justify-self: start;
  align-self: start;
  width: 100%;
  max-width: 100%;
  text-align: left;
  padding-left: 0;
  opacity: 0.58;
  font-size: clamp(0.5625rem, calc(0.52rem + 0.28vw), var(--font-size-xs));
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.35;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.index-view__media-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: 50%;
  left: var(--index-preview-zone-left, auto);
  width: var(--index-preview-zone-width, var(--index-preview-width));
  height: auto;
  z-index: 25;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-50%);
  mix-blend-mode: normal;
  isolation: isolate;
  overflow: visible;
  transition: none;
}

@media (pointer: fine) and (hover: hover) {
  .index-view__row:hover .index-view__media-slot,
  .index-view__row:focus-visible .index-view__media-slot {
    opacity: 1;
    visibility: visible;
  }
}

.index-view__media-frame {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  max-width: min(var(--index-preview-width), 100%);
  margin: 0 auto;
  aspect-ratio: var(--index-preview-aspect);
  overflow: hidden;
  background: transparent;
}

.index-view__media {
  display: block;
  width: 100%;
  height: auto;
  max-width: min(var(--index-preview-width), 100%);
  aspect-ratio: var(--index-preview-aspect);
  object-fit: cover;
  object-position: center;
  mix-blend-mode: normal;
  transition: none;
  background: transparent;
}

.index-view__media-frame .index-view__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  object-fit: cover;
  object-position: center;
}

.index-view__media--thumb {
  z-index: 0;
  opacity: 0;
}

.index-view__media--thumb.is-loaded {
  opacity: 1;
}

.index-view__media--full {
  z-index: 1;
  opacity: 0;
  transition: opacity 0.28s ease;
}

.index-view__media-frame.is-ready .index-view__media--full.is-loaded {
  opacity: 1;
}

/* Keep thumb under the fading full layer — no snap-hide gap. */
.index-view__media-frame.is-ready .index-view__media--thumb.is-loaded {
  opacity: 1;
}

.index-view__media.is-error,
.index-view__media:not([src]):not([data-src]) {
  opacity: 0 !important;
  visibility: hidden !important;
}


@media (max-width: 960px) {
  .index-view__list {
    width: 100%;
    margin: 0;
    max-width: none;
    padding-top: calc(var(--header-y) + 2.35rem);
    padding-left: var(--header-x);
    padding-right: var(--header-x);
    padding-bottom: 2rem;
    counter-reset: none;
  }

  .index-view__columns {
    display: none;
  }

  .index-view__row {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-items: start;
    row-gap: 0.15rem;
    height: auto;
    margin-bottom: 1.1rem;
    padding: 0 0 0.15rem;
    overflow: visible;
    counter-increment: none;
  }

  .index-view__row::before {
    content: none;
    display: none;
  }

  .index-view__row:hover,
  .index-view__row:focus-visible {
    z-index: auto;
  }

  .index-view__title {
    display: block;
    width: auto;
    grid-column: 1;
    grid-row: 1;
  }

  .index-view__title-primary {
    opacity: 0.88;
    font-size: clamp(0.5625rem, calc(0.52rem + 0.28vw), var(--font-size-xs));
    font-weight: 700;
    letter-spacing: 0.08em;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .index-view__category {
    display: block;
    width: 100%;
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
    margin-top: 0;
    max-width: 100%;
    text-align: left;
    padding-left: 0;
    opacity: 0.58;
    font-size: clamp(0.5625rem, calc(0.52rem + 0.28vw), var(--font-size-xs));
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  .index-view__media-slot {
    display: block;
    position: static;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    grid-column: 1;
    grid-row: 3;
    z-index: auto;
    margin-top: 0.4em;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    overflow: hidden;
  }

  .index-view__media-frame {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
  }

  .index-view__media-frame .index-view__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    aspect-ratio: unset;
    margin: 0;
    object-fit: cover;
    object-position: center;
  }
}

.hero-area {
  position: relative;
  display: block;
  width: min(74vw, 620px);
  aspect-ratio: 4 / 5;
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--bg);
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  touch-action: none;
  contain: layout paint;
  transition: opacity 0.34s cubic-bezier(0.22, 1, 0.36, 1), filter 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1);
}

body.route-home .hero-area {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  background: #000;
}

body.is-transitioning-home-to-project .home-view,
.home-view.home-view--transition-out {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(-8px) scale(1.015);
  pointer-events: none;
}

body.is-transitioning-home-to-project .home-view::after,
.home-view.home-view--transition-out::after {
  opacity: 1;
}

body.is-transitioning-home-to-project .hero-area,
.hero-area.hero-area--transition-out {
  opacity: 0.14;
  filter: blur(18px) saturate(0.72) contrast(0.94);
  transform: translateY(-4px) scale(1.03);
}

body.is-transitioning-home-to-project .ambient-cinema {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
  opacity: 0 !important;
}

.hero-area__layer {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  pointer-events: none;
  will-change: opacity;
  transition: none;
}

/* Full-res still fades in over the preview background — never swap one URL. */
.hero-area__layer-full {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.hero-area__layer-full.is-visible {
  opacity: 1;
}

.hero-area__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 2;
}

.hero-area__video.is-ready {
  visibility: visible;
}

.hero-area__layer--base {
  opacity: 1;
}

.hero-area__layer--blend {
  opacity: var(--blend-opacity, 0);
}

.hero-area__layer--mask {
  opacity: 0;
}

.hero-area__morph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  opacity: 0;
  pointer-events: none;
  display: block;
  background: transparent;
}

.hero-area__morph.is-active {
  opacity: 1;
}

.project-view {
  position: relative;
  z-index: 2;
  display: none;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 100vh;
  padding: 0;
  background: transparent;
  overflow-x: clip;
  grid-template-columns:
    [full-start] minmax(0, 1fr)
    [content-end] minmax(0, 1fr)
    [full-end];
  opacity: 1;
  transform: none;
  filter: none;
  transition: opacity 0.42s cubic-bezier(0.22, 1, 0.36, 1), transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-view.is-active {
  display: grid;
}

.project-view.project-view--entering {
  opacity: 0;
  transform: translateY(18px) scale(1.008);
  filter: blur(14px);
}

body.route-home .project-view,
body.route-index .project-view,
body.route-about .project-view {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

body.route-home .index-view,
body.route-project .index-view,
body.route-about .index-view,
body.route-home .about-panel,
body.route-index .about-panel,
body.route-project .about-panel {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

.project-view__media {
  grid-column: full-start / full-end;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--project-gap);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0 0 var(--project-end-space, 0px);
  line-height: 0;
  font-size: 0;
  background: transparent;
  overflow-x: clip;
}

.project-view__item {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  border: 0;
  vertical-align: top;
  background: transparent;
}

.project-view__item:not(.project-view__item--hero) {
  content-visibility: auto;
  contain: layout paint style;
  contain-intrinsic-size: auto var(--media-intrinsic-size, 720px);
}

.project-view__item--image {
  position: relative;
  display: grid;
}

.project-view__image-layer {
  grid-area: 1 / 1;
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: top;
}

.project-view__image-layer {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0s linear 0.28s;
}

.project-view__image-layer.is-loaded {
  visibility: visible;
  transition: opacity 0.28s ease, visibility 0s;
}

.project-view__image-layer--thumb {
  z-index: 0;
}

.project-view__image-layer--full {
  z-index: 1;
}

.project-view__image-layer--thumb.is-loaded {
  opacity: 1;
}

/* Full stays invisible until the frame is marked ready, then fades over thumb. */
.project-view__image-layer--full.is-loaded {
  opacity: 0;
}

.project-view__item--image.is-ready .project-view__image-layer--full.is-loaded {
  opacity: 1;
}

/* Keep the low-res layer painted underneath for the whole fade — never blank
   the frame by hiding thumb before full is opaque. */
.project-view__item--image.is-ready .project-view__image-layer--thumb.is-loaded {
  opacity: 1;
  visibility: visible;
}

.project-view__image-layer.is-error,
.project-view__image-layer:not([src]):not([data-src]) {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Empty-frame loading mark: thin black spinner while reserved space has no
   visible thumb/full yet. No gray fill — transparent frame stays blank aside
   from this centered symbol. Scoped to project pages only. */
@keyframes project-media-spin {
  to {
    transform: rotate(360deg);
  }
}

body.route-project .project-view__image-frame::after,
body.route-project .project-view__item--video::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  box-sizing: border-box;
  border: 1px solid rgba(0, 0, 0, 0.18);
  border-top-color: #000;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.2s ease;
  animation: project-media-spin 0.7s linear infinite;
}

body.route-project .project-view__item.is-ready .project-view__image-frame::after,
body.route-project .project-view__image-frame:has(.is-loaded)::after,
body.route-project .project-view__image-frame:not(:has(.project-view__image-layer:not(.is-error)))::after,
body.route-project .project-view__item--video.is-ready::after,
body.route-project .project-view__item--video:has(.project-view__video-poster.is-loaded)::after,
body.route-project .project-view__item--video:has(.project-view__video-poster.is-error)::after {
  opacity: 0;
  animation: none;
}

/* torstudio-style arrangement: media stacks in one column with a uniform gap
   between consecutive items (independent of portrait/landscape ratios). */
.project-view__media {
  --project-content-pad: 0px;
  --project-gap: clamp(1.5rem, 4vw, 3rem);
  --project-end-space: clamp(5rem, 16vh, 12rem);
  --project-media-scale: 0.95;
}

.project-view__item--image .project-view__image-frame {
  position: relative;
  display: block;
  margin: 0 auto;
  overflow: hidden;
  background: transparent;
}

/* Thin circular loader while no image/poster layer is visible yet.
   Transparent frame — no gray fill. Hides as soon as any layer is .is-loaded.
   Only shows once a layer has an active src (skips lazy items still off-screen). */
@keyframes media-frame-spin {
  to {
    transform: rotate(360deg);
  }
}

.project-view__image-frame:not(:has(.project-view__image-layer.is-loaded)):has(
    .project-view__image-layer[src]:not(.is-error)
  )::after,
.project-view__item--image:not(:has(.project-view__image-frame)):not(
    :has(.project-view__image-layer.is-loaded)
  ):has(.project-view__image-layer[src]:not(.is-error))::after,
.project-view__item--video:not(.is-ready):not(
    :has(.project-view__video-poster.is-loaded)
  ):has(.project-view__video-poster[src]:not(.is-error), .project-view__video-media[src])::after,
.index-view__media-frame:not(:has(.index-view__media.is-loaded)):has(
    .index-view__media[src]:not(.is-error)
  )::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1.1rem;
  height: 1.1rem;
  margin: -0.55rem 0 0 -0.55rem;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-top-color: var(--fg);
  border-right-color: var(--fg);
  border-radius: 50%;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
  animation: media-frame-spin 0.75s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .project-view__image-frame:not(:has(.project-view__image-layer.is-loaded)):has(
      .project-view__image-layer[src]:not(.is-error)
    )::after,
  .project-view__item--image:not(:has(.project-view__image-frame)):not(
      :has(.project-view__image-layer.is-loaded)
    ):has(.project-view__image-layer[src]:not(.is-error))::after,
  .project-view__item--video:not(.is-ready):not(
      :has(.project-view__video-poster.is-loaded)
    ):has(.project-view__video-poster[src]:not(.is-error), .project-view__video-media[src])::after,
  .index-view__media-frame:not(:has(.index-view__media.is-loaded)):has(
      .index-view__media[src]:not(.is-error)
    )::after {
    animation: none;
    opacity: 0.28;
    border-color: var(--fg);
    border-top-color: transparent;
  }
}

.project-view__item--image .project-view__image-frame .project-view__image-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

/* Layers outside a metadata frame (fallback only) keep intrinsic sizing. */
.project-view__item--image .project-view__image-layer {
  width: auto;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}

.project-view__item--image .project-view__image-frame .project-view__image-layer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  justify-self: stretch;
}

.project-view__item--hero {
  width: 100%;
  min-height: 0;
  padding: 0 var(--project-content-pad);
  box-sizing: border-box;
  display: grid;
  place-items: center;
  overflow: visible;
}

/* Single-item projects (hero only): center the lone item in the viewport. */
body.route-project .project-view__media {
  padding-top: var(--site-header-clearance);
}

body.route-project .project-view__media--single {
  min-height: calc(100svh - var(--site-header-clearance));
  justify-content: center;
}

.project-view__item--hero.project-view__item--portrait {
  /* Viewport-based width — width:auto + child calc(100% * …) collapses to 0
     when layers are absolutely positioned inside the frame. */
  width: min(
    calc(100% * var(--project-media-scale)),
    calc(100vw - var(--project-content-pad) * 2),
    calc(100svh * var(--project-media-scale) * var(--frame-ar, 0.5625))
  );
  max-width: min(100%, calc(100vw - var(--project-content-pad) * 2));
  justify-self: center;
}

.project-view__item--hero.project-view__item--image,
.project-view__item--hero.project-view__item--video {
  display: grid;
  place-items: center;
}

.project-view__item--hero .project-view__image-frame {
  width: min(
    calc(100% * var(--project-media-scale)),
    calc(100svh * var(--project-media-scale) * var(--frame-ar, 1.777777))
  );
  height: auto;
  max-width: calc(100% * var(--project-media-scale));
  max-height: calc(100svh * var(--project-media-scale));
}

/* A low-resolution landscape hero would otherwise render at its small intrinsic
   size (smaller than every following image). When flagged for normalization it
   upscales to the same width footprint as the detail items — the width is capped
   by the aspect ratio so height never exceeds the viewport and nothing stretches. */
.project-view__item--image.project-view__item--hero.project-view__item--normalize-fit
  .project-view__image-frame {
  width: min(
    calc(100% * var(--project-media-scale)),
    calc(100svh * var(--project-media-scale) * var(--frame-ar, 1.6))
  );
  height: auto;
  max-width: calc(100% * var(--project-media-scale));
  max-height: calc(100svh * var(--project-media-scale));
}

/* Hero video wrapper keeps the full-width stage; inner media scales inside. */
.project-view__item--hero.project-view__item--video {
  width: min(100%, calc(100% * var(--project-media-scale)));
  height: auto;
  max-width: min(100%, calc(100% * var(--project-media-scale)));
  max-height: calc(100svh * var(--project-media-scale));
}

.project-view__item--hero.project-view__item--video .project-view__video-media,
.project-view__item--hero.project-view__item--video .project-view__video-poster {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.project-view__item--hero.project-view__item--portrait .project-view__image-frame {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh * var(--project-media-scale));
}

.project-view__item--hero.project-view__item--portrait.project-view__item--video {
  width: min(100%, calc(100% * var(--project-media-scale)));
  height: auto;
}

.project-view__item--hero.project-view__item--portrait.project-view__item--video .project-view__video-media,
.project-view__item--hero.project-view__item--portrait.project-view__item--video .project-view__video-poster {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Each following item is scaled to fit the viewport: as large as possible while
   staying fully visible (never taller than the screen, never wider than the
   column), keeping its aspect ratio. Box height hugs the media so inter-item
   gaps stay uniform. */
.project-view__item:not(.project-view__item--hero) {
  width: 100%;
  min-height: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 0 var(--project-content-pad);
  box-sizing: border-box;
  display: grid;
  place-items: center;
}

.project-view__item--image:not(.project-view__item--hero) {
  display: grid;
  place-items: center;
}

/* If an image is much smaller than the project's common size but shares the
   same aspect ratio, upscale it to follow the dominant visual frame. */
.project-view__item--image.project-view__item--normalize-fit:not(.project-view__item--hero)
  .project-view__image-frame {
  width: calc(100% * var(--project-media-scale));
  height: auto;
  max-width: calc(100% * var(--project-media-scale));
}

/* Sizing frame for non-hero images: the box dimensions come purely from the
   aspect ratio + viewport caps, so the thumb and full image always fill the
   exact same space. No layout jump when the full image finishes loading. */
.project-view__item--image:not(.project-view__item--hero) .project-view__image-frame {
  width: min(
    calc(100% * var(--project-media-scale)),
    calc(100svh * var(--project-media-scale) * var(--frame-ar, 1))
  );
  height: auto;
  max-width: calc(100% * var(--project-media-scale));
}

.project-view__item--video.project-view__item--normalize-fit:not(.project-view__item--hero) {
  width: min(calc(100% * var(--project-media-scale)), min(100%, calc(100vw - var(--project-content-pad) * 2)));
  margin-left: auto;
  margin-right: auto;
}

.project-view__item--video.project-view__item--normalize-fit:not(.project-view__item--hero) .project-view__video-media,
.project-view__item--video.project-view__item--normalize-fit:not(.project-view__item--hero) .project-view__video-poster {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.project-view__item--video:not(.project-view__item--hero) {
  display: grid;
  place-items: stretch;
  align-content: center;
  justify-content: center;
  width: min(
    calc(100% * var(--project-media-scale)),
    min(100%, calc(100vw - var(--project-content-pad) * 2))
  );
  height: auto;
  max-width: min(
    calc(100% * var(--project-media-scale)),
    min(100%, calc(100vw - var(--project-content-pad) * 2))
  );
  max-height: calc(100svh * var(--project-media-scale));
  margin-left: auto;
  margin-right: auto;
  /* Keep posters visible while src lazy-loads; paint containment hides them. */
  content-visibility: visible;
  contain: none;
}

.project-view__item--video:not(.project-view__item--hero) .project-view__video-media,
.project-view__item--video:not(.project-view__item--hero) .project-view__video-poster {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.project-view__item--portrait:not(.project-view__item--hero) {
  /* Same viewport-based width as portrait videos — width:auto collapses when
     image layers are absolutely positioned inside the metadata frame. */
  width: min(
    calc(100% * var(--project-media-scale)),
    calc(100svh * var(--project-media-scale) * var(--frame-ar, 0.5625)),
    calc(100vw - var(--project-content-pad) * 2)
  );
  max-width: min(calc(100% * var(--project-media-scale)), calc(100vw - var(--project-content-pad) * 2));
  height: auto;
  max-height: calc(100svh * var(--project-media-scale));
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
}

.project-view__item--portrait:not(.project-view__item--hero).project-view__item--image {
  display: grid;
  place-items: center;
}

.project-view__item--portrait:not(.project-view__item--hero) .project-view__image-frame {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh * var(--project-media-scale));
  margin-left: auto;
  margin-right: auto;
}

.project-view__item--portrait:not(.project-view__item--hero).project-view__item--video {
  width: min(
    calc(100% * var(--project-media-scale)),
    calc(100svh * var(--project-media-scale) * var(--frame-ar, 0.5625)),
    calc(100vw - var(--project-content-pad) * 2)
  );
  max-width: min(calc(100% * var(--project-media-scale)), calc(100vw - var(--project-content-pad) * 2));
  height: auto;
  max-height: calc(100svh * var(--project-media-scale));
}

.project-view__item--portrait:not(.project-view__item--hero).project-view__item--video .project-view__video-media,
.project-view__item--portrait:not(.project-view__item--hero).project-view__item--video .project-view__video-poster {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

.project-view__item--portrait-916:not(.project-view__item--hero) {
  width: min(
    calc(100% * var(--project-media-scale)),
    calc(100svh * var(--project-media-scale) * var(--frame-ar, 0.5625))
  );
  max-width: calc(100% * var(--project-media-scale));
  margin-left: auto;
  margin-right: auto;
  height: auto;
  max-height: calc(100svh * var(--project-media-scale));
}

.project-view__item--portrait-916:not(.project-view__item--hero).project-view__item--image {
  display: grid;
  place-items: center;
}

.project-view__item--portrait-916:not(.project-view__item--hero) .project-view__image-frame {
  width: 100%;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh * var(--project-media-scale));
  margin-left: auto;
  margin-right: auto;
}

.project-view__item--portrait-916:not(.project-view__item--hero).project-view__item--video {
  width: min(
    calc(100% * var(--project-media-scale)),
    calc(100svh * var(--project-media-scale) * var(--frame-ar, 0.5625))
  );
  max-width: calc(100% * var(--project-media-scale));
  height: auto;
  max-height: calc(100svh * var(--project-media-scale));
}

.project-view__item--portrait-916:not(.project-view__item--hero).project-view__item--video .project-view__video-media,
.project-view__item--portrait-916:not(.project-view__item--hero).project-view__item--video .project-view__video-poster {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  object-fit: contain;
  object-position: center;
}

/* All non-hero IMAGE items size via the inner frame. Wrapper stays full-width
   so the frame's 100% width reference is the viewport, but height hugs the
   frame — no per-ratio empty space above/below the media. */
.project-view__item--image:not(.project-view__item--hero) {
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  display: grid;
  place-items: center;
}

.project-view__item--image.project-view__item--hero {
  aspect-ratio: auto;
}

.project-title-rail {
  position: fixed;
  left: var(--header-x);
  bottom: clamp(1rem, 3.2vw, 1.35rem);
  z-index: 46;
  max-width: calc(100vw - var(--header-x) * 2 - 4.5rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-title-rail__text {
  display: inline-block;
  max-width: 100%;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: left;
  pointer-events: auto;
}

body.route-project .project-title-rail.is-visible {
  opacity: 1;
}

body:not(.route-project) .project-title-rail {
  opacity: 0 !important;
}

.project-service-rail {
  position: fixed;
  right: var(--header-x);
  bottom: clamp(1rem, 3.2vw, 1.35rem);
  z-index: 46;
  max-width: calc(100vw - var(--header-x) * 2 - 4.5rem);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.project-service-rail__text {
  display: inline-block;
  max-width: 100%;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.35;
  text-align: right;
  pointer-events: auto;
}

body.route-project .project-service-rail.is-visible {
  opacity: 1;
}

body:not(.route-project) .project-service-rail {
  opacity: 0 !important;
}

.project-view--centered .project-view__item {
  justify-self: center;
}

@media (max-width: 960px) {
  .project-view__media {
    --project-content-pad: 0px;
    --project-gap: clamp(1.25rem, 3.5vw, 2.25rem);
    --project-end-space: clamp(3.5rem, 12vh, 7rem);
    --project-media-scale: 0.95;
  }

  body.route-project {
    overflow-x: clip;
  }

  .project-view__item--hero {
    overflow: clip;
  }

  .project-view__item--image .project-view__image-layer,
  .project-view__item--video {
    max-width: min(100%, calc(100% * var(--project-media-scale)));
  }
}

.project-view__item--video {
  position: relative;
  display: block;
  background-color: var(--bg);
  vertical-align: top;
}

.project-view__video-poster,
.project-view__video-media {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
}

.project-view__video-poster {
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

.project-view__video-poster.is-loaded {
  opacity: 1;
  visibility: visible;
}

.project-view__video-poster.is-error,
.project-view__video-poster:not([src]):not([data-src]) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.project-view__video-media {
  background: none;
  object-fit: contain;
  object-position: center;
  vertical-align: top;
}

.project-view__item--with-poster:not(.is-ready) .project-view__video-media {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.project-view__item--video.is-ready .project-view__video-poster {
  display: none;
}

/* Homepage / project / index managed videos: never show native play/controls
   overlays (Safari/WebKit). Apply without body.route-home so controls stay
   hidden during gate/route boot. */
.hero-area__video::-webkit-media-controls,
.hero-area__video::-webkit-media-controls-enclosure,
.hero-area__video::-webkit-media-controls-panel,
.hero-area__video::-webkit-media-controls-overlay-enclosure,
.hero-area__video::-webkit-media-controls-start-playback-button,
.hero-area__video::-webkit-media-controls-overlay-play-button,
.hero-area__video::-webkit-media-controls-play-button,
.project-view__video-media::-webkit-media-controls,
.project-view__video-media::-webkit-media-controls-enclosure,
.project-view__video-media::-webkit-media-controls-panel,
.project-view__video-media::-webkit-media-controls-start-playback-button,
.project-view__video-media::-webkit-media-controls-overlay-play-button,
.project-view__video-media::-webkit-media-controls-play-button,
.index-view__media--video::-webkit-media-controls,
.index-view__media--video::-webkit-media-controls-start-playback-button,
.index-view__media--video::-webkit-media-controls-overlay-play-button,
video[data-autoplay-managed="true"]::-webkit-media-controls,
video[data-autoplay-managed="true"]::-webkit-media-controls-start-playback-button,
video[data-autoplay-managed="true"]::-webkit-media-controls-overlay-play-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  max-width: 0 !important;
  max-height: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  overflow: hidden !important;
}

.project-view__editorial,
.project-view__title,
.project-view__meta,
.project-view__description {
  display: none !important;
}

.about-panel {
  position: relative;
  z-index: 2;
  display: none;
  min-height: 100vh;
  padding: 0;
  background: transparent;
  color: var(--fg);
  overflow: visible;
}

.about-panel.is-active {
  display: block;
}

.about-panel__inner {
  position: relative;
  max-width: 56rem;
  margin: 0;
  padding: calc(var(--site-header-clearance) + clamp(1.6rem, 3.6vw, 2.8rem)) var(--header-x) 3.5rem;
}

.about-panel__title,
.about-panel__body,
.about-panel__label,
.about-panel__practice,
.about-panel__content,
.about-panel__credits,
.about-panel__inner a {
  color: inherit;
}

.about-panel__columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.about-panel__content {
  min-width: 0;
}

.about-panel__title {
  margin: 0 0 2rem;
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.58;
}

.about-panel__body {
  margin: 0 0 1.4rem;
  font-size: var(--font-size-sm);
  line-height: 1.75;
  opacity: 0.88;
}

.about-panel__label {
  margin: 2.5rem 0 1rem;
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.58;
}

.about-panel__practice {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  line-height: 1.9;
  opacity: 0.76;
}

.about-panel__credits {
  margin: 0;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  line-height: 1.9;
  opacity: 0.76;
}

.about-panel__credit {
  margin: 0 0 1.4rem;
}

.about-panel__credit:last-child {
  margin-bottom: 0;
}

.about-panel__credit-name {
  margin: 0 0 0.2rem;
  font-weight: 700;
}

.about-panel__credit-link {
  display: block;
  text-decoration: none;
  opacity: var(--interactive-opacity);
}

.image-counter {
  position: fixed;
  right: var(--header-x);
  bottom: clamp(1rem, 3.2vw, 1.35rem);
  z-index: 12;
  font-size: var(--font-size-xs);
  letter-spacing: 0.08em;
  opacity: 0.58;
  pointer-events: none;
}

.home-arrow-nav {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  /* The container itself ignores taps so the open area in the middle falls
     through to the hero (tapping it opens the current project). Only the
     narrow edge strips below capture taps for prev/next navigation. */
  pointer-events: none;
}

.home-arrow-nav[hidden] {
  display: none !important;
}

.home-arrow-nav__btn {
  pointer-events: auto;
  flex: 0 0 auto;
  width: clamp(54px, 16vw, 104px);
  height: 100%;
  border: 0;
  background: transparent;
  padding: 0 1.1rem;
  font: inherit;
  cursor: pointer;
  opacity: var(--interactive-opacity);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.home-arrow-nav__icon {
  display: block;
  width: clamp(1.35rem, 8vmin, 2.6rem);
  height: clamp(1.35rem, 8vmin, 2.6rem);
  flex-shrink: 0;
}

.home-arrow-nav__btn--prev {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.home-arrow-nav__btn--next {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.home-arrow-nav__btn[aria-disabled="true"] {
  opacity: var(--interactive-opacity-tertiary);
  cursor: default;
}

body.route-project .home-arrow-nav,
body.route-index .home-arrow-nav,
body.route-about .home-arrow-nav {
  display: none !important;
}

.cursor-point {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--cursor-size);
  height: var(--cursor-size);
  margin-left: calc(var(--cursor-size) * -0.5);
  margin-top: calc(var(--cursor-size) * -0.5);
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  transition: opacity 0.16s ease;
  will-change: transform, opacity;
}

.cursor-point.is-visible {
  opacity: 1;
}

.cursor-point__inner {
  display: block;
  width: var(--cursor-size);
  height: var(--cursor-size);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.cursor-point__dot {
  display: block;
  width: var(--cursor-size);
  height: var(--cursor-size);
  border-radius: 999px;
  background: var(--text-invert-color);
  box-shadow: 0 0 0 var(--cursor-ring) var(--line);
  mix-blend-mode: var(--text-invert-blend);
}

.cursor-point.is-visible .cursor-point__dot {
  animation: cursor-point-pulse 1600ms ease-in-out infinite;
}

.home-cursor-title {
  position: fixed;
  left: var(--header-x);
  bottom: clamp(1rem, 3.2vw, 1.35rem);
  z-index: 12;
  pointer-events: none;
  max-width: calc(100vw - var(--header-x) * 2 - 4.5rem);
  font-size: var(--font-size-xs);
  line-height: 1.35;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.home-cursor-title__display {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}

.home-cursor-title.is-visible {
  opacity: 0.58;
}

/*
 * Homepage: FULL OPACITY solid white text.
 * Placed after all muted chrome opacity / --fg / blend rules so it wins.
 * Non-home black rules above are scoped to route-project/index/about only.
 */
body.route-home {
  --fg: #ffffff;
  color: #ffffff;
}

body.route-home .site-header,
body.route-home .site-header__brand,
body.route-home .site-header__nav,
body.route-home .site-header__link,
body.route-home .site-header__brand:hover,
body.route-home .site-header__brand:focus-visible,
body.route-home .site-header__brand:active,
body.route-home .site-header__brand:visited,
body.route-home .site-header__link:hover,
body.route-home .site-header__link:focus-visible,
body.route-home .site-header__link:active,
body.route-home .site-header__link:visited,
body.route-home .site-header__link[aria-expanded="true"],
body.route-home .image-counter,
body.route-home .home-arrow-nav,
body.route-home .home-arrow-nav__btn,
body.route-home .home-arrow-nav__btn:hover,
body.route-home .home-arrow-nav__btn:focus-visible,
body.route-home .home-arrow-nav__btn:active,
body.route-home .home-arrow-nav__btn[aria-disabled="true"],
body.route-home .home-arrow-nav__icon,
body.route-home .home-cursor-title,
body.route-home .home-cursor-title.is-visible,
body.route-home .home-cursor-title__display {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  mix-blend-mode: normal !important;
  opacity: 1 !important;
}

body.route-home .home-arrow-nav__icon,
body.route-home .home-arrow-nav__icon path {
  stroke: #ffffff !important;
  fill: none !important;
  color: #ffffff !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

.project-back-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 44;
  pointer-events: none;
  transform: translate3d(-999px, -999px, 0);
  margin-left: 8px;
  margin-top: -8px;
  font-size: var(--font-size-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.16s ease;
}

.project-back-cursor.is-visible {
  opacity: 0.96;
}

body:not(.route-project) .project-back-cursor {
  opacity: 0 !important;
}

/* Hide the native cursor in project view so only the BACK label is shown. */
body.route-project,
body.route-project * {
  cursor: none !important;
}

body.is-over-text,
body.is-over-text * {
  cursor: auto !important;
}

body.is-selecting-text,
body.is-selecting-text *,
body.route-project.is-selecting-text,
body.route-project.is-selecting-text *,
body.route-index.is-selecting-text,
body.route-index.is-selecting-text *,
body.route-about.is-selecting-text,
body.route-about.is-selecting-text * {
  cursor: text !important;
}

body.route-project .image-counter,
body.route-index .image-counter,
body.route-about .image-counter {
  display: none;
}

body.route-index .project-back-cursor,
body.route-about .project-back-cursor {
  display: none !important;
}

body.route-project .site-header,
body.route-project .project-view__editorial,
body.route-project .project-back-cursor {
  transition: opacity 0.5s ease;
}

@media (max-width: 960px) {
  :root {
    --project-grid-gutter: clamp(0.65rem, 3.5vw, 1rem);
    --project-grid-content-max: 100%;
    --project-grid-editorial-columns: 4;
    --project-grid-editorial-max: none;
    --project-grid-editorial-gap: 0.65rem;
  }

  .ambient-cinema .ambient-cinema__layer {
    -webkit-mask-image: radial-gradient(ellipse 68% 44% at 50% 52%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.72) 56%, rgba(0, 0, 0, 0) 100%);
    mask-image: radial-gradient(ellipse 68% 44% at 50% 52%, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.72) 56%, rgba(0, 0, 0, 0) 100%);
  }

  body.route-home .hero-area {
    width: 100%;
    height: 100%;
  }

  .entry-gate__surface {
    gap: clamp(1.25rem, 5vw, 1.75rem);
    padding: clamp(1.25rem, 5vw, 2rem);
  }

  /* About: single-screen on mobile — no page scroll; content below header. */
  body.route-about {
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
  }

  body.route-about .about-panel {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    overflow: hidden;
  }

  .about-panel__inner {
    box-sizing: border-box;
    height: 100%;
    padding-top: var(--site-header-clearance);
    padding-bottom: 1.25rem;
    padding-left: var(--header-x);
    padding-right: var(--header-x);
    overflow: hidden;
  }

  .about-panel__columns {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .home-cursor-title {
    max-width: calc(100vw - var(--header-x) * 2 - 3.75rem);
  }

  .project-title-rail {
    max-width: calc(100vw - var(--header-x) * 2 - 3.75rem);
  }

  .project-service-rail {
    max-width: calc(100vw - var(--header-x) * 2 - 3.75rem);
  }

  .project-view__meta,
  .project-view__description {
    grid-column: 1 / -1;
  }
}

@media (min-width: 961px) and (max-width: 1140px) {
  :root {
    --project-grid-gutter: clamp(0.75rem, 1.6vw, 1.4rem);
    --project-grid-content-max: 66rem;
    --project-grid-editorial-max: 40rem;
  }

  .project-view__meta,
  .project-view__description {
    grid-column: 1 / span 10;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.entry-gate-open,
  body.entry-gate-open * {
    cursor: auto !important;
  }

  body.entry-gate-open .entry-gate__surface {
    cursor: wait !important;
  }

  .entry-gate {
    transition: none !important;
  }

  .home-view,
  .hero-area,
  .hero-area__layer-full,
  .project-view,
  .project-view__item--image,
  .project-view__image-layer--thumb,
  .project-view__image-layer--full,
  .index-view__media--full,
  .index-view__media--thumb,
  .ambient-cinema,
  .ambient-cinema__layer,
  .ambient-cinema__fog,
  #app,
  .cursor-point {
    transition: none !important;
    animation: none !important;
  }
  .hero-area__morph {
    display: none !important;
  }
  .cursor-point {
    display: none;
  }
  .project-back-cursor {
    display: none;
  }
}

@media (pointer: coarse), (hover: none) {
  body.route-home {
    overflow: hidden;
  }

  body.route-home .home-view {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .home-view__scroll-spacer {
    display: none !important;
    height: 0 !important;
  }

  body.route-home .hero-area {
    touch-action: manipulation;
  }

  .cursor-point {
    display: none;
  }
  .project-back-cursor {
    display: none;
  }
}

@media (max-width: 960px) {
  body.route-home {
    overflow: hidden;
  }

  body.route-home .home-view {
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }

  .home-view__scroll-spacer {
    display: none !important;
    height: 0 !important;
  }
}

@keyframes cursor-point-pulse {
  0% {
    opacity: 0.42;
  }
  50% {
    opacity: 0.88;
  }
  100% {
    opacity: 0.42;
  }
}