/* ============================================================
   Anirudh Archive — Time Machine design system
   Canonical tokens live in the r02 override block at the end of this file.
   ============================================================ */

/* ─── Loader overlay ─────────────────────────────────────────── */
.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0F0F0F;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.loader-overlay.done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.loader-inner {
  text-align: center;
  width: 280px;
}
.loader-title {
  font-family: 'Climate Crisis', cursive;
  font-size: 42px;
  color: #EDE4CE;
  letter-spacing: 0.08em;
  line-height: 1;
}
.loader-subtitle {
  font-family: var(--font-data, 'Cascadia Code', monospace);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(237, 228, 206, 0.4);
  margin-top: 6px;
}
.loader-bar-track {
  margin-top: 28px;
  height: 3px;
  background: rgba(237, 228, 206, 0.1);
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: #C5E03A;
  transition: width 0.3s ease-out;
}
.loader-status {
  font-family: var(--font-data, 'Cascadia Code', monospace);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(237, 228, 206, 0.3);
  margin-top: 12px;
}

:root {
  /* Surface */
  --bg-deep: #1A1714;
  --bg-grad-a: #1E1B16;
  --bg-grad-b: #252118;
  --bg-grad-c: #1C2018;

  /* Glass tokens */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.10);
  --glass-bg-faint: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.14);
  --glass-border-strong: rgba(255, 255, 255, 0.22);
  --glass-blur: 28px;
  --glass-blur-light: 16px;

  /* Ink */
  --ink: #f6f4ff;
  --ink-soft: rgba(246, 244, 255, 0.78);
  --ink-mute: rgba(246, 244, 255, 0.55);
  --ink-faint: rgba(246, 244, 255, 0.35);

  /* Accent */
  --accent: #FFD080;
  --accent-hot: #C49A5A;
  --accent-cool: #8A9AA0;
  --accent-warm: #C8A04A;

  /* Role colors — warm cinematic palette */
  --role-moving-images: #C49A5A;
  --role-visual-systems: #B8A468;
  --role-comp-culture: #8A9AA0;
  --role-doc-research: #C8A04A;
  --role-leadership-edu: #9AA878;
  --role-other: #A89878;

  --radius-lg: 22px;
  --radius-md: 14px;
  --radius-sm: 8px;
  --radius-pill: 999px;

  --shadow-glass: 0 12px 48px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --shadow-float: 0 18px 60px rgba(0, 0, 0, 0.4);

  --t-fast: 180ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med: 320ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 520ms cubic-bezier(0.4, 0, 0.2, 1);

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg-deep);
  color: var(--ink);
  font-feature-settings: "ss01", "cv11";
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button, input {
  font: inherit;
  color: inherit;
}

/* ============================================================
   Ambient backdrop
   ============================================================ */
.ambient-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #0A0908;
}

.ambient-orb {
  display: none;
}

.ambient-orb--a {
  width: 540px;
  height: 540px;
  top: -120px;
  left: -180px;
  background: radial-gradient(circle, rgba(180, 140, 255, 0.5), transparent 70%);
}

.ambient-orb--b {
  width: 620px;
  height: 620px;
  bottom: -180px;
  right: -160px;
  background: radial-gradient(circle, rgba(110, 209, 255, 0.42), transparent 70%);
  animation-delay: -8s;
}

.ambient-orb--c {
  width: 420px;
  height: 420px;
  top: 30%;
  right: 25%;
  background: radial-gradient(circle, rgba(255, 110, 199, 0.32), transparent 70%);
  animation-delay: -16s;
}

@keyframes orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.05); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}

/* ============================================================
   Glass utility — universal frosted panel
   ============================================================ */
.glass {
  background: rgba(10, 9, 8, 0.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 220, 140, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* ============================================================
   Top navigation — minimal glass bar
   ============================================================ */
.topnav {
  position: fixed;
  top: 16px;
  left: 16px;
  right: 16px;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 10px 16px 10px 18px;
  border-radius: var(--radius-pill);
  height: 56px;
  background: rgba(10, 9, 8, 0.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 220, 140, 0.08);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}

.brand-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFE0A0, #C49A50);
  box-shadow: 0 0 12px rgba(255, 200, 100, 0.35);
}

.brand-text strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0;
}

.brand-text small {
  display: block;
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

.topnav-links {
  display: flex;
  gap: 4px;
  flex: 1;
  justify-content: center;
}

.navlink {
  position: relative;
  padding: 8px 18px;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--ink-mute);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--t-fast), background var(--t-fast);
}

.navlink:hover {
  color: var(--ink);
  background: var(--glass-bg-faint);
}

.navlink.active {
  color: rgba(255, 220, 160, 0.92);
  background: rgba(255, 208, 128, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255, 208, 128, 0.18);
}

.topnav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.search-glass {
  width: 220px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 220, 140, 0.08);
  background: rgba(255, 220, 140, 0.04);
  color: rgba(255, 220, 160, 0.80);
  font-size: 12px;
  outline: none;
  transition: border-color var(--t-fast), background var(--t-fast);
}

.search-glass::placeholder {
  color: var(--ink-faint);
}

.search-glass:focus {
  border-color: var(--accent);
  background: var(--glass-bg);
}

.iconbtn {
  width: 38px;
  height: 38px;
  display: none; /* Hidden — prev/next entry arrows removed from topnav */
  place-items: center;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
  border-radius: 50%;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.iconbtn:hover {
  background: var(--glass-bg);
  border-color: var(--glass-border-strong);
  transform: translateY(-1px);
}

/* ============================================================
   Filter bar — role pills row
   ============================================================ */
/* ============================================================
   Timeline bar — Year Window slider, hero placement top center
   ============================================================ */
.timeline-bar {
  position: fixed;
  top: 88px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 45;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  background: rgba(10, 9, 8, 0.75);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255, 220, 140, 0.12);
  pointer-events: auto;
  min-width: 420px;
  max-width: 560px;
  width: 40vw;
}
.timeline-year-label {
  font-family: "Cascadia Code", "SF Mono", monospace;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 220, 160, 0.65);
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.timeline-slider-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.timeline-output {
  font-family: "Cascadia Code", "SF Mono", monospace;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255, 220, 160, 0.50);
  letter-spacing: 0.04em;
}
.year-range--hero {
  height: 32px;
  width: 100%;
}
.year-range--hero .year-range-track {
  height: 3px;
  background: rgba(255, 220, 140, 0.10);
}
.year-range--hero .year-range-fill {
  background: linear-gradient(90deg, rgba(255, 180, 80, 0.7), rgba(255, 220, 140, 0.9));
  box-shadow: 0 0 12px rgba(255, 180, 80, 0.3);
}
.year-range--hero .year-range-input::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  background: #FFD080;
  border: 2px solid rgba(10, 9, 8, 0.8);
  box-shadow: 0 0 10px rgba(255, 200, 100, 0.4);
}
.year-range--hero .year-range-input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #FFD080;
  border: 2px solid rgba(10, 9, 8, 0.8);
  box-shadow: 0 0 10px rgba(255, 200, 100, 0.4);
}

/* Pass 09 — Role filter: right-side vertical stack, rectangular cards.
   Hover = live filter preview; click = lock filter (handled in app.js). */
.filter-bar {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  pointer-events: none;
}

.filter-pills {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  background: transparent;
  border: none;
  pointer-events: auto;
  width: 240px;
}

.rolepill {
  --pill-color: rgba(255, 220, 140, 0.30);
  --pill-ink: rgba(255, 220, 160, 0.95);
  position: relative;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 4px;
  background: rgba(10, 9, 8, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--pill-ink);
  font-family: "Cascadia Code", "SF Mono", monospace;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              border-color 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
              box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rolepill::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--pill-color);
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: none;
  border-radius: 2px;
}
.rolepill > * { position: relative; z-index: 1; }

/* Icon: a 40×28 chip on the left edge, filled with the role colour */
.rolepill-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  border-radius: 3px;
  background: var(--pill-color);
  color: #0A0908;
  box-shadow: none;
  font-size: 14px;
  font-weight: 700;
  font-family: "Cascadia Code", "SF Mono", monospace;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.rolepill:hover,
.rolepill.preview {
  border-color: var(--pill-color);
  transform: translateX(-6px);
  box-shadow: -8px 0 22px -4px rgba(0,0,0,0.55);
}
.rolepill:hover::before,
.rolepill.preview::before {
  opacity: 0.85;
}
.rolepill:hover,
.rolepill.preview {
  color: var(--pill-ink);
}
.rolepill:hover .rolepill-dot,
.rolepill.preview .rolepill-dot {
  transform: scale(1.08);
}

.rolepill.active {
  border-color: var(--pill-color);
  box-shadow: -8px 0 22px -4px rgba(0,0,0,0.65);
}
.rolepill.active::before {
  opacity: 0.55;
}

.filter-meta {
  pointer-events: auto;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  transition: opacity var(--t-fast), transform var(--t-fast);
}

/* Hide filter-meta when detail panel is open to prevent collision */
body.detail-open .filter-meta {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}

