:root {
  --black: #000;
  --mobile-nav-height: 46px;
  --mobile-nav-bottom: max(24px, calc(env(safe-area-inset-bottom) + 24px));
  --site-logo-inset: 12px;
  --site-logo-width: clamp(88px, 7.2vw, 118px);
  --project-header-height: 52px;
  --project-header-feather: 40px;
  --project-header-blur: 20px;
  --project-header-fade: 340ms cubic-bezier(.22,.61,.36,1);
  --navigation-blur: 14px;
  --ink: #f4f4f4;
  --muted: rgba(244, 244, 244, 0.46);
  --faint: rgba(244, 244, 244, 0.16);
  --frame: rgba(255, 255, 255, 0.48);
  --panel: rgba(10, 10, 10, 0.72);
  --cell: rgba(245, 245, 245, 0.06);
  --cell-border: rgba(255, 255, 255, 0.22);
  --soft-white-glow:
    0 0 8px rgba(255, 255, 255, 0.48),
    0 0 18px rgba(255, 255, 255, 0.22);
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--black);
  color: var(--ink);
}

body {
  overflow: hidden;
  letter-spacing: 0;
}

/* Keep native media save callouts/dragging off, including linked media. */
img,
video,
audio,
canvas,
picture,
[data-media-protected] {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

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

button {
  border: 0;
  border-radius: 0;
  font: inherit;
  letter-spacing: 0;
}

button:focus-visible,
a:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.72);
  outline-offset: -3px;
}

.site-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  background: #020202;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.site-shell::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
}

.site-shell::before {
  z-index: 12;
  background: radial-gradient(ellipse 94% 86% at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.5) 100%);
}

.site-shell.is-project-open .site-footer {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

.site-shell.is-project-open .site-header {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.site-header {
  position: absolute;
  z-index: 70;
  top: var(--site-logo-inset);
  left: var(--site-logo-inset);
  transition: opacity 180ms ease;
}

.logo-link {
  display: block;
  width: var(--site-logo-width);
  opacity: 0.92;
}

.logo-link,
.project-page__logo {
  transition:
    opacity 180ms ease,
    filter 180ms ease;
}

.logo-link:hover,
.project-page__logo:hover {
  opacity: 1;
  filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.34));
}

.logo-link img {
  display: block;
  width: 100%;
  height: auto;
}

.panel {
  position: absolute;
  inset: 0;
  visibility: hidden;
  background: #020202;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition:
    opacity 420ms ease,
    transform 420ms ease,
    visibility 0s linear 420ms;
}

/* Unvisited pages stay out of the first paint, including the Cosmos template. */
.panel[hidden] {
  display: none;
}

.panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    opacity 420ms ease,
    transform 420ms ease,
    visibility 0s;
}

/* Project entry is a quiet crossfade, with no camera zoom or vertical slide. */
.panel--explore,
.panel--project,
.panel--relics {
  transform: none;
  transition: opacity 560ms ease-in-out, visibility 0s linear 560ms;
}
.panel--explore.is-active,
.panel--project.is-active,
.panel--relics.is-active {
  transform: none;
  transition: opacity 560ms ease-in-out, visibility 0s;
}

