diff --git a/src/layouts/AppLayout.astro b/src/layouts/AppLayout.astro
index ac6a19d..742bd61 100644
--- a/src/layouts/AppLayout.astro
+++ b/src/layouts/AppLayout.astro
@@ -26,7 +26,24 @@ const year = new Date().getFullYear();
     <header class="nav" role="banner">
       <div class="nav-inner">
         <a href="/" class="wordmark-link" aria-label="Project Bifrost — home">
-          <img src="/logo.svg" alt="Fenja AI" class="wordmark" />
+          <!-- Logo is inlined (not <img src>) so it is always present in the
+               DOM and never re-fetches between navigations — kills the flicker
+               that happened when the bitmap reloaded on each page. -->
+          <span class="wordmark" aria-hidden="true">
+            <svg class="wordmark-svg" viewBox="0 0 265.29791 101.04877" role="img" aria-label="Fenja AI" xmlns="http://www.w3.org/2000/svg">
+              <g transform="translate(-13.974769,83.473269)">
+                <g transform="matrix(0.46160656,0,0,0.46160656,54.848979,-49.979453)" fill="currentColor">
+                  <path fill="currentColor" d="m -18.338285,-72.536938 c -13.74121,-0.46332 -27.67429,6.23915 -30.62927,23.99965 -3.78543,22.75175 -2.02308,27.28708 -8.49358,33.40113 -0.33172,0.31344 -0.68442,0.6305 -1.06128,0.95492 -1.45347,1.25122 -3.25669,2.60442 -5.51573,4.2115298 -0.21828,0.14166 -1.46889,0.95375 -2.77858,1.80461 -1.30968,0.85087 -3.09547,2.00147 -3.96859,2.55692 -9.71464,6.18014098 -15.73026,14.105601 -17.17523,22.6293912 -1.02392,4.39944 -0.58622,8.85898 0.37503,13.22902 1.54872,6.59143 5.53649,12.05697 9.86047,17.09239 2.10267,2.45313 2.9744,3.01949 3.52864,2.28936 0.089,-0.1173 2.43368,-7.4904 2.6364,-8.32454 0.90846,-3.73797 6.03327,-17.41091 6.72254,-17.93536 0.0214,-0.0163 4.38159,-8.60415 9.79779,-13.18984 12.53397,-9.45828022 27.77089,-18.9996112 33.33396,-34.567641 1.70768,-3.98815 2.58233,-8.2783 3.4637,-12.5215 1.47952,-7.35274 1.14634,-6.88747 7.684191,-10.7292 3.3339299,-1.64872 11.7042296,-6.72938 14.3328396,-17.16852 -5.69305,-4.59707 -13.8685796,-7.45433 -22.1133006,-7.73232 z m 26.2106406,12.16775 c -3.51268,9.34765 -11.83195,14.63899 -19.9974706,19.49145 -3.54056,28.19346 -19.23094,40.45143078 -30.31805,48.2108808 -13.25397,9.2758802 -16.49234,12.7560002 -23.19025,33.7649602 -3.72715,11.69072 -4.08522,12.85871 -5.15862,16.80132 -1.52273,4.79107 -2.39504,9.73205 -3.84209,14.55226 -3.97772,13.24999 10.48988,14.09194 36.47077,21.58154 1.74902,0.5042 4.35169,0.92086 4.02345,3.1704 -0.41262,2.827837 -3.00384,1.83581 -4.71193,1.46542 -10.43263,-2.26228 -5.67223,-1.15531 -8.49246,-1.80574 -4.00394,-0.92343 -11.86327,-2.93816 -11.96288,-2.97561 l -17.4092,51.835787 c -0.43014,1.28076 100.90249,0.22691 100.84821,0.0179 L 10.256865,108.20597 C 8.1236656,102.43489 5.2017556,97.549383 2.6767956,96.060613 c -2.75173002,-1.62248 -3.67789,-5.99164 -4.13428,-8.36147 -1.89414,-12.73531 1.04806998,-26.48308 4.6067,-38.79484 1.38342,-4.44117 1.10419,-13.58033 -0.54407,-17.79319 -4.2184,-10.76178 -11.4085797,-16.37966 -12.3244697,-21.3654802 -0.6082799,-3.3112 -2.5646909,-15.328081 0.33584,-18.973131 4.31882,-2.9199098 12.4757697,2.32522 16.8572997,0.49369 1.6069297,-0.67171 2.0929297,-2.3048398 3.1144194,-10.4661198 0.56384,-6.48024 2.34196,-4.45706 7.26214,-7.03824 2.14367,-1.12459 -2.14355,-4.95226 -4.3649,-10.84786 -1.16393,-2.1724 -1.1814,-4.35053 -1.32324,-6.74605 -0.29538,-4.98862 -1.24145,-10.24241 -2.14382,-11.90355 -0.1195197,-0.22003 -0.6508697,-1.35245 -1.1810597,-2.51662 z m 41.0235494,102.804361 -0.0843,22.31145 c 0,0 6.63439,-5.88778 6.70402,-11.44383 0.0579,-4.61641 0.1215,-9.12217 -6.61974,-10.86762 z m -11.93626,6.25328 c -3.27055,3.98088 -10.63179,15.5967 -14.10067,15.89769 -3.04292,-0.0427 -8.77591,-7.53888 -12.15207,-10.91504 -2.5200694,-2.52007 -2.5659994,-3.02163 -3.0181494,-0.60564 -0.1361,0.72723 -3.74905,14.80249 -3.46483,16.10835 0.31925,1.4668 15.8249894,14.70054 18.0540294,14.7325 1.73011,0.0248 9.12832,-7.22389 14.32985,-11.99196 z"></path>
+                  <g transform="matrix(2.1663471,0,0,2.1663471,-1753.1362,-1353.9929)" fill="currentColor">
+                    <path d="m 827.63002,617.21307 -0.50264,-0.48525 c -0.9759,-0.94214 -1.43866,-1.11173 -2.84526,-2.35436 -0.98765,-0.87251 -2.03242,-2.18616 -1.94339,-3.31021 0.21599,-2.72696 1.99587,-8.58662 3.40965,-12.85411 0.64768,-1.49033 1.438,-4.90622 3.0135,-5.00304 1.52844,0.12061 2.3964,3.19205 3.02689,4.9526 1.4106,3.93889 2.963,8.40024 3.84851,12.85549 0.12059,0.60673 -0.0405,1.40758 -2.26699,3.34846 -1.17554,1.02474 -2.34726,2.07263 -2.60385,2.32864 l -0.46652,0.46547 0.0336,74.17255 c 9.2e-4,1.3728 -2.53188,1.41685 -2.52374,-0.0225 m 4.45265,-80.44426 c -0.0412,-0.84401 -2.77496,-12.90896 -3.4432,-12.91986 -0.66824,-0.0109 -2.72753,11.69192 -2.81266,12.82265 -0.0851,1.13073 1.50339,1.72438 3.09275,1.70204 1.58936,-0.0223 3.20432,-0.76082 3.16311,-1.60483 z" fill="currentColor"></path>
+                  </g>
+                </g>
+                <g transform="translate(-1.8992806,-28.143576)" fill="currentColor">
+                  <path fill="currentColor" d="m 192.59182,-19.591654 v 5.736084 h 5.58415 v -5.736084 z m -85.23821,0.380855 v 37.63853 h 5.58364 V 2.4002854 h 13.76608 V -3.1833531 H 112.93725 V -13.62716 h 16.81447 v -5.583639 z m 145.71255,0 -12.59923,37.63853 h 5.82032 l 2.86339,-8.5607179 h 14.86886 l 2.89078,8.5607179 h 5.81618 l -12.59768,-37.63853 z m 22.52369,0 v 37.63853 h 5.58209 v -37.63853 z m -19.03708,6.956682 5.67769,16.8186114 h -11.30474 z m -111.55081,1.425753 c -2.73857,0 -5.16294,0.622039 -7.23419,1.8789546 -2.0512,1.2377939 -3.65699,3.0165878 -4.79712,5.2968343 -1.14404,2.2712116 -1.70687,4.9483668 -1.70687,8.009847 0,2.9308576 0.57221,5.5278162 1.73426,7.7638671 h 0.002 v 0.0021 c 1.15893,2.212507 2.78939,3.961343 4.86895,5.212602 h 0.004 l 0.002,0.0021 c 2.10415,1.237735 4.55945,1.851566 7.32978,1.851566 2.74647,0 5.24921,-0.687585 7.46673,-2.060339 h 0.002 v -0.0021 c 2.23911,-1.392833 3.92589,-3.366171 5.03122,-5.875094 l 0.23254,-0.527099 -5.33197,-1.8401979 -0.20723,0.4221965 c -0.72446,1.4811184 -1.70318,2.5880274 -2.95279,3.3631024 -1.24648,0.773132 -2.71284,1.16427 -4.44365,1.16427 -2.57551,0 -4.45795,-0.818819 -5.81257,-2.472717 -1.06231,-1.297011 -1.59944,-3.1735867 -1.83761,-5.3810674 h 15.22284 3.29644 2.31459 l 0.0217,-0.5079793 c 0.13784,-3.3081423 -0.29117,-6.1893606 -1.30896,-8.6304809 l -0.002,-0.00207 c -0.99968,-2.4365289 -2.52911,-4.3460939 -4.56665,-5.6756226 l -0.002,-0.00207 c -2.02706,-1.3329268 -4.48558,-1.9900598 -7.32616,-1.9900598 z m 70.82823,0 c -3.17715,0 -5.79688,0.706447 -7.80469,2.1585241 -1.99221,1.4407955 -3.34745,3.4482776 -4.03541,5.953125 l -0.13643,0.4997111 5.29684,1.59783527 0.15244,-0.50952967 c 0.4801,-1.6003222 1.27144,-2.6860105 2.3828,-3.3558675 h 0.002 c 1.16415,-0.7079313 2.51407,-1.0660849 4.09226,-1.0660848 2.42361,-1e-7 4.00825,0.5646647 4.88239,1.5699301 l 0.002,0.00207 v 0.00207 c 0.73521,0.8316314 1.1018,2.1971354 1.22267,3.89278561 -0.81131,0.11101414 -1.57093,0.21811232 -2.44326,0.33382975 -1.66521,0.22089546 -3.31394,0.46809011 -4.94544,0.74000651 -1.62194,0.25629933 -3.09529,0.56479113 -4.41988,0.92604163 h -0.006 l -0.004,0.00207 c -1.43573,0.4202124 -2.68551,1.003009 -3.74034,1.7538981 -1.06342,0.7400556 -1.90379,1.6893161 -2.50011,2.8277344 l -0.002,0.00207 c -0.58722,1.1377503 -0.87075,2.4705328 -0.87075,3.9765014 0,1.556613 0.37112,3.009624 1.10949,4.324284 l 0.002,0.0041 v 0.0021 c 0.76126,1.32315 1.88438,2.392878 3.32848,3.195154 l 0.002,0.0021 0.004,0.0021 c 1.48442,0.796517 3.29517,1.181323 5.40846,1.181323 2.73307,0 5.08888,-0.586008 7.0311,-1.779219 l 0.002,-0.0021 c 0.97383,-0.593489 1.83948,-1.331495 2.59571,-2.205033 v 3.224609 h 5.07411 V 0.92957415 c 0,-1.09964738 -0.0505,-2.15080285 -0.154,-3.15226235 v -0.00207 c -0.10704,-1.0505964 -0.36884,-2.0319132 -0.78341,-2.933671 -0.8261,-1.8979141 -2.21663,-3.3410261 -4.10931,-4.2695069 -1.86588,-0.9405689 -4.08416,-1.4004309 -6.63474,-1.4004309 z m -40.28126,0.05116 c -2.43141,0 -4.58396,0.536856 -6.41821,1.6231569 -0.82189,0.4836197 -1.5367,1.0971241 -2.19522,1.7750855 v -2.6876914 h -5.12682 v 28.494385 h 5.6348 V 4.161935 3.4431158 c 0,-1.5521907 0.17349,-2.88010898 0.50953,-3.98425292 0.35547,-1.12926458 0.84198,-2.04329578 1.44746,-2.75745438 0.60923,-0.7185751 1.31993,-1.2396693 2.15594,-1.5802653 h 0.004 l 0.002,-0.00207 c 0.86053,-0.3598574 1.81908,-0.5431193 2.89285,-0.5431193 1.38835,0 2.49194,0.2674061 3.33778,0.7658447 h 0.002 l 0.002,0.00207 c 0.88893,0.5146423 1.57723,1.2029345 2.09187,2.091862 l 0.004,0.00568 0.002,0.00413 c 0.53965,0.8888334 0.91517,1.90091782 1.12499,3.04684243 l 0.002,0.00155 v 0.004134 c 0.2301,1.16652957 0.3458,2.38443167 0.3458,3.65611647 V 18.427731 h 5.63479 V 2.7325649 c 0,-1.0835105 -0.10714,-2.22221814 -0.31471,-3.41632897 -0.19313,-1.22581453 -0.53403,-2.42516653 -1.02319,-3.59564613 -0.49603,-1.2038469 -1.18086,-2.2902517 -2.04897,-3.2478638 l -0.002,-0.00207 c -0.88267,-0.9901463 -1.99006,-1.7798869 -3.30264,-2.3652303 -1.33839,-0.5968487 -2.92783,-0.8826337 -4.76146,-0.8826337 z m 17.04289,0.710551 v 31.69729 c 0,1.353957 -0.32226,2.236029 -0.87695,2.763656 -0.57242,0.544505 -1.42387,0.843876 -2.65617,0.843876 h -2.00401 v 5.381067 h 3.7052 c 2.36152,0 4.23888,-0.629044 5.51181,-1.939417 1.28568,-1.288867 1.90427,-3.158948 1.90427,-5.499922 v -33.24655 z m -47.43742,4.3635581 c 2.49394,0 4.25893,0.7695595 5.4746,2.3125203 l 0.002,0.00207 c 0.85255,1.0711538 1.33274,2.73361427 1.62471,4.6756836 h -14.7774 c 0.31263,-1.80483363 0.81479,-3.3871086 1.71308,-4.4942994 1.35158,-1.6659065 3.28265,-2.4959716 5.96294,-2.4959716 z m 76.76948,10.529073 c -0.008,0.3196653 -0.007,0.4994242 -0.0196,0.8867676 v 0.00413 0.00362 c -0.0163,0.9918037 -0.14661,1.8829547 -0.38447,2.6758056 l -0.008,0.025838 -0.006,0.025321 c -0.20437,1.0532734 -0.6406,2.0226387 -1.3224,2.9274697 -0.6747,0.878678 -1.56921,1.596721 -2.70887,2.158525 -1.09891,0.533066 -2.4192,0.808219 -3.98064,0.808219 -1.2456,0 -2.21848,-0.204976 -2.92799,-0.574125 h -0.002 c -0.71976,-0.38367 -1.22589,-0.861171 -1.56063,-1.441255 -0.33077,-0.603442 -0.4904,-1.218788 -0.4904,-1.873271 0,-0.7820363 0.17134,-1.3840508 0.4904,-1.8572513 l 0.002,-0.00207 c 0.36054,-0.525073 0.81976,-0.9484243 1.3963,-1.2831258 0.62722,-0.3538139 1.29534,-0.6428698 2.00608,-0.8691976 l 5.1e-4,-5.167e-4 v -5.168e-4 h 5.2e-4 V 6.439828 h 5.2e-4 v -5.167e-4 c 0.98828,-0.2793016 2.1044,-0.5192466 3.35173,-0.7188192 h 0.004 l 0.004,-0.00155 c 1.26196,-0.2187403 2.59939,-0.4202361 4.01526,-0.6056478 0.7003,-0.091706 1.42631,-0.1915178 2.13889,-0.287321 z"></path>
+                </g>
+              </g>
+            </svg>
+          </span>
           <span class="wordmark-sep" aria-hidden="true">·</span>
           <span class="wordmark-project">Project <em class="wordmark-bifrost">Bifrost</em></span>
         </a>
