5.0.8

Day tab colour update
Cleanup event banner and add close

assets/css/base.css

@@ -272,15 +272,27 @@ body {
 .event-note-slide {
   grid-area: 1 / 1;          /* stack all slides on top of each other */
   display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  gap: 4px 10px;
+  flex-direction: column;
+  gap: 2px;
   min-width: 0;
   opacity: 0;                /* only .is-active is visible */
   pointer-events: none;
   user-select: none;         /* keeps hidden copy out of a drag-selection */
   transition: opacity 0.35s ease;
 }
+
+.event-note-header {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.event-note-body {
+  display: flex;
+  align-items: baseline;
+  gap: 10px;
+  min-width: 0;
+}
 .event-note-slide.is-active {
   opacity: 1;
   pointer-events: auto;
@@ -351,6 +363,63 @@ body {
   transform: scale(1.3);
 }
 
+/* Close control — a small brass "Close ×" pill in the top-right corner. It
+   sits at the end of the strip's flex row rather than being absolutely
+   positioned, so the dates line can never run underneath it. */
+.event-note-close {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin: -2px -6px 0 2px;   /* pull into the padding so it hugs the corner */
+  padding: 3px 7px;
+  border: 1px solid transparent;
+  border-radius: 999px;
+  background: transparent;
+  font-family: Manrope, sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #9a7d5a;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+}
+.event-note-close:hover {
+  background: rgba(200, 146, 42, 0.14);
+  border-color: rgba(200, 146, 42, 0.45);
+  color: #7a5a1e;
+}
+.event-note-close:focus-visible {
+  outline: 2px solid #c8922a;
+  outline-offset: 1px;
+}
+.event-note.is-priority .event-note-close {
+  color: #a06e18;
+}
+.event-note.is-tinted .event-note-close {
+  color: #56452c;
+}
+.event-note.is-tinted .event-note-close:hover {
+  background: rgba(0, 0, 0, 0.09);
+  border-color: rgba(0, 0, 0, 0.22);
+  color: #2a1a08;
+}
+
+/* Collapse on the way out — height and vertical spacing animate to zero so
+   the page closes the gap smoothly instead of snapping upward. */
+.event-note.is-closing {
+  animation: event-note-out 0.26s ease forwards;
+  pointer-events: none;
+}
+@keyframes event-note-out {
+  from { opacity: 1; transform: translateY(0);    max-height: 200px; }
+  to   { opacity: 0; transform: translateY(-4px); max-height: 0;
+         margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-width: 0; }
+}
+
 /* Above true-mobile: the nav drops into the flow beneath the note. Its own
    32px side padding is dropped so the links line up with the note and the
    content rather than sitting 32px inside them. */
@@ -376,6 +445,15 @@ body {
   .event-note-dates {
     margin-left: 0;       /* no room to right-align on a phone */
   }
+  /* Phone: the cross alone, pushed to the right-hand end of the row and
+     padded out to a ~26px touch target. */
+  .event-note-close {
+    margin: -4px -6px 0 auto;
+    padding: 8px;
+  }
+  .event-note-close-label {
+    display: none;
+  }
 }
 
 /* Nav logo — hidden on desktop, shown on mobile */