@font-face{font-family:Platypi;src:url("../public/assets/fonts/platypi/Platypi-VariableFont_wght.woff2") format("woff2");font-display:swap}
@font-face{font-family:Fira;src:url("../public/assets/fonts/fira-sans/FiraSans-Regular.woff2") format("woff2");font-display:swap}
@font-face{font-family:Fira;src:url("../public/assets/fonts/fira-sans/FiraSans-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

:root {
  --stock: oklch(.965 .01 80);
  --paper: oklch(.985 0 0);
  --ink: oklch(.14 .02 25);
  --muted: oklch(.34 .02 25);
  --line: oklch(.78 .02 80);
  --blue: oklch(.48 .19 255);
  --red: oklch(.65 .21 30);
  --yellow: oklch(.8 .18 85);
  --teal: oklch(.72 .16 190);
  --spatial-blue: #1648ff;
  --spatial-red: #f04435;
  --spatial-yellow: #ffd734;
  --spatial-ink: #10100f;
  --spatial-paper: #fbfbf8;
  --spatial-cream: #f7ead0;
  --spatial-warm-cream: #f0d39b;
  --spatial-olive: #7b7d2e;
  --spatial-ochre: #d19032;
  --spatial-caramel: #9b6128;
  --spatial-time: #2f8f83;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --nav: 62px;
  color-scheme: light;
  font-family: Fira, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--stock); }

body {
  margin: 0;
  background:
    linear-gradient(90deg, color-mix(in oklch, var(--stock) 82%, var(--yellow)) 0 1px, transparent 1px 100%) 0 0 / 42px 42px,
    linear-gradient(0deg, color-mix(in oklch, var(--stock) 82%, var(--blue)) 0 1px, transparent 1px 100%) 0 0 / 42px 42px,
    var(--stock);
  color: var(--ink);
  min-width: 320px;
  transition: background .42s var(--ease), color .42s var(--ease);
}

body.detail-open { overflow: hidden; }

body.spatial-mode {
  background-color: #000;
  background-image: none;
  animation: spatial-black-fade .42s var(--ease) both;
}

@keyframes spatial-black-fade {
  from { background-color: #050504; }
  to { background-color: #000; }
}

a, button, input { font: inherit; color: inherit; }
a { text-decoration: none; }
button { cursor: pointer; }
img, video {
  display: block;
  max-width: 100%;
  user-select: none;
  -webkit-user-drag: none;
}
:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
mark { background: var(--yellow); color: var(--ink); padding: 0 .08em; }

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

.skip {
  position: fixed;
  z-index: 200;
  left: 1rem;
  top: 1rem;
  transform: translateY(-150%);
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1rem;
}

.skip:focus { transform: none; }

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  height: var(--nav);
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0 clamp(.75rem, 2vw, 1.5rem);
  border-bottom: 2px solid var(--ink);
  background: color-mix(in oklch, var(--stock) 88%, transparent);
  backdrop-filter: blur(18px);
  font-size: .75rem;
  text-transform: uppercase;
  font-weight: 600;
}

.brand {
  white-space: nowrap;
  font-family: Platypi, Georgia, serif;
  font-size: .96rem;
  text-transform: none;
}

.nav nav {
  display: flex;
  gap: .35rem;
  margin-left: auto;
}

.nav nav a {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  border: 2px solid transparent;
  border-radius: 999px;
  padding: .42rem .72rem;
}

.nav nav a:hover,
.nav nav a:focus-visible,
.nav nav a.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.nav .nav-work-cta {
  background: var(--yellow);
  color: var(--ink);
  border-color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
}

.work-shell {
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: calc(var(--nav) + clamp(1rem, 3vw, 2.4rem)) clamp(1rem, 3vw, 2.6rem) clamp(2rem, 4vw, 4rem);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  margin: 0;
  font-size: .68rem;
  line-height: 1.2;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--red);
}

.eyebrow-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  color: currentColor;
  opacity: .72;
}

.eyebrow-icon:before,
.eyebrow-icon:after {
  content: "";
  display: block;
  position: absolute;
  box-sizing: border-box;
}

.icon-work:before { inset: .1rem; border: 2px solid currentColor; border-radius: 3px; }
.icon-work:after { width: .42rem; height: .42rem; border-radius: 50%; background: currentColor; right: .03rem; top: .03rem; }

.work-explorer { margin-bottom: clamp(.65rem, 1.4vw, 1rem); }

body.spatial-mode .work-shell {
  position: relative;
  min-height: calc(100dvh - var(--nav));
  pointer-events: none;
}

body.spatial-mode .work-explorer,
body.spatial-mode .work-search-panel,
body.spatial-mode .spatial-stage,
body.spatial-mode .spatial-card {
  pointer-events: auto;
}

body.spatial-mode .work-explorer {
  position: relative;
  z-index: 4;
  display: grid;
  justify-items: start;
  gap: .55rem;
  width: min(1120px, calc(100% - 2rem));
  margin-inline: auto;
}

body.spatial-mode .work-search-panel {
  width: min(600px, 100%);
  margin: 0;
  gap: .58rem;
  padding: .76rem .9rem .82rem;
  background: color-mix(in oklch, var(--paper) 90%, transparent);
  backdrop-filter: blur(14px);
}

body.spatial-mode .work-search-panel h1 {
  max-width: calc(100% - 15.25rem);
  min-width: 12rem;
  line-height: 1.05;
  white-space: nowrap;
}

body.spatial-mode .results-head {
  display: none;
}

.work-search-panel,
.project-card {
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: color-mix(in oklch, var(--paper) 94%, white);
  box-shadow: 8px 8px 0 var(--ink);
}

.work-search-panel {
  position: relative;
  display: grid;
  gap: clamp(.7rem, 1.25vw, 1rem);
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(.8rem, 1.6vw, 1.1rem);
  transform-origin: top center;
}

.work-search-panel.is-collapsing-to-timeline {
  animation: search-panel-collapse .28s var(--ease) both;
}

.work-search-panel.is-collapsing-to-timeline .mode-panel--search {
  animation: search-controls-exit .24s var(--ease) both;
}

.work-mode-control {
  position: absolute;
  right: clamp(.8rem, 1.6vw, 1.1rem);
  top: clamp(.8rem, 1.6vw, 1.1rem);
  display: inline-flex;
  align-items: center;
  gap: .18rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  padding: .18rem;
}

.work-mode-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: .42rem .7rem;
  font-size: .76rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: background .24s var(--ease), color .24s var(--ease);
}

.work-mode-button:hover,
.work-mode-button:focus-visible {
  background: var(--yellow);
  color: var(--ink);
}

.work-mode-button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}

.mode-panel {
  display: grid;
  gap: clamp(.55rem, 1vw, .8rem);
  animation: mode-panel-enter .38s var(--ease) both;
}

.mode-panel--search {
  margin-top: clamp(.28rem, 1vw, .74rem);
}

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

@keyframes mode-panel-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes search-controls-exit {
  to {
    opacity: 0;
    transform: translateY(-10px) scaleY(.84);
    filter: blur(5px);
  }
}

@keyframes search-panel-collapse {
  to {
    clip-path: inset(0 0 48% 0 round 8px);
    transform: translateY(-4px) scaleY(.9);
    box-shadow: 5px 5px 0 var(--ink);
  }
}

h1 {
  font: 600 clamp(1.75rem, 3.2vw, 3.3rem)/.95 Platypi, Georgia, serif;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

.search-field {
  display: block;
  position: relative;
  width: min(980px, 100%);
  margin: 0;
}

.search-field input {
  width: 100%;
  min-height: 46px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  padding: 0 3.35rem 0 1.15rem;
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  box-shadow: 5px 5px 0 var(--ink);
  transition: box-shadow .24s var(--ease), transform .24s var(--ease);
}

.search-field__hint {
  position: absolute;
  z-index: 1;
  left: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - 4.8rem);
  overflow: hidden;
  color: color-mix(in oklch, var(--muted) 82%, white);
  font-size: clamp(1rem, 1.35vw, 1.14rem);
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
}

.search-field__hint:after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: .12rem;
  background: currentColor;
  transform: translateY(.13em);
  animation: hint-caret 1.1s steps(1, end) infinite;
}

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

@keyframes hint-caret {
  50% { opacity: 0; }
}

.search-field input:focus {
  outline: 0;
  transform: translateY(-2px);
  box-shadow: 7px 8px 0 var(--ink);
}

.search-field input::-webkit-search-cancel-button {
  appearance: none;
  display: none;
}

.search-field__clear {
  position: absolute;
  z-index: 2;
  right: .82rem;
  top: 50%;
  width: 28px;
  min-height: 28px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  transform: translateY(-50%);
  box-shadow: none;
}

.search-field__clear:before,
.search-field__clear:after {
  content: "";
  position: absolute;
  width: 13px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.search-field__clear:before { transform: rotate(45deg); }
.search-field__clear:after { transform: rotate(-45deg); }
.search-field__clear[hidden] { display: none; }

.suggestion-row,
.preset-row,
.active-filter-row,
.filter-pills,
.project-card__tags,
.detail-pills,
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.suggestion-row {
  position: absolute;
  z-index: 40;
  inset: calc(100% + .55rem) 0 auto 0;
  display: grid;
  gap: .35rem;
  max-height: min(330px, 58vh);
  overflow: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 6px 7px 0 var(--ink);
  padding: .55rem;
}

.suggestion-row[hidden] { display: none; }

.suggestion-chip,
.preset-chip,
.filter-pill,
.active-filter,
.filter-group-choice,
.add-filter-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  padding: .42rem .72rem;
  font-size: .82rem;
  font-weight: 600;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease), color .24s var(--ease);
}

.suggestion-chip {
  justify-content: space-between;
  width: 100%;
  border-radius: 6px;
  background: var(--paper);
  text-align: left;
}

.suggestion-chip:hover,
.suggestion-chip:focus-visible,
.preset-chip:hover,
.preset-chip:focus-visible,
.filter-pill:hover,
.filter-pill:focus-visible,
.active-filter:hover,
.active-filter:focus-visible,
.filter-group-choice:hover,
.filter-group-choice:focus-visible,
.add-filter-button:hover,
.add-filter-button:focus-visible {
  transform: none;
  box-shadow: 5px 5px 0 var(--ink);
}

.suggestion-chip b,
.preset-chip b,
.filter-pill b,
.active-filter b {
  font-size: .72rem;
  color: var(--muted);
}

.preset-chip.active,
.filter-pill.active,
.filter-group-choice.active,
.active-filter {
  background: var(--blue);
  color: white;
  box-shadow: 5px 5px 0 var(--ink);
}

.preset-chip.active b,
.filter-pill.active b,
.active-filter b { color: color-mix(in oklch, var(--paper) 72%, var(--yellow)); }

.active-search-state {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  border: 2px dashed var(--red);
  border-radius: 999px;
  background: var(--paper);
  padding: .42rem .72rem;
  color: var(--ink);
  font-size: .82rem;
  font-weight: 700;
}

.filter-builder {
  position: relative;
  z-index: 210;
  display: grid;
  gap: 0;
  align-items: start;
}

.filter-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.preset-row {
  flex: 0 1 auto;
  min-width: 0;
}

.add-filter-button {
  width: 36px;
  min-height: 36px;
  flex: 0 0 36px;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  padding: 0;
}

.filter-icon,
.filter-icon:before,
.filter-icon:after {
  content: "";
  display: block;
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .24s var(--ease), width .24s var(--ease), opacity .18s var(--ease);
}

.filter-icon {
  position: relative;
}

.filter-icon:before,
.filter-icon:after {
  position: absolute;
  left: 0;
}

.filter-icon:before {
  top: -6px;
  width: 11px;
}

