3.2.1.3

Tweaked shade calc
Updated About and FAQ sections

assets/about.css

@@ -50,6 +50,65 @@ header a.active { color: #c8922a; }
   display: contents; /* participates in header's flex layout transparently */
 }
 
+/* ── About dropdown ─────────────────────────────────────────────────── */
+.nav-dropdown {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+.nav-dropdown-toggle .caret {
+  display: inline-block;
+  margin-left: 4px;
+  font-size: 0.7em;
+  transition: transform 0.2s;
+}
+.nav-dropdown:hover .nav-dropdown-toggle .caret,
+.nav-dropdown:focus-within .nav-dropdown-toggle .caret {
+  transform: rotate(180deg);
+}
+.nav-dropdown-menu {
+  position: absolute;
+  top: 100%;
+  right: 0;
+  margin-top: 10px;
+  background: #f5edd6;
+  border: 1px solid #e0d0a8;
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(100, 70, 20, 0.12);
+  display: flex;
+  flex-direction: column;
+  min-width: 210px;
+  padding: 6px;
+  opacity: 0;
+  visibility: hidden;
+  transform: translateY(-4px);
+  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
+  z-index: 110;
+}
+.nav-dropdown:hover .nav-dropdown-menu,
+.nav-dropdown:focus-within .nav-dropdown-menu {
+  opacity: 1;
+  visibility: visible;
+  transform: translateY(0);
+}
+.nav-dropdown-menu a {
+  text-transform: none;
+  letter-spacing: normal;
+  font-size: 14px;
+  font-weight: 600;
+  color: #5a3e1a;
+  padding: 8px 12px;
+  border-radius: 6px;
+  border-bottom: none;
+  white-space: nowrap;
+}
+.nav-dropdown-menu a:hover {
+  background: #ede4cc;
+  color: #1e1208;
+  border-bottom: none;
+}
+.nav-dropdown-menu a.active { color: #c8922a; }
+
 /* ── Burger button ──────────────────────────────────────────────────── */
 .utci-burger {
   display: none;
@@ -117,6 +176,29 @@ header a.active { color: #c8922a; }
     font-size: 15px;
   }
 
+  /* Dropdown collapses to an indented static list inside the drawer */
+  .nav-dropdown {
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    gap: 18px;
+  }
+  .nav-dropdown-toggle .caret { display: none; }
+  .nav-dropdown-menu {
+    position: static;
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+    box-shadow: none;
+    border: none;
+    background: none;
+    padding: 0 0 0 14px;
+    margin-top: 0;
+    min-width: 0;
+    gap: 18px;
+  }
+  .nav-dropdown-menu a { padding: 0; font-size: 14px; }
+
   /* Burger → X animation */
   header.nav-open .utci-burger span:nth-child(1) {
     transform: translateY(7px) rotate(45deg);