.panel--explore {
  cursor: default;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.panel--explore.is-dragging {
  cursor: grabbing;
}

/* The curved bottom shadow is composited with the sphere in WebGL. */
.globe-canvas {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

/* The eclipse is drawn entirely in WebGL; this stable surface handles input. */
.solar-eclipse-hit {
  position: absolute;
  z-index: 70;
  width: clamp(112px, 13vw, 178px);
  height: clamp(112px, 13vw, 178px);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.solar-eclipse-hit:active { cursor: grabbing; }
.solar-eclipse-hit[data-preview-state="preview"] { cursor: pointer; }
.solar-eclipse-hit[data-interaction="drag"] { cursor: grabbing; }
.solar-eclipse-hit:focus-visible { outline: 1px solid rgba(255, 151, 80, 0.5); outline-offset: 5px; }

.solar-preview-window {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: #000;
  contain: layout paint;
}

/* Fade only the media's outer pixels into the corona; keep its center crisp. */
.solar-eclipse-hit > .solar-preview-window {
  --preview-edge-softness: 2px;
  -webkit-mask-image:
    linear-gradient(to right, transparent, #000 var(--preview-edge-softness), #000 calc(100% - var(--preview-edge-softness)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--preview-edge-softness), #000 calc(100% - var(--preview-edge-softness)), transparent);
  mask-image:
    linear-gradient(to right, transparent, #000 var(--preview-edge-softness), #000 calc(100% - var(--preview-edge-softness)), transparent),
    linear-gradient(to bottom, transparent, #000 var(--preview-edge-softness), #000 calc(100% - var(--preview-edge-softness)), transparent);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.solar-preview-window img,
.solar-preview-window video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

/* Native scrolling supplies wheel and touch momentum; WebGL stays behind it. */
.globe-scroll {
  position: absolute;
  inset: 0;
  z-index: 68;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  overflow-anchor: none;
  scrollbar-width: none;
  touch-action: pan-y pinch-zoom;
  -webkit-overflow-scrolling: touch;
}
.globe-scroll::-webkit-scrollbar { display: none; }
.globe-scroll:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.35); outline-offset: -5px; }
.globe-scroll-track { position: relative; min-height: 100%; }
.globe-scroll-overlay { position: sticky; top: 0; height: var(--carousel-height, 100vh); pointer-events: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.project-marker-layer {
  position: absolute;
  inset: 0;
  z-index: 68;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.project-marker {
  position: absolute;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  touch-action: pan-y pinch-zoom;
  transform: translate(-50%, -50%);
  transition: opacity 260ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-marker.is-visible { opacity: 1; pointer-events: auto; }

/* Compact lens uses the same glass material as the label and navigation. */
.project-marker::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 12px;
  box-sizing: border-box;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: none;
  border-radius: 50%;
  --glass-blur: 3px;
  --glass-shadow: inset 0 -2px 4px rgba(0,0,0,0.16), 0 3px 8px rgba(0,0,0,0.2);
  transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-marker.is-active::before {
  transform: translate(-50%, -50%) scale(1.5);
}
.project-marker.is-active.is-visible::before {
  animation: marker-glass-arrive 640ms both;
}
@keyframes marker-glass-arrive {
  0% { transform: translate(-50%, -50%) scale(1); animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1); }
  58% { transform: translate(-50%, -50%) scale(1.65); animation-timing-function: ease-in-out; }
  80% { transform: translate(-50%, -50%) scale(1.46); animation-timing-function: ease-out; }
  100% { transform: translate(-50%, -50%) scale(1.5); }
}
.project-marker:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.65); outline-offset: 3px; }
.project-marker__hit { position: absolute; inset: 0; border-radius: 50%; }

.project-callout {
  position: absolute;
  z-index: 69;
  display: grid;
  min-width: 190px;
  gap: 7px;
  padding: 0;
  border-radius: 22px;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  text-transform: uppercase;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transform-origin: 50% 100%;
  transform: translate(-50%, calc(-100% - 14px)) scale(0.88);
  transition:
    opacity 220ms ease,
    transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.project-callout.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, calc(-100% - 20px)) scale(1);
}

/* Scale the whole target independently of the lens/label entrance animation. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .project-marker.is-visible:hover {
    transform: translate(-50%, -50%) scale(1.16);
    transition: opacity 260ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }

  .project-callout.is-visible:hover {
    transform: translate(-50%, calc(-100% - 20px)) scale(1.035);
    transition: opacity 220ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

.project-callout__link:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.65);
  outline-offset: 3px;
}

.project-callout__meta {
  color: rgba(255, 255, 255, 0.44);
  font-size: 10px;
  line-height: 1;
}

.project-callout__list {
  display: grid;
  gap: 7px;
  border-radius: inherit;
}

.project-callout__link {
  display: grid;
  padding: 12px 14px;
  border-radius: inherit;
  gap: 3px;
  color: var(--ink);
  cursor: pointer;
}

.project-callout__link span {
  color: rgba(255, 255, 255, 0.44);
  font-size: 10px;
  line-height: 1;
}

.project-callout__link strong {
  font-size: 12px;
  line-height: 1.1;
}



.panel--index {
  overflow: auto;
  padding: 144px 32px 96px;
}

.index-table {
  display: grid;
  width: min(760px, 100%);
  gap: 0;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
}

.index-row {
  display: grid;
  grid-template-columns: 88px minmax(160px, 1fr) minmax(190px, 1.45fr);
  gap: 0;
  min-height: 24px;
  align-items: center;
  color: rgba(255, 255, 255, 0.42);
  transition: color 160ms ease;
}

.index-row--head {
  margin-bottom: 22px;
  color: var(--ink);
}

a.index-row:hover {
  color: var(--ink);
}

.panel--tool {
  overflow: hidden;
}

.info-scroll {
  width: 100%;
  height: 100%;
  overflow: auto;
  scroll-padding-top: 144px;
  padding: 144px 32px 96px;
}

.info-table {
  display: grid;
  width: min(760px, 100%);
  gap: 40px;
  font-size: 10px;
  line-height: 1.6;
}

.info-row {
  display: grid;
  grid-template-columns: 88px minmax(160px, 1fr) minmax(190px, 1.45fr);
  align-items: start;
}

.info-heading {
  grid-column: 1 / 3;
  margin: 0;
  color: var(--ink);
  font: inherit;
  text-transform: uppercase;
}

.info-heading > span {
  display: block;
  white-space: nowrap;
}

.info-content {
  grid-column: 3;
  min-width: 0;
  color: rgba(255, 255, 255, 0.42);
}

.info-content p {
  max-width: 64ch;
  margin: 0;
}

.info-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.info-list li {
  display: flex;
  min-height: 24px;
  align-items: baseline;
  gap: 12px;
}


.panel--relics {
  overflow: hidden;
}

.site-shell.is-relics-open::before {
  opacity: 0;
}

.relics-controls,
.info-controls {
  position: absolute;
  z-index: 12;
  top: max(var(--site-logo-inset), env(safe-area-inset-top));
  right: max(var(--site-logo-inset), env(safe-area-inset-right));
  display: flex;
  align-items: center;
  gap: 6px;
}

.relics-controls[hidden],
.relics-controls button[hidden] {
  display: none;
}

.relics-controls button,
.info-controls a,
.info-controls button {
  display: inline-flex;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244, 244, 244, .14);
  border-radius: 24px;
  background: rgba(14, 14, 14, .76);
  color: rgba(244, 244, 244, .64);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease;
}

.relics-controls button:focus-visible,
.relics-controls button[aria-pressed="true"],
.info-controls a:focus-visible {
  border-color: rgba(244, 244, 244, .32);
  background: rgba(32, 32, 32, .88);
  color: var(--ink);
}

/* Touch browsers can retain :hover after a tap. Momentary actions use :active
   there; only the sorting toggles keep their selected fill after release. */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) {
  .relics-controls button:hover,
  .info-controls a:hover {
    border-color: rgba(244, 244, 244, .32);
    background: rgba(32, 32, 32, .88);
    color: var(--ink);
  }
}

.relics-controls button:active,
.info-controls a:active {
  background: rgba(48, 48, 48, .94);
}

@media (max-width: 360px) {
  .relics-controls,
  .info-controls { gap: 4px; }
  .relics-controls button,
  .info-controls a { padding-inline: 8px; }
}

.info-controls button:disabled {
  opacity: 1;
  cursor: default;
}

.info-controls .info-contact-email {
  width: 44px;
  padding: 0;
}

.info-email-icon {
  display: block;
  width: 18px;
  height: 18px;
  flex: none;
}

.relics-intro {
  display: none;
  position: absolute;
  z-index: 5;
  /* Match the Archive heading's 32px inset and centered 24px row at 86px. */
  top: 86px;
  left: 32px;
  min-height: 24px;
  margin: 0;
  align-items: center;
  color: var(--ink);
  font-size: 10px;
  font-weight: 400;
  line-height: 1;
  pointer-events: none;
}

.panel--relics[data-layout="desktop"] .relics-intro {
  display: flex;
}

.relics-intro__copy {
  display: inline-flex;
  white-space: pre;
}

.relics-intro__copy > span {
  opacity: 1;
}

/* Only the first route entry owns this reveal. Mode changes keep the same
   animation name and the completed state stays clear on later visits. */
.panel--relics.is-active[data-reveal="entering"][data-layout="desktop"] .relics-intro__copy > span {
  animation: relics-intro-arrive 1100ms cubic-bezier(.22,.61,.36,1) both;
  animation-delay: calc(100ms + var(--intro-order) * 28ms);
}

@keyframes relics-intro-arrive {
  0% { opacity: 0; filter: blur(3px); }
  35% { opacity: .2; filter: blur(1.8px); }
  100% { opacity: 1; filter: blur(0); }
}

/* Fade the shared scene, leaving every object's mode/micro transform intact. */
.panel--relics.is-active[data-reveal="entering"] .relics-stage {
  animation: relics-products-arrive 1100ms cubic-bezier(.22,.61,.36,1) both;
}

@keyframes relics-products-arrive {
  0% { opacity: var(--relics-entry-start, 0); }
  30% { opacity: var(--relics-entry-middle, .12); }
  100% { opacity: 1; }
}

/* Float's first desktop entry reveals individual cutouts. Keep the existing
   stage animation and timing for every other entry and mode. */
.panel--relics.is-active[data-reveal="entering"][data-layout="desktop"][data-mode="float"][data-float-entry="true"] .relics-stage {
  --relics-entry-start: 1;
  --relics-entry-middle: 1;
}

@media (min-width: 761px) {
  .panel--relics[data-layout="reduced"] .relics-intro { display: flex; }
  .panel--relics[data-layout="reduced"] .relics-intro__copy > span { opacity: 1; }
}

.relics-focus-caption {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(244, 244, 244, .64);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  letter-spacing: 0;
  transition: opacity 180ms ease;
}

.panel--relics[data-layout="desktop"] .relics-focus-caption {
  width: min(240px, 30vw);
  white-space: normal;
  text-align: center;
  transition: none;
}

.relics-scroll,
.relics-track,
.relics-stage {
  width: 100%;
  height: 100%;
}

.relics-scroll {
  overflow: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y pinch-zoom;
}

.panel--relics[data-layout="desktop"] .relics-scroll {
  touch-action: pinch-zoom;
}

.relics-stage {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.relics-object {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  transform-origin: center;
  will-change: transform, opacity;
}

.relics-object img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.relics-item-label {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  color: rgba(244, 244, 244, .64);
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
}

.panel--relics[data-mode="static"] .relics-scroll {
  overflow-y: auto;
  touch-action: pan-y pinch-zoom;
}

.panel--relics[data-mode="static"] .relics-stage {
  position: sticky;
  top: 0;
}

/* The settled grid uses native scrolling on both layouts. Only an actively
   animated image needs its own compositor layer, not the entire collection. */
.panel--relics[data-mode="static"]:not([data-transitioning="true"]) .relics-stage {
  position: relative;
  perspective: none !important;
}

.panel--relics[data-mode="static"]:not([data-transitioning="true"]) .relics-object {
  will-change: auto;
}

/* Scroll content dissolves into the page's black at the top. The eased opacity
   curve has flat ends, so the fade has no visible lower edge or blur boundary.
   This viewport overlay leaves native scrolling and the controls untouched. */
.panel--tool::before,
.panel--relics[data-layout="desktop"][data-mode="static"]::before,
.panel--relics[data-layout="mobile"][data-mode="static"]::before {
  position: absolute;
  inset: 0 0 auto;
  z-index: 6;
  height: 96px;
  content: "";
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(2,2,2,1) 0%, rgba(2,2,2,.99144) 10%, rgba(2,2,2,.94208) 20%, rgba(2,2,2,.83692) 30%, rgba(2,2,2,.68256) 40%, rgba(2,2,2,.5) 50%, rgba(2,2,2,.31744) 60%, rgba(2,2,2,.16308) 70%, rgba(2,2,2,.05792) 80%, rgba(2,2,2,.00856) 90%, rgba(2,2,2,0) 100%);
}

/* A little more room lets desktop content dissolve at the same gentle pace. */
.panel--tool::before,
.panel--relics[data-layout="desktop"][data-mode="static"]::before {
  height: 128px;
}

.panel--relics[data-transitioning="true"] .relics-object {
  pointer-events: none;
}

.relics-object:focus-visible {
  outline: 1px solid rgba(244, 244, 244, .35);
  outline-offset: 8px;
}

/* A still, native-scroll exhibition replaces the kinetic scene when requested. */
.panel--relics.is-reduced .relics-scroll {
  overflow-y: auto;
}

.panel--relics.is-reduced .relics-track {
  height: auto;
  min-height: 100%;
}

.panel--relics.is-reduced .relics-stage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 90px 9vw;
  height: auto;
  padding: 170px 10vw 140px;
  perspective: none !important;
}

.panel--relics.is-reduced .relics-object {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: min(45vh, 430px);
  will-change: auto;
}

.panel--relics.is-reduced .relics-focus-caption {
  display: none;
}

/* Opt-in local controls; no element is created on production. */
.relics-tuning {
  position: absolute;
  z-index: 75;
  top: 124px;
  right: 18px;
  width: min(270px, calc(100% - 36px));
  padding: 14px;
  border: 1px solid var(--cell-border);
  background: rgba(10, 10, 10, .94);
  color: var(--ink);
  font-size: 10px;
}

.relics-tuning summary {
  cursor: pointer;
}

.relics-tuning__body {
  max-height: min(55dvh, 500px);
  overflow-y: auto;
  margin-top: 14px;
}

.relics-tuning fieldset {
  margin: 0 0 16px;
  padding: 10px;
  border: 1px solid var(--faint);
}

.relics-tuning label {
  display: block;
  margin-top: 12px;
  color: var(--muted);
}

.relics-tuning output {
  float: right;
}

.relics-tuning input,
.relics-tuning textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  accent-color: #aaa;
}

.relics-tuning textarea {
  height: 100px;
  background: #111;
  color: var(--ink);
  font-size: 10px;
}

.relics-tuning button {
  background: transparent;
  padding: 0;
  color: var(--ink);
  cursor: pointer;
}

.site-footer {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 70;
  display: block;
  min-height: 46px;
  border-radius: 999px;
  transition:
    opacity 260ms ease,
    transform 260ms ease;
}

/* The full-size outer target remains easy to touch while its glass compacts. */
.site-footer__surface {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--nav-count, 4), minmax(86px, auto));
  min-height: 46px;
  padding: 3px;
  overflow: visible;
  border-radius: 999px;
  transform: scale(var(--nav-scale, 1));
  transform-origin: 50% 100%;
  will-change: transform;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* One liquid-glass material and softly lit edge across all controls. */