.filter-icon:after {
  top: 6px;
  width: 7px;
}

.add-filter-button[aria-expanded="true"] .filter-icon {
  transform: rotate(45deg);
}

.add-filter-button[aria-expanded="true"] .filter-icon:before {
  width: 16px;
  transform: translateY(6px) rotate(90deg);
}

.add-filter-button[aria-expanded="true"] .filter-icon:after {
  opacity: 0;
  transform: translateY(-6px);
}

.filter-menu {
  position: absolute;
  z-index: 220;
  inset: calc(100% + .55rem) auto auto 0;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: .72rem;
  width: min(620px, calc(100vw - 2rem));
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 6px 7px 0 var(--ink);
  padding: .85rem;
  transform-origin: top left;
  animation: filter-menu-open .24s var(--ease) both;
}

.filter-menu[hidden] { display: none; }
.filter-menu__groups {
  display: grid;
  align-content: start;
  gap: .38rem;
}

.filter-menu__options,
.filter-options { min-width: 0; }

@keyframes filter-menu-open {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.filter-options__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .5rem;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
}

.filter-options__head b { color: var(--red); }

.filter-pills {
  max-height: 220px;
  overflow: auto;
  padding: .24rem .35rem .46rem .15rem;
  align-content: flex-start;
}

.filter-pill,
.active-filter {
  min-height: 31px;
  border-width: 1px;
  padding: .34rem .55rem;
  font-size: .76rem;
}

.results-head {
  display: flex;
  justify-content: flex-start;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: 0 .1rem;
}

.stats {
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.85rem, 1.7vw, 1.15rem);
}

.project-grid[hidden] { display: none; }

.project-card {
  display: grid;
  grid-template-rows: auto 1fr;
  min-width: 0;
  overflow: hidden;
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
}

.project-card:hover,
.project-card:focus-visible,
.project-card.selected {
  position: relative;
  z-index: 1;
  transform: translateY(-4px);
  box-shadow: 8px 9px 0 var(--ink);
}

.project-card.selected { background: var(--yellow); }

.project-card.selected .project-card__meta {
  color: var(--ink);
}

.project-card__media {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--blue), var(--red));
  border-bottom: 2px solid var(--ink);
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

.project-card--plain-media .project-card__media {
  background: white;
}

.project-card__media--npo-subs { aspect-ratio: 16 / 10; object-fit: cover; object-position: center bottom; }

.project-card__media--empty { min-height: 190px; }

.project-card__body {
  display: grid;
  gap: .72rem;
  padding: .9rem;
}

.project-card__meta {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  color: var(--red);
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.project-card h2 {
  font: 600 clamp(1.25rem, 1.8vw, 1.85rem)/1 Platypi, Georgia, serif;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

.project-card p {
  color: var(--muted);
  display: -webkit-box;
  font-size: .92rem;
  line-height: 1.45;
  max-height: calc(1.45em * 3);
  margin: 0;
  overflow: hidden;
  text-wrap: pretty;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.project-card__tags span,
.detail-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: .26rem .48rem;
  font-size: .72rem;
  font-weight: 700;
}

.detail-pills {
  gap: .3rem;
}

.detail-pills span {
  min-height: 22px;
  padding: .18rem .4rem;
  font-size: .66rem;
}

.empty {
  grid-column: 1 / -1;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  margin: 0;
  padding: 1rem;
  font-weight: 700;
}

.timeline {
  --timeline-tilt: 0deg;
  --timeline-wave: 0;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  min-height: clamp(740px, calc(100dvh - 120px), 860px);
  overflow: visible;
  animation: mode-panel-enter .38s var(--ease) both;
}

.timeline:before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, transparent 0 11px, color-mix(in oklch, var(--ink) 5%, transparent) 11px 12px, transparent 12px 100%),
    radial-gradient(circle at 50% 14%, color-mix(in oklch, var(--paper) 68%, transparent), transparent 48%);
  background-size: 100% 42px, 100% 100%;
  mask-image: linear-gradient(90deg, transparent, black 7vw, black 93vw, transparent);
}

body.spatial-mode .timeline:before {
  display: none;
}

.timeline-scroll {
  position: relative;
  width: 100%;
  min-height: clamp(740px, calc(100dvh - 120px), 860px);
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  overscroll-behavior-x: contain;
  padding: 0 clamp(1rem, 3vw, 3rem);
  scrollbar-color: var(--ink) color-mix(in oklch, var(--stock) 78%, var(--paper));
  scrollbar-width: thin;
  user-select: none;
  touch-action: pan-x;
}

.timeline-scroll.dragging {
  cursor: grabbing;
  user-select: none;
}

.timeline-track {
  position: relative;
  min-height: clamp(740px, calc(100dvh - 120px), 860px);
  perspective: 1250px;
  transform-style: preserve-3d;
}

.timeline-current-year {
  position: sticky;
  z-index: 13;
  left: 50%;
  top: 594px;
  display: inline-flex;
  width: max-content;
  min-width: 4.1rem;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-family: Platypi, Georgia, serif;
  font-size: 1.18rem;
  font-weight: 700;
  line-height: 1;
  background: var(--paper);
  border: 1px solid color-mix(in oklch, var(--ink) 18%, transparent);
  border-radius: 999px;
  padding: .22rem .52rem .26rem;
  box-shadow: 0 0 0 7px color-mix(in oklch, var(--paper) 86%, transparent);
  transform: translateX(-50%);
  pointer-events: none;
  white-space: nowrap;
}

.timeline-tick {
  --tick-pull: 0;
  --tick-shift: 0px;
  --tick-scale: 1;
  --tick-focus-scale: 0;
  --tick-delay: 0ms;
  --tick-center-wave: 0;
  --tick-hover-wave: 0;
  --tick-line-width: 1px;
  --tick-line-color: color-mix(in oklch, var(--ink) 30%, transparent);
  --tick-line-shadow: none;
  position: absolute;
  z-index: 3;
  top: 506px;
  width: 18px;
  height: 10px;
  margin-left: -9px;
  opacity: .58;
  background: transparent;
  transition: height .22s var(--ease), opacity .22s var(--ease);
}

.timeline-tick {
  z-index: 7;
  will-change: left, transform;
}

.timeline-tick:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: var(--tick-line-width);
  height: 100%;
  background: var(--tick-line-color);
  box-shadow: var(--tick-line-shadow);
  transform: translateX(-50%) translateY(calc(var(--tick-shift) - (3px * var(--tick-center-wave)) - (5px * var(--tick-hover-wave)))) scaleY(calc(var(--tick-scale) + var(--tick-focus-scale) + (.26 * var(--tick-center-wave)) + (.5 * var(--tick-hover-wave))));
  transform-origin: 50% 100%;
  transition: transform .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
  pointer-events: none;
}

.timeline-tick.quarter-month {
  height: 15px;
  opacity: .68;
  --tick-line-color: color-mix(in oklch, var(--ink) 38%, transparent);
}

.timeline-tick.half-month {
  height: 24px;
  opacity: .8;
  --tick-line-color: color-mix(in oklch, var(--ink) 48%, transparent);
}

.timeline-tick.month-start {
  --tick-line-width: 2px;
  height: 36px;
  opacity: .92;
  --tick-line-color: color-mix(in oklch, var(--ink) 62%, transparent);
}

.timeline-tick.year-start {
  --tick-line-width: 3px;
  height: 42px;
  opacity: 1;
  --tick-line-color: color-mix(in oklch, var(--ink) 72%, transparent);
  --tick-line-shadow: 0 0 0 4px color-mix(in oklch, var(--paper) 58%, transparent);
}

.timeline-tick.month-start:after {
  content: attr(data-month-label);
  position: absolute;
  left: 50%;
  bottom: -23px;
  color: color-mix(in oklch, var(--muted) 72%, var(--ink));
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  border-radius: 999px;
  padding: .14rem .24rem .16rem;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  transform: translateX(-50%);
}

.timeline-tick.year-start:after {
  content: attr(data-month-label);
  bottom: -23px;
  color: color-mix(in oklch, var(--muted) 72%, var(--ink));
  font-family: inherit;
  font-size: .68rem;
  font-weight: 700;
  text-transform: none;
}

.timeline-tick.year-start.is-near-current-year:after {
  content: none;
}

.timeline-tick.month-start.is-near-current-year:after {
  opacity: 0;
  transform: translateX(-50%) translateY(4px);
}

.timeline-tick.is-center-neighbor {
  opacity: calc(.62 + (.24 * var(--tick-center-wave)));
  --tick-line-color: color-mix(in oklch, var(--ink) calc(38% + (18% * var(--tick-center-wave))), transparent);
}

.timeline-tick.is-center-tick {
  --tick-focus-scale: .2;
  --tick-line-color: var(--ink);
  --tick-line-shadow: 0 0 0 3px color-mix(in oklch, var(--paper) 76%, transparent);
  opacity: 1;
}

.timeline-tick.is-hover-neighbor,
.timeline-tick.is-hover-focus {
  opacity: 1;
  --tick-line-color: color-mix(in oklch, var(--ink) calc(56% + (24% * var(--tick-hover-wave))), transparent);
}

.timeline-tick.is-hover-focus {
  --tick-line-color: var(--ink);
}

.timeline.is-tuning .timeline-tick:before {
  animation: timeline-radio-tick .36s var(--ease) both;
  animation-delay: var(--tick-delay);
}

@keyframes timeline-radio-tick {
  0% {
    transform: translateX(-50%) translateY(calc(var(--tick-shift) - (3px * var(--tick-center-wave)) - (5px * var(--tick-hover-wave)))) scaleY(calc(var(--tick-scale) + var(--tick-focus-scale) + (.26 * var(--tick-center-wave)) + (.5 * var(--tick-hover-wave))));
  }
  42% {
    transform: translateX(-50%) translateY(calc(var(--tick-shift) - (2px * var(--tick-pull)) - (4px * var(--tick-center-wave)) - (5px * var(--tick-hover-wave)))) scaleY(calc(var(--tick-scale) + var(--tick-focus-scale) + (.14 * var(--tick-pull)) + (.32 * var(--tick-center-wave)) + (.5 * var(--tick-hover-wave))));
    background: var(--ink);
  }
  100% {
    transform: translateX(-50%) translateY(calc(var(--tick-shift) - (3px * var(--tick-center-wave)) - (5px * var(--tick-hover-wave)))) scaleY(calc(var(--tick-scale) + var(--tick-focus-scale) + (.26 * var(--tick-center-wave)) + (.5 * var(--tick-hover-wave))));
  }
}

.timeline-date-group {
  position: absolute;
  top: 22px;
  width: calc((var(--timeline-card-width) * var(--timeline-group-count)) + (var(--timeline-card-gap) * (var(--timeline-group-count) - 1)));
  transform: translateX(-.5px);
}

.timeline-date-group__cards {
  display: flex;
  align-items: flex-start;
  gap: var(--timeline-card-gap);
}

.timeline-card {
  position: relative;
  width: var(--timeline-card-width);
  min-height: 430px;
  display: block;
  flex: 0 0 var(--timeline-card-width);
  overflow: visible;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  transform: translateZ(0) rotateX(var(--timeline-tilt));
  transform-origin: 50% 85%;
  transform-style: preserve-3d;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease);
  will-change: transform;
}

.timeline-card:hover,
.timeline-card:focus-visible,
.timeline-card.selected {
  z-index: 5;
  background: var(--paper);
  border-color: var(--ink);
  transform: translateY(-5px) translateZ(18px) rotateX(var(--timeline-tilt));
  box-shadow: 8px 9px 0 var(--ink);
}

.timeline-card__media-grid {
  position: relative;
  display: block;
  gap: 0;
  width: 100%;
  height: 430px;
  background: color-mix(in oklch, var(--stock) 50%, var(--paper));
  border-radius: 6px;
  overflow: hidden;
}

