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

@@ -78,11 +78,8 @@ export default function Login() {
         </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>
+        <a href="/" className="back-link">
+          <span className="bl-arrow" aria-hidden="true">←</span>
           Back to the catalogue
         </a>
       </div>

frontend/src/layouts/AdminLayout.astro

@@ -17,8 +17,8 @@ if (Astro.cookies.get('admin_session')?.value !== '1') {
     <div class="space-y-10 md:space-y-14">
         <header class="flex flex-col md:flex-row md:items-end justify-between gap-6 pb-6 border-b border-[var(--surface2)]/60">
             <div class="flex-1 min-w-0">
-                <a href="/" class="inline-flex items-center gap-1.5 text-xs font-display italic text-[var(--subtext0)] hover:text-[var(--mauve)] transition-colors mb-3 group">
-                    <span class="transition-transform group-hover:-translate-x-0.5">←</span>
+                <a href="/" class="back-link mb-3">
+                    <span class="bl-arrow" aria-hidden="true">←</span>
                     Back to the catalogue
                 </a>
                 <div class="font-display italic text-[var(--mauve)] text-xs tracking-[0.3em] uppercase mb-2">Artist's desk</div>

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

@@ -92,8 +92,8 @@ const displayTitle = post ? (post.title || formatSlug(post.slug)) : 'Work';
     <article class="plate-enter">
       {/* Toolbar — exhibit nav */}
       <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>
+        <a href="/" class="back-link">
+          <span class="bl-arrow" aria-hidden="true">←</span>
           Back to catalogue
         </a>
 

frontend/src/styles/global.css

@@ -1052,6 +1052,36 @@ code, pre, kbd, samp {
 .btn--icon.btn--sm { width: 2rem; }
 .btn--block { width: 100%; }
 
+/* Back-link — a real affordance, not bare body text. One markup for
+ * every "← back" return link (post, admin, login). */
+.back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: 0.9rem;
+  line-height: 1;
+  color: var(--subtext1);
+  text-decoration: none;
+  padding: 0.35rem 0.1rem;
+  border-bottom: 1px solid color-mix(in srgb, var(--subtext1) 35%, transparent);
+  transition: color 0.15s ease, border-color 0.15s ease, gap 0.15s ease;
+}
+.back-link:hover,
+.back-link:focus-visible {
+  color: var(--mauve);
+  border-color: var(--mauve);
+  gap: 0.7rem;
+  outline: none;
+}
+.back-link .bl-arrow {
+  display: inline-block;
+  transition: transform 0.15s ease;
+}
+.back-link:hover .bl-arrow,
+.back-link:focus-visible .bl-arrow { transform: translateX(-3px); }
+
 /* ───── 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).
@@ -1557,6 +1587,53 @@ input[type="date"] { color-scheme: light; }
   box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 35%, transparent);
 }
 
+/* Ghost had no breakcore identity — drab subtext on faint surface,
+ * near-invisible on the violet ground. Give it the neon outline. */
+.breakcore .btn--ghost {
+  color: var(--teal);
+  border-color: color-mix(in srgb, var(--teal) 55%, transparent);
+  background: color-mix(in srgb, var(--surface0) 60%, transparent);
+  box-shadow: 3px 3px 0 0 color-mix(in srgb, var(--teal) 35%, var(--crust));
+}
+.breakcore .btn--ghost:hover {
+  color: var(--crust);
+  background: var(--teal);
+  border-color: var(--teal);
+  box-shadow: 3px 3px 0 0 var(--mauve);
+}
+.breakcore .btn--ghost:active {
+  transform: translate(2px, 2px);
+  box-shadow: 1px 1px 0 0 var(--mauve);
+}
+
+/* Back-link → hard neon return tab. Impossible to miss against the
+ * CRT-violet ground; same offset-block language as .btn--primary. */
+.breakcore .back-link {
+  font-family: var(--font-mono);
+  font-style: normal;
+  font-size: 0.7rem;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--green);
+  padding: 7px 13px;
+  background: color-mix(in srgb, var(--crust) 65%, transparent);
+  border: 1px solid var(--mauve);
+  box-shadow: 3px 3px 0 0 var(--mauve);
+  text-shadow: 0 0 6px color-mix(in srgb, var(--green) 50%, transparent);
+}
+.breakcore .back-link:hover,
+.breakcore .back-link:focus-visible {
+  color: var(--crust);
+  background: var(--green);
+  border-color: var(--green);
+  box-shadow: 3px 3px 0 0 var(--mauve);
+  text-shadow: none;
+}
+.breakcore .back-link:active {
+  transform: translate(3px, 3px);
+  box-shadow: 0 0 0 0 var(--mauve);
+}
+
 /* Prose links — magenta resting, acid-green on hover. */
 .breakcore .prose a {
   text-decoration-color: color-mix(in srgb, var(--mauve) 55%, transparent);