.project-marker::before,
.project-callout,
.site-footer__surface {
  border: 1px solid rgba(255, 255, 255, 0.26);
  background:
    radial-gradient(ellipse at var(--glass-light-x, 50%) var(--glass-light-y, 0%), rgba(255,226,203,0.14), transparent 68%),
    linear-gradient(var(--glass-light-angle, 0deg), rgba(12,18,22,0.24), rgba(255,226,203,0.065)),
    rgba(5,10,14,0.24);
  -webkit-backdrop-filter: blur(var(--glass-blur, 14px)) saturate(1.25) brightness(1.06);
  backdrop-filter: blur(var(--glass-blur, 14px)) saturate(1.25) brightness(1.06);
  box-shadow: var(--glass-shadow, inset 0 -8px 16px -14px rgba(0,0,0,0.45), 0 10px 28px rgba(0,0,0,0.28));
}

/* Navigation keeps the same neutral, evenly lit glass in every view. */
.site-footer__surface {
  background: rgba(22, 22, 22, 0.58);
  -webkit-backdrop-filter: blur(var(--navigation-blur)) saturate(1) brightness(1.06);
  backdrop-filter: blur(var(--navigation-blur)) saturate(1) brightness(1.06);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, 0.045), 0 6px 18px rgba(0, 0, 0, 0.24);
}

.footer-toggle {
  position: relative;
  z-index: 1;
  min-width: 90px;
  padding: 0 17px;
  border-radius: 999px;
  background: transparent;
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    color 180ms ease;
}

/* Invisible native switches receive the actual mobile touch. The original
   buttons remain the visible, keyboard-accessible navigation controls. */
.footer-haptics {
  position: absolute;
  inset: 3px;
  z-index: 2;
  display: none;
  grid-template-columns: repeat(var(--nav-count, 4), minmax(0, 1fr));
}

.footer-haptic-target {
  min-width: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: auto;
  appearance: auto;
  -webkit-appearance: auto;
  touch-action: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

@media (any-pointer: coarse) {
  .footer-haptics { display: grid; }
}

.footer-selection {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: calc((100% - 6px) / var(--nav-count, 4));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.085);
  pointer-events: none;
  transform: translate3d(calc(var(--nav-index, 0) * 100%), 0, 0) scaleX(var(--nav-pill-stretch, 1));
  will-change: transform;
}

.footer-toggle__label {
  position: relative;
  display: inline-block;
  /* Keep word and cue sizes fixed while the navigation glass compacts.
     Selection motion belongs to the inner group, so scaling never lags. */
  transform: scale(calc(1 / var(--nav-scale, 1)));
  pointer-events: none;
  will-change: transform;
}