.timeline-card__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: color-mix(in oklch, var(--stock) 50%, var(--paper));
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none;
}

.timeline-card__media-grid .timeline-card__media {
  opacity: 1;
}

.timeline-card--plain-media .timeline-card__media-grid,
.timeline-card--plain-media .timeline-card__media {
  background: white;
}

.timeline-card__media--empty {
  width: 100%;
  height: 430px;
  background: color-mix(in oklch, var(--stock) 50%, var(--paper));
}

.timeline-card__copy {
  position: absolute;
  inset: auto .9rem 1rem .9rem;
  min-width: 0;
  display: grid;
  gap: .78rem;
  max-height: calc(100% - 1.8rem);
  overflow: visible;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  padding: .84rem .86rem .9rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}

.timeline-card:hover .timeline-card__copy,
.timeline-card:focus-visible .timeline-card__copy,
.timeline-card.selected .timeline-card__copy {
  opacity: 1;
  transform: translateY(0);
}

.timeline-card__copy h2 {
  margin: 0;
  font: 600 clamp(1.08rem, 1.32vw, 1.42rem)/1.08 Platypi, Georgia, serif;
  letter-spacing: 0;
  display: block;
  overflow-wrap: anywhere;
}

.timeline-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.timeline-card__tags span {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 24px;
  border: 1px solid color-mix(in oklch, var(--ink) 42%, transparent);
  border-radius: 999px;
  color: var(--muted);
  padding: .2rem .42rem;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.mode-panel--spatial {
  position: relative;
  width: min(760px, 100%);
  margin: 0;
  height: auto;
  min-height: 0;
  display: block;
  pointer-events: auto;
}

.spatial-toolbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  width: 100%;
  margin: 0;
  padding: 0;
}

.spatial-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: .42rem;
}

.spatial-filter,
.spatial-icon-button,
.spatial-open-detail {
  min-height: 38px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  padding: .42rem .7rem;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  transition: background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}

.spatial-filter--clients { --spatial-family-color: var(--spatial-olive); }
.spatial-filter--capabilities { --spatial-family-color: var(--spatial-ochre); }
.spatial-filter--tools { --spatial-family-color: var(--spatial-caramel); }
.spatial-filter--time { --spatial-family-color: var(--spatial-time); }
.spatial-filter--projects { --spatial-family-color: #f7ead0; }

.spatial-filter {
  background: var(--spatial-paper);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.spatial-filter__dot {
  width: .58rem;
  height: .58rem;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: var(--spatial-family-color, currentColor);
}

.spatial-filter:hover,
.spatial-filter:focus-visible,
.spatial-icon-button:hover,
.spatial-icon-button:focus-visible,
.spatial-open-detail:hover,
.spatial-open-detail:focus-visible {
  background: var(--spatial-paper);
  color: var(--spatial-ink);
  box-shadow: 5px 5px 0 var(--ink);
}

.spatial-filter:not(.active):hover,
.spatial-filter:not(.active):focus-visible {
  background: var(--spatial-paper);
}

.spatial-filter.active {
  background: var(--spatial-ink);
  color: var(--spatial-paper);
}

.spatial-filter--legend,
.spatial-filter--legend:hover,
.spatial-filter--legend:focus-visible {
  cursor: default;
  pointer-events: none;
  opacity: .78;
  background: var(--spatial-paper);
  color: var(--spatial-ink);
}

.spatial-view-actions {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.spatial-icon-button {
  position: relative;
  width: 40px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
}

.spatial-icon-button svg {
  width: 22px;
  height: 22px;
}

.spatial-stage {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: transparent;
  touch-action: none;
  overscroll-behavior: contain;
}

.spatial-stage--full {
  display: none;
}

body.spatial-mode .spatial-stage--full {
  position: fixed;
  z-index: 1;
  inset: var(--nav) 0 0 0;
  display: block;
  height: calc(100dvh - var(--nav));
  min-height: 420px;
}

.spatial-stage canvas {
  display: block;
  position: relative;
  z-index: 1;
  filter: saturate(.95) contrast(1.04);
}

.spatial-loader,
.spatial-fallback-message {
  position: absolute;
  inset: 50% auto auto 50%;
  display: inline-flex;
  align-items: center;
  gap: .46rem;
  min-height: 42px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 5px 5px 0 var(--ink);
  padding: .56rem .82rem;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.spatial-loader:before {
  content: "";
  width: .68rem;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-right-color: var(--yellow);
  border-radius: 50%;
  animation: spatial-loader-spin .8s linear infinite;
}

@keyframes spatial-loader-spin {
  to { transform: rotate(1turn); }
}

.spatial-fallback-message {
  display: grid;
  width: min(360px, calc(100% - 2rem));
  border-radius: 8px;
  text-transform: none;
}

.spatial-fallback {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  gap: .75rem;
  overflow: auto;
  padding: clamp(.8rem, 1.8vw, 1.2rem);
}

.spatial-fallback__note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 700;
}

.spatial-fallback__group {
  min-width: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  padding: .78rem;
}

.spatial-fallback__group h2 {
  margin: 0 0 .55rem;
  font: 600 1.1rem/1.08 Platypi, Georgia, serif;
}

.spatial-fallback__projects {
  display: grid;
  gap: .35rem;
}

.spatial-fallback__projects button {
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  min-height: 36px;
  border: 1px solid color-mix(in oklch, var(--ink) 42%, transparent);
  border-radius: 6px;
  background: var(--paper);
  padding: .36rem .48rem;
  text-align: left;
}

.spatial-card {
  position: fixed;
  z-index: 66;
  left: var(--spatial-card-left, clamp(1rem, 3vw, 2rem));
  top: var(--spatial-card-top, auto);
  bottom: auto;
  width: min(430px, calc(100vw - 2rem));
  max-height: min(560px, calc(100dvh - var(--nav) - 1.4rem));
  overflow: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  display: grid;
  gap: .72rem;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: color-mix(in oklch, var(--paper) 96%, white);
  box-shadow: 7px 7px 0 var(--ink);
  padding: .86rem;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}

.spatial-card--facet {
  width: min(340px, calc(100vw - 2rem));
}

.spatial-card[hidden] { display: none; }
.spatial-card.is-fading-out {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px) scale(.98);
}

.spatial-card__head,
.spatial-project-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
}

.spatial-node-kind {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: .18rem .46rem;
  background: var(--spatial-ink);
  color: var(--spatial-paper);
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
}

.spatial-node-kind--project { display: none; }

.spatial-node-kind--client,
.spatial-node-kind--capability,
.spatial-node-kind--tool,
.spatial-node-kind--period { background: var(--spatial-ink); color: var(--spatial-paper); }

.spatial-card__actions {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  margin-left: auto;
}

.spatial-card__close {
  position: relative;
  width: 30px;
  min-height: 30px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}

.spatial-card__close:before,
.spatial-card__close:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 13px;
  width: 12px;
  height: 2px;
  background: currentColor;
}

.spatial-card__close:before { transform: rotate(45deg); }
.spatial-card__close:after { transform: rotate(-45deg); }

.spatial-card h2 {
  margin: 0;
  font: 600 clamp(1.28rem, 2vw, 1.8rem)/1 Platypi, Georgia, serif;
}

.spatial-card p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  line-height: 1.42;
}

.spatial-project-card {
  align-items: stretch;
  flex-direction: column;
  justify-content: flex-start;
}

.spatial-project-card img,
.spatial-project-card video,
.spatial-project-card__fallback {
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 2px solid var(--ink);
  border-radius: 6px;
  background: var(--stock);
  object-fit: cover;
  overflow: hidden;
  user-select: none;
  -webkit-user-drag: none;
}

.spatial-project-card__fallback {
  display: grid;
  place-items: center;
  padding: 1rem;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 800;
  text-align: center;
}

.spatial-project-card p {
  margin: 0 0 .22rem;
  color: var(--muted);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
}

.spatial-card__list {
  display: grid;
  gap: .35rem;
  max-height: min(260px, 42dvh);
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: .18rem;
}

.spatial-card__more {
  display: grid;
  gap: .35rem;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height .24s var(--ease), opacity .2s var(--ease), transform .2s var(--ease);
}

.spatial-card__more.is-expanded {
  max-height: 320px;
  opacity: 1;
  transform: translateY(0);
}

.spatial-card__list button {
  min-height: 34px;
  border: 1px solid color-mix(in oklch, var(--ink) 38%, transparent);
  border-radius: 6px;
  background: var(--paper);
  padding: .34rem .48rem;
  text-align: left;
  font-size: .78rem;
  font-weight: 700;
}

.spatial-card__more-button {
  justify-self: start;
  min-height: 30px;
  border: 1px solid color-mix(in oklch, var(--ink) 38%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--paper) 92%, transparent);
  color: var(--ink);
  padding: .24rem .52rem;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.spatial-open-detail {
  justify-self: end;
  background: var(--spatial-ink);
  color: var(--spatial-paper);
  box-shadow: none;
  padding-inline: .78rem;
}

.spatial-open-detail:hover,
.spatial-open-detail:focus-visible {
  background: var(--spatial-paper);
  color: var(--spatial-ink);
  box-shadow: 3px 3px 0 var(--ink);
}

.spatial-hover-label {
  position: fixed;
  z-index: 67;
  left: var(--spatial-hover-left, -999px);
  top: var(--spatial-hover-top, -999px);
  max-width: min(260px, calc(100vw - 2rem));
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: color-mix(in oklch, var(--paper) 96%, white);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  padding: .48rem .58rem;
  pointer-events: none;
  text-align: center;
  transform: translate(-50%, -100%);
}

.spatial-hover-label strong {
  display: block;
  font: 600 .96rem/1 Platypi, Georgia, serif;
}

.spatial-hover-label small {
  display: block;
  margin-top: .14rem;
  color: var(--red);
  font-size: .62rem;
  font-weight: 900;
  text-transform: uppercase;
}

.spatial-hover-label[hidden] { display: none; }

.load-more-sentinel {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 5.5rem;
}

.load-more-button {
  min-height: 40px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
  padding: .5rem .82rem;
  font-size: .82rem;
  font-weight: 700;
}

.project-detail-shell {
  position: fixed;
  z-index: 70;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(420px, 52vw) minmax(0, 1fr);
  pointer-events: none;
}

.project-detail-shell[hidden] { display: none; }

.detail-backdrop {
  display: none;
  border: 0;
  background: transparent;
}

.project-detail {
  grid-column: 2;
  height: 100dvh;
  min-height: 100dvh;
  overflow: auto;
  overscroll-behavior: contain;
  border-left: 2px solid var(--ink);
  background: #fff;
  box-shadow: -10px 0 0 color-mix(in oklch, var(--ink) 10%, transparent);
  padding: calc(var(--nav) + clamp(1.6rem, 3vw, 2.7rem)) clamp(1rem, 3vw, 3.2rem) clamp(2rem, 4vw, 4rem);
  pointer-events: auto;
  animation: detail-pane-enter .48s var(--ease) both;
  will-change: transform, opacity;
}

.project-detail-shell.is-closing .project-detail {
  animation: none;
}

.project-detail-shell.is-closing {
  pointer-events: none;
}

