Add semi-automated "last update" date footer

Author: musicog

index.html

@@ -399,7 +399,10 @@ <h2 id="funding-heading" aria-label="Supported by the Austrian Science Fund">Sup
 <!-- ====================== FOOTER ====================== -->
 <footer class="footer">
   <div class="wrap">
-    <span>© <span id="year">2026</span> <a href="#top">Let's Encode!</a> · <a href="https://mdw.ac.at" target="_blank" rel="noopener">mdw — University of Music and Performing Arts Vienna</a></span>
+    <div class="footer-left">
+      <span>© <span id="year">2026</span> <a href="#top">Let's Encode!</a> · <a href="https://mdw.ac.at" target="_blank" rel="noopener">mdw — University of Music and Performing Arts Vienna</a></span>
+      <span class="footer-updated">Last updated: <time id="last-updated" datetime="2026-06-30">30 June 2026</time></span>
+    </div>
     <span>
       <a href="https://iwk.mdw.ac.at/lets-encode" target="_blank" rel="noopener">Project page</a>
       &nbsp;·&nbsp;
@@ -415,6 +418,18 @@ <h2 id="funding-heading" aria-label="Supported by the Austrian Science Fund">Sup
 <script>
   document.getElementById("year").textContent = new Date().getFullYear();
 
+  // "Last updated" reflects the deployed file's Last-Modified time (≈ deploy date
+  // on GitHub Pages), so it stays current with no manual upkeep. Falls back to the
+  // date baked into the markup if the timestamp is missing/unparseable.
+  (function () {
+    var el = document.getElementById("last-updated");
+    if (!el) return;
+    var d = new Date(document.lastModified);
+    if (isNaN(d)) return;
+    el.dateTime = d.toISOString().slice(0, 10);
+    el.textContent = d.toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
+  })();
+
   // Mobile burger menu: toggles the primary nav dropdown.
   (function () {
     var btn = document.querySelector(".nav-toggle");

styles.css

@@ -507,13 +507,19 @@ section.alt {
   flex-wrap: wrap;
   gap: 1rem;
   justify-content: space-between;
-  align-items: center;
+  align-items: baseline;
 }
 
 .footer a {
   color: var(--ink-soft);
 }
 
+.footer-left {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.5;
+}
+
 @media (max-width: 560px) {
 
   /* clear the sticky topbar on anchor jumps so the section kicker stays visible