.footer-toggle[data-target="explore"],
.footer-toggle[data-target="relics"] {
  --footer-cue-space: calc(4px + var(--footer-cue-gap, 7px));
}

.footer-toggle__content {
  position: relative;
  display: inline-block;
  transform: translateX(0px);
  transition: transform 440ms cubic-bezier(.32, .72, .3, 1.12);
  will-change: transform;
}

/* Make room for the first dot only while selected. Keeping this offset fixed
   across RELICS modes lets its pill continue growing exclusively rightward. */
.footer-toggle.is-active .footer-toggle__content {
  transform: translateX(calc(var(--footer-cue-space, 0px) * -.5));
}

/* Bare cues sit directly beside the word at its vertical center. */
.footer-pagination {
  position: absolute;
  left: calc(100% + var(--footer-cue-gap, 7px));
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 6px;
  opacity: 0;
  transform: translateY(-50%);
  transform-origin: center;
  pointer-events: none;
  transition: opacity 220ms ease;
}

.footer-toggle.is-active .footer-pagination {
  opacity: 1;
}

/* Keep its footprint, but pin the mark beside the word so it grows right. */
.footer-pagination--relics {
  width: 16px;
  justify-content: flex-start;
}

/* One silhouette uses the same soft white material and restrained morph. */
.footer-pagination__mark {
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .24);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  transition:
    width 640ms cubic-bezier(.32, .72, .3, 1.12),
    height 640ms cubic-bezier(.32, .72, .3, 1.12),
    background-color 420ms ease,
    box-shadow 420ms ease;
}

.footer-toggle[data-previews="on"] .footer-pagination--explore .footer-pagination__mark,
.footer-pagination--relics .footer-pagination__mark {
  background-color: rgba(255, 255, 255, .95);
  box-shadow: var(--soft-white-glow);
}

.footer-pagination--relics .footer-pagination__mark {
  transition-duration: 440ms, 440ms, 420ms, 420ms;
}

/* Desktop cycles Float → Static → Carousel. The initial state is a dot. */
.footer-toggle[data-relics-mode="static"] .footer-pagination__mark {
  width: 8px;
}

.footer-toggle[data-relics-mode="carousel"] .footer-pagination__mark {
  width: 12px;
}

.footer-toggle:hover:not(.is-active) {
  color: var(--ink);
}

.site-footer[data-dragging="true"] .footer-toggle.is-active {
  color: rgba(255,255,255,.35);
}

.site-footer[data-dragging="true"] .footer-toggle.is-drag-target {
  color: var(--ink);
}

.footer-toggle.is-active {
  color: var(--ink);
}

/* Route selection is already correct if the footer paints before its inline
   bootstrap runs. This temporary override is removed as soon as DOM exists. */
html[data-page-entry] .footer-toggle {
  color: rgba(255, 255, 255, 0.35);
}

html[data-page-entry] .site-footer .footer-toggle__content {
  transform: translateX(0px);
  transition: none;
}

html[data-page-entry] .site-footer .footer-pagination {
  opacity: 0;
  transition: none;
}

html[data-page-entry="explore"] .footer-toggle[data-target="explore"],
html[data-page-entry="index"] .footer-toggle[data-target="index"],
html[data-page-entry="project"] .footer-toggle[data-target="index"],
html[data-page-entry="relics"] .footer-toggle[data-target="relics"],
html[data-page-entry="tool"] .footer-toggle[data-target="tool"] {
  color: var(--ink);
}

html[data-page-entry="explore"] .footer-toggle[data-target="explore"] .footer-toggle__content,
html[data-page-entry="relics"] .footer-toggle[data-target="relics"] .footer-toggle__content {
  transform: translateX(calc(var(--footer-cue-space, 0px) * -.5));
}

html[data-page-entry="explore"] .footer-toggle[data-target="explore"] .footer-pagination,
html[data-page-entry="relics"] .footer-toggle[data-target="relics"] .footer-pagination {
  opacity: 1;
}


.panel--project {
  overflow: auto;
  padding: 0;
  background: #020202;
  color: var(--ink);
}

.site-shell.is-project-open::before {
  opacity: 0;
}

.project-page {
  position: relative;
  min-height: 100vh;
  padding: 28px clamp(32px, 6.6vw, 92px) clamp(72px, 8vw, 128px);
  background: #020202;
  color: var(--ink);
  text-transform: uppercase;
}

/* The panel owns scrolling, so this header sticks to that panel's top. */
.project-page__header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: var(--site-logo-width) minmax(0, 1fr);
  align-content: start;
  align-items: center;
  height: var(--project-header-height);
  margin: -28px calc(-1 * clamp(32px, 6.6vw, 92px)) 0;
  padding: var(--site-logo-inset) clamp(32px, 6.6vw, 92px) 0 var(--site-logo-inset);
  background: transparent;
  /* An opacity fade here isolates the child's backdrop until the fade ends.
     Keep this container opaque; fade the blur surface and links independently. */
  opacity: 1;
}

.project-page__header[data-hidden="true"] {
  pointer-events: none;
}

.project-page__header::before {
  position: absolute;
  inset: 0 0 calc(-1 * var(--project-header-feather));
  z-index: 0;
  content: "";
  pointer-events: none;
  background: rgba(4,7,9,.55);
  opacity: 1;
  -webkit-backdrop-filter: blur(var(--project-header-blur));
  backdrop-filter: blur(var(--project-header-blur));
  /* Crossfade the already-filtered surface, with no late blur-radius switch. */
  transition: opacity var(--project-header-fade);
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--project-header-height), rgba(0,0,0,.9) calc(var(--project-header-height) + 7px), rgba(0,0,0,.6) calc(var(--project-header-height) + 17px), rgba(0,0,0,.22) calc(var(--project-header-height) + 29px), rgba(0,0,0,.05) calc(var(--project-header-height) + 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 var(--project-header-height), rgba(0,0,0,.9) calc(var(--project-header-height) + 7px), rgba(0,0,0,.6) calc(var(--project-header-height) + 17px), rgba(0,0,0,.22) calc(var(--project-header-height) + 29px), rgba(0,0,0,.05) calc(var(--project-header-height) + 36px), transparent);
}

.project-page__header[data-hidden="true"]::before,
.project-page__header[data-hidden="true"] .project-page__logo,
.project-page__header[data-hidden="true"] .project-page__nav {
  opacity: 0;
}

.project-page__logo {
  position: relative;
  z-index: 1;
  display: block;
  width: var(--site-logo-width);
  opacity: 1;
  transition: opacity var(--project-header-fade), filter 180ms ease;
}

.project-page__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.project-page__nav {
  position: relative;
  z-index: 1;
  display: flex;
  justify-self: end;
  gap: clamp(24px, 4.8vw, 76px);
  align-items: center;
  color: rgba(244, 244, 244, 0.78);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  opacity: 1;
  transition: opacity var(--project-header-fade);
}

.project-page__back {
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-weight: 400;
  text-transform: uppercase;
  transition:
    color 160ms ease,
    text-shadow 160ms ease;
}

.project-page__back:hover,
.project-page__back:focus-visible {
  color: #fff;
  text-shadow: var(--soft-white-glow);
}

.project-page__masthead {
  display: grid;
  justify-items: center;
  gap: clamp(14px, 1.5vw, 22px);
  /* Keep title placement independent of decorative feather tuning. */
  margin-top: 84px;
}

