From af33b580931cfab64cc3f68f5acd48c701b622d1 Mon Sep 17 00:00:00 2001
From: Adam <adambuttrick@gmail.com>
Date: Wed, 28 Oct 2026 13:22:37 +0100
Subject: [PATCH] Add subtitle to mobile navigation brand

---
 _brand/includes/navigation/top.html | 10 ++++++----
 _brand/sass/ark.scss                | 30 +++++++++++++++++++++++++++++
 _config.yml                         |  2 ++
 3 files changed, 38 insertions(+), 4 deletions(-)

diff --git a/_brand/includes/navigation/top.html b/_brand/includes/navigation/top.html
index b1ccd92..d227989 100644
--- a/_brand/includes/navigation/top.html
+++ b/_brand/includes/navigation/top.html
@@ -13,12 +13,14 @@
 <nav lang="en" class="arka__navbar navbar navbar-expand-md border-top border-bottom border-dark-subtle"
      aria-label="Main navigation">
   <div class="container">
-    <a href="{{ site.baseurl }}" class="navbar-brand d-md-none">
-      <svg class="text-brand icon-lg arka__logo">
-            <title>{{ site.title }}</title>
+    <a href="{{ site.baseurl }}/" class="navbar-brand arka__navbar-brand d-md-none">
+      <svg class="text-brand icon-lg arka__logo" aria-hidden="true">
             <use href="#icon-ark"></use>
       </svg>
-      {{ site.title }}
+      <span class="arka__navbar-brand-text">
+        <span class="arka__navbar-brand-title">{{ site.title }}</span>
+        <span class="arka__tagline arka__navbar-brand-tagline">{{ site.tagline_short }}</span>
+      </span>
     </a>
     <button class="navbar-toggler"
            type="button" 
diff --git a/_brand/sass/ark.scss b/_brand/sass/ark.scss
index 6a96390..548dcd9 100644
--- a/_brand/sass/ark.scss
+++ b/_brand/sass/ark.scss
@@ -172,6 +172,36 @@
     text-transform: uppercase;
   }
 
+  /* mobile brand: logo beside the title, with the short tagline beneath */
+  &__navbar-brand {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 100%;
+    white-space: normal;
+  }
+
+  &__navbar-brand-text {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__navbar-brand-title {
+    line-height: 1.2;
+  }
+
+  &__navbar-brand-tagline {
+    color: var(--bs-secondary-color);
+    font-size: 0.7em;
+    line-height: 1.3;
+    margin-top: 0.2em;
+    text-transform: none;
+    text-wrap: balance;
+    /* wrap within the title's width instead of widening the brand */
+    min-width: 100%;
+    width: 0;
+  }
+
   &__navbar .nav-item {
     padding-left: 0.4rem;
     padding-right: 0.4rem;
diff --git a/_config.yml b/_config.yml
index a54b1bf..66aff44 100644
--- a/_config.yml
+++ b/_config.yml
@@ -10,6 +10,8 @@ title: ARK Alliance
 email: info@arks.org
 tagline: >-
   Home of the Archival Resource Key (ARK)
+# Shown beneath the site title in the mobile navigation bar.
+tagline_short: Home of Archival Resource Keys
 description: >-
   ARKs are reliable, persistent identifiers (PIDs) for information objects,
   functioning as stable web addresses that avoid 404 errors. Welcome to the