Replace ASCII art banners with mobile-responsive headers

- Replace fixed-width ASCII banners with CSS-styled section headers
- Add responsive styling for mobile devices
- Update home page, event pages, header and footer layouts
- Improve mobile experience with scalable headers and gradient dividers

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

layouts/events/single.html

@@ -1,11 +1,7 @@
 {{ define "main" }}
 <article class="event-detail">
-  <div class="ascii-border">
-<pre>
-+==================================================================+
-|                        EVENT DETAILS                            |
-+==================================================================+
-</pre>
+  <div class="section-header">
+    <h2>EVENT DETAILS</h2>
   </div>
   
   <h1>{{ .Title }}</h1>
@@ -63,12 +59,8 @@
   
   {{ if .Params.registration_url }}
   <div class="registration">
-    <div class="ascii-border">
-<pre>
-+--------------------------------------------------------------+
-|                       REGISTRATION                          |
-+--------------------------------------------------------------+
-</pre>
+    <div class="section-header">
+      <h3>REGISTRATION</h3>
     </div>
     <p class="prompt"><a href="{{ .Params.registration_url }}">Register for this event</a></p>
   </div>
@@ -82,12 +74,8 @@
   {{ end }}
   
   <div class="calendar-actions">
-    <div class="ascii-border">
-<pre>
-+--------------------------------------------------------------+
-|                    ADD TO CALENDAR                          |
-+--------------------------------------------------------------+
-</pre>
+    <div class="section-header">
+      <h3>ADD TO CALENDAR</h3>
     </div>
     <p class="prompt">
       <a href="{{ .RelPermalink }}calendar.ics" download>📅 Download Event (.ics)</a>