/* When in a project page (Prezi-style bottom drawer), hide top UI
   so the 3D anchor is the visual focus */
body.project-open .topnav,
body.project-open .filter-bar,
body.project-open .sidepanel,
body.project-open .map-toolbar,
body.project-open .hud-hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.filter-meta strong {
  font-size: 14px;
  font-weight: 600;
}

.filter-meta span {
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 400;
}

/* ============================================================
   Workspace layout
   ============================================================ */
main {
  position: relative;
  z-index: 1;
  height: 100vh;
}

.workspace {
  position: relative;
  height: 100vh;
  width: 100%;
  padding-top: 0;
}

/* Floating left sidepanel */
.sidepanel {
  position: fixed;
  z-index: 30;
  border-radius: var(--radius-lg);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidepanel--left {
  left: 16px;
  top: 156px;
  width: 280px;
  max-height: calc(100vh - 240px);
  overflow: auto;
}

.sidepanel-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidepanel-section + .sidepanel-section {
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.stat {
  text-align: center;
  padding: 10px 6px;
  border-radius: var(--radius-md);
  background: rgba(255, 220, 140, 0.04);
  border: 1px solid rgba(255, 220, 140, 0.08);
}

.stat strong {
  display: block;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--ink);
}

.stat span {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0;
}

.range-glass {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--glass-bg-strong);
  outline: none;
}

.range-glass::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 12px rgba(180, 140, 255, 0.5);
}

.range-glass::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  box-shadow: 0 0 12px rgba(180, 140, 255, 0.5);
}

.textbtn {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0;
  transition: color var(--t-fast), background var(--t-fast);
}

.textbtn:hover {
  color: var(--ink);
  background: var(--glass-bg-faint);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
  position: relative;
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

.tag-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}

.tag-button span {
  color: var(--ink-faint);
  font-size: 10px;
}

.tag-button:hover {
  background: var(--glass-bg);
  color: var(--ink);
}

.tag-button.active {
  background: rgba(255, 255, 255, 0.18);
  color: var(--ink);
  border-color: var(--glass-border-strong);
}

/* ============================================================
   Map stage (center 3D area)
   ============================================================ */
.map-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.terrain-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.terrain-canvas {
  position: absolute;
  inset: 0;
}

.terrain-canvas canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

.terrain-canvas canvas:active {
  cursor: grabbing;
}

.terrain-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  gap: 6px;
  padding: 24px 32px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(160%);
  border: 1px solid var(--glass-border);
}

.terrain-empty strong {
  font-size: 16px;
  font-weight: 600;
}

.terrain-empty span {
  color: var(--ink-mute);
  font-size: 13px;
}

.terrain-empty[hidden] {
  display: none;
}

.map-toolbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 25;
  display: flex;
  gap: 4px;
  padding: 6px;
  border-radius: var(--radius-pill);
}

.toolbtn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border: none;
  background: transparent;
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.toolbtn:hover {
  background: var(--glass-bg-faint);
  color: var(--ink);
}

.toolbtn-icon {
  font-size: 14px;
  opacity: 0.8;
}

.hud-hint {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 20;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg-faint);
  backdrop-filter: blur(var(--glass-blur-light));
  border: 1px solid var(--glass-border);
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0;
}

/* ============================================================
   Detail panel — slide-in glass card
   ============================================================ */
.detail-panel {
  position: fixed;
  top: 92px;
  right: 16px;
  bottom: 16px;
  width: 440px;
  z-index: 35;
  border-radius: var(--radius-lg);
  overflow-y: auto;
  padding: 0;
  opacity: 0;
  transform: translateX(40px);
  pointer-events: none;
  transition: opacity var(--t-med), transform var(--t-med);
}

.detail-panel.visible {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.detail-back {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px 6px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
  backdrop-filter: blur(10px);
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  z-index: 2;
  transition: background var(--t-fast), color var(--t-fast);
}

.detail-back:hover {
  background: var(--glass-bg-strong);
  color: var(--ink);
}

.detail-back span {
  font-size: 14px;
}

.detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background var(--t-fast), transform var(--t-fast);
  z-index: 2;
}

.detail-close:hover {
  background: var(--glass-bg-strong);
  transform: rotate(90deg);
}

/* Hero band — colored accent zone at top */
.detail-hero {
  padding: 64px 28px 24px;
  border-bottom: 1px solid var(--glass-border);
  position: relative;
}

.detail-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 16px;
}

.hero-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.detail-hero .detail-eyebrow {
  margin: 0 0 8px;
}

.detail-hero h2 {
  margin: 0;
  font-family: "Instrument Serif", "Georgia", serif;
  font-weight: 400;
  font-size: clamp(36px, 4vw, 48px);
  line-height: 1.0;
  letter-spacing: 0;
  color: var(--ink);
}

.detail-hero .detail-meta {
  margin-top: 14px;
}

.detail-content {
  padding: 24px 28px 28px;
}

.detail-empty {
  display: grid;
  place-items: center;
  height: 100%;
  text-align: center;
  color: var(--ink-mute);
  gap: 14px;
}

.detail-empty h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: var(--ink);
}

.detail-empty p {
  margin: 0;
  font-size: 13px;
  max-width: 240px;
  line-height: 1.55;
}

.detail-mark {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.4), transparent 50%),
    conic-gradient(from 0deg, var(--accent-hot), var(--accent), var(--accent-cool));
  opacity: 0.7;
}

/* .detail-content is defined above (hero variant); keep eyebrow accent */

.detail-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
  border-radius: var(--radius-pill);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 500;
}

.detail-description {
  margin: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.55;
}

.detail-grid {
  display: grid;
  gap: 1px;
  margin-top: 8px;
  background: var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
}

.fact {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  padding: 12px 14px;
  background: var(--glass-bg-faint);
}

.fact span {
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}

.fact strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
}

.week-stack {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.week-stack h3 {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink-mute);
}

.week-stack button {
  text-align: left;
  padding: 10px 14px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  background: var(--glass-bg-faint);
  color: var(--ink-soft);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}

.week-stack button:hover {
  background: var(--glass-bg);
  color: var(--ink);
}

/* ============================================================
   Full-screen project page (Prezi-style "you are inside the project")
   ============================================================ */
/* Bottom-drawer style: leaves the 3D anchor visible at the top */
.project-page {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 38vh;
  z-index: 60;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(
    180deg,
    rgba(15, 10, 30, 0.85) 0%,
    rgba(15, 10, 30, 0.96) 16%,
    rgba(15, 10, 30, 0.98) 100%
  );
  backdrop-filter: blur(40px) saturate(140%);
  -webkit-backdrop-filter: blur(40px) saturate(140%);
  border-top: 1px solid var(--glass-border);
  box-shadow: 0 -24px 64px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transform: translateY(100%);
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  overflow-y: auto;
}

.project-page.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Drag handle visual hint at the top of the drawer */
.project-page::before {
  content: "";
  position: sticky;
  top: 12px;
  display: block;
  margin: 12px auto 0;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.18);
  z-index: 3;
}

.project-page-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 36px 64px 80px;
  display: block;
}

.project-page-inner > * + * {
  margin-top: 28px;
}

.project-back {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px 10px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  z-index: 2;
  transition: background var(--t-fast), transform var(--t-fast);
}

.project-back:hover {
  background: var(--glass-bg-strong);
  transform: translateX(calc(-50% - 2px));
}

.project-page-close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background var(--t-fast), transform var(--t-fast);
}

.project-page-close:hover {
  background: var(--glass-bg-strong);
  transform: rotate(90deg);
}

.project-hero {
  padding: 32px 40px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-bucket, #E1FA3C) 18%, transparent) 0%, transparent 55%),
    var(--glass-bg);
}

.project-hero > * + * {
  margin-top: 14px;
}

.project-title {
  font-size: clamp(40px, 5vw, 64px) !important;
}

.project-bucket-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  width: max-content;
}

.project-bucket-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}

.project-date {
  color: var(--ink-mute);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0;
}

.project-title {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(48px, 7vw, 96px);
  line-height: 0.96;
  letter-spacing: 0;
  color: var(--ink);
}

.project-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.project-description {
  margin: 0;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.55;
  max-width: 760px;
}

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  overflow: hidden;
}

.project-grid .fact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 24px 28px;
  background: transparent;
  border-right: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  grid-template-columns: none;
}

.project-grid .fact span {
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}

.project-grid .fact strong {
  color: var(--ink);
  font-size: 17px;
  font-weight: 500;
}

.project-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px 40px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
}

.project-section h3 {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
  color: var(--ink-mute);
}

.project-related {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.project-related-btn {
  text-align: left;
  padding: 14px 18px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg-faint);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}

.project-related-btn:hover {
  background: var(--glass-bg);
  border-color: var(--glass-border-strong);
  transform: translateX(4px);
}

.project-related-btn small {
  display: block;
  margin-top: 4px;
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0;
}

.project-nav {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-top: 8px;
}