@keyframes detail-pane-enter {
  from {
    opacity: 0;
    transform: translateX(42px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.project-detail__inner {
  display: grid;
  gap: clamp(1rem, 2vw, 2rem);
}

.detail-topbar {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 44px;
  margin: 0 0 clamp(1rem, 2.2vw, 1.9rem);
  padding: 0 0 .35rem;
  background: #fff;
}

.detail-close {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .18em;
  transition: color .24s var(--ease);
}

.detail-close:hover,
.detail-close:focus-visible {
  color: var(--red);
}

.project-detail__copy {
  min-height: 0;
  width: min(760px, 100%);
}

.detail-heading {
  display: grid;
  gap: clamp(.62rem, 1.1vw, .9rem);
}

.detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  color: var(--blue);
  font-size: .82rem;
  font-weight: 800;
  margin: 0 0 .08rem;
  text-transform: uppercase;
}

.detail-meta:empty {
  display: none;
}

.detail-status-dot {
  display: inline-block;
  flex: 0 0 auto;
  width: .62rem;
  height: .62rem;
  border: 1px solid color-mix(in oklch, var(--ink) 48%, transparent);
  border-radius: 50%;
  background: #9ca3af;
  box-shadow: 0 0 0 3px color-mix(in oklch, #9ca3af 18%, transparent);
}

.detail-status-dot--green { background: #34a853; box-shadow: 0 0 0 3px rgba(52,168,83,.14); }
.detail-status-dot--blue { background: #4285f4; box-shadow: 0 0 0 3px rgba(66,133,244,.14); }
.detail-status-dot--amber { background: #fbbc04; box-shadow: 0 0 0 3px rgba(251,188,4,.18); }
.detail-status-dot--gray,
.detail-status-dot--neutral { background: #9ca3af; }

.project-detail h2 {
  font: 600 clamp(2.65rem, 5.6vw, 5.9rem)/.93 Platypi, Georgia, serif;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}

.detail-description {
  color: var(--muted);
  font-size: clamp(1.02rem, 1.35vw, 1.22rem);
  line-height: 1.58;
  margin: clamp(1rem, 2vw, 1.8rem) 0 0;
  text-wrap: pretty;
}

.detail-description p {
  margin: 0 0 1em;
}

.detail-description p:last-child {
  margin-bottom: 0;
}

.detail-description ul {
  display: grid;
  gap: .44rem;
  margin: .4rem 0 1rem;
  padding-left: 1.2rem;
}

.detail-description li {
  padding-left: .15rem;
}

.detail-description strong {
  color: var(--ink);
  font-weight: 800;
}

.detail-description em {
  color: color-mix(in oklch, var(--ink) 78%, var(--blue));
}

.detail-section h3 {
  color: var(--ink);
  font-size: .68rem;
  font-weight: 800;
  margin: 0 0 .28rem;
  text-transform: uppercase;
}

.detail-section { margin-top: 0; }

.detail-section--role {
  margin-top: clamp(.9rem, 1.8vw, 1.5rem);
}

.detail-role {
  display: grid;
  gap: .38rem;
  margin: 0;
  padding-left: 1.15rem;
  color: var(--ink);
  font-size: clamp(.86rem, 1vw, .96rem);
  line-height: 1.48;
}

.detail-overview-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 0;
  margin-top: clamp(.75rem, 1.5vw, 1.1rem);
  border-block: 1px solid color-mix(in oklch, var(--ink) 16%, transparent);
}

.detail-overview-meta__group {
  min-width: 0;
  padding: .62rem clamp(.6rem, 1vw, .9rem);
}

.detail-overview-meta__group + .detail-overview-meta__group {
  border-left: 1px solid color-mix(in oklch, var(--ink) 16%, transparent);
}

.detail-overview-meta__group h3 {
  color: var(--ink);
  font-size: .68rem;
  font-weight: 800;
  margin: 0 0 .3rem;
  text-transform: uppercase;
}

.detail-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .26rem;
}

.detail-pills span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  border: 1px solid color-mix(in oklch, var(--ink) 36%, transparent);
  border-radius: 999px;
  color: var(--muted);
  padding: .22rem .48rem;
  font-size: .65rem;
  font-weight: 800;
  line-height: 1.08;
  overflow-wrap: anywhere;
  text-transform: uppercase;
}

.detail-pills .detail-pill--status {
  color: var(--ink);
  gap: .36rem;
}

.detail-pill--status .detail-status-dot {
  width: .56rem;
  height: .56rem;
  flex-basis: .56rem;
}

.detail-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: clamp(.78rem, 1.4vw, 1.15rem);
}

.detail-actions a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: .2rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  padding: .28rem 0;
  font-size: .88rem;
  font-weight: 800;
  text-decoration: none;
}

.detail-action__text {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: .18em;
}

.detail-action__arrow {
  display: inline-block;
  line-height: 1;
  transform: translateY(-.05em);
}

.detail-actions p,
.detail-assets__empty {
  color: var(--muted);
  margin: 0;
}

.detail-mobile-nav {
  display: none;
}

.detail-videos {
  display: grid;
  gap: clamp(.8rem, 1.5vw, 1.2rem);
}

.detail-video {
  margin: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--ink);
  overflow: hidden;
}

.detail-video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

.detail-assets {
  min-height: 0;
  margin-top: 0;
}

.detail-assets__scroller {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: start;
  gap: clamp(.9rem, 2.2vw, 2.2rem);
  min-height: 0;
  padding: .1rem 0 clamp(.2rem, 1vw, .6rem);
}

.detail-asset {
  display: grid;
  gap: .55rem;
  grid-column: span 6;
  min-width: 0;
  min-height: 0;
  margin: 0;
  background: transparent;
}

.detail-asset:nth-child(3n + 1) {
  grid-column: span 7;
}

.detail-asset:nth-child(3n + 2) {
  grid-column: 8 / span 4;
  margin-top: clamp(1.6rem, 4vw, 4.4rem);
}

.detail-asset:nth-child(3n) {
  grid-column: 3 / span 6;
}

.detail-asset img,
.detail-asset video {
  width: 100%;
  height: auto;
  min-height: 0;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: color-mix(in oklch, var(--stock) 64%, var(--paper));
  object-fit: contain;
}

.detail-asset__button {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
  text-align: inherit;
}

.detail-asset__button:hover img,
.detail-asset__button:hover video,
.detail-asset__button:focus-visible img,
.detail-asset__button:focus-visible video {
  box-shadow: 6px 6px 0 var(--ink);
}

.detail-asset video {
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.detail-asset figcaption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .7rem;
  color: var(--ink);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.asset-lightbox {
  position: fixed;
  z-index: 180;
  inset: 0;
  display: grid;
  place-items: center;
  padding: clamp(.8rem, 2vw, 1.4rem);
}

.asset-lightbox[hidden] {
  display: none;
}

.asset-lightbox__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in oklch, var(--ink) 72%, transparent);
}

.asset-lightbox__panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: .72rem;
  width: min(1120px, 96vw);
  max-height: 94dvh;
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 8px 8px 0 var(--ink);
  padding: clamp(.7rem, 1.4vw, 1rem);
}

.asset-lightbox__close {
  justify-self: end;
  min-height: 34px;
  border: 0;
  background: transparent;
  color: var(--ink);
  padding: .2rem 0;
  font-size: .84rem;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: .18em;
}

.asset-lightbox__media {
  display: grid;
  place-items: center;
  min-height: 0;
  overflow: auto;
}

.asset-lightbox__media img,
.asset-lightbox__media video {
  max-width: 100%;
  max-height: calc(94dvh - 8rem);
  border: 2px solid var(--ink);
  border-radius: 8px;
  background: color-mix(in oklch, var(--stock) 64%, var(--paper));
  object-fit: contain;
}

.asset-lightbox__media video {
  width: min(100%, 1080px);
  background: var(--ink);
}

.asset-lightbox__caption {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

body.detail-open .nav {
  box-shadow: none;
}

body.detail-open .work-shell {
  --left-pane-width: min(52vw, 780px);
  width: min(52vw, 780px);
  min-height: 100dvh;
  margin: 0;
  padding: calc(var(--nav) + 1rem) clamp(1rem, 2.4vw, 2rem) 2rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

body.detail-open:not(.spatial-mode) .work-search-panel,
body.detail-open .results-head {
  display: none;
}

body.detail-open.spatial-mode .work-shell {
  width: min(52vw, 780px);
  margin: 0;
  padding: calc(var(--nav) + clamp(1rem, 3vw, 2.4rem)) clamp(1rem, 3vw, 2.6rem) clamp(2rem, 4vw, 4rem);
  cursor: default;
  overflow: hidden;
  pointer-events: auto;
}

body.detail-open.spatial-mode .work-search-panel {
  max-width: none;
}

body.detail-open.spatial-mode.spatial-detail-card-open .work-search-panel,
body.detail-open.spatial-mode.spatial-detail-card-open .spatial-stage {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s var(--ease), visibility 0s linear .2s;
}

body.detail-open.detail-closing.spatial-mode.spatial-detail-card-open .work-search-panel,
body.detail-open.detail-closing.spatial-mode.spatial-detail-card-open .spatial-stage {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

body.detail-open.spatial-mode .results-head {
  display: flex;
  visibility: hidden;
}

body.detail-open.spatial-mode .work-mode-control,
body.detail-open.spatial-mode .spatial-toolbar {
  opacity: 0;
  pointer-events: none;
}

body.detail-open.spatial-mode .spatial-card:not(.is-detail-anchor) {
  opacity: 0;
  pointer-events: none;
}

body.detail-open.spatial-mode.spatial-detail-card-open .spatial-card.is-detail-anchor {
  z-index: 72;
  width: min(430px, calc(52vw - 2rem), calc(100vw - 2rem));
  max-height: min(620px, calc(100dvh - var(--nav) - 2rem));
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

body.detail-open.detail-closing.spatial-mode.spatial-detail-card-open .spatial-card.is-detail-anchor {
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px) scale(.99);
}

body.detail-open.spatial-mode.spatial-detail-card-open .spatial-card.is-detail-anchor .spatial-card__actions {
  display: none;
}

body.detail-open.spatial-mode.spatial-detail-card-open .spatial-card.is-detail-anchor [data-spatial-open-detail],
body.detail-open.spatial-mode.spatial-detail-card-open .spatial-card.is-detail-anchor [data-spatial-close] {
  display: none;
}

body.detail-open .project-grid {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: block;
  min-height: 0;
  width: 100vw;
  padding: 0;
  cursor: default;
  pointer-events: none;
}

body.detail-open .project-card {
  position: fixed;
  left: var(--detail-left);
  top: var(--detail-top);
  width: var(--detail-width);
  height: var(--detail-height);
  transform: translate(0, 0);
  opacity: 0;
  filter: saturate(.84) blur(2px);
  box-shadow: 5px 5px 0 var(--ink);
  pointer-events: none;
  transition: transform .34s var(--ease), opacity .24s var(--ease), filter .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
  will-change: transform, opacity;
}

body.detail-open .project-card:hover,
body.detail-open .project-card:focus-visible {
  transform: translate(0, 0);
}

body.detail-open .project-card.selected {
  opacity: 1;
  filter: none;
  box-shadow: 5px 5px 0 var(--ink);
  pointer-events: auto;
  transform: translate(var(--selected-move-x, 0px), var(--selected-move-y, 0px));
}

body.detail-open .project-card:not(.selected) {
  transform: translate(0, 0);
  animation: project-card-fade-out .24s var(--ease) both;
}

body.detail-open .timeline {
  position: fixed;
  inset: var(--nav) auto 0 0;
  z-index: 65;
  width: min(52vw, 780px);
  margin-left: 0;
  overflow: hidden;
  pointer-events: none;
}

body.detail-open .timeline-scroll {
  overflow: hidden;
  pointer-events: none;
}

body.detail-open .timeline-current-year,
body.detail-open .timeline-ticks,
body.detail-open .timeline-card:not(.selected) {
  opacity: 0;
  filter: saturate(.84) blur(2px);
  transition: opacity .24s var(--ease), filter .24s var(--ease);
}

body.detail-open .timeline-card.selected {
  z-index: 20;
  opacity: 1;
  filter: none;
  pointer-events: auto;
  transform: translate(var(--selected-timeline-move-x, 0px), var(--selected-timeline-move-y, 0px)) rotateX(0deg);
  box-shadow: 5px 5px 0 var(--ink);
}

body.detail-open .timeline-card.selected:hover,
body.detail-open .timeline-card.selected:focus-visible {
  transform: translate(var(--selected-timeline-move-x, 0px), var(--selected-timeline-move-y, 0px)) rotateX(0deg);
}

.project-grid.project-grid--closing .project-card:not(.selected) {
  animation: project-card-fade-in .24s var(--ease) both;
}

@keyframes project-card-fade-out {
  from {
    opacity: 1;
    filter: none;
  }
  to {
    opacity: 0;
    filter: saturate(.84) blur(2px);
  }
}

@keyframes project-card-fade-in {
  from {
    opacity: 0;
    filter: saturate(.84) blur(2px);
  }
  to {
    opacity: 1;
    filter: none;
  }
}

body.detail-open .site-footer {
  display: none;
}

.left-pane-close-hint {
  position: fixed;
  left: var(--close-x, -999px);
  top: var(--close-y, -999px);
  z-index: 90;
  border: 1px solid color-mix(in oklch, var(--ink) 42%, transparent);
  border-radius: 999px;
  background: color-mix(in oklch, var(--paper) 94%, white);
  color: var(--ink);
  box-shadow: 3px 3px 0 color-mix(in oklch, var(--ink) 82%, transparent);
  padding: .34rem .62rem;
  font-size: .72rem;
  font-weight: 800;
  opacity: 0;
  transform: translate(10px, 10px);
  transition: opacity .08s var(--ease), transform .08s var(--ease);
  pointer-events: none;
  text-transform: uppercase;
}

.left-pane-close-hint.is-visible {
  opacity: 1;
  transform: translate(12px, 12px);
  pointer-events: auto;
  cursor: pointer;
}

body.detail-restoring-scroll .work-shell {
  visibility: hidden;
}

.left-pane-nav {
  display: none;
}

body.detail-open .left-pane-nav {
  position: fixed;
  left: var(--left-pane-nav-x, calc(var(--left-pane-width) / 2));
  top: var(--left-pane-nav-y, auto);
  bottom: auto;
  z-index: 90;
  display: flex;
  gap: .45rem;
  opacity: 1;
  transform: translateX(-50%);
  transition: opacity .18s var(--ease), transform .24s var(--ease);
}

body.detail-open.spatial-mode .left-pane-nav,
body.detail-open.spatial-mode .detail-mobile-nav {
  display: none;
}

body.detail-closing .left-pane-nav {
  opacity: 0;
  pointer-events: none;
}

body.detail-closing .project-grid,
body.detail-closing .timeline {
  visibility: hidden;
}

.left-pane-nav__button {
  width: 44px;
  aspect-ratio: 1;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: transform .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease), color .24s var(--ease), opacity .24s var(--ease);
}

.left-pane-nav__button:hover,
.left-pane-nav__button:focus-visible {
  transform: none;
  box-shadow: 5px 6px 0 var(--ink);
  background: var(--yellow);
}

.left-pane-nav__button:disabled {
  cursor: default;
  opacity: .38;
  transform: none;
  box-shadow: none;
  background: color-mix(in oklch, var(--paper) 72%, var(--stock));
}


.site-footer {
  position: relative;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  flex-wrap: wrap;
  padding: 1.05rem clamp(1rem, 3vw, 2rem);
  border-top: 2px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-size: .86rem;
  line-height: 1;
}

body.spatial-mode .site-footer {
  display: none;
}

.site-footer > * + * {
  position: relative;
  padding-left: .9rem;
}

.site-footer > * + *:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.1em;
  background: color-mix(in oklch, var(--paper) 34%, transparent);
  transform: translateY(-50%);
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 1.25em;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.footer-links {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  line-height: 1;
}

.footer-links a + a {
  position: relative;
  padding-left: .9rem;
}

.footer-links a + a:before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 1.1em;
  background: color-mix(in oklch, var(--paper) 34%, transparent);
  transform: translateY(-50%);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--yellow);
}