.project-page__masthead h1 {
  width: 100%;
  margin: 0;
  color: var(--ink);
  font-size: clamp(54px, 6.8vw, 96px);
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

.project-video-block {
  display: grid;
  width: min(100%, 900px, calc((100vh - 220px) * 1.3333));
  gap: 8px;
  justify-self: center;
}

.project-page__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--project-hero-aspect, 4 / 3);
  margin: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.project-page__media::before {
  display: none;
}

.project-page__media img,
.project-page__media iframe,
.project-page__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.project-page__media img,
.project-page__media video {
  object-fit: cover;
}

.project-hero-link {
  position: absolute;
  inset: 0;
  display: none;
  cursor: pointer;
}

.project-hero-link:not([href]) {
  cursor: default;
  pointer-events: none;
}

.project-page.is-lightbox-media-project .project-hero-link:not([href]) {
  cursor: zoom-in;
  pointer-events: auto;
}

.project-hero-image {
  display: block;
}

.project-page.is-image-project .project-hero-link,
.project-page.is-video-project .project-hero-link {
  display: block;
}

.project-page.is-video-project .project-hero-image {
  display: none;
}

.panel--project[data-project="vetements"] .project-hero-image {
  object-position: center top;
}

.panel--project[data-project="kyu"] .project-hero-image {
  transform: scale(1.01);
}

.project-media-placeholder {
  position: absolute;
  inset: 0;
  display: none;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(135deg, transparent 0 49.8%, rgba(255, 255, 255, 0.08) 50%, transparent 50.2%),
    linear-gradient(45deg, transparent 0 49.8%, rgba(255, 255, 255, 0.08) 50%, transparent 50.2%),
    rgba(255, 255, 255, 0.035);
  color: rgba(244, 244, 244, 0.34);
  font-size: 11px;
  line-height: 1;
}

.project-page.is-placeholder-project .project-page__media video,
.project-page.is-placeholder-project .project-page__still video,
.project-page.is-placeholder-project .project-video-controls {
  display: none;
}

.project-page:not(.is-video-project) .project-page__media video,
.project-page:not(.is-video-project) .project-video-controls {
  display: none;
}

.project-page.is-animated-header .project-video-controls,
.project-page.is-linked-media-project .project-video-controls {
  display: none;
}

.project-page.is-placeholder-project .project-media-placeholder {
  display: grid;
}

.project-page__media iframe {
  border: 0;
}

.project-page__information {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4.2vw, 72px);
  align-items: start;
  margin-top: clamp(96px, 14vw, 188px);
}

.project-page__copy {
  position: sticky;
  top: clamp(110px, 14vw, 176px);
  display: grid;
  max-width: none;
  gap: clamp(24px, 3.2vw, 48px);
  padding-left: 0;
  border-left: 0;
}

.project-page__copy h2 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(42px, 5.8vw, 104px);
  font-weight: 700;
  line-height: 1;
  text-transform: uppercase;
}

.project-page__copy p {
  max-width: 68ch;
  margin: 0;
  color: rgba(244, 244, 244, 0.74);
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  text-transform: none;
}

.project-page__copy strong {
  color: inherit;
  font-weight: 700;
}

.project-page__copy a {
  color: var(--ink);
  text-decoration: none;
  transition: color 160ms ease;
}

.project-page__copy a:hover,
.project-page__copy a:focus-visible {
  color: #fff;
  text-decoration: none;
}

.project-page__visual-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3.6vw, 56px);
  padding-left: 0;
  border-left: 0;
}

.project-page__visual-grid.is-writings {
  display: block;
}

.project-page__visual-grid.is-carousels {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(34px, 4.8vw, 72px);
}

.project-page__footer {
  display: flex;
  justify-content: flex-end;
  margin-top: clamp(86px, 12vw, 168px);
}

.project-page__next {
  display: flex;
  gap: clamp(24px, 4.8vw, 76px);
  align-items: center;
  color: rgba(244, 244, 244, 0.78);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  transition:
    color 160ms ease,
    text-shadow 160ms ease;
}

.project-page__next strong {
  color: inherit;
  font-weight: 400;
}

.project-page__next:hover,
.project-page__next:focus-visible {
  color: #fff;
  text-shadow: var(--soft-white-glow);
}

.project-page__next:hover strong,
.project-page__next:focus-visible strong {
  color: inherit;
}

.project-page__writings {
  display: grid;
  gap: clamp(18px, 2vw, 30px);
  width: 100%;
  color: rgba(244, 244, 244, 0.78);
}

.project-page__writings h3 {
  margin: 0 0 clamp(8px, 1.2vw, 16px);
  color: var(--ink);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}

.project-writing-group {
  display: grid;
  grid-template-columns: minmax(72px, 0.24fr) minmax(0, 1fr);
  gap: clamp(18px, 2.8vw, 42px);
  align-items: start;
}

.project-writing-date {
  color: rgba(244, 244, 244, 0.44);
  font-size: clamp(12px, 0.95vw, 16px);
  font-weight: 400;
  line-height: 1.3;
}

.project-writing-list {
  display: grid;
  gap: 6px;
}

.project-writing-list a {
  color: rgba(244, 244, 244, 0.78);
  font-size: clamp(14px, 1.05vw, 18px);
  font-weight: 400;
  line-height: 1.24;
  text-decoration: none;
  text-transform: none;
  transition:
    color 160ms ease,
    text-shadow 160ms ease;
}

.project-writing-list a:hover,
.project-writing-list a:focus-visible {
  color: #fff;
  text-shadow: var(--soft-white-glow);
}

.project-page__still {
  position: relative;
  width: 100%;
  margin: 0 0 0 auto;
  overflow: hidden;
  border: 0;
  background: transparent;
}

.project-page__still::before {
  display: block;
  padding-top: 100%;
  content: "";
}

.project-page__still img,
.project-page__still video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-page__still--empty::after {
  position: absolute;
  inset: 18px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  content: "";
}

.project-gallery-item {
  display: block;
  padding: 0;
  cursor: zoom-in;
  appearance: none;
}

.project-gallery-item:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
}

.project-page__visual-grid.is-stacked-media {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 56px);
}

.project-stacked-media {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.project-stacked-media__frame {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-width: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: zoom-in;
  appearance: none;
}

a.project-stacked-media__frame {
  cursor: pointer;
}

.project-stacked-media__frame--static {
  margin: 0;
  cursor: default;
}

.project-stacked-media__frame img,
.project-stacked-media__frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-stacked-media--full-bleed .project-stacked-media__frame {
  aspect-ratio: auto;
}

.project-stacked-media--full-bleed .project-stacked-media__frame img,
.project-stacked-media--full-bleed .project-stacked-media__frame video {
  position: static;
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.project-stacked-media__frame:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.55);
  outline-offset: 4px;
}

.project-stacked-media__caption {
  margin: 0;
  color: rgba(244, 244, 244, 0.38);
  font-size: 11px;
  line-height: 1.2;
  text-transform: none;
}