.project-nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  padding: 16px 20px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  border-radius: var(--radius-md);
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}

.project-nav-btn:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}

.project-nav-btn[data-direction="next"] {
  text-align: right;
  align-items: flex-end;
}

.project-nav-btn small {
  color: var(--ink-mute);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
}

/* ============================================================
   Nav-tab overlays (Roles / Firsts / Throughlines pages)
   ============================================================ */
.nav-page {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: rgba(10, 8, 20, 0.55);
  backdrop-filter: blur(32px) saturate(140%);
  -webkit-backdrop-filter: blur(32px) saturate(140%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-med);
  overflow-y: auto;
  padding: 96px 64px 64px;
}

.nav-page.visible {
  opacity: 1;
  pointer-events: auto;
}

.nav-page-close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(20px);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 2;
  transition: background var(--t-fast), transform var(--t-fast);
}

.nav-page-close:hover {
  background: var(--glass-bg-strong);
  transform: rotate(90deg);
}

.nav-page-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.nav-page-header {
  margin-bottom: 40px;
}

.nav-page-eyebrow {
  display: block;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0;
  margin-bottom: 8px;
}

.nav-page-title {
  margin: 0;
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  font-size: clamp(48px, 6vw, 80px);
  line-height: 0.98;
  letter-spacing: 0;
}

.nav-page-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.nav-page-card {
  padding: 24px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast), border-color var(--t-fast);
  text-align: left;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-page-card:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  transform: translateY(-2px);
}

.nav-page-card strong {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0;
}

.nav-page-card small {
  color: var(--ink-mute);
  font-size: 12px;
  font-weight: 500;
}

.nav-page-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.5;
}

/* ============================================================
   Tooltip
   ============================================================ */
.tooltip {
  position: fixed;
  z-index: 100;
  display: none;
  max-width: 300px;
  padding: 10px 14px;
  border-radius: 0;
  background: rgba(10, 9, 8, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 220, 140, 0.20);
  color: #E8E4D8;
  font-family: "Cascadia Code", "SF Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.tooltip strong {
  display: block;
  font-family: "Cascadia Code", "SF Mono", monospace;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFE0A0;
}

.tooltip span {
  display: block;
  color: rgba(232, 228, 216, 0.60);
  font-size: 10px;
}

/* ============================================================
   2D fallback grid (when toggled)
   ============================================================ */
.map-scroll {
  display: none;
}

.has-terrain.view-2d .filter-pills { display: none; }
.has-terrain.view-2d .map-scroll {
  display: block;
  position: fixed;
  top: 156px;
  bottom: 100px;
  left: 316px;
  right: 16px;
  overflow: auto;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
}

body.detail-open.view-2d .map-scroll {
  right: 456px;
}

.has-terrain.view-2d .terrain-stage,
.has-terrain.view-2d .hud-hint {
  display: none;
}

.has-terrain:not(.view-2d) .map-scroll {
  display: none;
}

/* Pass 04: 2D grid is a year × month calendar (rows = years, 12 month cols) */
.map-scale {
  transform-origin: top left;
  transition: transform 280ms ease;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Size to content so the year columns overflow → horizontal scroll. */
  width: max-content;
  min-width: 100%;
}

.week-header,
.week-row,
.year-row {
  display: grid;
  /* Pass 10: swapped axis — first column = month label (64px), then one
     column per year (2009→now) at a fixed width so the row scrolls sideways. */
  grid-template-columns: 64px repeat(var(--year-count, 18), 56px);
  gap: 4px;
  align-items: center;
}

/* Keep the month-label column + header corner pinned during horizontal scroll. */
.year-row-label,
.grid-corner {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
}
.grid-corner { z-index: 3; }
.week-header .year-col-label { z-index: 0; }

.week-header {
  position: sticky;
  top: 0;
  z-index: 2;
  padding-top: 6px;
  padding-bottom: 10px;
  margin-bottom: 6px;
  background: linear-gradient(var(--paper), rgba(237, 228, 206, 0.7));
  border-bottom: 2px solid var(--ink);
}

.grid-corner {
  /* empty corner */
}

.month-col-label,
.year-col-label {
  color: var(--ink);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.year-row-label,
.week-row-label {
  color: var(--ink);
  font-family: var(--font-year), var(--font-data);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  padding-right: 8px;
  letter-spacing: 0;
}

.year-grid {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

/* Role-bucket coloring — matches the 3D stacked prism colors */
.cell {
  width: 100%;
  height: 36px;
  border: 1px solid var(--glass-border);
  border-radius: 0;
  background: var(--glass-bg-faint);
  cursor: pointer;
  transition: transform var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast);
}

.cell.has-entry {
  background: rgba(200, 192, 224, 0.25);
  border-color: rgba(200, 192, 224, 0.45);
}

.cell[data-bucket="MovingImages"]   { background: rgba(242, 59, 33, 0.55); border-color: rgba(242, 59, 33, 0.8); }
.cell[data-bucket="VisualSystems"] { background: rgba(225, 250, 60, 0.55); border-color: rgba(225, 250, 60, 0.8); }
.cell[data-bucket="CompCulture"]   { background: rgba(74, 81, 74, 0.55); border-color: rgba(74, 81, 74, 0.8); }
.cell[data-bucket="DocResearch"]   { background: rgba(200, 146, 59, 0.55); border-color: rgba(200, 146, 59, 0.8); }
.cell[data-bucket="LeadershipEdu"] { background: rgba(91, 140, 62, 0.55); border-color: rgba(91, 140, 62, 0.8); }
.cell[data-bucket="Other"]        { background: rgba(200, 192, 224, 0.35); border-color: rgba(200, 192, 224, 0.5); }

/* Tone overlay — slight saturation bump for denser weeks */
.cell[data-tone="3"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12); }
.cell[data-tone="4"] { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22), 0 0 6px rgba(255, 255, 255, 0.12); }

.cell:hover {
  transform: scale(1.25);
  z-index: 5;
  border-color: rgba(255, 255, 255, 0.55);
}

.cell.active {
  transform: scale(1.35);
  border-color: var(--accent);
  box-shadow: 0 0 12px var(--accent);
  z-index: 6;
}

.cell.filtered-out {
  opacity: 0.18;
}

/* ============================================================
   Scrollbar styling (subtle)
   ============================================================ */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.16);
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .topnav {
    left: 8px;
    right: 8px;
    padding: 8px 12px;
    gap: 12px;
  }
  .topnav-links { display: none; }
  .search-glass { width: 140px; }
  .filter-bar { top: auto; bottom: 80px; right: 8px; left: auto; transform: none; }
  .filter-bar .filter-pills { width: 220px; }
  .filter-meta { display: none; }
  .sidepanel--left { width: 240px; }
  .detail-panel { width: calc(100vw - 32px); }
}

/* ============================================================
   Time Machine r02 — design.md implementation
   Daylit room, CV palette, frosted city, vegetation-only green
   ============================================================ */

:root {
  --room: #0A0908;
  --paper: #141210;
  --ink: #E8E4D8;
  --ink-soft: rgba(232, 228, 216, 0.78);
  --ink-mute: rgba(232, 228, 216, 0.55);
  --ink-faint: rgba(232, 228, 216, 0.32);
  --acid: #FFD080;
  --signal: #C49A5A;
  --gold: #C8923B;
  --leaf: #6B8B4A;
  --leaf-hi: #8BA85A;
  --sun: #FFF3D6;
  --bg-deep: #0A0908;
  --bg-grad-a: #0C0B09;
  --bg-grad-b: #0E0D0A;
  --bg-grad-c: #0A0C0A;
  --glass-bg: rgba(10, 9, 8, 0.65);
  --glass-bg-strong: rgba(10, 9, 8, 0.82);
  --glass-bg-faint: rgba(10, 9, 8, 0.40);
  --glass-border: rgba(255, 220, 140, 0.08);
  --glass-border-strong: rgba(255, 220, 140, 0.16);
  --glass-blur: 18px;
  --glass-blur-light: 10px;
  --accent: #FFD080;
  --accent-hot: #C49A5A;
  --accent-cool: #8A9AA0;
  --accent-warm: #C8A04A;
  --role-moving-images: #C49A5A;
  --role-visual-systems: #B8A468;
  --role-comp-culture: #8A9AA0;
  --role-doc-research: #C8A04A;
  --role-leadership-edu: #9AA878;
  --role-other: #A89878;
  --radius-lg: 8px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --shadow-glass: 0 18px 48px rgba(0, 0, 0, 0.40), inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --shadow-float: 0 24px 70px rgba(0, 0, 0, 0.50);
  --font-data: "Cascadia Code", ui-monospace, SFMono-Regular, Consolas, monospace;
  --font-identity: "Inthacity", "Instrument Serif", Georgia, serif;
  --font-year: "Climate Crisis", Impact, sans-serif;
  --font-human: "Saithik", "Instrument Serif", Georgia, serif;
  color-scheme: dark;
}

* {
  letter-spacing: 0;
}

body {
  font-family: var(--font-data);
  background: #0A0908;
  color: var(--ink);
}