.footer-character {
  width: 34px;
  aspect-ratio: 1;
  border: 2px solid var(--paper);
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--paper);
}

.footer-character img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1100px) {
  .project-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  :root { --nav: 58px; }
  .nav {
    padding: 0 .85rem;
    gap: .45rem;
  }
  .brand {
    min-width: 0;
    max-width: calc(100vw - 13rem);
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .nav nav a:not(.nav-work-cta) { display: none; }
  .audio-mood--mobile { display: none !important; }
  .work-shell { padding-inline: .85rem; }
  .work-search-panel,
  .project-card {
    box-shadow: 5px 5px 0 var(--ink);
  }
  h1 { font-size: clamp(1.75rem, 10vw, 2.8rem); }
  .work-mode-control {
    position: fixed;
    z-index: 92;
    top: .52rem;
    right: .65rem;
    width: min(12.4rem, calc(100vw - 7.15rem));
    min-height: 40px;
    justify-self: auto;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .mode-panel--search.suggestions-open .filter-builder {
    display: none;
  }
  .preset-row { min-width: 0; }
  .filter-menu { inset: calc(100% + .45rem) auto auto 0; }
  .timeline,
  .timeline-scroll,
  .timeline-track {
    min-height: 690px;
  }
  .timeline-scroll { padding-inline: .85rem; }
  .timeline-current-year { top: 548px; }
  .timeline-tick { top: 452px; }
  .timeline-date-group { top: 18px; }
  .timeline-tick { height: 8px; }
  .timeline-tick.quarter-month { height: 13px; }
  .timeline-tick.half-month { height: 21px; }
  .timeline-tick.month-start { height: 36px; }
  .timeline-tick.year-start { height: 50px; }
  .timeline-card {
    min-height: 374px;
  }
  .timeline-card__media-grid,
  .timeline-card__media--empty {
    height: 374px;
  }
  .timeline-card__copy {
    inset: auto .75rem .85rem .75rem;
    gap: .62rem;
    padding: .74rem .72rem .78rem;
  }
  .spatial-toolbar {
    align-items: flex-start;
    gap: .5rem;
    width: calc(100% - 1.7rem);
    flex-wrap: wrap;
  }
  .spatial-filter-strip {
    flex: 1 1 auto;
    gap: .34rem;
  }
  .spatial-filter {
    min-height: 34px;
    padding: .36rem .52rem;
    font-size: .66rem;
  }
  .spatial-icon-button {
    width: 34px;
    min-height: 34px;
  }
  .spatial-stage {
    height: 100%;
    min-height: 0;
    box-shadow: none;
    touch-action: none;
  }
  .spatial-card {
    left: .85rem;
    right: .85rem;
    top: auto;
    bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    max-height: min(54dvh, 430px);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 0 var(--ink);
  }
  .spatial-fallback {
    grid-template-columns: 1fr;
  }
  .project-grid { grid-template-columns: 1fr; }
  .project-card__meta {
    flex-direction: column;
    gap: .2rem;
  }
  .project-detail-shell {
    z-index: 100;
    display: block;
  }
  .project-detail {
    height: 100dvh;
    min-height: 100dvh;
    width: 100%;
    border-left: 0;
    box-shadow: none;
    padding: calc(var(--nav) + 1rem) .9rem 2.25rem;
  }
  .project-detail__inner { gap: 1.6rem; }
  .detail-topbar {
    margin: 0 0 1.2rem;
    padding: 0 0 .45rem;
  }
  .project-detail h2 {
    font-size: clamp(2.1rem, 13vw, 3.2rem);
  }
  .detail-description {
    font-size: 1rem;
    line-height: 1.54;
  }
  .detail-overview-meta {
    grid-template-columns: 1fr;
    gap: .7rem;
  }
  .detail-mobile-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
    margin-top: 1.25rem;
  }
  .detail-mobile-nav button {
    min-height: 40px;
    border: 2px solid var(--ink);
    border-radius: 999px;
    background: var(--paper);
    box-shadow: 3px 3px 0 var(--ink);
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  .detail-assets__scroller {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .detail-asset,
  .detail-asset:nth-child(3n + 1),
  .detail-asset:nth-child(3n + 2),
  .detail-asset:nth-child(3n) {
    grid-column: auto;
    margin-top: 0;
  }
  .detail-facts { grid-template-columns: 1fr; }
  body.detail-open .work-shell {
    display: none;
  }
  body.detail-open .left-pane-nav {
    display: none;
  }
  .left-pane-close-hint {
    display: none;
  }
  .site-footer { justify-content: flex-start; font-size: .8rem; }
  .footer-links { flex: 1 0 100%; gap: .38rem; font-size: .72rem; padding-left: 0!important; }
  .footer-links:before { display: none!important; }
  .footer-links a + a { padding-left: .5rem; }
  .footer-character { width: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .project-detail {
    animation: none;
    will-change: auto;
    transform: none;
  }

  .mode-panel {
    animation: none;
    filter: none;
  }

  .timeline-card,
  .timeline-card:hover,
  .timeline-card:focus-visible,
  .timeline-card.selected,
  body.detail-open .project-card,
  body.detail-open .project-card:hover,
  body.detail-open .project-card:focus-visible,
  body.detail-open .project-card.selected {
    transform: none;
    animation: none;
  }

  *, *:before, *:after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* v6.2 final QA pass */
.skip,
.nav nav a,
.work-mode-control,
.work-mode-button,
.suggestion-chip,
.preset-chip,
.filter-pill,
.active-filter,
.filter-group-choice,
.add-filter-button,
.load-more-button,
.detail-close,
.detail-actions a,
.asset-lightbox__close,
.site-footer a {
  min-height: 44px;
}

.add-filter-button {
  width: 44px;
  flex-basis: 44px;
}

.site-footer a {
  min-height: 1.25em;
}

.filter-menu {
  max-height: min(420px, calc(100dvh - var(--nav) - 2rem));
  overflow: auto;
  overscroll-behavior: contain;
}

.filter-menu__groups,
.filter-menu__options {
  min-height: 0;
}

.filter-pills {
  max-height: min(260px, calc(100dvh - var(--nav) - 9rem));
}

.detail-mobile-nav button {
  min-height: 44px;
}

@media (max-width: 980px) and (max-height: 560px) and (orientation: landscape) {
  .filter-menu {
    position: fixed;
    inset: calc(var(--nav) + .7rem) .85rem .7rem .85rem;
    width: auto;
    max-height: none;
    grid-template-columns: minmax(106px, .42fr) minmax(0, 1fr);
    align-content: start;
    overflow: auto;
  }

  .filter-menu__groups {
    position: sticky;
    top: 0;
  }

  .filter-pills {
    max-height: none;
  }
}

/* Mobile Safari review cleanup */
.detail-action__icon{width:1rem;height:1rem;flex:0 0 1rem}
.detail-action__arrow{display:none}
.detail-actions a,
.detail-mobile-nav button,
.left-pane-nav__button,
.work-mode-button,
.preset-chip,
.add-filter-button{touch-action:manipulation;-webkit-user-select:none;user-select:none}
.detail-mobile-nav button:disabled{opacity:.38;cursor:default;box-shadow:none;background:color-mix(in oklch,var(--paper) 72%,var(--stock))}

@media (max-width:780px){
  .nav nav{display:none}
  .work-shell{padding:calc(var(--nav) + 1rem) .85rem 2.4rem}
  .work-mode-control{position:fixed;z-index:90;right:.85rem;top:9px;min-height:40px;max-width:calc(100vw - 8.8rem);width:fit-content;box-shadow:none}
  .work-mode-button{min-height:34px;padding:.38rem .5rem;font-size:.66rem}
  body.timeline-mode .work-search-panel{padding:.72rem .78rem;overflow:visible}
  body.timeline-mode .work-search-panel .eyebrow{display:none}
  body.timeline-mode h1{font-size:clamp(2rem,11vw,3rem);line-height:1;max-width:calc(100vw - 2rem);padding-right:0}
  body.timeline-mode .work-mode-control,
  body.spatial-mode .work-mode-control{font-size:.68rem;max-width:calc(100vw - 8.8rem);text-align:center}
  .work-search-panel{gap:.95rem}
  .mode-panel{gap:.95rem}
  .mode-panel--search{margin-top:.65rem}
  .filter-builder{margin-top:.1rem}
  .filter-toolbar{flex-wrap:nowrap;align-items:flex-start}
  .preset-row{flex:1 1 auto;min-width:0;flex-wrap:nowrap;overflow-x:auto;padding:0 .1rem .35rem 0;scroll-padding-inline:.25rem;-webkit-overflow-scrolling:touch}
  .preset-chip{flex:0 0 auto}
  .active-filter-row{order:3;flex:1 0 100%}
  .timeline,.timeline-scroll,.timeline-track{min-height:620px}
  .timeline-scroll{padding-inline:.85rem;scroll-snap-type:x proximity;scroll-padding-inline:1rem;-webkit-overflow-scrolling:touch}
  .timeline-current-year{top:458px}
  .timeline-tick{top:368px}
  .timeline-card{min-height:330px;scroll-snap-align:center}
  .timeline-card__media-grid,.timeline-card__media--empty{height:330px}
  .timeline-card__copy{opacity:1;transform:none;pointer-events:auto}
  .project-card__meta{flex-direction:row;align-items:baseline;gap:.5rem;white-space:nowrap;font-size:.66rem}
  .project-card__meta span{min-width:0;overflow:hidden;text-overflow:ellipsis}
  .project-detail{padding:1rem .9rem calc(9.5rem + env(safe-area-inset-bottom,0px))}
  .project-detail__inner{gap:1.15rem}
  .detail-topbar{margin:0 0 .65rem;padding:0 0 .25rem}
  .project-detail h2{font-size:clamp(1.95rem,11vw,2.8rem);line-height:.95}
  .detail-description{margin-top:.78rem;font-size:.95rem;line-height:1.45}
  .detail-section--role{margin-top:.8rem}
  .detail-role{gap:.28rem;font-size:.86rem;line-height:1.38}
  .detail-overview-meta{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:.7rem}
  .detail-overview-meta__group{padding:.48rem .52rem}
  .detail-overview-meta__group + .detail-overview-meta__group{border-left:0}
  .detail-overview-meta__group:nth-child(2n){border-left:1px solid color-mix(in oklch,var(--ink) 16%,transparent)}
  .detail-pills span{min-height:21px;padding:.16rem .34rem;font-size:.6rem}
  .detail-mobile-nav{position:fixed;left:.9rem;right:.9rem;bottom:max(.55rem,env(safe-area-inset-bottom,0px));z-index:130;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0;padding:.32rem;border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
  .detail-mobile-nav button{min-height:36px}
}

@media (max-width:480px){
  .work-mode-control{max-width:calc(100vw - 8.2rem)}
  .work-mode-button{font-size:.62rem;padding-inline:.4rem}
  .work-search-panel{padding:.78rem}
  .preset-chip{font-size:.76rem;padding-inline:.58rem}
  .project-card__body{gap:.58rem;padding:.78rem}
  .project-card h2{font-size:clamp(1.18rem,7vw,1.62rem)}
  .project-card p{font-size:.86rem;-webkit-line-clamp:2;max-height:calc(1.4em * 2)}
  .timeline,.timeline-scroll,.timeline-track{min-height:590px}
  .timeline-current-year{top:418px}
  .timeline-tick{top:330px}
  .timeline-card{min-height:300px}
  .timeline-card__media-grid,.timeline-card__media--empty{height:300px}
  .timeline-card__copy h2{font-size:1.05rem}
  .timeline-card__tags span{font-size:.6rem;min-height:21px}
}

/* v6.2 mobile correction pass */
@media (max-width:780px){
  .work-search-panel{overflow:visible}
  .mode-panel--search{width:100%;min-width:0}
  .search-field{width:100%;min-width:0}
  .filter-builder{min-width:0}
  .filter-toolbar{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:start;gap:.5rem}
  .preset-row{grid-column:1 / -1;display:flex;min-width:0;max-width:100%;overflow:visible;flex-wrap:wrap;padding:0 3.25rem .12rem 0}
  .active-filter-row{grid-column:1 / -1;order:initial;min-width:0}
  .add-filter-button{grid-column:2;grid-row:1;align-self:start;justify-self:end}
  .filter-menu{left:0;right:0;width:auto;max-width:100%;grid-template-columns:1fr;max-height:min(460px,calc(100dvh - var(--nav) - 3rem))}

  body.timeline-mode .work-search-panel .eyebrow{display:inline-flex}
  body.timeline-mode h1{font:600 clamp(1.75rem,10vw,2.8rem)/.95 Platypi,Georgia,serif;letter-spacing:0;max-width:none;padding-right:0}

  .timeline,.timeline-scroll,.timeline-track{min-height:690px}
  .timeline-current-year{top:526px}
  .timeline-tick{top:438px}
  .timeline-date-group{top:22px}
  .timeline-card{min-height:382px;transform:none!important;transition:box-shadow .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
  .timeline-card:hover,
  .timeline-card:focus-visible,
  .timeline-card.selected{transform:none!important;box-shadow:5px 5px 0 var(--ink)}
  .timeline-card__media-grid,
  .timeline-card__media--empty{height:382px}

  .project-detail{padding:calc(var(--nav) + .75rem) .9rem calc(7.2rem + env(safe-area-inset-bottom,0px))}
  .project-detail__inner{padding-bottom:calc(6.2rem + env(safe-area-inset-bottom,0px))}
  .detail-assets__scroller{padding-bottom:calc(6.8rem + env(safe-area-inset-bottom,0px))}
  .detail-mobile-nav{position:fixed;left:.85rem;right:.85rem;bottom:calc(.6rem + env(safe-area-inset-bottom,0px));z-index:160;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin:0;padding:.34rem;border:2px solid var(--ink);border-radius:999px;background:#fff;box-shadow:3px 3px 0 var(--ink)}
  .detail-mobile-nav button{min-height:40px}
}

@media (max-width:480px){
  .filter-toolbar{grid-template-columns:minmax(0,1fr) 42px}
  .add-filter-button{width:42px;flex-basis:42px}
  .preset-chip{max-width:74vw}
  .timeline,.timeline-scroll,.timeline-track{min-height:660px}
  .timeline-current-year{top:500px}
  .timeline-tick{top:412px}
  .timeline-card{min-height:354px}
  .timeline-card__media-grid,
  .timeline-card__media--empty{height:354px}
}

/* v6.2 focused mobile correction pass 3 */
@media (max-width:780px){
  .filter-toolbar{
    display:flex;
    align-items:center;
    gap:.5rem;
    flex-wrap:wrap;
  }
  .preset-row{
    display:contents;
  }
  .preset-chip{
    flex:0 0 auto;
    max-width:none;
  }
  .add-filter-button{
    order:2;
    grid-column:auto;
    grid-row:auto;
    align-self:center;
    justify-self:auto;
  }
  .active-filter-row{
    order:3;
    flex:1 0 100%;
    min-width:0;
  }
  body.timeline-mode .results-head{
    display:none;
  }
  body.spatial-mode .results-head{
    display:none;
  }
  body.timeline-mode .work-explorer{
    margin-bottom:.28rem;
  }
  body.spatial-mode .work-explorer{
    margin-bottom:.28rem;
    width:min(100% - 1.4rem, 720px);
  }
  body.spatial-mode .work-search-panel h1{
    max-width:none;
    min-width:0;
    white-space:normal;
  }
  body.spatial-mode .work-mode-control{
    position:static;
    justify-self:start;
    max-width:100%;
    width:max-content;
  }
  body.timeline-mode .timeline,
  body.timeline-mode .timeline-scroll,
  body.timeline-mode .timeline-track{
    min-height:650px;
  }
  body.timeline-mode .timeline-current-year{top:506px}
  body.timeline-mode .timeline-tick{top:418px}
  body.spatial-mode .mode-panel--spatial{height:auto}
  body.spatial-mode .spatial-stage--full{height:calc(100dvh - var(--nav));min-height:420px}
  .project-detail{
    transform:none!important;
    animation:none!important;
    padding:.78rem .9rem calc(7.4rem + env(safe-area-inset-bottom,0px));
  }
  .project-detail__inner{
    gap:1rem;
    padding-bottom:calc(6.4rem + env(safe-area-inset-bottom,0px));
  }
  .detail-topbar{
    min-height:40px;
    margin:0 0 .48rem;
    padding:0 0 .2rem;
  }
  .detail-heading{gap:.5rem}
  .detail-description{
    margin-top:.64rem;
    line-height:1.48;
  }
  .detail-section--role{margin-top:.92rem}
  .detail-overview-meta{margin-top:.82rem}
  .detail-mobile-nav{
    position:fixed;
    left:.85rem;
    right:.85rem;
    bottom:calc(.6rem + env(safe-area-inset-bottom,0px));
    z-index:180;
  }
}

@media (max-width:480px){
  body.timeline-mode .timeline,
  body.timeline-mode .timeline-scroll,
  body.timeline-mode .timeline-track{
    min-height:624px;
  }
  body.timeline-mode .timeline-current-year{top:478px}
  body.timeline-mode .timeline-tick{top:392px}
}

/* v6.2 final mobile/work correction pass 4 */
.filter-menu{z-index:140;grid-template-columns:1fr;width:min(560px,calc(100vw - 2rem));gap:.56rem}
.filter-menu__groups{display:flex;flex-wrap:nowrap;gap:.32rem;overflow-x:auto;padding-bottom:.14rem;-webkit-overflow-scrolling:touch}
.filter-group-choice{flex:0 0 auto;min-height:30px;border-width:1px;padding:.28rem .48rem;font-size:.7rem}
.timeline-current-year{top:604px}

@media (max-width:780px){
  .filter-menu{left:0;right:0;width:auto;max-width:100%;grid-template-columns:1fr;max-height:min(420px,calc(100dvh - var(--nav) - 3rem))}
  .filter-menu__groups{display:flex;flex-wrap:nowrap;gap:0;overflow-x:auto;padding:0 .15rem;border:1px solid var(--ink);border-radius:8px;background:color-mix(in oklch,var(--ink) 7%,var(--paper))}
  .filter-options__head{display:none}
  .filter-group-choice{min-height:32px;border:0;border-right:1px solid color-mix(in oklch,var(--ink) 22%,transparent);border-radius:0;background:transparent;box-shadow:none;padding:.36rem .62rem;font-size:.68rem}
  .filter-group-choice:first-child{border-radius:6px 0 0 6px}
  .filter-group-choice:last-child{border-right:0;border-radius:0 6px 6px 0}
  .filter-group-choice.active{background:var(--paper);color:var(--ink);box-shadow:inset 0 -3px 0 var(--blue)}
  .filter-group-choice:hover,
  .filter-group-choice:focus-visible{box-shadow:inset 0 -3px 0 var(--ink);transform:none}
  .project-detail-shell{pointer-events:auto}
  .detail-mobile-nav{z-index:220;pointer-events:auto}
  .detail-mobile-nav button{position:relative;z-index:1;pointer-events:auto;touch-action:manipulation}
  body.timeline-mode .timeline-current-year{top:516px}
}

/* v6.2 final QA scoped fixes */
.filter-menu__groups{
  display:flex;
  flex-wrap:nowrap;
  gap:.18rem;
  overflow-x:auto;
  padding:.22rem;
  border:1px solid color-mix(in oklch,var(--ink) 20%,transparent);
  border-radius:8px;
  background:color-mix(in oklch,var(--ink) 7%,var(--paper));
  box-shadow:inset 0 1px 0 color-mix(in oklch,var(--paper) 82%,transparent);
  -webkit-overflow-scrolling:touch;
}

.filter-group-choice,
.filter-group-choice:first-child,
.filter-group-choice:last-child{
  flex:1 0 max-content;
  justify-content:center;
  min-height:40px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:color-mix(in oklch,var(--ink) 72%,var(--muted));
  box-shadow:none;
  padding:.44rem .72rem;
  font-size:.76rem;
  line-height:1;
  white-space:nowrap;
}

.filter-group-choice.active{
  background:var(--paper);
  color:var(--ink);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ink) 14%,transparent),0 1px 2px rgba(16,16,15,.08);
}

.filter-group-choice:hover,
.filter-group-choice:focus-visible{
  transform:none;
  background:color-mix(in oklch,var(--paper) 72%,transparent);
  box-shadow:none;
}

.filter-group-choice.active:hover,
.filter-group-choice.active:focus-visible{
  background:var(--paper);
  box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--ink) 14%,transparent),0 1px 2px rgba(16,16,15,.08);
}

.add-filter-button[aria-expanded="true"]{
  box-shadow:5px 5px 0 var(--ink);
}

@media (hover:none){
  .add-filter-button[aria-expanded="false"],
  .add-filter-button[aria-expanded="false"]:hover,
  .add-filter-button[aria-expanded="false"]:focus-visible{
    box-shadow:none;
    transform:none;
  }
}

@media (max-width:780px){
  .filter-menu__groups{
    gap:.2rem;
    padding:.24rem;
  }

  .filter-group-choice,
  .filter-group-choice:first-child,
  .filter-group-choice:last-child{
    flex:0 0 auto;
    min-height:42px;
    padding:.52rem .78rem;
    font-size:.78rem;
  }
}

@media (max-width:480px){
  body.timeline-mode .timeline-current-year{top:488px}
}

body.detail-open.spatial-mode .left-pane-nav,
body.detail-open.spatial-mode .detail-mobile-nav {
  display: none;
}

/* v7 gated audio moods */
.audio-mood{position:relative;display:inline-flex;align-items:center;margin-inline:.12rem}
.audio-mood--mobile{display:none}
.audio-mood__toggle{position:relative;overflow:hidden;width:38px;min-width:38px;height:38px;display:inline-grid;place-items:center;border:2px solid var(--ink);border-radius:999px;background:var(--audio-toggle-bg,var(--paper));color:var(--audio-toggle-color,var(--ink));padding:0;box-shadow:none}
.audio-mood__toggle:hover,.audio-mood__toggle:focus-visible{color:var(--paper);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.audio-mood__art{position:absolute;inset:0;border-radius:inherit;background:var(--audio-cover) center/cover no-repeat;opacity:0;transition:opacity .18s var(--ease)}
.audio-mood__toggle:hover .audio-mood__art,.audio-mood__toggle:focus-visible .audio-mood__art{opacity:1}
.audio-mood__icon{position:relative;width:21px;height:21px;z-index:1;transition:opacity .18s var(--ease)}
.audio-mood__icon path{fill:currentColor}
.audio-mood__play-state,.audio-track__play-state{position:absolute;inset:0;z-index:2;display:grid;place-items:center;opacity:0;background:color-mix(in oklch,var(--ink) 48%,transparent);color:var(--paper);transition:opacity .18s var(--ease)}
.audio-mood__play-state{border-radius:inherit}
.audio-mood__play-state:before,.audio-track__play-state:before{content:"";width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:11px solid currentColor;transform:translateX(1px)}
.audio-track.is-playing .audio-track__play-state:before{width:8px;height:14px;border:0;border-left:3px solid currentColor;border-right:3px solid currentColor;transform:none}
.audio-mood.is-playing .audio-mood__play-state{display:flex;align-items:center;justify-content:center;opacity:1;background:radial-gradient(circle at 50% 52%,color-mix(in oklch,var(--ink) 58%,transparent),color-mix(in oklch,var(--ink) 26%,transparent) 58%,transparent 100%);padding:0}
.audio-mood.is-playing .audio-mood__play-state:before{display:none}
.audio-mood.is-playing .audio-mood__icon{opacity:0}
.audio-bars{display:none;align-items:center;justify-content:center;gap:2px;width:22px;height:18px;margin:auto}
.audio-bars i{display:block;width:3px;height:8px;border-radius:999px;background:currentColor;transform-origin:50% 50%;animation:audio-mood-bars .72s var(--ease) infinite}
.audio-bars i:nth-child(2){animation-delay:-.19s}
.audio-bars i:nth-child(3){animation-delay:-.38s}
.audio-bars i:nth-child(4){animation-delay:-.11s}
.audio-mood.is-playing .audio-bars{display:flex}
@keyframes audio-mood-bars{0%,100%{height:7px;opacity:.72}22%{height:16px;opacity:1}48%{height:10px;opacity:.86}72%{height:18px;opacity:1}}
.audio-mood__toggle:hover .audio-mood__icon,.audio-mood__toggle:focus-visible .audio-mood__icon{opacity:0}
.audio-mood__toggle:hover .audio-mood__play-state,.audio-mood__toggle:focus-visible .audio-mood__play-state{opacity:1}
.audio-mood__panel{position:absolute;right:0;top:calc(100% + .7rem);z-index:120;width:min(320px,calc(100vw - 1.6rem));padding:.7rem;border:2px solid var(--ink);border-radius:8px;background:var(--paper);color:var(--ink);box-shadow:7px 7px 0 var(--ink);text-transform:none;font-weight:600}
.audio-mood__panel[hidden]{display:none}
.audio-mood__head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.55rem;text-transform:uppercase;font-size:.72rem}
.audio-mood__head button{width:34px;height:34px;border:2px solid var(--ink);border-radius:50%;background:var(--yellow);position:relative}
.audio-mood__head button:before,.audio-mood__head button:after{content:"";position:absolute;left:9px;right:9px;top:15px;height:2px;background:var(--ink)}
.audio-mood__head button:before{transform:rotate(45deg)}.audio-mood__head button:after{transform:rotate(-45deg)}
.audio-mood--desktop .audio-mood__head button{display:none}
.audio-track-list{display:grid;gap:.5rem}
.audio-track{display:grid;grid-template-columns:52px minmax(0,1fr);align-items:center;gap:.68rem;width:100%;min-height:78px;border:2px solid var(--ink);border-radius:8px;background:var(--stock);padding:.5rem .62rem;text-align:left}
.audio-track:hover,.audio-track:focus-visible,.audio-track.active{background:var(--yellow);box-shadow:3px 3px 0 var(--ink);transform:translate(-1px,-1px)}
.audio-track__art{position:relative;display:block;width:52px;height:52px;overflow:hidden;border:2px solid var(--ink);border-radius:5px;background:var(--paper)}
.audio-track img{display:block;width:100%;height:100%;object-fit:cover}

/* v7 work archive layout/audio pass */
body {
  background: var(--stock);
}

body.spatial-mode {
  background: #000;
}

.work-shell {
  padding-top: calc(var(--nav) + clamp(1rem, 2.2vw, 1.65rem));
}

.work-explorer {
  display: grid;
  gap: clamp(.55rem, 1vw, .82rem);
  width: min(1120px, 100%);
  margin: 0 auto clamp(.7rem, 1.35vw, 1rem);
}

.work-search-panel {
  width: 100%;
  max-width: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "eyebrow mode"
    "title mode"
    "search search"
    "stats stats";
  align-items: start;
  column-gap: clamp(.8rem, 1.8vw, 1.4rem);
  row-gap: clamp(.45rem, .85vw, .72rem);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.work-search-panel .eyebrow {
  grid-area: eyebrow;
}

.work-search-panel h1 {
  grid-area: title;
  font-size: clamp(2rem, 3vw, 3.05rem);
  line-height: .96;
}

.work-mode-control {
  position: static;
  grid-area: mode;
  align-self: center;
  justify-self: end;
}

.mode-panel--search {
  grid-area: search;
  margin-top: clamp(.25rem, .8vw, .55rem);
}

.results-head {
  grid-area: stats;
  width: 100%;
  margin: 0;
}

.search-field {
  width: min(900px, 100%);
}

.filter-toolbar {
  max-width: min(980px, 100%);
}

.project-grid {
  width: min(1120px, 100%);
  margin: 0 auto;
}

.mode-panel--timeline {
  margin-top: clamp(.35rem, 1vw, .75rem);
}

.timeline {
  min-height: clamp(690px, calc(100dvh - 132px), 830px);
}

.timeline-scroll,
.timeline-track {
  min-height: clamp(690px, calc(100dvh - 132px), 830px);
}

.timeline-date-group {
  top: 10px;
}

.timeline-current-year {
  top: 570px;
}

.timeline-tick {
  top: 482px;
}

body.timeline-mode .work-explorer {
  margin-bottom: 0;
}

body.timeline-mode .results-head,
body.spatial-mode .results-head {
  display: none;
}

body.spatial-mode .work-shell {
  width: min(1440px, 100%);
  padding-top: calc(var(--nav) + clamp(1rem, 2.2vw, 1.65rem));
}

body.spatial-mode .work-explorer {
  position: relative;
  z-index: 4;
  width: min(1120px, calc(100% - 2rem));
  margin: 0 auto;
  justify-items: stretch;
  isolation: isolate;
}

body.spatial-mode .work-explorer::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: clamp(-.8rem, -1vw, -.45rem) clamp(-1rem, -1.4vw, -.55rem) -2.4rem;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, .18) 58%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse at 18% 18%, rgba(247, 234, 208, .08), transparent 58%);
}

body.spatial-mode .work-search-panel {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  backdrop-filter: none;
  color: var(--spatial-paper);
}

body.spatial-mode .work-search-panel h1 {
  max-width: none;
  min-width: 0;
  color: var(--spatial-paper);
  white-space: normal;
}

body.spatial-mode .work-search-panel .eyebrow {
  color: var(--spatial-yellow);
}

body.spatial-mode .work-mode-control {
  border-color: color-mix(in oklch, var(--spatial-paper) 85%, transparent);
  background: color-mix(in oklch, var(--spatial-paper) 96%, transparent);
  box-shadow: none;
}

body.spatial-mode .work-mode-button[aria-pressed="true"] {
  background: var(--spatial-ink);
  color: var(--spatial-paper);
}

body.spatial-mode .mode-panel--spatial {
  width: min(880px, 100%);
}

body.spatial-mode .spatial-toolbar {
  justify-content: flex-start;
  align-items: flex-start;
  gap: .55rem;
}

.spatial-filter-strip {
  max-width: min(760px, 100%);
}

.spatial-filter {
  background: var(--spatial-ink);
  color: var(--spatial-paper);
  border-color: var(--spatial-paper);
  box-shadow: none;
}

.spatial-filter.active {
  background: var(--spatial-paper);
  color: var(--spatial-ink);
  border-color: var(--spatial-paper);
  box-shadow: none;
}

.spatial-filter:hover,
.spatial-filter:focus-visible,
.spatial-filter:not(.active):hover,
.spatial-filter:not(.active):focus-visible {
  background: var(--spatial-paper);
  color: var(--spatial-ink);
  border-color: var(--spatial-paper);
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--spatial-paper) 30%, transparent);
}

