fixed top bar height issues and other styling

frontend/src/components/react/LogoutButton.tsx

@@ -22,12 +22,10 @@ export default function LogoutButton() {
       disabled={busy}
       title="Sign out"
       aria-label="Sign out"
-      className="text-subtext0 hover:text-red transition-colors p-1.5 rounded-md hover:bg-surface0/60 disabled:opacity-50"
+      className="topbar-control topbar-control--danger"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        width="16"
-        height="16"
         viewBox="0 0 24 24"
         fill="none"
         stroke="currentColor"
@@ -40,6 +38,7 @@ export default function LogoutButton() {
         <polyline points="16 17 21 12 16 7" />
         <line x1="21" x2="9" y1="12" y2="12" />
       </svg>
+      <span>{busy ? 'Signing out…' : 'Sign out'}</span>
     </button>
   );
 }

frontend/src/components/react/Search.tsx

@@ -130,13 +130,10 @@ export default function Search() {
         onClick={() => setOpen(true)}
         aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
         title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
-        className="text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors flex items-center gap-2 px-2 py-1 hover:bg-[var(--surface0)]/60 font-display italic"
+        className="topbar-control"
-        style={{ borderRadius: 1 }}
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
-          width="18"
-          height="18"
           viewBox="0 0 24 24"
           fill="none"
           stroke="currentColor"
@@ -148,7 +145,8 @@ export default function Search() {
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.3-4.3" />
         </svg>
-        <kbd className="hidden md:inline-flex items-center gap-1 text-[10px] font-mono text-[var(--subtext0)] px-1.5 py-0.5 border border-[var(--surface2)] bg-[var(--surface0)]/60" style={{ borderRadius: 1 }}>
+        <span>Search</span>
+        <kbd className="hidden md:inline-flex">
           <span>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
         </kbd>
       </button>
@@ -169,7 +167,7 @@ export default function Search() {
             className="relative w-full max-w-xl bg-[var(--base)] text-[var(--text)] border border-[var(--surface2)] overflow-hidden flex flex-col max-h-[70vh] animate-in fade-in slide-in-from-top-4 duration-200"
             style={{
               borderRadius: 2,
-              boxShadow: '0 30px 60px -20px rgba(20,16,12,0.55), 0 8px 20px -8px rgba(20,16,12,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',
+              boxShadow: '0 30px 60px -20px rgba(0,0,0,0.55), 0 8px 20px -8px rgba(0,0,0,0.3), inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent)',
             }}
             onClick={e => e.stopPropagation()}
           >
@@ -237,8 +235,8 @@ export default function Search() {
                           <div className={`font-display italic truncate text-lg leading-tight pr-2 flex items-baseline gap-2 ${active ? 'text-[var(--mauve)]' : 'text-[var(--text)]'}`} style={{ paddingInlineEnd: '0.35em' }}>
                             <span className="truncate">{title}</span>
                             {p.draft && (
-                              <span className="text-[9px] font-sans not-italic uppercase tracking-[0.2em] text-[var(--peach)] border border-[var(--peach)]/60 px-1.5 py-0.5 shrink-0" style={{ borderRadius: 1 }}>
+                              <span className="chip chip-draft shrink-0 !text-[0.62rem] !py-0">
-                                Draft
+                                Sketch
                               </span>
                             )}
                           </div>

frontend/src/components/react/ThemeSwitcher.tsx

@@ -43,8 +43,7 @@ export default function ThemeSwitcher({ defaultTheme = 'salon' }: Props) {
         value={theme}
         onChange={(e) => setTheme(e.target.value)}
         aria-label="Theme"
-        className="appearance-none bg-[var(--surface0)]/60 text-[var(--text)] border border-[var(--surface2)] px-3 py-1.5 text-xs uppercase tracking-[0.18em] focus:outline-none focus:border-[var(--mauve)] transition-colors cursor-pointer hover:bg-[var(--surface0)] pr-8 font-display italic"
+        className="topbar-control"
-        style={{ borderRadius: 1 }}
       >
         {THEMES.map(t => (
           <option key={t.value} value={t.value}>{t.label}</option>

frontend/src/layouts/Layout.astro

@@ -122,27 +122,15 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 
 				<div class="flex flex-wrap items-center gap-2 md:gap-3 justify-start md:justify-end md:ml-auto w-full md:w-auto">
 					{hasContact && (
-						<a
+						<a href="/contact" class="topbar-control">Contact</a>
-							href="/contact"
-							class="font-display italic text-sm text-[var(--subtext1)] hover:text-[var(--mauve)] transition-colors tracking-wide"
-						>Contact</a>
 					)}
 					<Search client:idle />
+					<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
 					{isAdmin && (
-						<div class="flex items-center gap-1 ml-auto md:ml-1 md:pl-3 md:border-l md:border-[var(--surface2)]/60">
+						<div class="flex items-center md:pl-3 md:border-l md:border-[var(--surface2)]/60">
-							<a
-								href="/admin"
-								class="chip chip-accent uppercase"
-								title="Signed in as artist"
-								aria-label="Signed in as artist"
-							>
-								<span class="w-1.5 h-1.5 rounded-full bg-[var(--rosewater)] animate-pulse"></span>
-								<span class="hidden sm:inline">Artist</span>
-							</a>
 							<LogoutButton client:idle />
 						</div>
 					)}
-					<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
 				</div>
 			</div>
 		</header>

frontend/src/pages/posts/[slug].astro

@@ -134,7 +134,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
 
         {post.draft && (
           <div class="mt-6 inline-block">
-            <span class="chip" style="background: var(--peach); color: var(--crust); border-color: var(--peach);">
+            <span class="chip chip-draft">
               Sketch · unpublished
             </span>
           </div>

frontend/src/styles/global.css

@@ -652,6 +652,13 @@ code, pre, kbd, samp {
 .breakcore .plate {
   background: var(--surface0);
 }
+.salon-noir .plate,
+.gothic .plate {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
+    0 22px 42px -28px rgba(0, 0, 0, 0.7),
+    0 4px 12px -6px rgba(0, 0, 0, 0.45);
+}
 .breakcore .plate {
   box-shadow:
     inset 0 0 0 1px color-mix(in srgb, var(--mauve) 35%, transparent),
@@ -667,6 +674,20 @@ code, pre, kbd, samp {
     0 32px 60px -28px rgba(20, 16, 12, 0.55),
     0 8px 20px -8px rgba(20, 16, 12, 0.3);
 }
+.salon-noir .plate:hover,
+.gothic .plate:hover {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 60%, transparent),
+    0 32px 60px -28px rgba(0, 0, 0, 0.8),
+    0 8px 20px -8px rgba(0, 0, 0, 0.55);
+}
+.breakcore .plate:hover {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--mauve) 45%, transparent),
+    0 0 0 1px color-mix(in srgb, var(--mauve) 30%, transparent),
+    0 32px 60px -28px rgba(255, 46, 166, 0.45),
+    0 0 32px -8px color-mix(in srgb, var(--mauve) 50%, transparent);
+}
 .plate .plate-image {
   position: relative;
   overflow: hidden;
@@ -854,6 +875,11 @@ code, pre, kbd, samp {
   color: var(--rosewater);
   border-color: var(--mauve);
 }
+.chip-draft {
+  background: color-mix(in srgb, var(--peach) 18%, transparent);
+  color: var(--peach);
+  border-color: color-mix(in srgb, var(--peach) 50%, transparent);
+}
 
 /* Card / glass — keep the name but reinterpret as a paper card */
 .glass {
@@ -869,6 +895,11 @@ code, pre, kbd, samp {
 .breakcore .glass {
   background-color: color-mix(in srgb, var(--surface0) 70%, transparent);
 }
+.salon-noir .glass {
+  box-shadow:
+    inset 0 0 0 1px color-mix(in srgb, var(--surface1) 50%, transparent),
+    0 14px 40px -24px rgba(0, 0, 0, 0.8);
+}
 .gothic .glass {
   border-color: color-mix(in srgb, var(--mauve) 35%, var(--surface2));
   box-shadow:
@@ -936,6 +967,61 @@ code, pre, kbd, samp {
   background: color-mix(in srgb, var(--mauve) 8%, transparent);
 }
 
+/* ───── Top-bar controls — one height, one language ───── */
+.topbar-control {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.4rem;
+  height: 2rem;
+  padding: 0 0.7rem;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.85rem;
+  line-height: 1;
+  color: var(--subtext1);
+  background: color-mix(in srgb, var(--surface0) 55%, transparent);
+  border: 1px solid var(--surface2);
+  border-radius: 1px;
+  text-decoration: none;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 0.15s, background 0.15s, border-color 0.15s;
+}
+.topbar-control:hover {
+  color: var(--mauve);
+  background: color-mix(in srgb, var(--surface0) 85%, transparent);
+  border-color: color-mix(in srgb, var(--mauve) 45%, var(--surface2));
+}
+.topbar-control:focus-visible {
+  outline: none;
+  border-color: var(--mauve);
+}
+.topbar-control:disabled { opacity: 0.5; cursor: default; }
+.topbar-control svg { width: 14px; height: 14px; flex-shrink: 0; }
+.topbar-control--danger:hover {
+  color: var(--red);
+  border-color: color-mix(in srgb, var(--red) 55%, var(--surface2));
+}
+/* Native <select> variant — leave room for the chevron overlay */
+select.topbar-control {
+  appearance: none;
+  -webkit-appearance: none;
+  padding-right: 1.9rem;
+}
+.topbar-control kbd {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.15rem;
+  font-family: var(--font-mono, monospace);
+  font-style: normal;
+  font-size: 0.62rem;
+  padding: 0.05rem 0.3rem;
+  border: 1px solid var(--surface2);
+  border-radius: 1px;
+  color: var(--subtext0);
+}
+
 /* Form input look */
 .field-input {
   width: 100%;