.project-carousel {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.project-carousel__frame {
  position: relative;
  min-width: 0;
}

.project-carousel__track {
  display: flex;
  width: 100%;
  gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.project-carousel__track::-webkit-scrollbar {
  display: none;
}

/* Independent pixels bridge native scroll-surface rebasing on mobile WebKit. */
.project-carousel__loop-cover {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  contain: layout paint;
  isolation: isolate;
  background: #000;
  pointer-events: none;
}
.project-carousel__loop-cover[hidden] { display: none; }
.project-carousel__loop-cover > .project-carousel__slide {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  pointer-events: none;
}

.project-carousel__slide {
  position: relative;
  display: block;
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  scroll-snap-align: start;
  appearance: none;
}

.project-carousel__slide::before {
  display: block;
  padding-top: 118%;
  content: "";
}

.project-carousel__slide--static {
  cursor: default;
}

.project-carousel__slide img,
.project-carousel__slide video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-carousel__slide[data-lightbox-src="Website Assets/YEEZY/YZY SZN 9/Untitled_Artwork 88.PNG"] img {
  object-position: right center;
}

.panel--project[data-project="yeezy"] .project-carousel__slide[data-lightbox-src="Website Assets/YEEZY/VULTURES TOUR/Vulures 02.JPG"] img {
  object-position: 62% center;
}

.panel--project[data-project="yeezy"] .project-carousel__slide[data-lightbox-src="Website Assets/YEEZY/STEM SPACE/Yeezy Stem Booth Event.png"] img {
  object-position: right center;
  transform: scale(1.2);
  transform-origin: right center;
}

.panel--project[data-project="abel-paul-george"] .project-carousel__slide[data-lightbox-src="Website Assets/ABEL PAUL GEORGE/(brenton) apg 2022 campaign.png"] img {
  object-position: 82% center;
}

.panel--project[data-project="abel-paul-george"] .project-carousel__slide[data-lightbox-src="Website Assets/ABEL PAUL GEORGE/(spacey) apg 2022 campaign.png"] img {
  object-position: 18% center;
}

.panel--project[data-project="roc-nation"] .project-carousel__slide[data-lightbox-src="Website Assets/ROC NATION/VICTORY BOYD/victory x trulah 4.JPG"] img {
  object-position: right center;
}

.panel--project[data-project="roc-nation"] .project-carousel__slide img[src="Website Assets/ROC NATION/VIC MENSA/(1000px) Vic DJ Set.gif"] {
  transform: scale(1.36);
}

.panel--project[data-project="vetements"] .project-carousel__slide img {
  object-position: center top;
}

.panel--project[data-project="vetements"] .project-carousel__slide[data-lightbox-src="Website Assets/VETEMENTS/NEW EDITS/IMG_3068.JPG"] img {
  object-position: center bottom;
}

.panel--project[data-project="vetements"] .project-carousel__track {
  align-items: stretch;
}

.panel--project[data-project="vetements"] .project-carousel__slide {
  aspect-ratio: 17 / 20;
  scroll-snap-stop: always;
}

.panel--project[data-project="vetements"] .project-carousel__slide::before {
  display: none;
}

.project-carousel__slide--placeholder {
  display: grid;
  place-items: center;
  cursor: default;
}

.project-carousel__slide--placeholder::after {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(135deg, transparent 0 49.8%, rgba(255, 255, 255, 0.08) 50%, transparent 50.2%),
    linear-gradient(45deg, transparent 0 49.8%, rgba(255, 255, 255, 0.08) 50%, transparent 50.2%),
    rgba(255, 255, 255, 0.035);
  content: "";
}

.project-carousel__slide--placeholder span {
  position: relative;
  z-index: 1;
  color: rgba(244, 244, 244, 0.34);
  font-size: 11px;
  line-height: 1;
}

.project-carousel__control {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  width: 28px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(244, 244, 244, 0.88);
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 160ms ease;
  cursor: pointer;
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.72);
}

.project-carousel__control--prev {
  left: 12px;
}

.project-carousel__control--next {
  right: 12px;
}

.project-carousel__frame:hover .project-carousel__control,
.project-carousel__control:focus-visible {
  opacity: 1;
}

.project-carousel__control:hover,
.project-carousel__control:focus-visible {
  color: #fff;
  outline: 0;
}

.project-carousel__control span {
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  filter: drop-shadow(0 0 18px rgba(0, 0, 0, 0.72));
}

.project-carousel__control--prev span { transform: translateX(2px) rotate(135deg); }
.project-carousel__control--next span { transform: translateX(-2px) rotate(-45deg); }

.project-carousel__caption {
  margin: 0;
  color: rgba(244, 244, 244, 0.38);
  font-size: 11px;
  line-height: 1.2;
  text-transform: none;
}

.project-carousel__meta {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
}

.project-carousel__dots {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: end;
  gap: 8px;
}

.project-carousel__dot {
  display: block;
  flex: 0 0 auto;
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(244, 244, 244, 0.24);
  transition:
    background 180ms ease,
    opacity 180ms ease,
    transform 180ms ease,
    width 180ms ease,
    height 180ms ease;
  appearance: none;
}

.project-carousel__dot.is-neighbor {
  width: 6px;
  height: 6px;
  background: rgba(244, 244, 244, 0.34);
}

.project-carousel__dot.is-active {
  width: 8px;
  height: 8px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: var(--soft-white-glow);
}

/* Archive carousels: fixed click targets, fractional swipe-driven glyphs.
   The existing spring paints --dot-activation; CSS adds no delayed transition. */
.project-carousel[data-pagination="morph"] .project-carousel__dots {
  gap: 4px;
}

.project-carousel[data-pagination="morph"] .project-carousel__dot {
  display: grid;
  place-items: center;
  width: 10px;
  height: 10px;
  contain: layout;
  background: transparent;
  box-shadow: none;
  transition: none;
}

.project-carousel__dot-mark {
  display: block;
  width: calc(10px - 2px * var(--dot-activation, 0));
  height: calc(5px + 3px * var(--dot-activation, 0));
  border-radius: 999px;
  background: rgba(255, 255, 255, calc(.24 + .71 * var(--dot-activation, 0)));
  box-shadow: 0 0 8px rgba(255, 255, 255, calc(.48 * var(--dot-activation, 0))),
    0 0 18px rgba(255, 255, 255, calc(.22 * var(--dot-activation, 0)));
  pointer-events: none;
}

.project-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 54px);
  background: rgba(0, 0, 0, 0.9);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 320ms ease,
    visibility 0s linear 320ms;
}

.project-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition:
    opacity 320ms ease,
    visibility 0s;
}

.project-lightbox__backdrop {
  position: absolute;
  inset: 0;
  padding: 0;
  cursor: zoom-out;
  appearance: none;
  border: 0;
  background: transparent;
}

.project-lightbox__figure {
  position: relative;
  z-index: 1;
  display: block;
  margin: 0;
  opacity: 0;
  touch-action: none;
  transform: translateY(8px);
  transition:
    opacity 360ms ease,
    transform 360ms ease;
}

.project-lightbox.is-open .project-lightbox__figure {
  opacity: 1;
  transform: translateY(0);
}

.project-lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(94vw, 1600px);
  max-height: 86vh;
  object-fit: contain;
  opacity: 1;
  transition: opacity 260ms ease;
}

.project-lightbox__image.is-switching {
  opacity: 0;
}

.project-lightbox__close {
  color: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}