.spatial-filter.active:hover,
.spatial-filter.active:focus-visible {
  background: var(--spatial-paper);
  color: var(--spatial-ink);
}

body.spatial-mode .spatial-icon-button {
  border-color: var(--spatial-paper);
  background: transparent;
  color: var(--spatial-paper);
  box-shadow: none;
}

body.spatial-mode .spatial-icon-button:hover,
body.spatial-mode .spatial-icon-button:focus-visible {
  background: var(--spatial-paper);
  color: var(--spatial-ink);
  box-shadow: none;
}

@media (max-width: 780px) {
  .work-shell {
    padding: calc(var(--nav) + .82rem) .85rem 2.4rem;
  }

  .work-search-panel {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "eyebrow"
      "title"
      "mode"
      "search"
      "stats";
    row-gap: .58rem;
  }

  .work-search-panel h1,
  body.timeline-mode h1,
  body.spatial-mode .work-search-panel h1 {
    max-width: none;
    padding-right: 0;
    font-size: clamp(1.8rem, 9vw, 2.55rem);
    line-height: .98;
  }

  .work-mode-control,
  body.timeline-mode .work-mode-control,
  body.spatial-mode .work-mode-control {
    position: fixed;
    z-index: 92;
    top: .52rem;
    right: .65rem;
    justify-self: auto;
    max-width: calc(100vw - 7.15rem);
    width: min(12.4rem, calc(100vw - 7.15rem));
    min-height: 40px;
    box-shadow: 3px 3px 0 var(--ink);
  }

  .work-mode-button {
    flex: 1 1 0;
    min-width: 0;
    min-height: 34px;
    padding: .36rem .34rem;
    font-size: .66rem;
  }

  .mode-panel--search {
    margin-top: .2rem;
  }

  body.timeline-mode .work-explorer,
  body.spatial-mode .work-explorer {
    width: min(100%, calc(100vw - 1.7rem));
    margin-bottom: .25rem;
  }

  body.spatial-mode .work-explorer::before {
    inset: -.72rem -.58rem -4.25rem;
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .22) 68%, rgba(0, 0, 0, 0) 100%),
      radial-gradient(ellipse at 22% 22%, rgba(247, 234, 208, .08), transparent 62%);
  }

  .timeline,
  .timeline-scroll,
  .timeline-track,
  body.timeline-mode .timeline,
  body.timeline-mode .timeline-scroll,
  body.timeline-mode .timeline-track {
    min-height: 624px;
  }

  body.timeline-mode .timeline-current-year,
  .timeline-current-year {
    top: 482px;
  }

  body.timeline-mode .timeline-tick,
  .timeline-tick {
    top: 398px;
  }

  body.spatial-mode .spatial-toolbar {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }

  .spatial-filter-strip {
    display: contents;
    gap: .34rem;
  }

  .spatial-view-actions {
    display: contents;
  }

  .spatial-filter {
    min-height: 32px;
    padding: .32rem .48rem;
    font-size: .62rem;
  }

  .spatial-filter--legend {
    display: none !important;
  }

  .spatial-icon-button {
    width: 32px;
    min-height: 32px;
  }

  .spatial-icon-button svg {
    width: 16px;
    height: 16px;
  }
}

