frontend/src/components/react/LogoutButton.tsx

@@ -22,7 +22,7 @@ export default function LogoutButton() {
       disabled={busy}
       title="Sign out"
       aria-label="Sign out"
-      className="topbar-control topbar-control--danger"
+      className="topbar-control topbar-control--danger tc-collapse-sm"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -38,7 +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>
+      <span className="tc-label">{busy ? 'Signing out…' : 'Sign out'}</span>
     </button>
   );
 }

frontend/src/components/react/Search.tsx

@@ -130,7 +130,7 @@ export default function Search() {
         onClick={() => setOpen(true)}
         aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
         title={`Search (${isMac ? '⌘' : 'Ctrl'}+K)`}
-        className="topbar-control"
+        className="topbar-control tc-collapse-md"
       >
         <svg
           xmlns="http://www.w3.org/2000/svg"
@@ -145,8 +145,8 @@ export default function Search() {
           <circle cx="11" cy="11" r="8" />
           <path d="m21 21-4.3-4.3" />
         </svg>
-        <span>Search</span>
+        <span className="tc-label">Search</span>
-        <kbd className="hidden md:inline-flex">
+        <kbd className="tc-kbd">
           <span>{isMac ? '⌘' : 'Ctrl'}</span><span className="opacity-50">+</span><span>K</span>
         </kbd>
       </button>

frontend/src/components/react/ThemeSwitcher.tsx

@@ -43,7 +43,7 @@ export default function ThemeSwitcher({ defaultTheme = 'salon' }: Props) {
         value={theme}
         onChange={(e) => setTheme(e.target.value)}
         aria-label="Theme"
-        className="topbar-control"
+        className="topbar-control theme-select"
       >
         {THEMES.map(t => (
           <option key={t.value} value={t.value}>{t.label}</option>

frontend/src/components/react/admin/Login.tsx

@@ -29,8 +29,8 @@ export default function Login() {
   }
 
   return (
-    <div className="max-w-md mx-auto mt-16">
+    <div className="max-w-md mx-auto mt-10 md:mt-20 px-1">
-      <div className="glass p-10">
+      <div className="glass p-7 sm:p-10">
         <div className="font-display italic text-[var(--subtext0)] text-xs tracking-[0.3em] uppercase mb-3 text-center">
           Artist's entrance
         </div>
@@ -43,7 +43,7 @@ export default function Login() {
         <p className="text-[var(--subtext1)] mb-8 text-center font-display italic">
           Present your token to enter the back room.
         </p>
-        <form onSubmit={handleSubmit} className="space-y-6">
+        <form onSubmit={handleSubmit} className="space-y-6" noValidate>
           <div>
             <label htmlFor="token" className="field-label">Admin token</label>
             <input
@@ -53,24 +53,39 @@ export default function Login() {
               value={value}
               onChange={e => setValue(e.target.value)}
               autoComplete="current-password"
+              aria-invalid={error ? true : undefined}
+              aria-describedby={error ? 'login-error' : undefined}
               className="field-input font-mono tracking-widest"
               placeholder="••••••••••••"
             />
           </div>
           {error && (
-            <p className="text-sm text-[var(--red)] bg-[var(--red)]/10 border border-[var(--red)]/30 px-3 py-2 font-display italic">
+            <p
+              id="login-error"
+              role="alert"
+              className="text-sm text-[var(--red)] bg-[var(--red)]/10 border border-[var(--red)]/30 px-3 py-2 font-display italic"
+            >
               {error}
             </p>
           )}
           <button
             type="submit"
             disabled={busy}
-            className="btn btn--primary btn--block"
+            className="btn btn--primary btn--block btn--lg"
           >
             {busy ? 'Unlocking…' : 'Enter'}
           </button>
         </form>
       </div>
+      <div className="text-center mt-6">
+        <a
+          href="/"
+          className="inline-flex items-center gap-1.5 text-xs font-display italic text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors group"
+        >
+          <span className="transition-transform group-hover:-translate-x-0.5">←</span>
+          Back to the catalogue
+        </a>
+      </div>
     </div>
   );
 }

frontend/src/layouts/Layout.astro

@@ -14,9 +14,12 @@ interface Props {
 	description?: string;
 	image?: string;
 	type?: 'website' | 'article';
+	/** Strips the top-bar controls and footer nav — used by the login page
+	 * so the sign-in screen is a focused, chrome-free stage. */
+	minimal?: boolean;
 }
 
-const { title, wide = false, description, image, type = 'website' } = Astro.props;
+const { title, wide = false, description, image, type = 'website', minimal = false } = Astro.props;
 
 const API_URL = process.env.PUBLIC_API_URL || 'http://backend:3000';
 const isAdmin = Astro.cookies.get('admin_session')?.value === '1';
@@ -92,7 +95,7 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 		<div class="salon-atmosphere" aria-hidden="true"></div>
 
 		<header class="border-b border-[var(--surface2)]/60">
-			<div class="max-w-6xl mx-auto px-6 md:px-10 py-5 md:py-7 flex flex-col md:flex-row md:items-end gap-4 md:gap-6">
+			<div class={`max-w-6xl mx-auto px-6 md:px-10 py-5 md:py-7 flex flex-col gap-4 md:flex-row md:items-end md:gap-6 ${minimal ? 'justify-center text-center' : 'md:justify-between'}`}>
 				<a href="/" class="nameplate group" aria-label="Home">
 					{isAdmin ? (
 						<EditableText
@@ -120,18 +123,21 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 					)}
 				</a>
 
-				<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">
+				{!minimal && (
+					<nav class="topbar-cluster w-full md:w-auto" aria-label="Site controls">
 						{hasContact && (
 							<a href="/contact" class="topbar-control">Contact</a>
 						)}
 						<Search client:idle />
 						<ThemeSwitcher client:only="react" defaultTheme={siteConfig.theme} />
 						{isAdmin && (
-						<div class="flex items-center md:pl-3 md:border-l md:border-[var(--surface2)]/60">
+							<>
+								<span class="topbar-divider" aria-hidden="true"></span>
 								<LogoutButton client:idle />
-						</div>
+							</>
+						)}
+					</nav>
 				)}
-				</div>
 			</div>
 		</header>
 
@@ -139,7 +145,9 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 			<slot />
 		</main>
 
-		<footer class="max-w-6xl mx-auto px-6 md:px-10 py-12 md:py-16 text-center border-t border-[var(--surface2)]/40 mt-12">
+		<footer class={`max-w-6xl mx-auto px-6 md:px-10 text-center border-t border-[var(--surface2)]/40 ${minimal ? 'py-8 mt-8' : 'py-12 md:py-16 mt-12'}`}>
+			{!minimal && (
+				<>
 					<div class="section-rule mb-6">
 						<span class="ornament">✦</span>
 						<span class="font-display italic text-[var(--subtext0)] text-sm">end of catalogue</span>
@@ -172,6 +180,8 @@ const hasContact = (siteConfig.contact_links?.length ?? 0) > 0;
 							</>
 						)}
 					</div>
+				</>
+			)}
 			<div class="text-[var(--overlay0)] text-xs italic">
 				&copy; {year} · {siteConfig.title}
 			</div>

frontend/src/pages/admin/login.astro

@@ -3,6 +3,6 @@ import Layout from '../../layouts/Layout.astro';
 import Login from '../../components/react/admin/Login';
 ---
 
-<Layout title="Admin Login">
+<Layout title="Admin Login" description="Sign in to the back room." minimal>
     <Login client:only="react" />
 </Layout>

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

@@ -91,7 +91,7 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
   {post && (
     <article class="plate-enter">
       {/* Toolbar — exhibit nav */}
-      <div class="flex items-center justify-between gap-3 mb-10 md:mb-14 font-display italic text-sm text-[var(--subtext0)]">
+      <div class="flex flex-wrap items-center justify-between gap-3 mb-10 md:mb-14 font-display italic text-sm text-[var(--subtext0)]">
         <a href="/" class="inline-flex items-center gap-2 hover:text-[var(--mauve)] transition-colors group">
           <span class="transition-transform group-hover:-translate-x-1">←</span>
           Back to catalogue

frontend/src/styles/global.css

@@ -974,18 +974,18 @@ code, pre, kbd, samp {
 .btn--primary {
   background: var(--mauve);
   color: var(--rosewater);
-  border-color: var(--mauve);
+  border-color: color-mix(in srgb, var(--mauve) 80%, var(--crust));
-  box-shadow: 0 4px 0 -2px color-mix(in srgb, var(--mauve) 55%, var(--crust));
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
 }
 .btn--primary:hover {
   transform: translateY(-1px);
   background: var(--red);
-  border-color: var(--red);
+  border-color: color-mix(in srgb, var(--red) 80%, var(--crust));
-  box-shadow: 0 6px 0 -2px color-mix(in srgb, var(--red) 55%, var(--crust));
+  box-shadow: 0 7px 16px -7px color-mix(in srgb, var(--red) 65%, transparent);
 }
 .btn--primary:active {
-  transform: translateY(1px);
+  transform: translateY(0);
-  box-shadow: 0 1px 0 -1px color-mix(in srgb, var(--mauve) 55%, var(--crust));
+  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3);
 }
 .btn--ghost {
   color: var(--subtext1);
@@ -1023,7 +1023,30 @@ code, pre, kbd, samp {
 .btn--icon.btn--sm { width: 2rem; }
 .btn--block { width: 100%; }
 
-/* ───── Top-bar controls — one height, one language ───── */
+/* ───── Top-bar controls — one height, one language ─────
+ * `.topbar-cluster` lays the chrome controls out as one tidy, right-aligned
+ * group that wraps as a unit (never a ragged full-width column on mobile).
+ * Every control is the same 2rem height; icon-only variants are exact
+ * squares so they line up cleanly next to each other. */
+.topbar-cluster {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.4rem;
+  justify-content: flex-start;
+}
+@media (min-width: 768px) {
+  .topbar-cluster { justify-content: flex-end; }
+}
+/* A hairline divider between the public controls and the admin group. */
+.topbar-divider {
+  align-self: stretch;
+  width: 1px;
+  margin: 0.15rem 0.15rem;
+  background: var(--surface2);
+  flex: none;
+}
+
 .topbar-control {
   display: inline-flex;
   align-items: center;
@@ -1031,6 +1054,7 @@ code, pre, kbd, samp {
   gap: 0.4rem;
   height: 2rem;
   padding: 0 0.7rem;
+  flex: none;
   font-family: var(--font-display);
   font-style: italic;
   font-size: 0.85rem;
@@ -1055,17 +1079,25 @@ code, pre, kbd, samp {
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--mauve) 40%, transparent);
 }
 .topbar-control:disabled { opacity: 0.5; cursor: default; }
-.topbar-control svg { width: 14px; height: 14px; flex-shrink: 0; }
+.topbar-control svg { width: 15px; height: 15px; flex-shrink: 0; }
+/* Exact-square icon-only variant — keeps the row aligned. */
+.topbar-control--icon { width: 2rem; padding: 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 */
+/* Native <select> variant — leave room for the chevron overlay.
+ * Fixed width so switching themes never resizes the whole top bar. */
 select.topbar-control {
   appearance: none;
   -webkit-appearance: none;
   padding-right: 1.9rem;
 }
+select.topbar-control.theme-select {
+  width: 8.75rem;
+  justify-content: flex-start;
+  text-align: left;
+}
 .topbar-control kbd {
   display: inline-flex;
   align-items: center;
@@ -1079,6 +1111,23 @@ select.topbar-control {
   color: var(--subtext0);
 }
 
+/* Responsive collapse — below a breakpoint a control drops its label and
+ * becomes an exact 2rem square so the cluster stays a tidy aligned row on
+ * phones. Written unlayered (not Tailwind utilities) so it reliably wins
+ * over the `.topbar-control` base in the Tailwind v4 cascade. */
+.topbar-control .tc-label { display: inline; }
+@media (max-width: 1023px) {
+  .topbar-control .tc-kbd { display: none; }
+}
+@media (max-width: 767px) {
+  .topbar-control.tc-collapse-md { width: 2rem; padding: 0; }
+  .topbar-control.tc-collapse-md .tc-label { display: none; }
+}
+@media (max-width: 639px) {
+  .topbar-control.tc-collapse-sm { width: 2rem; padding: 0; }
+  .topbar-control.tc-collapse-sm .tc-label { display: none; }
+}
+
 /* Form input look */
 .field-input {
   width: 100%;