.ambient-bg {
  background: #0A0908;
  display: none;
}

.ambient-bg::before {
  content: "";
  position: absolute;
  right: -5vw;
  top: 11vh;
  width: min(43vw, 680px);
  height: 68vh;
  border: clamp(18px, 2.5vw, 38px) solid rgba(255, 255, 255, 0.58);
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  background:
    linear-gradient(180deg, rgba(231, 241, 239, 0.72), rgba(247, 244, 236, 0.2) 48%, rgba(127, 176, 74, 0.26) 100%),
    linear-gradient(145deg, transparent 0 58%, rgba(91, 140, 62, 0.24) 59% 100%);
  box-shadow: -28px 34px 80px rgba(122, 98, 55, 0.11), inset 0 0 0 1px rgba(26, 23, 20, 0.05);
}

.ambient-bg::after {
  content: "";
  position: absolute;
  left: 11vw;
  right: 11vw;
  bottom: -17vh;
  height: 42vh;
  border-radius: 50% 50% 0 0;
  background:
    linear-gradient(90deg, rgba(26, 23, 20, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(26, 23, 20, 0.06) 1px, transparent 1px),
    rgba(237, 228, 206, 0.4);
  background-size: 72px 72px;
  transform: perspective(800px) rotateX(62deg);
  transform-origin: bottom;
  opacity: 0.64;
}

.ambient-orb {
  display: none;
}

.glass,
.filter-pills,
.filter-meta,
.terrain-empty,
.has-terrain.view-2d .map-scroll,
.project-page,
.project-hero,
.project-grid,
.project-section,
.project-nav-btn,
.nav-page-card {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  box-shadow: var(--shadow-glass);
}

.topnav {
  top: 18px;
  left: 22px;
  right: 22px;
  height: 64px;
  border-radius: var(--radius-lg);
}

.brand-dot {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background:
    linear-gradient(135deg, var(--acid) 0 52%, var(--signal) 52% 100%);
  box-shadow: 0 12px 28px rgba(242, 59, 33, 0.18);
}

.brand-text strong,
.detail-hero h2,
.project-title,
.nav-page-title {
  font-family: var(--font-identity);
  color: var(--ink);
}

.brand-text small,
.filter-meta span,
.section-head,
.detail-eyebrow,
.detail-meta,
.project-date,
.project-section h3,
.project-nav-btn small,
.nav-page-card small,
.tooltip span,
.week-row-label {
  color: rgba(232, 228, 216, 0.55);
}

.navlink,
.toolbtn,
.textbtn,
.pill,
.project-related-btn,
.nav-page-card,
.iconbtn,
.detail-close,
.detail-back,
.project-back,
.project-page-close,
.nav-page-close {
  color: rgba(232, 228, 216, 0.75);
}

.search-glass {
  color: rgba(232, 228, 216, 0.65);
  background: rgba(255, 220, 140, 0.04);
  border: 1px solid rgba(255, 220, 140, 0.10);
}

.rolepill {
  color: rgba(255, 220, 160, 0.80);
  font-size: 12px;
  font-weight: 600;
}

.tag-button {
  color: rgba(232, 228, 216, 0.80);
  border-color: rgba(255, 220, 140, 0.10);
}

.navlink:hover,
.navlink.active,
.toolbtn:hover,
.iconbtn:hover,
.textbtn:hover,
.project-related-btn:hover {
  color: #FFE0A0;
  background: rgba(255, 220, 140, 0.08);
}

.rolepill:hover {
  color: #FFE8C0;
  background: rgba(255, 220, 140, 0.10);
}

.rolepill.active {
  color: #FFE8C0;
  background: rgba(255, 208, 128, 0.14);
  box-shadow: inset 0 0 0 1px rgba(255, 208, 128, 0.25);
}

.tag-button:hover,
.tag-button.active {
  color: #FFE0A0;
  background: rgba(255, 220, 140, 0.10);
  border-color: rgba(255, 220, 140, 0.20);
}

.navlink.active {
  color: #FFE0A0;
  box-shadow: inset 0 0 0 1px rgba(255, 208, 128, 0.20);
}

.search-glass:focus {
  border-color: #FFD080;
  background: rgba(10, 9, 8, 0.85);
}

.rolepill-dot,
.project-bucket-dot,
.hero-dot {
  border: 1px solid rgba(255, 220, 140, 0.25);
  box-shadow: 0 0 0 2px rgba(255, 220, 140, 0.10);
}

.sidepanel--left {
  top: 100px;
}

.stat {
  background: rgba(255, 220, 140, 0.06);
  border-color: rgba(255, 220, 140, 0.12);
}

.stat strong {
  font-family: var(--font-year);
  font-size: 20px;
  color: #FFE0A0;
}

.stat span {
  color: rgba(232, 228, 216, 0.70);
}

.range-glass {
  background: rgba(26, 23, 20, 0.12);
}

.range-glass::-webkit-slider-thumb {
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(242, 59, 33, 0.12);
}

.range-glass::-moz-range-thumb {
  background: var(--signal);
  box-shadow: 0 0 0 4px rgba(242, 59, 33, 0.12);
}

/* Pass 05 — Year Window range slider. Two overlapping <input type="range">
   elements on a shared track. JS updates --start-pct / --end-pct to position
   the filled segment. Thumbs use pointer-events: auto only over their own
   half so each can be grabbed independently. */
.year-range {
  position: relative;
  height: 28px;
  margin-top: 6px;
}
.year-range-track {
  position: absolute;
  inset: 50% 0 auto 0;
  height: 4px;
  margin-top: -2px;
  background: rgba(26, 23, 20, 0.12);
  border-radius: 999px;
  pointer-events: none;
}
.year-range-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--start-pct, 0%);
  right: calc(100% - var(--end-pct, 100%));
  background: var(--signal);
  border-radius: 999px;
}
.year-range-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;       /* track is non-interactive */
  margin: 0;
}
.year-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;       /* but thumbs ARE interactive */
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 4px rgba(242, 59, 33, 0.08);
  cursor: grab;
  transition: transform 80ms ease-out;
}
.year-range-input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}
.year-range-input::-webkit-slider-thumb:active {
  cursor: grabbing;
  transform: scale(1.05);
}
.year-range-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  box-shadow: 0 0 0 4px rgba(242, 59, 33, 0.08);
  cursor: grab;
}
.year-range-input::-moz-range-track {
  background: transparent;
}
.year-range-input:focus {
  outline: none;
}

.hud-hint {
  display: none;
}

.map-toolbar {
  bottom: 26px;
  border-radius: var(--radius-lg);
}

.terrain-canvas canvas {
  filter: saturate(1.02) contrast(1.01);
}

.detail-panel {
  top: 98px;
  right: 22px;
  bottom: 22px;
}

.detail-hero {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-bucket, var(--acid)) 26%, transparent) 0%, transparent 58%),
    rgba(255, 253, 246, 0.32) !important;
}

.detail-description,
.project-description,
.nav-page-card p {
  color: var(--ink-soft);
}

.fact,
.week-stack button,
.project-grid .fact,
.project-related-btn {
  background: rgba(255, 253, 246, 0.34);
  border-color: var(--glass-border);
}

.fact strong,
.project-grid .fact strong,
.nav-page-card strong {
  color: var(--ink);
}

.project-page {
  top: 39vh;
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, rgba(247, 244, 236, 0.72), rgba(237, 228, 206, 0.96) 22%, rgba(237, 228, 206, 0.98));
  box-shadow: 0 -24px 72px rgba(67, 47, 20, 0.18);
}

.project-page::before {
  background: rgba(26, 23, 20, 0.2);
}

.nav-page {
  background: rgba(247, 244, 236, 0.72);
}

.nav-page-eyebrow {
  color: var(--signal);
}

.tooltip {
  background: rgba(10, 9, 8, 0.92);
  color: #E8E4D8;
  font-family: "Cascadia Code", "SF Mono", monospace;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 0;
  border: 1px solid rgba(255, 220, 140, 0.20);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  max-width: 300px;
  padding: 10px 14px;
}
.tooltip strong {
  font-family: "Cascadia Code", "SF Mono", monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFE0A0;
}
.tooltip span {
  color: rgba(232, 228, 216, 0.60);
}

.has-terrain.view-2d .map-scroll {
  background: rgba(247, 244, 236, 0.72);
}

.week-header {
  background: linear-gradient(rgba(247, 244, 236, 0.96), rgba(247, 244, 236, 0.72));
  border-bottom-color: var(--glass-border);
}

.year-col-label {
  font-family: var(--font-year);
  /* The 2D sheet + header are light, but r02 --ink is cream → force a dark
     ink so the year columns are legible. */
  color: #1A1714;
  font-size: 11px;
  font-weight: 700;
}

.cell {
  background: rgba(255, 253, 246, 0.32);
  border-color: rgba(26, 23, 20, 0.12);
}

.cell.has-entry {
  background: rgba(216, 208, 190, 0.42);
  border-color: rgba(26, 23, 20, 0.18);
}