@media (max-width: 480px) {
  .work-mode-button {
    padding-inline: .42rem;
    font-size: .61rem;
  }

  body.timeline-mode .timeline-current-year,
  .timeline-current-year {
    top: 462px;
  }

  body.timeline-mode .timeline-tick,
  .timeline-tick {
    top: 380px;
  }
}
.audio-track:hover .audio-track__play-state,.audio-track:focus-visible .audio-track__play-state,.audio-track.active .audio-track__play-state{opacity:1}
.audio-track__copy{display:grid;gap:.28rem;min-width:0;align-content:center;overflow:visible}
.audio-track__copy strong{display:block;min-width:0;font:600 .92rem/1.46 Platypi,Georgia,serif;overflow:visible;padding-block:.03rem .1rem}
.audio-track__title-text{display:block;min-width:0;max-width:100%;line-height:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-bottom:.08rem;margin-bottom:-.08rem}
.audio-track__copy small{font-size:.68rem;line-height:1.28;text-transform:uppercase;color:var(--muted)}
.audio-mood__footer{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:.5rem;margin-top:.62rem;font-size:.7rem;text-transform:uppercase}
.audio-mood__footer label{display:flex;align-items:center;gap:.45rem;min-width:0}
.audio-mood__footer input{width:100%;accent-color:var(--blue)}
.audio-mood__footer button{min-height:34px;border:2px solid var(--ink);border-radius:999px;background:var(--paper);padding:.28rem .55rem;font-size:.68rem;font-weight:700;text-transform:uppercase}
.audio-mood__footer button[aria-pressed="true"]{background:var(--red);color:white}
.audio-mood__footer span{justify-self:end;color:var(--muted);white-space:nowrap}
@media (prefers-reduced-motion:reduce){.audio-mood__art,.audio-mood__icon,.audio-mood__play-state,.audio-track__play-state{transition:none}.audio-bars i{animation:none}}
@media (max-width:780px){.audio-mood--desktop{display:none}.audio-mood--mobile{display:inline-flex;margin-left:auto}.audio-mood__toggle{box-shadow:3px 3px 0 var(--ink)}.audio-mood__panel{position:fixed;left:.75rem;right:.75rem;top:auto;bottom:max(.75rem,env(safe-area-inset-bottom));width:auto;max-height:min(76dvh,560px);overflow:auto;border-radius:10px;box-shadow:0 -6px 0 var(--ink)}}

