/* Root design tokens + keyframes — ported from the reference site's inline <style> block.
   Font substitution: EditorialNew (paid) -> Instrument Serif (free, similar editorial-italic feel). */

:root {
  --color-bg: #f7f7f5;
  --color-sand: #faf8f3;
  --color-green-bg: #e8f5f0;
  --color-dark-navy: #0a0e1a;
  --color-dark: #1a1a1a;
  --color-label: #2D2D2D;
  --Label: #2D2D2D;
  --color-text: #404040;
  --Text: #404040;
  --color-ink: #1e1a15;
  --color-muted: #5a5248;
  --color-subtle: #9a8e80;
  --Grey-Text: #666;
  --color-grey-light: #8a8a8a;
  --Gray-outline: #E9E9E9;
  --color-card-text-light: #FFFFFF;
  --color-shadow: #DEDEDE;
  --color-shadow-strong: #D5D5D5;
  --color-blue-card: #c8d9f0;
  --color-blue-light: #e8f0ff;
  --color-blue-folder: #c8dcf8;
  --color-accent: #0066cc;
  --color-blue-select: #0081F2;
  --color-card-blue-bg: #2D5FA0;
  --color-blue-overlay: rgba(60, 120, 180, .4);
  --color-kitty-bg: #E9F5FF;
  --color-paper-overlay: rgba(255, 255, 255, .5);
  --color-surface: #ffffff;
  --color-white: #ffffff;
  --color-white-glass: rgba(255, 255, 255, .6);
  --color-white-border: rgba(255, 255, 255, .8);
  --color-grid-line: #EEEEEE;
  --color-sand-border: rgba(30, 26, 21, .08);
  --color-badge-ghost: rgba(255, 255, 255, .15);
  --color-badge-ghost-text: rgba(255, 255, 255, .9);
  --color-badge-light: rgba(30, 26, 21, .08);
  --color-status-green: #22c55e;
  --color-status-green-bg: rgba(34, 197, 94, .12);
  --color-status-green-border: rgba(34, 197, 94, .3);
  --color-badge-shipped-bg: rgba(34, 197, 94, .2);

  --font-serif: "Instrument Serif", Georgia, serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", "Courier New", monospace;

  --radius-card: 12px;
  --radius-sm: 8px;
  --radius-folder: 12px;
}

.badge--on-light,
.badge--shipped,
.badge--building,
.cs-tags li {
  border-radius: 100px;
  border: .5px solid var(--Gray-outline, #E9E9E9);
  background: #ffffffd9;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
  color: var(--color-muted);
}

.shipped-dot,
.cs-shipped-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-status-green, #22c55e);
  animation: shipped-pulse 2.2s ease-in-out infinite;
}
@keyframes shipped-pulse {
  0%, to { box-shadow: 0 0 4px var(--color-status-green, #22c55e), 0 0 7px #22c55e8c, 0 0 12px #22c55e40; }
  50%    { box-shadow: 0 0 6px var(--color-status-green, #22c55e), 0 0 13px #22c55ee6, 0 0 21px #22c55e80; }
}

.building-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fbbf24;
  animation: building-pulse 2.2s ease-in-out infinite;
}
@keyframes building-pulse {
  0%, to { box-shadow: 0 0 3px #fbbf24, 0 0 5px #fbbf2466, 0 0 9px #fbbf242e; }
  50%    { box-shadow: 0 0 5px #fbbf24, 0 0 10px #fbbf24a6, 0 0 16px #fbbf2459; }
}

.badge--on-light,
.cs-tag--award {
  position: relative;
  overflow: hidden;
}
.badge--on-light::after,
.cs-tag--award::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 120%; height: 100%;
  background: linear-gradient(120deg, transparent 20%, rgba(255,215,0,.08) 38%, rgba(255,255,255,.3) 50%, rgba(255,215,0,.08) 62%, transparent 80%);
  animation: badge-shimmer 9s ease-in-out infinite;
}
@keyframes badge-shimmer {
  0%  { left: -100%; }
  30% { left: 120%; }
  to  { left: 120%; }
}
@media (prefers-reduced-motion: reduce) {
  .badge--on-light::after, .cs-tag--award::after { animation: none; }
}

/* Placeholder media: gradient tiles standing in for personal photos / project videos */
.placeholder-media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--pm-a, #cbd8e8), var(--pm-b, #90a9c9));
  color: rgba(255,255,255,.92);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .04em;
  text-align: center;
  user-select: none;
}