:root {
  --depot-blue: #1176dc;
  --depot-blue-mid: #258ce9;
  --depot-blue-light: #b8e4ff;
  --depot-deep: #102d5b;
  --depot-deepest: #0a2147;
  --depot-white: #f8fbff;
  --depot-lime: #dfff75;
  --depot-ink: #142746;
  --depot-font-display: "Syne", "Space Grotesk", sans-serif;
  --depot-font-body: "DM Sans", system-ui, sans-serif;
  --depot-space-1: 8px;
  --depot-space-2: 16px;
  --depot-space-3: 24px;
  --depot-space-4: 32px;
  --depot-radius-sm: 12px;
  --depot-radius-md: 20px;
  --depot-radius-lg: 28px;
  --depot-shadow-soft: 0 18px 38px rgba(5, 36, 82, .22);
  --depot-shadow-box: 0 17px 25px rgba(5, 33, 75, .25);
  --depot-ease: cubic-bezier(.22, .8, .25, 1);
  --depot-fast: 190ms;
  --depot-ui: 340ms;
  --depot-move: 760ms;
  --depot-door: 620ms;
}

* { box-sizing: border-box; }
.site-header { display: none !important; }
.portfolio-details { position: relative; isolation: isolate; background: linear-gradient(180deg,#0d3262 0,#100c27 320px); }
.depot-page {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  min-height: 100dvh;
  padding: 0 clamp(22px, 5vw, 82px) clamp(20px, 3vh, 32px);
  overflow: hidden;
  color: var(--depot-white);
  background: linear-gradient(155deg, #1176dc 0%, #258ce9 52%, #4aa8ee 100%);
}
.depot-page[data-depot-state="LOWERING"] { --depot-move: 560ms; }
.depot-page[data-depot-state="LIFTING"],.depot-page[data-depot-state="RETURNING"] { --depot-move: 920ms; }
.depot-blueprint {
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  opacity: .05;
  background-image: linear-gradient(rgba(255,255,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.8) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
}
.depot-atmosphere { position: absolute; z-index: -1; border-radius: 50%; filter: blur(3px); pointer-events: none; }
.depot-atmosphere--one { width: 420px; height: 420px; top: 15%; right: 12%; background: radial-gradient(circle, rgba(184,228,255,.16), transparent 70%); }
.depot-atmosphere--two { width: 360px; height: 360px; bottom: -15%; left: 24%; background: radial-gradient(circle, rgba(223,255,117,.08), transparent 70%); }

/* Navigation is a distinct, stable layer above the workspace. */
.depot-nav {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: clamp(16px, 3vw, 42px);
  width: min(100%, 1600px);
  min-height: 74px;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.17);
}
.depot-brand-lockup { display: flex; align-items: center; gap: 14px; min-width: 0; }
.depot-brand-lockup > a { color: var(--depot-white); font: 800 29px/.9 var(--depot-font-display); letter-spacing: -.09em; white-space: nowrap; }
.depot-brand-lockup > a span { color: var(--depot-lime); }
.depot-brand-lockup small { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.34); color: rgba(248,251,255,.75); font: 600 9px/1.3 var(--depot-font-body); letter-spacing: .14em; white-space: nowrap; }
.depot-shortcuts { display: flex; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 46px); }
.depot-shortcuts a,.depot-more-links a { color: rgba(248,251,255,.88); font: 600 13px/1 var(--depot-font-body); transition: color var(--depot-fast) ease; }
.depot-shortcuts a:hover,.depot-more-links a:hover { color: var(--depot-lime); }
.depot-tools { position: relative; display: flex; justify-content: flex-end; align-items: center; gap: 10px; }
.depot-talk,.depot-explore-toggle {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 17px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  color: var(--depot-white);
  background: rgba(10,45,91,.16);
  font: 700 12px/1 var(--depot-font-body);
  transition: background var(--depot-fast) ease, border-color var(--depot-fast) ease, transform var(--depot-fast) ease;
}
.depot-talk { background: var(--depot-lime); color: var(--depot-ink); border-color: var(--depot-lime); }
.depot-talk:hover,.depot-explore-toggle:hover { transform: translateY(-1px); }
.depot-talk:hover { background: #e8ff9f; }
.depot-explore-toggle { display: inline-flex; cursor: pointer; }
.depot-more-links { display: none; position: absolute; top: calc(100% + 9px); right: 0; min-width: 166px; padding: 8px; border: 1px solid rgba(255,255,255,.17); border-radius: 14px; background: #102d5bf2; box-shadow: var(--depot-shadow-soft); }
.depot-more-links.is-open { display: grid; gap: 2px; }
.depot-more-links a { padding: 12px 11px; border-radius: 8px; }
.depot-more-links a:hover { background: rgba(255,255,255,.08); }

/* Intro and depot occupy separate columns so the crane never crosses copy. */
.depot-layout {
  display: grid;
  grid-template-columns: minmax(330px, .41fr) minmax(0, .59fr);
  gap: clamp(28px, 4vw, 68px);
  align-items: stretch;
  width: min(100%, 1600px);
  min-height: 0;
  flex: 1;
  margin: 0 auto;
  padding: clamp(22px, 3vh, 34px) 0 0;
}
.depot-intro { position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: center; align-self: stretch; max-width: 600px; padding: 20px 0 clamp(36px, 6vh, 72px); }
.depot-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 22px; color: rgba(248,251,255,.78); font: 700 10px/1.4 var(--depot-font-body); letter-spacing: .14em; }
.depot-kicker > span:last-child { white-space: nowrap; }
.depot-status-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--depot-lime); box-shadow: 0 0 0 4px rgba(223,255,117,.15); }
.depot-intro h1 { max-width: 680px; margin: 0; color: var(--depot-white); font: 800 clamp(48px, 5vw, 82px)/.99 var(--depot-font-display); letter-spacing: -.075em; text-wrap: balance; }
.depot-intro h1 em { color: var(--depot-lime); font-style: normal; }
.depot-intro-copy { max-width: 430px; margin: 22px 0 0; color: rgba(248,251,255,.87); font: 400 clamp(16px, 1.2vw, 18px)/1.65 var(--depot-font-body); }
.depot-intro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 27px; }
.depot-intro-link { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 19px; border-radius: 999px; font: 700 13px/1 var(--depot-font-body); transition: transform var(--depot-fast) ease, background var(--depot-fast) ease; }
.depot-intro-link:hover { transform: translateY(-2px); }
.depot-intro-link--primary { color: var(--depot-ink); background: var(--depot-lime); box-shadow: 0 8px 22px rgba(8,42,86,.18); }
.depot-intro-link--primary:hover { background: #e8ff9f; }
.depot-intro-link--secondary { border: 1px solid rgba(255,255,255,.42); color: var(--depot-white); background: rgba(9,43,87,.1); }
.depot-intro-note { margin: clamp(30px, 6vh, 64px) 0 0; color: rgba(248,251,255,.62); font: 600 10px/1.4 var(--depot-font-body); letter-spacing: .14em; text-transform: uppercase; }

/* The right-hand depot is its own clipped coordinate system and stacking context. */
.depot-workspace {
  position: relative;
  isolation: isolate;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--depot-radius-lg);
  background: linear-gradient(155deg, rgba(7,54,112,.16), rgba(13,78,145,.12));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 18px 48px rgba(4,44,91,.12);
}
.depot-label { position: absolute; z-index: 15; top: 21px; left: 25px; color: rgba(248,251,255,.78); font: 700 9px/1 var(--depot-font-body); letter-spacing: .17em; }
.depot-label span { padding: 0 7px; color: rgba(255,255,255,.45); }
.depot-label strong { color: var(--depot-lime); }
.depot-character { position: absolute; z-index: 1; top: 5%; left: 50%; width: min(94%, 930px); aspect-ratio: 16 / 9; height: auto; transform: translateX(-50%); opacity: 1; pointer-events: none; transition: opacity var(--depot-ui) ease; }
.cursor-scrub-video { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: var(--cursor-scrub-radius, 0); isolation: isolate; }
.cursor-scrub-poster,.cursor-scrub-video-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: var(--cursor-scrub-fit, contain); object-position: center; transition: opacity var(--depot-ui) ease; }
.cursor-scrub-poster { opacity: 1; }
.cursor-scrub-video-frame { opacity: 0; pointer-events: none; }
.cursor-scrub-empty { position: absolute; inset: 0; display: none; place-items: center; color: rgba(255,255,255,.76); font: 600 12px var(--depot-font-body); }
.depot-stage { position: absolute; z-index: 4; inset: 0; overflow: hidden; perspective: 1200px; transform-style: preserve-3d; }
.depot-floor { position: absolute; z-index: 0; right: -5%; bottom: 1%; left: -5%; height: 23%; border-top: 1px solid rgba(255,255,255,.22); border-radius: 50% 50% 0 0 / 16% 16% 0 0; background: linear-gradient(180deg, rgba(184,228,255,.1), transparent 75%); pointer-events: none; }

