fix: remove overlapping annotation cards

Author: Oussama

website/src/lib/components/Annotation.svelte

@@ -12,7 +12,7 @@
 <g class="annotation" class:strong={emphasis === 'strong'}>
   <line x1={x} y1={y} x2={x + dx} y2={y + dy} />
   <circle cx={x} cy={y} r="3" />
-  <foreignObject x={x + dx - 4} y={y + dy - 24} width={width + 8} height="124">
+  <foreignObject x={x + dx} y={y + dy - 20} {width} height="120">
     <div class="note">
       {#if value}
         <span class="value">{value}</span>
@@ -41,14 +41,19 @@
     display: flex;
     flex-direction: column;
     gap: 0.25rem;
-    width: fit-content;
-    max-width: 100%;
-    padding: 0.125rem 0.25rem 0.25rem;
     color: currentColor;
-    background: color-mix(in srgb, var(--bg-paper) 94%, transparent);
     font-family: var(--font-body);
     font-size: var(--type-small-size);
     line-height: var(--type-small-line);
+    text-shadow:
+      -2px -2px 0 var(--bg-paper),
+      0 -2px 0 var(--bg-paper),
+      2px -2px 0 var(--bg-paper),
+      -2px 0 0 var(--bg-paper),
+      2px 0 0 var(--bg-paper),
+      -2px 2px 0 var(--bg-paper),
+      0 2px 0 var(--bg-paper),
+      2px 2px 0 var(--bg-paper);
   }
 
   .value {

website/src/lib/scenes/Scene3Gender.svelte

@@ -27,19 +27,19 @@
   let annotations = $derived([
     {
       decade: 1910,
-      dx: -118,
-      dy: -105,
+      dx: -140,
+      dy: -96,
       value: '1910s',
       label: 'brief opening in the early collection.',
-      width: 185,
+      width: 165,
     },
     {
       decade: 1930,
-      dx: -76,
-      dy: -78,
+      dx: 34,
+      dy: -104,
       value: '1930s',
       label: 'another spike, then a long plateau.',
-      width: 190,
+      width: 170,
     },
     {
       decade: 1990,