.cell[data-bucket="MovingImages"]  { background: rgba(242, 59, 33, 0.72); border-color: rgba(178, 35, 18, 0.86); }
.cell[data-bucket="VisualSystems"] { background: rgba(225, 250, 60, 0.7); border-color: rgba(168, 190, 35, 0.85); }
.cell[data-bucket="CompCulture"]   { background: rgba(74, 81, 74, 0.62); border-color: rgba(26, 23, 20, 0.62); }
.cell[data-bucket="DocResearch"]   { background: rgba(200, 146, 59, 0.72); border-color: rgba(144, 97, 35, 0.86); }
.cell[data-bucket="LeadershipEdu"] { background: rgba(91, 140, 62, 0.65); border-color: rgba(61, 100, 38, 0.82); }
.cell[data-bucket="Other"]        { background: rgba(216, 208, 190, 0.5); border-color: rgba(26, 23, 20, 0.2); }

.cell:hover {
  border-color: var(--signal);
}

.cell.active {
  border-color: var(--signal);
  box-shadow: 0 0 0 3px rgba(242, 59, 33, 0.14), 0 0 18px rgba(242, 59, 33, 0.22);
}

::-webkit-scrollbar-thumb {
  background: rgba(26, 23, 20, 0.16);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(26, 23, 20, 0.28);
}

@media (max-width: 980px) {
  .topnav {
    left: 8px;
    right: 8px;
    top: 8px;
  }

  .filter-bar {
    top: auto; bottom: 80px; right: 8px; left: auto; transform: none;
  }

  .sidepanel--left {
    top: auto;
    left: 8px;
    right: 8px;
    bottom: 78px;
    width: auto;
    max-height: 34vh;
  }

  .detail-panel {
    top: 88px;
    right: 8px;
    bottom: 8px;
    width: calc(100vw - 16px);
  }
}

/* ============================================================
   Pass 03 — Brutalist side modal + editorial typography
   Implements typography.md + Layout & Grid System.md.
   The bottom drawer of Pass 02 is replaced by a right-side
   split-screen panel: ledger sidebar + display mainboard.
   ============================================================ */

.project-page {
  /* Right-side panel — covers ~67% of viewport, leaves 33% for the 3D building */
  top: 0 !important;
  left: 33vw !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  border-radius: 0 !important;
  /* Outer background is dark so the area below the sticky ledger
     sidebar (which doesn't stretch) still reads as the dark ledger column.
     The mainboard paints its own category color on top of this.
     Hardcoded to #1A1714 because root --ink is cream in r02. */
  background: #1A1714 !important;
  border-left: 2px solid #1A1714;
  box-shadow: -8px 0 0 0 #1A1714, -28px 0 60px rgba(26, 23, 20, 0.18) !important;
  transform: translateX(100%);
  transition:
    transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 200ms ease-out !important;
  overflow-y: auto;
  z-index: 60;
}

.project-page.visible {
  transform: translateX(0) !important;
}

.project-page::before {
  display: none !important; /* no drag handle in side modal */
}

.project-page-inner {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 30%) 1fr !important;
  min-height: 100vh;
  gap: 0 !important;
}

.project-page-inner > * + * {
  margin-top: 0 !important;
}

.project-page-close {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  width: 44px !important;
  height: 44px !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0 !important;
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-data) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  cursor: pointer;
  z-index: 5;
  box-shadow: 4px 4px 0 0 var(--ink);
  transition: transform 100ms ease-out, box-shadow 100ms ease-out !important;
}
.project-page-close:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--ink);
}

.project-back {
  display: none !important; /* the × doubles as back-to-cluster then close */
}

/* ─── Ledger sidebar (left column of the modal) ─── */
/* Root r02 flips --ink to cream (#E8E4D8), which broke the dark-sidebar
   aesthetic.  Force explicit dark bg / light fg so labels, borders and
   values stay readable regardless of the root colour-scheme.          */
.project-ledger {
  background: #1A1714;
  color: #E8E4D8;
  padding: 32px 26px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  border-right: 2px solid #1A1714;
  position: sticky;
  top: 0;
  align-self: start;
  max-height: 100vh;
  overflow-y: auto;
}

.project-ledger .ledger-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(232, 228, 216, 0.18);
}
.project-ledger .ledger-row:last-child { border-bottom: 0; }

.project-ledger .ledger-label {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232, 228, 216, 0.55);
}

.project-ledger .ledger-value {
  font-family: var(--font-data);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #E8E4D8;
  word-break: break-word;
  line-height: 1.35;
  word-break: break-word;
}

/* ─── Mainboard (right column of the modal) ─── */
.project-mainboard {
  /* Full bucket colour as background.  --modal-bg and --modal-ink are set
     per-entry from ROLE_PILLS[].modalBg / .ink so each bucket gets the
     correct contrast (dark text on lime, white text on red, etc.). */
  --ink: var(--modal-ink, #1A1714);
  --paper: var(--modal-bg, #EDE4CE);
  padding: 40px 56px 80px;
  display: flex;
  flex-direction: column;
  gap: 36px;
  background: var(--modal-bg, #EDE4CE);
  color: var(--ink);
  transition: background 280ms ease-out;
}

.project-mainboard .display-eyebrow {
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.project-mainboard .display-eyebrow::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: var(--accent-bucket, var(--signal));
  border: 2px solid var(--ink);
}

/* Colored accent banner at the top of the mainboard — keeps category identity
   prominent without saturating the whole panel. */
.project-mainboard::before {
  content: "";
  display: block;
  height: 6px;
  margin: -40px -56px 0;
  background: var(--accent-bucket, var(--signal));
}

.project-mainboard .display-title {
  font-family: var(--font-year);
  font-weight: 400;
  /* Tuned to fit within the 67vw mainboard column without pushing
     the 3D building out of view in the left 33vw. */
  font-size: clamp(24px, 2.8vw, 44px);
  line-height: 1.05;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
  overflow-wrap: break-word;
  hyphens: none;
}

.project-mainboard .display-tagstrip {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.project-mainboard .display-tagstrip .pill {
  padding: 8px 14px;
  border: 0;
  border-right: 1px solid var(--ink);
  border-radius: 0 !important;
  background: transparent;
  color: var(--ink);
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.project-mainboard .section-block {
  border-top: 2px solid var(--ink);
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.project-mainboard .section-head {
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  margin: 0;
}

.project-mainboard .body-copy {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.55;
  letter-spacing: 0;
  color: var(--ink);
  max-width: 60ch;
  margin: 0;
}

.project-mainboard .related-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 2px solid var(--ink);
}
.project-mainboard .related-grid > button {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 12px 18px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: background 80ms ease-out, color 80ms ease-out;
}
.project-mainboard .related-grid > button:last-child { border-bottom: 0; }
.project-mainboard .related-grid > button:hover {
  background: var(--ink);
  color: var(--paper);
}
.project-mainboard .related-grid > button strong {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: uppercase;
}
.project-mainboard .related-grid > button small {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}

.cluster-entry-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border: 2px solid var(--ink);
}
.cluster-entry-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 14px 18px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: background 80ms ease-out, color 80ms ease-out;
}
.cluster-entry-row:last-child { border-bottom: 0; }
.cluster-entry-row:hover {
  background: var(--ink);
  color: var(--paper);
}
.cluster-entry-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.cluster-entry-main strong {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cluster-entry-main small {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.7;
}
.cluster-entry-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.cluster-entry-date {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  opacity: 0.5;
}
.cluster-entry-meta .pill {
  font-size: 10px;
  padding: 2px 6px;
}

.project-mainboard .prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 2px solid var(--ink);
  gap: 0;
}
.project-mainboard .prev-next > button {
  border: 0;
  border-radius: 0;
  background: var(--paper);
  padding: 18px 22px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background 80ms ease-out, color 80ms ease-out;
}
.project-mainboard .prev-next > button + button { border-left: 2px solid var(--ink); }
.project-mainboard .prev-next > button:hover {
  background: var(--ink);
  color: var(--paper);
}
.project-mainboard .prev-next .nav-label {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}
.project-mainboard .prev-next .nav-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* While the modal is open, hide all the floating UI behind it so the
   3D building reads cleanly on the left third. */
body.project-open .topnav,
body.project-open .filter-bar,
body.project-open .sidepanel,
body.project-open .map-toolbar,
body.project-open .hud-hint {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* Mobile: side modal collapses to full-screen drawer */
@media (max-width: 980px) {
  .project-page {
    left: 0 !important;
    border-left: 0 !important;
    box-shadow: 0 -8px 0 0 var(--ink), 0 -28px 60px rgba(26,23,20,0.18) !important;
  }
  .project-page-inner {
    grid-template-columns: 1fr !important;
  }
  .project-ledger {
    position: static;
    max-height: none;
  }
  .project-mainboard {
    padding: 24px 22px 60px;
  }
}

/* ============================================================
   Pass 04 — Editor mode (?edit=1)
   Brutalist inputs, evidence grid, media drop-zone.
   ============================================================ */

.mainboard-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.modal-action-btn {
  padding: 10px 18px;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 0;
  cursor: pointer;
  box-shadow: 4px 4px 0 0 var(--ink);
  transition: transform 100ms ease-out, box-shadow 100ms ease-out;
}
.modal-action-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--ink);
}
.modal-action-btn--ghost {
  background: var(--paper);
  color: var(--ink);
}

.modal-action-btn--danger {
  background: #d32f2f;
  color: #fff;
  margin-left: auto;
}
.modal-action-btn--danger:hover {
  background: #b71c1c;
}

.edit-controls { display: flex; gap: 10px; }

/* ─── Sidebar inputs (left column) ─── */
.project-ledger--edit { padding-top: 24px; }
.project-ledger--edit .ledger-row { gap: 6px; }
.project-ledger .edit-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(237, 228, 206, 0.18);
}
.project-ledger .edit-row .edit-label {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(237, 228, 206, 0.6);
}
.project-ledger .edit-row input {
  font-family: var(--font-data);
  font-size: 13px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(232, 228, 216, 0.32);
  padding: 4px 0;
  color: #E8E4D8;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.project-ledger .edit-row input:focus {
  outline: 0;
  border-bottom-color: #FFD58C;
}

/* ─── Mainboard inputs (right column) ─── */
.project-mainboard--edit .edit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-mainboard--edit .edit-row .edit-label {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.project-mainboard--edit .edit-row input,
.project-mainboard--edit .edit-row textarea {
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.5;
  padding: 12px 14px;
  background: rgba(255,255,255,0.15);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 0;
  outline: 0;
  width: 100%;
  resize: vertical;
}
.project-mainboard--edit .edit-row input:focus,
.project-mainboard--edit .edit-row textarea:focus {
  box-shadow: 4px 4px 0 0 var(--ink);
  transform: translate(-2px, -2px);
}

.edit-title-input {
  font-family: "Inter", sans-serif !important;
  font-weight: 900 !important;
  font-size: clamp(22px, 2.6vw, 36px) !important;
  line-height: 1.05 !important;
  text-transform: uppercase !important;
  letter-spacing: -0.01em !important;
  padding: 12px 14px !important;
}

/* ─── Evidence grid (read view) ─── */
/* ─── Bento grid ─── */
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(180px, auto);
  gap: 8px;
}
.bento-single  { grid-column: span 1; }
.bento-wide    { grid-column: span 2; }
.bento-tall    { grid-column: span 1; grid-row: span 2; }
.bento-featured { grid-column: span 2; grid-row: span 2; }

.ev-figure {
  margin: 0;
  border: 0;
  border-radius: 6px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.ev-figure img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--ink);
  border: 0;
}
.ev-figure video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  background: var(--ink);
  border: 0;
}
.ev-figure iframe {
  width: 100%;
  height: 100%;
  display: block;
  background: var(--ink);
  border: 0;
  flex: 1;
}
.ev-figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 10px 8px;
  font-family: var(--font-data);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  pointer-events: none;
}
.ev-figure figcaption a {
  pointer-events: auto;
  color: #fff;
  text-decoration: underline;
}
.ev-link {
  font-family: var(--font-data);
  font-size: 12px;
  color: var(--ink);
  word-break: break-all;
}