/* Rail is limited to the depot workspace. The claw rests with a short cable. */
.depot-rail { position: absolute; z-index: 7; top: 5%; left: 8%; width: 84%; height: 34px; pointer-events: none; }
.depot-rail-top { position: absolute; top: 0; right: 0; left: 0; height: 12px; border: 1px solid rgba(255,255,255,.68); border-radius: 9px; background: linear-gradient(#fff, #dceaf7 48%, #a9c9e6); box-shadow: 0 4px 10px rgba(12,55,102,.18); }
.depot-rail-track { position: absolute; top: 13px; right: 1%; left: 1%; height: 6px; background: repeating-linear-gradient(90deg, transparent 0 13px, rgba(16,45,91,.33) 13px 17px), linear-gradient(#718aa4,#f7fbff,#9cb4cb); }
.depot-carriage { position: absolute; top: -7px; left: 86%; width: 62px; height: 31px; transform: translateX(-50%); border: 1px solid #bdcada; border-radius: 10px 10px 7px 7px; background: linear-gradient(110deg,#fff,#dce5ed 48%,#fff); box-shadow: 0 4px 9px rgba(11,71,128,.25); transition: left var(--depot-move) var(--depot-ease); }
.depot-carriage i { position: absolute; bottom: -5px; left: 11px; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 35% 35%,#fff,#8296aa 75%); }
.depot-carriage i:last-child { right: 11px; left: auto; }
.depot-rod { position: absolute; top: 24px; left: 86%; width: 8px; height: var(--rod-length, 26px); transform: translateX(-50%); background: linear-gradient(90deg,#70859a,#fff 38%,#b7c9d8 72%,#fff); box-shadow: 0 2px 4px rgba(23,74,120,.2); transition: left var(--depot-move) var(--depot-ease), height var(--depot-move) var(--depot-ease); }
.depot-grip-head { position: absolute; top: calc(24px + var(--rod-length, 26px)); left: 86%; width: 68px; height: 24px; transform: translateX(-50%); border: 1px solid #c3ced9; border-radius: 9px; background: linear-gradient(110deg,#fff,#e0e8ef 48%,#fff); box-shadow: 0 4px 9px rgba(13,64,117,.24); transition: left var(--depot-move) var(--depot-ease), top var(--depot-move) var(--depot-ease); }
.depot-finger { position: absolute; top: 16px; width: 27px; height: 38px; border: 0; border-bottom: 5px solid #fff; filter: drop-shadow(0 2px 2px rgba(35,74,107,.34)); transition: transform 230ms var(--depot-ease); }
.depot-finger-left { left: calc(50% - var(--grip-span, 74px)/2); border-left: 5px solid #fff; border-radius: 0 0 0 6px; }
.depot-finger-right { left: calc(50% + var(--grip-span, 74px)/2 - 27px); border-right: 5px solid #fff; border-radius: 0 0 6px 0; }
.depot-container.is-gripped .depot-finger-left { transform: translateX(4px); }
.depot-container.is-gripped .depot-finger-right { transform: translateX(-4px); }

/* Seven containers sit on a deliberate 4 + 3 grid with very small resting angles. */
.depot-container-pile { position: absolute; z-index: 5; inset: 0; transform-style: preserve-3d; }
.depot-container {
  --cw: clamp(118px, 12vw, 176px);
  --ch: calc(var(--cw) * .43);
  --cd: calc(var(--cw) * .4);
  --pile-rx: -4deg;
  position: absolute;
  left: var(--pile-x);
  top: var(--pile-y);
  width: var(--cw);
  height: var(--ch);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translate(-50%,-50%) rotateX(var(--pile-rx, -3deg)) rotateY(var(--pile-ry, 0deg)) rotateZ(var(--pile-rz, 0deg));
  transform-style: preserve-3d;
  filter: drop-shadow(var(--depot-shadow-box));
  transition: left var(--depot-move) var(--depot-ease), top var(--depot-move) var(--depot-ease), transform var(--depot-move) var(--depot-ease), filter var(--depot-fast) ease, opacity var(--depot-ui) ease;
}
.depot-container--intro { --pile-x: 18%; --pile-y: 62%; --pile-ry: -6deg; --pile-rz: -2deg; z-index: 2; }
.depot-container--work { --pile-x: 50%; --pile-y: 62%; --pile-ry: 5deg; --pile-rz: 1deg; z-index: 3; }
.depot-container--about { --pile-x: 82%; --pile-y: 62%; --pile-ry: -4deg; --pile-rz: -1deg; z-index: 4; }
.depot-container--journey { --pile-x: 12%; --pile-y: 84%; --pile-ry: 5deg; --pile-rz: 2deg; z-index: 7; }
.depot-container--toolkit { --pile-x: 37%; --pile-y: 84%; --pile-ry: -6deg; --pile-rz: 1deg; z-index: 8; }
.depot-container--services { --pile-x: 63%; --pile-y: 84%; --pile-ry: 4deg; --pile-rz: -2deg; z-index: 9; }
.depot-container--contact { --pile-x: 86%; --pile-y: 84%; --pile-ry: -5deg; --pile-rz: 1deg; z-index: 10; }
.depot-container:hover:not(.is-selected) { z-index: 12; transform: translate(-50%, calc(-50% - 5px)) rotateX(var(--pile-rx, -3deg)) rotateY(var(--pile-ry, 0deg)) rotateZ(var(--pile-rz, 0deg)); filter: drop-shadow(0 20px 18px rgba(5,33,75,.34)); }
.depot-trigger { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 4px; color: inherit; background: transparent; cursor: pointer; }
.depot-trigger:focus-visible { outline: 3px solid var(--depot-lime); outline-offset: 5px; }
.depot-box-shadow { position: absolute; inset: 10% -5% -12%; transform: translateZ(-8px); border-radius: 50%; background: rgba(4,38,85,.24); filter: blur(10px); }
.depot-box { position: absolute; inset: 0; transform-style: preserve-3d; }
.depot-face { position: absolute; overflow: hidden; backface-visibility: hidden; }
.depot-face-front { inset: 0; transform: translateZ(calc(var(--cd)/2)); border: 1px solid rgba(255,255,255,.5); background: linear-gradient(150deg,color-mix(in srgb,var(--container-color),white 13%),var(--container-color) 48%,color-mix(in srgb,var(--container-color),black 14%)); box-shadow: inset 0 0 0 3px rgba(16,45,91,.13); }
.depot-corrugation { position: absolute; inset: 0; background: repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.19) 10px,rgba(16,45,70,.12) 12px,transparent 14px); }
.depot-container-label { position: absolute; z-index: 2; top: 19%; left: 10%; color: #fff; font: 800 clamp(16px,1.5vw,22px)/.9 var(--depot-font-display); letter-spacing: -.04em; text-align: left; text-shadow: 0 1px 3px rgba(12,30,55,.3); }
.depot-tag { position: absolute; z-index: 3; right: 8%; bottom: 9%; padding: 3px 6px; border: 1px solid rgba(255,255,255,.66); border-radius: 3px; color: #fff; font: 700 8px/1 var(--depot-font-body); letter-spacing: .07em; }
.depot-corner { position: absolute; z-index: 4; width: 9px; height: 9px; border: 2px solid #eaf5ff; box-shadow: 0 1px 3px rgba(25,48,70,.35); }
.depot-corner-tl { top: 4px; left: 4px; }.depot-corner-tr { top: 4px; right: 4px; }.depot-corner-bl { bottom: 4px; left: 4px; }.depot-corner-br { right: 4px; bottom: 4px; }
.depot-face-side-right { top: 0; left: 100%; width: var(--cd); height: 100%; transform: rotateY(90deg); transform-origin: left center; border: 1px solid rgba(255,255,255,.2); background: repeating-linear-gradient(90deg,transparent 0 9px,rgba(255,255,255,.12) 10px,rgba(12,31,53,.18) 12px,transparent 14px),linear-gradient(90deg,color-mix(in srgb,var(--container-color),black 38%),color-mix(in srgb,var(--container-color),black 18%)); }
.depot-face-side-left { top: 0; left: calc(var(--cd) * -1); width: var(--cd); height: 100%; transform: rotateY(-90deg); transform-origin: right center; border: 1px solid rgba(255,255,255,.2); background: linear-gradient(90deg,color-mix(in srgb,var(--container-color),black 44%),color-mix(in srgb,var(--container-color),black 25%)); }
.depot-face-top { bottom: 100%; left: 0; width: 100%; height: var(--cd); transform: rotateX(90deg); transform-origin: bottom; border: 1px solid rgba(255,255,255,.34); background: linear-gradient(rgba(255,255,255,.4),color-mix(in srgb,var(--container-color),white 9%)); }
.depot-face-back { inset: 0; transform: rotateY(180deg) translateZ(calc(var(--cd)/2)); background: color-mix(in srgb,var(--container-color),black 26%); }
.depot-face-bottom { top: 100%; left: 0; width: 100%; height: var(--cd); transform: rotateX(-90deg); transform-origin: top; background: color-mix(in srgb,var(--container-color),black 34%); }
.depot-door { position: absolute; z-index: 5; top: 0; width: 50%; height: 100%; transform-style: preserve-3d; border: 1px solid rgba(255,255,255,.6); background: repeating-linear-gradient(90deg,transparent 0 8px,rgba(255,255,255,.18) 9px,rgba(16,36,57,.16) 11px,transparent 13px),linear-gradient(135deg,rgba(255,255,255,.13),rgba(0,0,0,.13)); transition: transform var(--depot-door) var(--depot-ease); }
.depot-door-left { left: 0; transform-origin: left center; border-right-color: rgba(25,48,69,.5); }
.depot-door-right { right: 0; transform-origin: right center; border-left-color: rgba(25,48,69,.5); }
.depot-door i { position: absolute; top: 18%; right: 8%; width: 3px; height: 64%; border-radius: 4px; background: linear-gradient(90deg,#dce5eb,#536b80,#f7fbff); }
.depot-door-right i { right: auto; left: 8%; }
.depot-container.is-open .depot-door-left { transform: rotateY(-122deg); }
.depot-container.is-open .depot-door-right { transform: rotateY(122deg); }
.depot-container.is-selected { left: var(--display-x, 84%); top: var(--display-y, 54%); z-index: 22; transform: translate(-50%,-50%) rotateX(0) rotateY(0) rotateZ(0) scale(1.02); filter: drop-shadow(0 22px 20px rgba(5,33,75,.3)); }
.depot-container.is-selected .depot-face-front { box-shadow: inset 0 0 0 3px rgba(16,45,91,.13), 0 0 16px rgba(255,255,255,.2); }
.depot-content-open .depot-container:not(.is-selected) { opacity: .12; pointer-events: none; }
.depot-content-open .depot-character,.depot-busy .depot-character { opacity: .14; }

/* Readable content lives in a stable dock, separate from 3D geometry. */
.depot-content-dock { position: absolute; z-index: 18; top: 31%; bottom: 5%; left: 3%; display: flex; width: min(66%, 620px); min-height: 0; padding: clamp(17px,2.2vw,26px); overflow: hidden; border: 1px solid rgba(255,255,255,.18); border-radius: var(--depot-radius-md); color: var(--depot-white); background: linear-gradient(145deg,rgba(16,45,91,.98),rgba(10,33,71,.98)); box-shadow: 0 22px 48px rgba(3,29,69,.29), inset 0 1px 0 rgba(255,255,255,.1); opacity: 0; visibility: hidden; transform: translateX(-10px); transition: opacity var(--depot-ui) ease, transform var(--depot-ui) var(--depot-ease), visibility var(--depot-ui) ease; }
.depot-content-dock.is-open { opacity: 1; visibility: visible; transform: translateX(0); }
.depot-dock-content { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; overflow: auto; overscroll-behavior: contain; scrollbar-color: rgba(184,228,255,.42) transparent; }
.depot-dock-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 5px; }
.depot-card-kicker { color: var(--depot-blue-light); font: 700 9px/1.4 var(--depot-font-body); letter-spacing: .15em; }
.depot-dock-close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; color: var(--depot-white); background: rgba(255,255,255,.08); cursor: pointer; font: 600 11px var(--depot-font-body); }
.depot-dock-close:hover { background: rgba(255,255,255,.16); }
.depot-dock-content h2 { margin: 7px 0 12px; color: var(--depot-white); font: 800 clamp(24px,2.3vw,34px)/1.05 var(--depot-font-display); letter-spacing: -.055em; }
.depot-dock-content h3 { margin: 14px 0 7px; color: var(--depot-lime); font: 700 14px/1.3 var(--depot-font-body); }
.depot-dock-content p { max-width: 58ch; margin: 7px 0; color: rgba(248,251,255,.87); font: 400 14px/1.55 var(--depot-font-body); }
.depot-dock-content .depot-card-role { color: var(--depot-lime); font-weight: 700; }
.depot-content-entry { padding: 9px 0; border-top: 1px solid rgba(255,255,255,.14); }
.depot-content-entry strong { color: #fff; font: 700 14px/1.3 var(--depot-font-body); }
.depot-content-entry p { margin: 4px 0; font-size: 13px; }
.depot-card-links { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 5px; }
.depot-card-links a { display: inline-flex; min-height: 38px; align-items: center; justify-content: center; padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: var(--depot-ink); background: var(--depot-lime); font: 700 10px/1.2 var(--depot-font-body); }
.depot-card-links a:hover { background: #ebffae; }
.depot-skills { display: flex; flex-wrap: wrap; gap: 7px; }
.depot-skills b { padding: 6px 9px; border: 1px solid rgba(184,228,255,.35); border-radius: 999px; color: #e5f4ff; font: 600 10px var(--depot-font-body); }
.depot-content-note { color: rgba(248,251,255,.62) !important; font-size: 11px !important; }
.depot-process { padding: 10px 12px; border-radius: 10px; background: rgba(184,228,255,.1); font-weight: 700 !important; }
.depot-state-lab { margin-top: 14px; padding: 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.06); }
.depot-state-lab > strong { color: var(--depot-lime); font: 700 12px var(--depot-font-body); }
.depot-state-controls { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.depot-state-controls button { padding: 7px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #fff; background: rgba(255,255,255,.07); cursor: pointer; font: 600 10px var(--depot-font-body); }
.depot-state-controls button[aria-pressed="true"] { border-color: var(--depot-lime); color: var(--depot-ink); background: var(--depot-lime); }
.depot-state-output { min-height: 1.4em; margin: 8px 0 0 !important; color: var(--depot-blue-light) !important; font-size: 12px !important; }
.depot-pick-hint { position: absolute; z-index: 12; right: 21px; bottom: 17px; color: rgba(248,251,255,.67); font: 700 8px/1 var(--depot-font-body); letter-spacing: .14em; pointer-events: none; }

.depot-container:focus-visible,.depot-shortcuts a:focus-visible,.depot-talk:focus-visible,.depot-explore-toggle:focus-visible,.depot-intro-link:focus-visible,.depot-dock-content a:focus-visible,.depot-dock-close:focus-visible,.depot-state-controls button:focus-visible { outline: 3px solid var(--depot-lime); outline-offset: 4px; }
.depot-nav a,.depot-more-links a,.depot-intro a,.depot-dock-content a { text-decoration: none; }
.depot-page.depot-busy .depot-pick-hint { opacity: 0; }

@media (max-width: 1200px) and (min-width: 701px) {
  .depot-page { padding-right: clamp(18px,3vw,36px); padding-left: clamp(18px,3vw,36px); }
  .depot-layout { grid-template-columns: minmax(290px,.38fr) minmax(0,.62fr); gap: 24px; }
  .depot-intro h1 { font-size: clamp(44px,5.2vw,64px); }
  .depot-container { --cw: clamp(108px,11.8vw,145px); --ch: calc(var(--cw)*.43); --cd: calc(var(--cw)*.38); }
  .depot-container--intro { --pile-x: 18%; --pile-y: 58%; }
  .depot-container--work { --pile-x: 50%; --pile-y: 58%; }
  .depot-container--about { --pile-x: 82%; --pile-y: 58%; }
  .depot-container--journey { --pile-x: 18%; --pile-y: 77%; }
  .depot-container--toolkit { --pile-x: 50%; --pile-y: 77%; }
  .depot-container--services { --pile-x: 82%; --pile-y: 77%; }
  .depot-container--contact { --pile-x: 50%; --pile-y: 82%; }
  .depot-content-dock { top: 30%; bottom: 5%; width: 66%; }
}

@media (max-width: 900px) and (min-width: 701px) {
  .depot-nav { grid-template-columns: 1fr auto; min-height: 68px; }
  .depot-shortcuts { display: none; }
  .depot-explore-toggle { display: inline-flex; }
  .depot-layout { grid-template-columns: minmax(260px,.38fr) minmax(0,.62fr); }
  .depot-brand-lockup small { display: none; }
  .depot-character { top: 8%; width: 100%; }
  .depot-container--intro { --pile-x: 18%; --pile-y: 56%; }
  .depot-container--work { --pile-x: 50%; --pile-y: 56%; }
  .depot-container--about { --pile-x: 82%; --pile-y: 56%; }
  .depot-container--journey { --pile-x: 18%; --pile-y: 76%; }
  .depot-container--toolkit { --pile-x: 50%; --pile-y: 76%; }
  .depot-container--services { --pile-x: 82%; --pile-y: 76%; }
  .depot-container--contact { --pile-x: 50%; --pile-y: 82%; }
}

@media (max-width: 700px) {
  .depot-page { min-height: 100svh; overflow: visible; padding: 0 16px 18px; }
  .depot-nav { grid-template-columns: 1fr auto; grid-template-areas: "brand actions" "links links"; gap: 0 10px; min-height: 112px; }
  .depot-brand-lockup { grid-area: brand; }
  .depot-brand-lockup > a { font-size: 27px; }
  .depot-brand-lockup small { display: none; }
  .depot-tools { grid-area: actions; }
  .depot-talk,.depot-explore-toggle { min-height: 40px; padding: 0 13px; font-size: 11px; }
  .depot-explore-toggle { display: inline-flex; }
  .depot-shortcuts { grid-area: links; display: flex; justify-content: flex-start; gap: clamp(18px,7vw,36px); overflow-x: auto; padding: 0 1px 13px; }
  .depot-shortcuts a { flex: 0 0 auto; font-size: 12px; }
  .depot-layout { display: flex; flex-direction: column; gap: 19px; padding-top: 19px; }
  .depot-intro { flex: 0 0 auto; padding: 6px 2px 0; }
  .depot-kicker { gap: 7px; margin-bottom: 13px; font-size: 8px; letter-spacing: .11em; }
  .depot-intro h1 { max-width: 560px; font-size: clamp(38px,9vw,56px); line-height: 1; }
  .depot-intro-copy { max-width: 500px; margin-top: 12px; font-size: 15px; line-height: 1.5; }
  .depot-intro-actions { gap: 9px; margin-top: 15px; }
  .depot-intro-link { min-height: 42px; padding: 0 14px; font-size: 11px; }
  .depot-intro-note { display: none; }
  .depot-workspace { flex: 0 0 auto; min-height: 620px; border-radius: 20px; }
  .depot-label { top: 14px; left: 16px; font-size: 8px; }
  .depot-character { top: 4%; width: 100%; opacity: .88; }
  .depot-stage { position: absolute; inset: 0; }
  .depot-rail { top: 5%; right: 7%; left: 7%; width: 86%; transform: scale(.92); transform-origin: top center; }
  .depot-container { --cw: clamp(92px,27vw,124px); --ch: calc(var(--cw)*.55); --cd: calc(var(--cw)*.48); }
  .depot-container-label { font-size: clamp(13px,4vw,17px); }
  .depot-container--intro { --pile-x: 25%; --pile-y: 56%; }
  .depot-container--work { --pile-x: 75%; --pile-y: 56%; }
  .depot-container--about { --pile-x: 25%; --pile-y: 70%; }
  .depot-container--journey { --pile-x: 75%; --pile-y: 70%; }
  .depot-container--toolkit { --pile-x: 25%; --pile-y: 84%; }
  .depot-container--services { --pile-x: 75%; --pile-y: 84%; }
  .depot-container--contact { --pile-x: 50%; --pile-y: 85%; }
  .depot-container.is-selected { left: 82%; top: 25%; transform: translate(-50%,-50%) scale(.92); }
  .depot-content-dock { top: 39%; right: 10px; bottom: 10px; left: 10px; width: auto; padding: 15px; border-radius: 15px; }
  .depot-dock-content h2 { font-size: 25px; }
  .depot-dock-content p { font-size: 13px; }
  .depot-content-entry p { font-size: 12px; }
  .depot-card-links { gap: 6px; }
  .depot-card-links a { min-height: 40px; padding: 8px 10px; font-size: 9px; }
  .depot-pick-hint { right: 14px; bottom: 11px; font-size: 7px; }
  .depot-floor { bottom: 0; height: 18%; }
}

@media (max-width: 380px) {
  .depot-page { padding-right: 12px; padding-left: 12px; }
  .depot-nav { min-height: 106px; }
  .depot-brand-lockup > a { font-size: 25px; }
  .depot-talk,.depot-explore-toggle { min-height: 38px; padding: 0 10px; font-size: 10px; }
  .depot-shortcuts { gap: 15px; }
  .depot-intro h1 { font-size: clamp(36px,10vw,44px); }
  .depot-workspace { min-height: 570px; }
  .depot-container { --cw: clamp(86px,27vw,102px); }
  .depot-container-label { font-size: 12px; }
  .depot-container--intro { --pile-x: 26%; --pile-y: 56%; }
  .depot-container--work { --pile-x: 74%; --pile-y: 56%; }
  .depot-container--about { --pile-x: 26%; --pile-y: 68%; }
  .depot-container--journey { --pile-x: 74%; --pile-y: 68%; }
  .depot-container--toolkit { --pile-x: 26%; --pile-y: 80%; }
  .depot-container--services { --pile-x: 74%; --pile-y: 80%; }
  .depot-container--contact { --pile-x: 50%; --pile-y: 85%; }
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}