.project-lightbox__close {
  position: absolute;
  top: clamp(18px, 3vw, 36px);
  right: clamp(18px, 3vw, 36px);
  z-index: 2;
  padding: 0;
  cursor: pointer;
  appearance: none;
  border: 0;
  background: transparent;
}

.project-lightbox__close:hover,
.project-lightbox__close:focus-visible {
  color: #fff;
}

.project-video-controls {
  position: absolute;
  right: 20px;
  bottom: 14px;
  left: 20px;
  z-index: 2;
  display: flex;
  gap: 14px;
  align-items: center;
  color: rgba(255, 255, 255, 0.76);
  font-size: 9px;
  line-height: 1;
  opacity: 0;
  pointer-events: none;
  transform: translateY(5px);
  transition: opacity 420ms ease, transform 420ms ease;
}

.project-page__media:hover .project-video-controls,
.project-video-controls:focus-within,
.project-page__media.is-controls-visible .project-video-controls {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.project-video-control {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.project-video-icon {
  position: absolute;
  inset: 0;
  display: block;
  margin: auto;
  opacity: 0.82;
  transition: opacity 220ms ease, transform 220ms ease;
}

.project-video-control:hover .project-video-icon {
  opacity: 1;
}

.project-video-control--play .project-video-icon {
  top: 6px;
  right: auto;
  bottom: auto;
  left: 7px;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 10px solid rgba(255, 255, 255, 0.88);
}

.project-video-control--play.is-paused .project-video-icon {
  top: 6px;
  left: 6px;
  width: 12px;
  height: 12px;
  border: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.88) 0 36%,
    transparent 36% 64%,
    rgba(255, 255, 255, 0.88) 64% 100%
  );
}

.project-video-control--sound .project-video-icon {
  top: 5px;
  right: auto;
  bottom: auto;
  left: 4px;
  width: 14px;
  height: 14px;
}

.project-video-control--sound .project-video-icon::before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 5px;
  height: 6px;
  background: rgba(255, 255, 255, 0.82);
  border-radius: 1px;
  content: "";
}

.project-video-control--sound .project-video-icon::after {
  position: absolute;
  top: 1px;
  left: 4px;
  width: 8px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-left: 0;
  border-radius: 0 14px 14px 0;
  content: "";
}

.project-video-control--sound:not(.is-on) .project-video-icon {
  transform: rotate(-8deg);
}

.project-video-control--sound:not(.is-on) .project-video-icon::after {
  top: 6px;
  left: 8px;
  width: 11px;
  height: 2px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  transform: rotate(-42deg);
}

.project-video-control--fullscreen .project-video-icon {
  top: 5px;
  right: auto;
  bottom: auto;
  left: 5px;
  width: 14px;
  height: 14px;
  border-top: 2px solid rgba(255, 255, 255, 0.82);
  border-right: 2px solid rgba(255, 255, 255, 0.82);
}

.project-video-control--fullscreen .project-video-icon::before {
  position: absolute;
  right: 4px;
  bottom: 4px;
  width: 10px;
  height: 10px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.82);
  border-left: 2px solid rgba(255, 255, 255, 0.82);
  content: "";
}

.project-video-time {
  flex: 0 0 auto;
  min-width: 58px;
  white-space: nowrap;
}

.project-video-progress {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 18px;
  padding: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.project-video-progress::-webkit-slider-runnable-track {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.9) var(--progress, 0%), rgba(255, 255, 255, 0.34) var(--progress, 0%));
}

.project-video-progress::-webkit-slider-thumb {
  width: 0;
  height: 0;
  appearance: none;
}

.project-video-progress::-moz-range-track {
  height: 1px;
  background: rgba(255, 255, 255, 0.34);
}

.project-video-progress::-moz-range-progress {
  height: 1px;
  background: rgba(255, 255, 255, 0.9);
}

.project-video-progress::-moz-range-thumb {
  width: 0;
  height: 0;
  border: 0;
}

.project-page__body .project-video-credit {
  margin: 0;
  color: rgba(244, 244, 244, 0.38);
  font-size: 10px;
  line-height: 1.2;
  text-transform: none;
}

.project-video-credit {
  margin: 0;
  color: rgba(244, 244, 244, 0.38);
  font-size: 11px;
  line-height: 1.2;
  text-transform: none;
}

.project-video-credit:empty {
  display: none;
}