@@ -63,10 +80,34 @@ const year = new Date().getFullYear();
             </a>
           )}
           <span class="nav-divider" aria-hidden="true"></span>
-          <a href="/account" class="nav-user-name body-sm">{user.name}</a>
-          <form method="POST" action="/api/logout" class="nav-logout-form">
-            <button type="submit" class="logout-btn label-sm">Sign out</button>
-          </form>
+
+          <!-- User menu: an icon button that opens a small dropdown with
+               Settings + Sign out. On mobile the trigger is hidden and the
+               dropdown contents render inline inside the hamburger menu. -->
+          <div class="user-menu" id="user-menu">
+            <button
+              type="button"
+              class="user-trigger"
+              id="user-trigger"
+              aria-label={`Account — ${user.name}`}
+              aria-haspopup="true"
+              aria-expanded="false"
+              aria-controls="user-dropdown"
+            >
+              <svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
+                <circle cx="12" cy="8" r="3.4" fill="none" stroke="currentColor" stroke-width="1.6"/>
+                <path d="M5 19.2c0-3.2 3.1-5 7-5s7 1.8 7 5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/>
+              </svg>
+            </button>
+
+            <div class="user-dropdown" id="user-dropdown" role="menu" aria-label="Account">
+              <span class="user-dropdown-name">{user.name}</span>
+              <a href="/account" class="user-dropdown-item" role="menuitem">Settings</a>
+              <form method="POST" action="/api/logout" class="user-dropdown-form" role="none">
+                <button type="submit" class="user-dropdown-item user-dropdown-signout" role="menuitem">Sign out</button>
+              </form>
+            </div>
+          </div>
         </nav>
       </div>
     </header>