/* ─── Evidence editor list ─── */
.ev-edit-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.ev-edit-item {
  position: relative;
  border: 2px solid var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
}
.ev-edit-preview {
  aspect-ratio: 16 / 9;
  background: var(--ink);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ev-edit-preview img,
.ev-edit-preview video,
.ev-edit-preview iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
}
.ev-edit-fallback {
  color: var(--paper);
  font-family: var(--font-data);
  font-size: 11px;
  padding: 8px;
  word-break: break-all;
}
.ev-edit-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-top: 1px solid var(--ink);
}
.ev-edit-meta small {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ink);
}
.ev-edit-meta input {
  font-family: var(--font-data);
  font-size: 12px;
  padding: 4px 6px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  outline: 0;
}
.ev-edit-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 26px;
  height: 26px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  border-radius: 0;
  display: grid;
  place-items: center;
}
.ev-edit-remove:hover {
  background: var(--ink);
  color: var(--paper);
}

.ev-edit-controls {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 12px;
  margin-top: 16px;
}
.ev-edit-social-link {
  display: grid;
  place-items: center;
  height: 100%;
  font-family: var(--font-data);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
}
.ev-figure--pdf figcaption,
.ev-figure--behance figcaption {
  position: static;
  background: rgba(0,0,0,0.85);
  padding: 8px 10px;
}
.ev-figure--embed {
  min-height: 180px;
}
.ev-figure--embed blockquote {
  margin: 0;
  padding: 0;
  flex: 1;
  display: grid;
  place-items: center;
}
.ev-embed-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
}
.ev-embed-placeholder a {
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  padding: 12px 20px;
  border: 2px solid rgba(255,255,255,0.25);
  text-decoration: none;
  transition: background 120ms ease-out;
}
.ev-embed-placeholder a:hover {
  background: rgba(255,255,255,0.12);
}
.ev-upload-btn {
  display: grid;
  place-items: center;
  padding: 18px;
  border: 2px dashed var(--ink);
  cursor: pointer;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  transition: background 80ms ease-out, color 80ms ease-out;
}
.ev-upload-btn:hover {
  background: var(--ink);
  color: var(--paper);
}
.ev-figure--link {
  min-height: auto;
}
.ev-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(26, 23, 20, 0.6);
  border: 2px solid rgba(232, 228, 216, 0.15);
  text-decoration: none;
  color: var(--paper, #EDE4CE);
  transition: border-color 0.2s, background 0.2s;
}
.ev-link-card:hover {
  border-color: rgba(232, 228, 216, 0.4);
  background: rgba(26, 23, 20, 0.8);
}
.ev-link-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 2px solid currentColor;
  font-family: var(--font-display, sans-serif);
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}
.ev-link-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ev-link-label {
  font-family: var(--font-data, monospace);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ev-link-domain {
  font-family: var(--font-data, monospace);
  font-size: 11px;
  opacity: 0.55;
  letter-spacing: 0.02em;
}

.model-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(26, 23, 20, 0.5);
  border: 2px solid rgba(197, 224, 58, 0.3);
}
.model-status-icon {
  color: #C5E03A;
  font-size: 16px;
}
.model-status-text {
  font-family: var(--font-data);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper);
  flex: 1;
}
.model-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  cursor: pointer;
  font-family: var(--font-data);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--paper);
}
.model-toggle input {
  width: 16px;
  height: 16px;
  accent-color: #C5E03A;
  cursor: pointer;
}
.model-toggle em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.5;
}

.ev-link-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
.ev-link-form input {
  font-family: var(--font-data);
  font-size: 13px;
  padding: 10px 12px;
  border: 2px solid var(--ink);
  border-radius: 0;
  background: rgba(255,255,255,0.15);
  color: var(--ink);
  outline: 0;
}
.ev-link-form button {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: 2px solid var(--ink);
  padding: 0 18px;
  cursor: pointer;
  border-radius: 0;
  box-shadow: 4px 4px 0 0 var(--ink);
}
.ev-link-form button:hover {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 0 var(--ink);
}

/* Edit-mode body marker — could be used to hide things or theme controls */
html.edit-mode .topnav-actions::after {
  content: " · EDIT MODE";
  color: var(--signal);
  font-weight: 700;
  letter-spacing: 0.1em;
  align-self: center;
  margin-left: 8px;
  font-size: 11px;
}

/* ============================================================
   Pass 04 — Brutalist master pages (Roles / Clients)
   Replaces the soft glass nav-page cards. Per typography.md +
   Layout & Grid System.md.
   ============================================================ */