/* v7 work archive pass 13 */
body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.work-shell {
  flex: 1 0 auto;
}

.mode-panel--search {
  width: min(760px, 100%);
}

.search-field {
  width: min(605px, 100%);
}

.filter-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: min(980px, 100%);
}

.preset-row {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
}

.active-filter-row {
  grid-column: 1 / -1;
}

.add-filter-button {
  justify-self: auto;
}

.filter-menu {
  width: min(560px, calc(100vw - 2rem));
  justify-items: start;
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink), 0 16px 30px rgba(16, 16, 15, .18);
  backdrop-filter: none;
}

.filter-menu__groups {
  width: max-content;
  max-width: 100%;
  gap: .16rem;
  padding: .18rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
}

.filter-menu__options {
  width: 100%;
  justify-self: stretch;
}

.filter-options__head {
  display: none;
}

.filter-group-choice,
.filter-group-choice:first-child,
.filter-group-choice:last-child {
  flex: 0 0 auto;
  min-height: 30px;
  border-radius: 999px;
  padding: .34rem .58rem;
  font-size: .68rem;
  font-weight: 800;
}

.filter-group-choice.active,
.filter-group-choice.active:hover,
.filter-group-choice.active:focus-visible {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.filter-group-choice:hover,
.filter-group-choice:focus-visible {
  background: var(--yellow);
  color: var(--ink);
}

.project-grid:has(.empty) {
  min-height: max(18rem, calc(100dvh - var(--nav) - 18rem));
}

.empty {
  align-self: start;
}

body.spatial-mode .spatial-filter,
body.spatial-mode .spatial-filter.active,
body.spatial-mode .spatial-filter.active:hover,
body.spatial-mode .spatial-filter.active:focus-visible,
body.spatial-mode .spatial-filter[aria-pressed="true"],
body.spatial-mode .spatial-filter[aria-pressed="true"]:hover,
body.spatial-mode .spatial-filter[aria-pressed="true"]:focus-visible {
  background: var(--spatial-paper);
  color: var(--spatial-ink);
  border-color: var(--spatial-paper);
  box-shadow: none;
  transition: box-shadow .2s var(--ease);
  opacity: 1;
}

body.spatial-mode .spatial-filter:not(.active),
body.spatial-mode .spatial-filter:not(.active):hover,
body.spatial-mode .spatial-filter:not(.active):focus-visible,
body.spatial-mode .spatial-filter[aria-pressed="false"],
body.spatial-mode .spatial-filter[aria-pressed="false"]:hover,
body.spatial-mode .spatial-filter[aria-pressed="false"]:focus-visible {
  background: var(--spatial-ink) !important;
  color: var(--spatial-paper) !important;
  border-color: var(--spatial-paper) !important;
  box-shadow: none !important;
}

body.spatial-mode .spatial-filter--legend,
body.spatial-mode .spatial-filter--legend:hover,
body.spatial-mode .spatial-filter--legend:focus-visible {
  background: var(--spatial-paper) !important;
  color: var(--spatial-ink) !important;
  border-color: var(--spatial-paper) !important;
  box-shadow: none !important;
  opacity: .78;
}

body.spatial-mode .spatial-card {
  width: min(430px, calc(100vw - 2rem));
}

body.spatial-mode .spatial-card--facet {
  width: min(340px, calc(100vw - 2rem));
}

@media (max-width: 780px) {
  .mode-panel--search,
  .search-field {
    width: 100%;
  }

  .filter-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .preset-row {
    display: contents;
  }

  .add-filter-button {
    grid-column: auto;
    grid-row: auto;
  }

  .filter-menu__groups {
    border-radius: 999px;
    padding: .18rem;
  }

  .filter-group-choice,
  .filter-group-choice:first-child,
  .filter-group-choice:last-child {
    min-height: 34px;
    padding: .4rem .62rem;
    font-size: .7rem;
  }

  .project-grid:has(.empty) {
    min-height: max(20rem, calc(100dvh - var(--nav) - 16rem));
  }
}

/* Keep the mobile mode switcher painted in the navbar above the spatial canvas. */
@media (max-width: 780px) {
  body.spatial-mode .work-explorer {
    z-index: 170;
  }

  body.spatial-mode .work-mode-control {
    position: fixed;
    z-index: 150;
    top: 8px;
    right: .65rem;
    display: inline-flex;
    width: min(12.4rem, calc(100vw - 7.15rem));
    max-width: calc(100vw - 7.15rem);
    min-height: 40px;
    border-color: var(--ink);
    background: var(--spatial-paper);
    box-shadow: 3px 3px 0 var(--ink);
    color: var(--spatial-ink);
    pointer-events: auto;
  }

  body.spatial-mode .work-mode-button {
    color: var(--spatial-ink);
  }

  body.spatial-mode .work-mode-button[aria-pressed="true"] {
    background: var(--spatial-ink);
    color: var(--spatial-paper);
  }
}

/* v7 public beta mobile feedback fixes */
.work-mode-control{
  padding:.26rem .32rem;
}

.work-mode-button{
  padding:.5rem .78rem;
}

@media (max-width:780px){
  :root,
  html,
  body{
    --nav:66px;
  }

  .nav{
    height:66px;
  }

  .work-mode-control,
  body.timeline-mode .work-mode-control,
  body.spatial-mode .work-mode-control{
    top:8px;
    right:.85rem;
    min-height:44px;
    padding:.24rem .3rem;
    gap:.24rem;
  }

  .work-mode-button{
    min-height:36px;
    padding:.46rem .68rem;
  }

  body.spatial-mode .site-footer{
    display:none;
  }

  body.spatial-mode .spatial-card{
    bottom:max(1rem,env(safe-area-inset-bottom,0px));
    max-height:min(58dvh,calc(100dvh - var(--nav) - 2.35rem));
    border-radius:8px;
    padding-top:.78rem;
    padding-bottom:calc(.86rem + env(safe-area-inset-bottom,0px));
    -webkit-overflow-scrolling:touch;
  }

  body.spatial-mode .spatial-card__head{
    min-height:42px;
    align-items:center;
  }

  body.spatial-mode .spatial-card__actions{
    align-items:center;
    align-self:center;
  }

  body.spatial-mode .spatial-project-card{
    gap:.68rem;
  }
}

@media (hover:none){
  .spatial-hover-label{
    display:none!important;
  }
}