@@ -134,21 +175,33 @@ const year = new Date().getFullYear();
     border-bottom: none;
     color: var(--on-surface);
   }
+  /* The "Fenja AI" lockup reads larger than the "Project · Bifrost" wordmark
+     beside it: the logo box is 29px tall, the serif text 18px. The dot sits
+     on the logo's vertical middle but is sized to the smaller text. */
   .wordmark {
-    height: 30px;          /* 50% larger than the prior 20px lockup */
+    display: inline-flex;
+    align-items: center;
+    height: 29px;
+    color: var(--on-surface);
+  }
+  .wordmark-svg {
+    height: 29px;
     width: auto;
     display: block;
   }
   .wordmark-sep {
-    /* Flex-centred against the logo height so the dot sits on the vertical
+    /* Flex-centred against the lockup height so the dot sits on the vertical
        middle of the "Fenja AI" logo. */
     display: inline-flex;
     align-items: center;
-    height: 30px;
+    height: 29px;
     color: var(--on-surface-muted);
     font-family: var(--font-serif);
-    font-size: 22px;
+    font-size: 18px;
     line-height: 1;
+    /* Nudged down 1px so the dot sits on the optical centre of the lockup. */
+    position: relative;
+    top: 1px;
   }
   /* Project (regular) + Bifrost (italic) share a baseline. Italic Newsreader
      renders a touch taller at the same size, so Bifrost is set 1px smaller so
@@ -162,12 +215,16 @@ const year = new Date().getFullYear();
     line-height: 1;
   }
   .wordmark-project {
-    font-size: 20px;
+    font-size: 17px;       /* smaller than the Fenja AI logo (29px) */
     color: var(--on-surface);