.nav-page {
  background: var(--paper) !important;
  padding: 80px 0 64px !important;
}
.nav-page-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 56px;
}
.nav-page-header {
  border-bottom: 2px solid var(--ink);
  padding-bottom: 28px;
  margin-bottom: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.nav-page-eyebrow {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-block;
}
.nav-page-title {
  font-family: var(--font-year) !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 6vw, 96px) !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.nav-page-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav-page-add {
  margin-left: auto;
}

.nav-page-groups {
  display: flex;
  flex-direction: column;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}
.nav-group {
  border-bottom: 1px solid var(--ink);
}
.nav-group:last-child { border-bottom: 0; }

.nav-group-row {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 16px;
  align-items: baseline;
  width: 100%;
  padding: 16px 8px;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: background 80ms ease-out, color 80ms ease-out;
}
.nav-group-row:hover,
.nav-group.is-open .nav-group-row {
  background: var(--ink);
  color: var(--paper);
}

/* Bucket-grouped rows: include a color swatch + sub-meta (e.g. "8 roles") */
.nav-group--bucket .nav-group-row {
  grid-template-columns: 28px 22px 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 22px 10px;
}
.nav-group--bucket.is-open .nav-group-row,
.nav-group--bucket .nav-group-row:hover {
  background: var(--group-color, var(--ink));
  color: var(--group-ink, #1A1714);
}
.nav-group-swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 2px solid var(--ink);
  background: var(--group-color, var(--ink));
}
/* When the bucket header is open / hovered its bg becomes the bucket color,
   so the swatch border must switch to the bucket ink for contrast. */
.nav-group--bucket.is-open .nav-group-swatch,
.nav-group--bucket .nav-group-row:hover .nav-group-swatch {
  border-color: var(--group-ink, #1A1714);
}
.nav-group-submeta {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.7;
  justify-self: end;
  padding-right: 14px;
  border-right: 1px solid currentColor;
}
/* Entry list inside a bucket group picks up the bucket color as accent */
.nav-group--bucket .nav-entry-list {
  border-left: 6px solid var(--group-color, var(--ink));
}
.nav-entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.nav-entry-role {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1.5px solid var(--ink);
  background: transparent;
  color: var(--ink);
  opacity: 1;
}
.nav-group-chevron {
  font-family: var(--font-data);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}
.nav-group-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(20px, 2.4vw, 42px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
.nav-group-count {
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.nav-entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--paper);
  border-top: 1px solid var(--ink);
}
.nav-entry-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: stretch;
  border-bottom: 1px solid rgba(26, 23, 20, 0.18);
}
.nav-entry-row:last-child { border-bottom: 0; }
.nav-entry-jump {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 16px 12px 60px;
  border: 0;
  border-radius: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.nav-entry-jump:hover {
  background: rgba(26, 23, 20, 0.06);
}
.nav-entry-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  color: var(--ink);
  text-transform: uppercase;
}
.nav-entry-meta {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.65;
}
.nav-entry-edit {
  padding: 8px 16px;
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: transparent;
  color: var(--ink);
  border: 0;
  border-left: 1px solid rgba(26, 23, 20, 0.18);
  cursor: pointer;
  transition: background 80ms ease-out, color 80ms ease-out;
}
.nav-entry-edit:hover {
  background: var(--ink);
  color: var(--paper);
}

/* hide the legacy nav-page-card / nav-page-list rules — replaced */
.nav-page-list,
.nav-page-card { display: none; }

/* ============================================================
   Bug-fix pass — evidence clickability, lightbox, left-view fit
   ============================================================ */

/* Evidence figures: clickable images get pointer cursor + hover lift */
.ev-figure--clickable {
  cursor: pointer;
}
.ev-figure--clickable::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0);
  transition: background 150ms ease-out;
  border-radius: inherit;
  pointer-events: none;
}
.ev-figure--clickable:hover::after {
  background: rgba(0,0,0,0.15);
}

/* Evidence lightbox overlay */
.ev-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  animation: lb-fade-in 200ms ease-out;
}
@keyframes lb-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.ev-lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.ev-lightbox-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ev-lightbox-content img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.6);
}
.ev-lightbox-caption {
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
}
.ev-lightbox-close {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 2;
  width: 48px;
  height: 48px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 100ms ease-out;
}
.ev-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* Mainboard accent banner — add a colored accent strip at the top of the
   mainboard so the category identity is still prominent without drowning
   the whole panel. */
.project-mainboard .mainboard-topbar {
  padding-bottom: 14px;
  border-bottom: 3px solid var(--accent-bucket, var(--ink));
}
.project-mainboard .display-title {
  color: var(--ink);
}

/* Evidence thumbnails keep a dark base so images/videos read clearly
   regardless of the bright bucket colour behind them. */
.project-mainboard .ev-figure {
  background: rgba(0, 0, 0, 0.85);
}
.project-mainboard .ev-figure img,
.project-mainboard .ev-figure video,
.project-mainboard .ev-figure iframe {
  background: rgba(0, 0, 0, 0.85);
}

/* Edit mode inputs — ensure readable against the tinted bg */
.project-mainboard--edit .edit-row input,
.project-mainboard--edit .edit-row textarea {
  background: rgba(255, 255, 255, 0.55);
  color: #1A1714;
  border-color: #1A1714;
}

/* ============================================================
   Pass 10 — Bento view for Roles / Clients nav pages
   3-col grid of cream boxes on the dark sheet. Click a box → it
   expands full-width (flex-basis transition) while the siblings
   "jelly" away (scale + fade with an overshoot easing). Roles
   nest one level deeper (category → role sub-boxes → projects).
   ============================================================ */
:root { --jelly: cubic-bezier(0.34, 1.45, 0.5, 1); }

.bento-grid {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 14px;
}
.bento-box {
  /* 3 per row (two 14px gaps shared across the row) */
  flex: 0 1 calc((100% - 28px) / 3);
  display: flex;
  flex-direction: column;
  min-height: 132px;
  background: #EDE4CE;
  color: #1A1714;
  border: 2px solid #1A1714;
  border-top: 8px solid var(--box-color, #1A1714);
  overflow: hidden;
  transition: flex-basis 480ms var(--jelly), transform 480ms var(--jelly),
              opacity 280ms ease, box-shadow 200ms ease;
}
.bento-grid:not(.has-expanded) .bento-box:hover {
  transform: translateY(-3px);
  box-shadow: -6px 6px 0 rgba(232, 228, 216, 0.18);
}
.bento-box.expanded {
  flex-basis: 100%;
  transform: none;
}
/* Siblings of the expanded box squish and fade away. */
.bento-grid.has-expanded .bento-box:not(.expanded) {
  transform: scale(0.86);
  opacity: 0.4;
}
.bento-box-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 20px;
  width: 100%;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  flex: 1;
}
.bento-swatch {
  width: 30px;
  height: 30px;
  border: 2px solid #1A1714;
}
.bento-box-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(17px, 1.9vw, 30px);
  line-height: 1.02;
}
.bento-box-count {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-top: auto;
}
.bento-children {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding: 0 20px;
  transition: max-height 480ms var(--jelly), opacity 320ms ease, padding 320ms ease;
}
.bento-box.expanded .bento-children {
  max-height: 72vh;
  opacity: 1;
  padding-bottom: 20px;
  overflow-y: auto;
}

/* Roles: nested role sub-boxes (2 per row, same jelly behaviour). */
.bento-subgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid rgba(26, 23, 20, 0.25);
  padding-top: 16px;
}
.bento-subbox {
  flex: 0 1 calc((100% - 8px) / 2);
  background: #F7F4EC;
  border: 1px solid #1A1714;
  overflow: hidden;
  transition: flex-basis 420ms var(--jelly), transform 420ms var(--jelly), opacity 240ms ease;
}
.bento-subbox.expanded { flex-basis: 100%; }
.bento-subgrid.has-expanded .bento-subbox:not(.expanded) {
  transform: scale(0.9);
  opacity: 0.45;
}
.bento-subbox-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  background: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  color: #1A1714;
}
.bento-subbox-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.02em;
}
.bento-subbox-count {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 700;
  opacity: 0.55;
}
.bento-subchildren {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 420ms var(--jelly), opacity 280ms ease;
}
.bento-subbox.expanded .bento-subchildren {
  max-height: 48vh;
  opacity: 1;
  overflow-y: auto;
}

/* Project leaf rows (shared by role sub-boxes + client boxes). */
.bento-projects {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bento-project {
  display: flex;
  align-items: stretch;
  border-top: 1px solid rgba(26, 23, 20, 0.16);
}
.bento-project-jump {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 11px 14px;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: left;
  cursor: pointer;
  color: #1A1714;
  transition: background 90ms ease, color 90ms ease;
}
.bento-project-jump:hover {
  background: #1A1714;
  color: #EDE4CE;
}
.bp-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
}
.bp-meta {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.66;
}
.bento-project .nav-entry-edit {
  align-self: stretch;
  border: 0;
  border-left: 1px solid rgba(26, 23, 20, 0.16);
}
@media (max-width: 860px) {
  .bento-box { flex-basis: calc((100% - 14px) / 2); }
  .bento-subbox { flex-basis: 100%; }
}

/* ============================================================
   Interactive Gallery Overlay & Codex View
   ============================================================ */
