V1.0 Final Release

Fixed Stripe Issues
New Mobile Menu
Improved Lens Graphic

assets/about.css

@@ -18,6 +18,8 @@ header {
   padding: 18px 32px;
   gap: 28px;
   border-bottom: 1px solid #e0d0a8;
+  position: relative;
+  z-index: 100;
 }
 
 header a {
@@ -34,6 +36,108 @@ header a {
 header a:hover { color: #c8922a; border-bottom-color: rgba(200,146,42,0.5); }
 header a.active { color: #c8922a; }
 
+/* Desktop: nav-links renders inline as part of header flex row */
+.nav-links {
+  display: contents; /* participates in header's flex layout transparently */
+}
+
+/* ── Burger button ──────────────────────────────────────────────────── */
+.utci-burger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 5px;
+  width: 36px;
+  height: 36px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  flex-shrink: 0;
+}
+
+.utci-burger span {
+  display: block;
+  width: 22px;
+  height: 2px;
+  background: #7a5c2a;
+  border-radius: 2px;
+  transition: transform 0.25s ease, opacity 0.2s ease;
+  transform-origin: center;
+}
+
+.nav-overlay {
+  display: none;
+}
+
+/* ── Mobile nav drawer ──────────────────────────────────────────────── */
+@media (max-width: 640px) {
+  header {
+    padding: 14px 20px;
+  }
+
+  .utci-burger {
+    display: flex;
+  }
+
+  .nav-links {
+    position: fixed;
+    top: 0;
+    right: -100%;
+    width: 220px;
+    height: 100vh;
+    background: #f5edd6;
+    border-left: 1px solid #e0d0a8;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: flex-start;
+    padding: 80px 32px 32px;
+    gap: 28px;
+    transition: right 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: -8px 0 24px rgba(100,70,20,0.08);
+    z-index: 105;
+  }
+
+  .nav-links.is-open {
+    right: 0;
+  }
+
+  .nav-links a {
+    font-size: 15px;
+  }
+
+  /* Burger → X animation */
+  header.nav-open .utci-burger span:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+  }
+  header.nav-open .utci-burger span:nth-child(2) {
+    opacity: 0;
+    transform: scaleX(0);
+  }
+  header.nav-open .utci-burger span:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+  }
+
+  /* Overlay */
+  .nav-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(30,18,8,0.35);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.25s ease;
+    z-index: 104;
+  }
+
+  header.nav-open .nav-overlay {
+    opacity: 1;
+    pointer-events: auto;
+  }
+}
+
 .logo {
   margin-right: auto;
   font-family: 'Fraunces', serif;