+    /* Nudge the wordmark down so its optical centre lines up with the taller
+       logo lockup (the serif sits high in its line box). */
+    position: relative;
+    top: 3px;
   }
   .wordmark-bifrost {
     display: inline-block;
-    font-size: 19px;
+    font-size: 17px;       /* matched to Project */
     font-style: italic;
     padding: 2px 0;
     vertical-align: baseline;
@@ -217,8 +274,6 @@ const year = new Date().getFullYear();
     transform: scaleX(0.5);
     transform-origin: center;
   }
-  .nav-logout-form { display: inline-flex; }
-
   .nav-link {
     position: relative;
     font-family: var(--font-sans);
@@ -244,36 +299,98 @@ const year = new Date().getFullYear();
     font-weight: 500;
   }
 
-  /* ── User zone ──────────────────────────────────────────────────── */
-  .nav-user-name {
-    color: var(--on-surface-variant);
-    text-decoration: none;
-    border-bottom: none;
-    transition: color var(--duration-fast) var(--ease-standard);
+  /* ── User menu (icon + dropdown) ─────────────────────────────────── */
+  .user-menu {
+    position: relative;
+    display: inline-flex;
   }
-  .nav-user-name:hover {
+  .user-trigger {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background: none;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    color: var(--on-surface-variant);
+    /* Slightly faded at rest, fully opaque on hover/open. */
+    opacity: 0.6;
+    transition: opacity var(--duration-fast) var(--ease-standard),
+                color var(--duration-fast) var(--ease-standard),
+                background var(--duration-fast) var(--ease-standard);
+  }
+  .user-trigger:hover,
+  .user-menu:hover .user-trigger,
+  .user-menu.open .user-trigger {
+    opacity: 1;
     color: var(--on-surface);
-    border-bottom: none;
+    background: var(--surface-container-low);
+  }
+  /* Invisible bridge across the gap so moving from the icon to the dropdown
+     doesn't drop the hover and close the menu. */
+  .user-menu::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    right: 0;
+    width: 100%;
+    height: 14px;
   }
 
-  .logout-btn {
+  .user-dropdown {
+    position: absolute;
+    top: calc(100% + 10px);
+    right: 0;
+    min-width: 184px;
+    display: none;
+    flex-direction: column;
+    padding: var(--space-2);
+    /* Opaque (not glass) so the menu items read clearly over any page
+       content behind the dropdown. */
+    background: var(--surface-container-lowest);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-float);
+    z-index: 200;
+  }
+  /* Open on hover/focus (drops down), or on click via the .open class. */
+  .user-menu:hover .user-dropdown,
+  .user-menu:focus-within .user-dropdown,
+  .user-menu.open .user-dropdown { display: flex; }
+
+  .user-dropdown-name {
+    font-family: var(--font-sans);
+    font-size: var(--text-label-sm);
+    letter-spacing: var(--tracking-wide);
+    text-transform: uppercase;
+    color: var(--on-surface-muted);
+    padding: var(--space-2) var(--space-3) var(--space-1);
+  }
+  .user-dropdown-form { display: block; }
+  .user-dropdown-item {
+    display: block;
+    width: 100%;
+    text-align: left;
     background: none;
     border: none;
     cursor: pointer;
     font-family: var(--font-sans);
-    font-size: var(--text-label-md);
-    letter-spacing: var(--tracking-wide);
-    text-transform: uppercase;
-    color: var(--on-surface-muted);
+    font-size: var(--text-body-sm);
+    color: var(--on-surface-variant);
+    text-decoration: none;
     padding: var(--space-2) var(--space-3);
     border-radius: var(--radius-sm);
     transition: color var(--duration-fast) var(--ease-standard),
                 background var(--duration-fast) var(--ease-standard);
   }
-  .logout-btn:hover {
+  .user-dropdown-item:hover {
     color: var(--on-surface);
     background: var(--surface-container-low);
+    border-bottom: none;
   }
+  .user-dropdown-signout { color: var(--on-surface-muted); }
 
   /* ── Content ────────────────────────────────────────────────────── */
   .main-content {
@@ -364,9 +481,7 @@ const year = new Date().getFullYear();
     .nav.open .nav-right { display: flex; }
 
     /* Comfortable tap targets in the dropdown. */
-    .nav-right .nav-link,
-    .nav-right .nav-user-name,
-    .nav-right .logout-btn {
+    .nav-right .nav-link {
       display: flex;
       align-items: center;
       min-height: 44px;
@@ -381,8 +496,27 @@ const year = new Date().getFullYear();
       margin: var(--space-2) 0;
       transform: scaleY(0.5);
     }
-    .nav-logout-form { width: 100%; }
-    .logout-btn { justify-content: flex-start; }
+
+    /* On mobile the icon trigger is dropped and the menu contents render
+       inline inside the open hamburger as plain full-width items. */
+    .user-menu { display: block; width: 100%; }
+    .user-trigger { display: none; }
+    .user-dropdown {
+      position: static;
+      display: flex;
+      min-width: 0;
+      padding: 0;
+      background: none;
+      backdrop-filter: none;
+      -webkit-backdrop-filter: none;
+      box-shadow: none;
+      border-radius: 0;
+    }
+    .user-dropdown-item {
+      min-height: 44px;
+      align-items: center;
+      font-size: var(--text-body-md);
+    }
 
     /* Footer stacks. */
     .footer-inner {
@@ -410,4 +544,27 @@ const year = new Date().getFullYear();
   toggle?.addEventListener('click', () => setOpen(!nav!.classList.contains('open')));
   menu?.querySelectorAll('a').forEach((a) => a.addEventListener('click', () => setOpen(false)));
   window.addEventListener('resize', () => { if (window.innerWidth > 767) setOpen(false); });
+
+  // User menu dropdown (desktop): toggle on the icon, close on outside click,
+  // Escape, or selecting an item. Mobile renders the menu inline so the
+  // open/closed state is irrelevant there.
+  const userMenu = document.querySelector<HTMLElement>('#user-menu');
+  const userTrigger = userMenu?.querySelector<HTMLButtonElement>('#user-trigger');
+
+  function setUserOpen(open: boolean) {
+    if (!userMenu || !userTrigger) return;
+    userMenu.classList.toggle('open', open);
+    userTrigger.setAttribute('aria-expanded', open ? 'true' : 'false');
+  }
+
+  userTrigger?.addEventListener('click', (e) => {
+    e.stopPropagation();
+    setUserOpen(!userMenu!.classList.contains('open'));
+  });
+  document.addEventListener('click', (e) => {
+    if (userMenu && !userMenu.contains(e.target as Node)) setUserOpen(false);
+  });
+  document.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') setUserOpen(false);
+  });
 </script>