@media (max-width: 760px) {
  body {
    overflow: hidden;
    overscroll-behavior: none;
  }

  .site-shell {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    margin: 0;
  }

  .site-header {
    top: 12px;
    left: 12px;
  }

  .panel--index {
    padding: calc(max(var(--site-logo-inset), env(safe-area-inset-top)) + 116px) 14px 94px;
  }

  .info-scroll {
    scroll-padding-top: calc(max(var(--site-logo-inset), env(safe-area-inset-top)) + 116px);
    padding: calc(max(var(--site-logo-inset), env(safe-area-inset-top)) + 116px) 14px calc(var(--mobile-nav-bottom) + var(--mobile-nav-height) + 24px);
  }

  .panel--tool::before {
    height: 96px;
  }

  .info-table {
    gap: 32px;
  }

  .info-row {
    grid-template-columns: minmax(116px, 28%) minmax(0, 1fr);
    column-gap: 12px;
    row-gap: 0;
  }

  .info-heading {
    grid-column: 1;
    padding-right: 0;
  }

  .info-content {
    grid-column: 2;
  }

  .relics-scroll {
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .panel--relics[data-layout="mobile"][data-mode="carousel"] .relics-scroll {
    touch-action: pinch-zoom;
    overscroll-behavior: contain;
  }

  .panel--relics[data-layout="mobile"][data-mode="float"] .relics-scroll {
    touch-action: pinch-zoom;
    overscroll-behavior: contain;
  }

  .panel--relics[data-layout="mobile"] .relics-focus-caption {
    width: 35%;
    white-space: normal;
    text-align: left;
    transition: none;
  }

  /* Created only on entry to mobile Carousel; autoplay's returning caption
     continues using its ordinary opacity fade without animated letters. */
  .panel--relics[data-layout="mobile"][data-mode="carousel"] .relics-focus-caption[data-mobile-entry="entering"] > .relics-caption-letter {
    animation: relics-mobile-caption-arrive 1100ms cubic-bezier(.22,.61,.36,1) both;
  }

  @keyframes relics-mobile-caption-arrive {
    0% { opacity: 0; filter: blur(3px); }
    35% { opacity: .2; filter: blur(1.8px); }
    100% { opacity: 1; filter: blur(0); }
  }

  .panel--relics[data-layout="mobile"] .relics-item-label {
    font-size: 10px;
  }




  .relics-stage {
    position: sticky;
    top: 0;
    height: 100dvh;
  }

  .panel--relics.is-reduced .relics-stage {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 60px;
    padding: 150px 12vw calc(var(--mobile-nav-bottom) + var(--mobile-nav-height) + 50px);
  }

  .panel--relics.is-reduced .relics-object {
    height: 42svh;
  }

  .panel--project {
    padding: 0;
  }

  .project-page {
    min-height: calc(100dvh - 62px);
    padding: 18px 18px calc(var(--mobile-nav-bottom) + var(--mobile-nav-height) + 32px);
  }

  .project-page__header {
    display: none;
  }

  .site-shell.is-project-open .site-footer {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }

  .project-page__masthead {
    gap: 12px;
    margin-top: 0;
    justify-items: start;
  }

  .project-page__masthead h1 {
    order: 2;
    font-size: clamp(44px, 11.8vw, 76px);
    line-height: 1;
    text-align: left;
  }

  .project-video-block {
    order: 1;
    width: 100%;
    gap: 7px;
  }

  .project-page__media::before {
    display: none;
  }

  .project-page__information {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 32px;
  }

  .project-page__copy {
    position: static;
    gap: 24px;
    padding-left: 0;
  }

  .project-page__copy h2 {
    display: none;
  }

  .project-page__copy p {
    font-size: 14px;
    line-height: 1.45;
  }

  .project-page__visual-grid {
    grid-template-columns: 1fr;
    gap: 18px;
    padding-left: 0;
    border-left: 0;
  }

  .project-page__visual-grid.is-carousels {
    gap: 34px;
  }

  .project-page__footer {
    justify-content: flex-start;
    margin-top: 58px;
  }

  .project-page__next {
    width: 100%;
    justify-content: space-between;
    gap: 18px;
    font-size: 10px;
  }

  .project-carousel {
    gap: 8px;
  }

  .project-carousel__slide::before {
    padding-top: 124%;
  }

  .panel--project[data-project="born-in-denver"] .project-carousel__slide[data-lightbox-src="Website Assets/BORN IN DENVER/BID poster/2 BID POSTER MOCK UP.png"] img {
    object-position: 50% 25%;
  }

  .project-carousel__control {
    display: none;
  }

  .project-carousel__meta {
    position: relative;
    display: grid;
    min-height: 12px;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 8px;
  }

  .project-carousel__caption {
    grid-column: 1;
    font-size: 10px;
    line-height: 1.2;
  }

  .project-carousel__dots {
    grid-column: 2;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }

  .project-carousel__dot {
    display: block;
    flex: 0 0 auto;
  }

  .project-writing-group {
    grid-template-columns: minmax(70px, 0.26fr) minmax(0, 1fr);
    gap: 16px;
  }

  .project-writing-list a {
    font-size: 14px;
    line-height: 1.3;
  }

  .project-video-controls {
    right: 10px;
    bottom: 10px;
    left: 10px;
    gap: 8px;
    font-size: 8px;
  }

  .project-video-control {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }

  .project-video-time {
    min-width: 50px;
  }

  .project-page__body .project-video-credit {
    font-size: 9px;
  }

  .index-row {
    grid-template-columns: 54px minmax(120px, 1fr);
    gap: 12px;
    min-height: 30px;
  }

  .index-row span:nth-child(3) {
    display: none;
  }

  .site-footer {
    position: fixed;
    left: 22px;
    right: 22px;
    bottom: var(--mobile-nav-bottom);
    min-height: var(--mobile-nav-height);
  }

  .site-footer__surface {
    grid-template-columns: repeat(var(--nav-count, 4), minmax(0, 1fr));
    /* A close, downward shadow lifts the pill without darkening the whole footer. */
    box-shadow: inset 0 0 14px rgba(255,255,255,.045), 0 8px 18px -6px rgba(0,0,0,.38);
  }

  .footer-toggle {
    min-width: 0;
    padding: 0 6px;
  }

  /* Mobile cycles Carousel → Float → Static, using the same three sizes. */
  .footer-toggle[data-relics-mode="float"] .footer-pagination__mark {
    width: 8px;
  }

  .footer-toggle[data-relics-mode="static"] .footer-pagination__mark {
    width: 12px;
  }

  .footer-toggle[data-relics-mode="carousel"] .footer-pagination__mark {
    width: 4px;
  }

  .project-callout {
    min-width: 168px;
    max-width: calc(100vw - 72px);
  }

  .project-marker::before {
    width: 10px;
    height: 10px;
  }
}

@media (max-width: 360px) {
  .site-footer { --footer-cue-gap: 5px; }

  /* Let the compact bar start expanding before Explore's dot appears.
     Leaving the tab still fades its dot immediately, without this delay. */
  .footer-toggle.is-active .footer-pagination--explore {
    transition-delay: 90ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel--relics.is-active[data-reveal] .relics-intro__copy > span,
  .panel--relics .relics-focus-caption > .relics-caption-letter,
  .panel--relics.is-active[data-reveal] .relics-stage {
    animation: none;
    opacity: 1;
    filter: none;
  }

  .panel--explore,
  .panel--project,
  .panel--relics,
  .panel--explore.is-active,
  .panel--project.is-active,
  .panel--relics.is-active { transition: none; }
  .logo-link,
  .project-page__logo,
  .project-page__header,
  .project-page__header::before,
  .project-page__nav,
  .site-footer,
  .footer-toggle,
  .footer-toggle__content,
  .footer-pagination,
  .footer-pagination__mark,
  .index-row,
  .info-controls a,
  .project-marker,
  .project-callout {
    transition: none;
  }

  .project-marker::before,
  .project-marker.is-active.is-visible::before,
  .project-marker::after {
    animation: none;
  }
}

/* Native animated media projected over the lower spherical cap in dark mode. */
.solar-dark-preview-hit {
  pointer-events: auto;
  position: absolute;
  z-index: 71;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  touch-action: pan-y pinch-zoom;
}
.solar-dark-preview-hit[hidden] { display: none; }

.solar-dark-preview-hit .solar-preview-window {
  /* Warp the already-feathered native media along the planet's curved surface. */
  background: transparent;
  top: var(--projection-top, 32px);
  transform: translateX(-50%);
  overflow: visible;
  contain: layout style;
  /* Keep the outer falloff intact in WebKit's filtered-media compositor too. */
  -webkit-mask-image: var(--projection-mask, url("assets/projection-feather.png"));
  mask-image: var(--projection-mask, url("assets/projection-feather.png"));
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.solar-dark-preview-hit .solar-preview-window img,
.solar-dark-preview-hit .solar-preview-window video {
  object-fit: contain;
  height: 100%;
  transform-origin: 50% 50%;
  filter: var(--projection-filter) brightness(.9) saturate(.8);
}
.solar-dark-preview-hit:focus-visible { outline: 1px solid rgba(255,151,80,.5); outline-offset: -10px; }

.solar-dark-preview-hit {
  /* This mask uses the same spherical center/radius as the eclipse renderer. */
  -webkit-mask-image: radial-gradient(circle var(--surface-radius) at var(--surface-center-x) var(--surface-center-y),
    #000 calc(100% - var(--surface-feather)), transparent 100%);
  mask-image: radial-gradient(circle var(--surface-radius) at var(--surface-center-x) var(--surface-center-y),
    #000 calc(100% - var(--surface-feather)), transparent 100%);
}

.earth-swap-hit {
  position: absolute;
  z-index: 67;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  pointer-events: auto;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  -webkit-tap-highlight-color: transparent;
}
.earth-swap-hit[hidden] { display: none; }
.earth-swap-hit:active { cursor: grabbing; }
.earth-swap-hit:focus-visible { outline: 1px solid rgba(130,200,255,.7); outline-offset: 6px; }

/* A loading video stays mounted behind its poster until its first frame. */
.solar-preview-window .solar-preview-pending { opacity: 0; }