.gallery-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #0F0F0F;
  color: #EDE4CE;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.gallery-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 2px solid rgba(237, 228, 206, 0.15);
}
.gallery-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gallery-dot {
  width: 8px;
  height: 8px;
  background: #C5E03A;
  border-radius: 50%;
  box-shadow: 0 0 8px #C5E03A;
}
.gallery-brand-text {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.gallery-tabs {
  display: flex;
  gap: 24px;
}
.gallery-tab {
  background: transparent;
  border: 0;
  color: rgba(237, 228, 206, 0.5);
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  padding: 6px 12px;
  border-bottom: 2px solid transparent;
  transition: all 150ms ease-out;
}
.gallery-tab:hover,
.gallery-tab.active {
  color: #EDE4CE;
  border-bottom-color: #C5E03A;
}
.gallery-close {
  background: transparent;
  border: 0;
  color: #EDE4CE;
  font-size: 32px;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 150ms ease-out;
}
.gallery-close:hover {
  opacity: 1;
}

.gallery-viewport {
  flex: 1;
  overflow: hidden;   /* grid = pannable canvas, codex = transform scroller */
  padding: 0;
  position: relative;
}
.gallery-grid-view,
.gallery-codex-view {
  display: none;
}
.gallery-grid-view.active {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: grab;
}
.gallery-grid-view.active:active { cursor: grabbing; }
.gallery-codex-view.active {
  display: block;
}

/* Free 2D canvas: a wide plane of fixed tiles that initGridCanvas pans. */
.grid-canvas {
  display: grid;
  grid-template-columns: repeat(var(--grid-cols, 16), 300px);
  gap: 16px;
  width: max-content;
  padding: 56px;
  will-change: transform;
}
.gallery-item {
  width: 300px;
  background: #181818;
  border: 1px solid rgba(237, 228, 206, 0.1);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: border-color 200ms ease;
}
.gallery-item:hover { border-color: rgba(197, 224, 58, 0.6); }
.gallery-item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  filter: grayscale(12%) contrast(1.05);
  transition: filter 350ms ease, transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.gallery-item:hover img { filter: grayscale(0%) contrast(1.05); transform: scale(1.05); }
.gallery-item-info {
  padding: 12px 14px;
  border-top: 1px solid rgba(237, 228, 206, 0.08);
  background: #121212;
}
.gallery-item-title {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  color: #EDE4CE;
  margin: 0 0 4px 0;
}
.gallery-item-meta {
  font-family: var(--font-data);
  font-size: 10px;
  color: rgba(237, 228, 206, 0.5);
}

/* Codex: indrajaal-style big-type infinite drag list. The custom scroller
   (initCodexScroller) translates .codex-track; the viewport must clip + not
   native-scroll while codex is active. */
.gallery-overlay.codex-active .gallery-viewport {
  overflow: hidden;
  padding: 0;
}
.gallery-codex-view.active {
  display: block;
  position: relative;
  height: 100%;
  overflow: hidden;
  cursor: grab;
}
.gallery-codex-view.active:active { cursor: grabbing; }

/* Centered hover image bleeding behind the titles (indrajaal). Fixed in the
   middle while the titles scroll over it; src swaps to the hovered row. */
.codex-stage-img {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Show the full frame uncropped (indrajaal): contain inside a max box and
     let the natural aspect ratio drive width/height. */
  max-width: min(48vw, 680px);
  max-height: 70vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transform: translate(-50%, -50%) scale(0.97);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  filter: brightness(0.66) contrast(1.02);
  transition: opacity 420ms ease, transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.codex-stage-img.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.codex-track {
  position: relative;
  z-index: 1;
  will-change: transform;
  padding: 8vh 0;
}
.codex-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 100%;
  padding: 2px 48px;
  background: none;
  border: 0;
  border-radius: 0;
  text-align: center;
  cursor: pointer;
  color: rgba(237, 228, 206, 0.30);
  transition: color 220ms ease;
  user-select: none;
}
.codex-row-title {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  font-size: clamp(38px, 6.5vw, 104px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.codex-row-meta {
  font-family: var(--font-data);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  max-height: 0;
  transition: opacity 220ms ease;
}
/* Active = the row under the cursor (set by the scroller hit-test). */
.codex-row.is-active { color: #EDE4CE; }
.codex-row.is-active .codex-row-meta { opacity: 0.7; max-height: 20px; }
.codex-row:hover { color: #EDE4CE; }

/* Single Artifact Cinematic Detail View */
.gallery-artifact {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: #0F0F0F;
  color: #EDE4CE;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 300ms cubic-bezier(0.25, 1, 0.5, 1);
}
.gallery-artifact.visible {
  opacity: 1;
  pointer-events: auto;
}
.artifact-back {
  position: absolute;
  top: 24px;
  left: 24px;
  background: transparent;
  border: 1px solid rgba(237, 228, 206, 0.3);
  color: #EDE4CE;
  padding: 8px 16px;
  font-family: var(--font-data);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 150ms ease;
  z-index: 10;
}
.artifact-back:hover {
  background: #EDE4CE;
  color: #0F0F0F;
}
.artifact-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: transparent;
  border: 0;
  color: #EDE4CE;
  font-size: 32px;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 150ms ease;
  z-index: 10;
}
.artifact-close:hover {
  opacity: 1;
}

/* Centered hero layout (indrajaal): title left · image centered over an
   ambient blurred backdrop · story + technical metadata right. */
.artifact-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.artifact-bg {
  position: absolute;
  inset: -8%;
  background-size: cover;
  background-position: center;
  filter: blur(60px) brightness(0.4) saturate(1.1);
  transform: scale(1.1);
  opacity: 0.55;
  z-index: 0;
}
.artifact-stage {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: 40px;
  width: 100%;
  height: 100%;
  padding: 80px 56px 56px;
}
.artifact-left {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.artifact-hero {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  will-change: transform;
}
.artifact-hero img {
  max-width: 46vw;
  max-height: 78vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
.artifact-right {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 380px;
}
.artifact-title {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 76px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0;
  color: #EDE4CE;
}
.artifact-eyebrow {
  font-family: var(--font-data);
  font-size: 11px;
  color: #C5E03A;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.artifact-origin {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-top: 1px solid rgba(237, 228, 206, 0.2);
  padding-top: 18px;
  margin-top: 4px;
}
.artifact-story {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(237, 228, 206, 0.82);
  margin: 0;
}
.artifact-metadata-grid {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(237, 228, 206, 0.14);
  border: 1px solid rgba(237, 228, 206, 0.14);
}
.artifact-metadata-row {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 10px;
  background: rgba(15, 15, 15, 0.82);
  padding: 12px 16px;
}
.artifact-origin .artifact-metadata-row {
  background: none;
  padding: 7px 0;
}
.artifact-meta-label {
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 600;
  color: rgba(237, 228, 206, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.artifact-meta-val {
  font-family: var(--font-data);
  font-size: 12px;
  font-weight: 500;
  color: #EDE4CE;
}

@media (max-width: 1000px) {
  .artifact-stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    align-content: start;
    gap: 24px;
    overflow-y: auto;
    padding: 72px 24px 40px;
  }
  .artifact-hero img { max-width: 90vw; max-height: 46vh; }
  .artifact-right { max-width: none; }
}

/* ============================================================
   Pass 11 — Gallery motion (Indrajaal / Nicola Romei references)
   Custom magnetic VIEW cursor + floating row preview + cinematic
   media. JS drives transforms each frame; CSS handles appearance.
   ============================================================ */

/* Slide the panes/wipe without spawning scrollbars. */
.gallery-overlay,
.gallery-artifact { overflow: hidden; }

/* Floating preview that trails the cursor over Codex rows. */
.gallery-floating-preview {
  position: fixed;
  top: 0;
  left: 0;
  width: 340px;
  height: 230px;
  object-fit: cover;
  pointer-events: none;
  z-index: 9990;
  opacity: 0;
  border: 1px solid rgba(237, 228, 206, 0.25);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7);
  filter: contrast(1.05);
  will-change: transform, opacity;
}

/* Magnetic circular cursor with "VIEW" label. */
.gallery-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 78px;
  height: 78px;
  border: 1px solid rgba(237, 228, 206, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  transition: opacity 220ms ease, background-color 200ms ease, border-color 200ms ease;
  font-family: var(--font-data);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #EDE4CE;
  will-change: transform;
}
body.gallery-cursor-on .gallery-cursor.is-active { opacity: 1; }
.gallery-cursor span { opacity: 0; transform: scale(0.6); transition: opacity 160ms ease, transform 200ms cubic-bezier(0.34, 1.5, 0.5, 1); }
.gallery-cursor.is-hot { background: rgba(197, 224, 58, 0.12); border-color: #C5E03A; }
.gallery-cursor.is-hot span { opacity: 1; transform: scale(1); }

/* Hide the native cursor only on desktop while the custom one is live. */
@media (hover: hover) and (pointer: fine) {
  body.gallery-cursor-on .gallery-overlay,
  body.gallery-cursor-on .gallery-overlay *,
  body.gallery-cursor-on .gallery-artifact,
  body.gallery-cursor-on .gallery-artifact * { cursor: none; }
}

/* The Codex thumbnail column is replaced by the floating preview, so the
   inline thumb is decorative — dim it; the row hover does the real work. */
.gallery-codex-thumb { transition: opacity 160ms ease, filter 200ms ease; filter: grayscale(40%); }
.gallery-codex-row:hover .gallery-codex-thumb { filter: grayscale(0%); }

/* Ken Burns media: the img needs a transform origin + will-change so the
   ambient zoom + interactive parallax stay smooth. */
.artifact-media-pane img {
  will-change: transform;
  transform-origin: center center;
}
.artifact-media-pane { cursor: none; }

@media (hover: none), (pointer: coarse) {
  /* Touch: no custom cursor / floating preview, restore native interaction. */
  .gallery-cursor, .gallery-floating-preview { display: none !important; }
}