diff --git a/calendarium/datetools.py b/calendarium/datetools.py
index 0d942f2..a65ce5c 100644
--- a/calendarium/datetools.py
+++ b/calendarium/datetools.py
@@ -47,7 +47,7 @@ def translation_session_key(language):
 TRANSLATION_LABELS = {
     'kjv': 'King James Version',
     'lxx2012-web': 'LXX2012 & WEB',
-    'douay-rheims': 'Douay-Rheims (Challoner, 1899)',
+    'douay-rheims': 'Douay-Rheims',
     'rccv': 'Romanian Corrected Cornilescu Version',
     'srp1865': 'Serbian (Karadžić/Daničić, 1865)',
 }
diff --git a/calendarium/templates/calendar.html b/calendarium/templates/calendar.html
index aec5c5e..eb88fe3 100644
--- a/calendarium/templates/calendar.html
+++ b/calendarium/templates/calendar.html
@@ -21,18 +21,18 @@
 {% block extra_nav %}
 	<div class="page-nav-row">
 		<div class="day-nav">
-			<a class="cal-nav" href="{% url "calendar" tradition=tradition cal=cal year=previous_month.year month=previous_month.month %}" {% if previous_nofollow %}rel="nofollow"{% endif %} hx-get="{% url "calendar" tradition=tradition cal=cal year=previous_month.year month=previous_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">&larr; {{ previous_month|date:"F" }}</a>
-			<a class="cal-nav" href="{% url "calendar" tradition=tradition cal=cal year=next_month.year month=next_month.month %}" {% if next_nofollow %}rel="nofollow"{% endif %} hx-get="{% url "calendar" tradition=tradition cal=cal year=next_month.year month=next_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">{{ next_month|date:"F" }} &rarr;</a>
+			<a class="cal-nav" href="{% url "calendar" tradition=tradition cal=cal year=previous_month.year month=previous_month.month %}" {% if previous_nofollow %}rel="nofollow"{% endif %} hx-get="{% url "calendar" tradition=tradition cal=cal year=previous_month.year month=previous_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">&larr; {{ previous_month|date:"F" }}</a>
+			<a class="cal-nav" href="{% url "calendar" tradition=tradition cal=cal year=next_month.year month=next_month.month %}" {% if next_nofollow %}rel="nofollow"{% endif %} hx-get="{% url "calendar" tradition=tradition cal=cal year=next_month.year month=next_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">{{ next_month|date:"F" }} &rarr;</a>
 		</div>
 
 		<div class="toggle-row" hx-params="none">
 			<div class="segmented-control">
-				<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %} hx-get="{% url "calendar" tradition="slavic" cal=cal year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Slavic</label>
-				<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %} hx-get="{% url "calendar" tradition="greek" cal=cal year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Greek</label>
+				<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %} hx-get="{% url "calendar" tradition="slavic" cal=cal year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Slavic</label>
+				<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %} hx-get="{% url "calendar" tradition="greek" cal=cal year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Greek</label>
 			</div>
 			<div class="segmented-control">
-				<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %} hx-get="{% url "calendar" tradition=tradition cal="gregorian" year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Gregorian</label>
-				<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %} hx-get="{% url "calendar" tradition=tradition cal="julian" year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Julian</label>
+				<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %} hx-get="{% url "calendar" tradition=tradition cal="gregorian" year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Gregorian</label>
+				<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %} hx-get="{% url "calendar" tradition=tradition cal="julian" year=this_month.year month=this_month.month %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Julian</label>
 			</div>
 		</div>
 	</div>
diff --git a/calendarium/templates/readings.html b/calendarium/templates/readings.html
index 500d7bc..09e4e39 100644
--- a/calendarium/templates/readings.html
+++ b/calendarium/templates/readings.html
@@ -20,19 +20,19 @@
 {% block extra_nav %}
 	<div class="page-nav-row">
 		<div class="day-nav">
-			<a class="cal-nav" href="{% url "readings" tradition=tradition cal=cal year=previous_date.year month=previous_date.month day=previous_date.day %}" {% if previous_nofollow %}rel="nofollow"{% endif %} hx-get="{% url "readings" tradition=tradition cal=cal year=previous_date.year month=previous_date.month day=previous_date.day %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">&larr; Previous Day</a>
-			<a class="cal-nav" href="{% url "index" %}" hx-get="{% url "index" %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Today</a>
-			<a class="cal-nav" href="{% url "readings" tradition=tradition cal=cal year=next_date.year month=next_date.month day=next_date.day %}" {% if next_nofollow %}rel="nofollow"{% endif %} hx-get="{% url "readings" tradition=tradition cal=cal year=next_date.year month=next_date.month day=next_date.day %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Next Day &rarr;</a>
+			<a class="cal-nav" href="{% url "readings" tradition=tradition cal=cal year=previous_date.year month=previous_date.month day=previous_date.day %}" {% if previous_nofollow %}rel="nofollow"{% endif %} hx-get="{% url "readings" tradition=tradition cal=cal year=previous_date.year month=previous_date.month day=previous_date.day %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">&larr; Previous Day</a>
+			<a class="cal-nav" href="{% url "index" %}" hx-get="{% url "index" %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Today</a>
+			<a class="cal-nav" href="{% url "readings" tradition=tradition cal=cal year=next_date.year month=next_date.month day=next_date.day %}" {% if next_nofollow %}rel="nofollow"{% endif %} hx-get="{% url "readings" tradition=tradition cal=cal year=next_date.year month=next_date.month day=next_date.day %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Next Day &rarr;</a>
 		</div>
 
 		<div class="toggle-row" hx-params="none">
 			<div class="segmented-control">
-				<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition="slavic" cal=cal translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition="slavic" cal=cal year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Slavic</label>
-				<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition="greek" cal=cal translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition="greek" cal=cal year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Greek</label>
+				<label title="OCA, ROCOR"><input type="radio" name="tradition" value="slavic" {% if tradition == "slavic" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition="slavic" cal=cal translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition="slavic" cal=cal year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Slavic</label>
+				<label title="Antiochian, Greek Archdiocese"><input type="radio" name="tradition" value="greek" {% if tradition == "greek" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition="greek" cal=cal translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition="greek" cal=cal year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Greek</label>
 			</div>
 			<div class="segmented-control">
-				<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition=tradition cal="gregorian" translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition=tradition cal="gregorian" year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Gregorian</label>
-				<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition=tradition cal="julian" translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition=tradition cal="julian" year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML" hx-push-url="true">Julian</label>
+				<label><input type="radio" name="calendar" value="gregorian" {% if cal == "gregorian" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition=tradition cal="gregorian" translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition=tradition cal="gregorian" year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Gregorian</label>
+				<label><input type="radio" name="calendar" value="julian" {% if cal == "julian" %}checked=""{% endif %} hx-get="{% if translation %}{% url "readings" tradition=tradition cal="julian" translation=translation year=date.year month=date.month day=date.day %}{% else %}{% url "readings" tradition=tradition cal="julian" year=date.year month=date.month day=date.day %}{% endif %}" hx-select="#orthocal-content" hx-target="#orthocal-content" hx-swap="outerHTML transition:true" hx-push-url="true">Julian</label>
 			</div>
 		</div>
 	</div>
@@ -100,7 +100,7 @@ <h1>Scripture Readings&nbsp;({{ translation_label }})</h1>
 		{% if day.language == "en" %}
 		<p class="translation-picker">
 			<label for="translation-select">Translation:
-				<select id="translation-select" hx-get="" hx-on::config-request="event.detail.path = this.value" hx-select="#scripture-readings" hx-target="#scripture-readings" hx-swap="outerHTML" hx-push-url="true">
+				<select id="translation-select" hx-get="" hx-on::config-request="event.detail.path = this.value" hx-select="#scripture-readings" hx-target="#scripture-readings" hx-swap="outerHTML transition:true" hx-push-url="true">
 					{% for value, label in translation_choices %}
 					<option value="{% url "readings" tradition=tradition cal=cal translation=value year=date.year month=date.month day=date.day %}" {% if translation == value %}selected{% endif %}>{{ label }}</option>
 					{% endfor %}
diff --git a/orthocal/static/main.css b/orthocal/static/main.css
index f3fa249..c55f6cc 100644
--- a/orthocal/static/main.css
+++ b/orthocal/static/main.css
@@ -144,6 +144,21 @@ html {
     font-size: 20px;
     font-family: var(--font-serif);
     overflow-y: auto;
+    /* Without this, a page short enough to need no vertical scrollbar is a
+       few pixels wider (viewport-wise) than one that does, which shifts the
+       centered, percentage-width topbar horizontally between pages -- most
+       visible on classic (non-overlay) scrollbars, e.g. Windows/Linux.
+       Reserving the gutter unconditionally keeps the available width (and
+       so the topbar's position) constant regardless of page height. */
+    scrollbar-gutter: stable;
+}
+/* Scripture-reference and commemoration links (e.g. "2 Corinthians 7.10-16")
+   jump to their #reading-N/#commemoration-N passage further down the same
+   page -- smooth-scrolling that jump reads much better than a hard cut. */
+@media (prefers-reduced-motion: no-preference) {
+    html {
+        scroll-behavior: smooth;
+    }
 }
 body {
     margin: 0;
@@ -261,6 +276,19 @@ h1, h2, h3, h4 {
     color: var(--color-text-strong);
     text-shadow: var(--shadow-hover-text);
 }
+/* Marks which top-level section the current page belongs to. Applied to
+   the <a> itself for direct nav items, and to the submenu's <summary> (via
+   .has-active, set server-side alongside the rest of the nav) for pages
+   that live inside "Integrations"/"More" -- otherwise a page like About
+   would have no visible indicator at all while its disclosure is closed. */
+.topbar-inner > nav a[aria-current="page"],
+.topbar-inner > nav summary.has-active {
+    color: var(--color-text-strong);
+    text-decoration: underline;
+    text-decoration-color: var(--color-accent);
+    text-decoration-thickness: 2px;
+    text-underline-offset: 0.3em;
+}
 
 /* Submenu (e.g. "Developers") -- a native <details>/<summary> disclosure
    rather than a CSS :hover flyout, so it works identically (click to open,
@@ -284,12 +312,18 @@ h1, h2, h3, h4 {
     display: none;
 }
 .topbar-inner > nav summary::after {
+    /* A single glyph rotated in place, rather than swapping between "\25be"
+       and "\25b4" on open -- those two characters have very slightly
+       different advance widths, which shifted the whole (flex-end
+       justified) nav row by a pixel or two whenever a submenu toggled. */
     content: " \25be";
+    display: inline-block;
     font-size: 0.7em;
     vertical-align: middle;
+    transition: transform 0.15s ease;
 }
 .topbar-inner > nav details[open] summary::after {
-    content: " \25b4";
+    transform: rotate(180deg);
 }
 .topbar-inner > nav summary:hover {
     color: var(--color-text-strong);
@@ -314,6 +348,45 @@ h1, h2, h3, h4 {
     box-shadow: var(--shadow-dropdown);
     z-index: 20;
 }
+/* <details> content becomes visible/hidden as a discrete step (there's no
+   cross-browser-reliable way yet to animate that transition itself), but a
+   plain CSS animation still replays from its "from" state every time the
+   content is un-hidden -- so a fade+slide-in plays whenever the browser
+   actually un-hides it on open. The reverse (dropdown-out, via the
+   .closing class) is driven by base.html's script, which defers actually
+   closing the <details> until this animation finishes, so the content
+   stays rendered (and animatable) for the moment it takes to fade out.
+   The .closing rule is listed after the [open] one so it wins the tie --
+   both match while a close is in flight, since .closing is added before
+   [open] is removed. */
+@media (prefers-reduced-motion: no-preference) {
+    .topbar-inner > nav details[open] ul {
+        animation: dropdown-in 0.15s ease;
+    }
+    .topbar-inner > nav details ul.closing {
+        animation: dropdown-out 0.15s ease;
+    }
+}
+@keyframes dropdown-in {
+    from {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+@keyframes dropdown-out {
+    from {
+        opacity: 1;
+        transform: translateY(0);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-6px);
+    }
+}
 .topbar-inner > nav details ul li {
     display: block;
     text-transform: lowercase;
@@ -377,6 +450,16 @@ h1, h2, h3, h4 {
     .topbar-inner > nav.nav-open > ul {
         display: flex;
     }
+    @media (prefers-reduced-motion: no-preference) {
+        .topbar-inner > nav.nav-open > ul {
+            animation: dropdown-in 0.15s ease;
+        }
+        /* See the .closing comment above the desktop submenu's dropdown-out
+           rule -- same deferred-close mechanism, driven by the same script. */
+        .topbar-inner > nav > ul.closing {
+            animation: dropdown-out 0.15s ease;
+        }
+    }
     .topbar-inner > nav > ul > li {
         box-sizing: border-box;
         width: 100%;
@@ -553,6 +636,30 @@ main#orthocal iframe {
     border: 1px solid var(--color-border-light);
     border-radius: 3px;
 }
+/* The translation <select> and the tradition/calendar toggles all swap
+   some part of #orthocal-content via htmx's transition:true modifier,
+   which wraps the swap in the View Transitions API when the browser
+   supports it (a no-op fallback -- an instant swap, same as before --
+   everywhere else). Giving the region its own view-transition-name makes
+   it crossfade as its own isolated group; without this it would still
+   animate, but as part of the default ::view-transition-old/new(root)
+   group, which also captures (and so crossfades) the rest of the page --
+   topbar included -- around it for no reason. Disabling the root group's
+   own animation leaves only #orthocal-content animating. Named on this
+   outer element rather than on the narrower #scripture-readings (which
+   the translation swap alone actually touches) so a nested element is
+   never independently named while its ancestor also is -- the View
+   Transitions spec extracts named elements from their ancestor's capture,
+   which would otherwise split one swap into two competing transitions. */
+@media (prefers-reduced-motion: no-preference) {
+    #orthocal-content {
+        view-transition-name: orthocal-content;
+    }
+    ::view-transition-old(root),
+    ::view-transition-new(root) {
+        animation: none;
+    }
+}
 #orthocal-content > header {
     position: relative;
     /* z-index establishes this header as its own stacking context, so the
diff --git a/orthocal/templates/base.html b/orthocal/templates/base.html
index 2f073b1..105f29d 100644
--- a/orthocal/templates/base.html
+++ b/orthocal/templates/base.html
@@ -63,33 +63,35 @@
 					<span></span><span></span><span></span>
 				</button>
 
+				{% with url_name=request.resolver_match.url_name %}
 				<nav>
 					<ul>
-						<li><a href="{% url "index" %}">Readings</a></li>
-						<li><a href="{% url "calendar-default" %}">Calendar</a></li>
-						<li><a href="{% url "saint-search" %}">Saints</a></li>
+						<li><a href="{% url "index" %}" {% if url_name == "index" or url_name == "readings" %}aria-current="page"{% endif %}>Readings</a></li>
+						<li><a href="{% url "calendar-default" %}" {% if url_name == "calendar-default" or url_name == "calendar" %}aria-current="page"{% endif %}>Calendar</a></li>
+						<li><a href="{% url "saint-search" %}" {% if url_name == "saint-search" %}aria-current="page"{% endif %}>Saints</a></li>
 						<li>
 							<details name="nav-submenu">
-								<summary>Integrations</summary>
+								<summary {% if url_name == "alexa" or url_name == "api" or url_name == "ai-assistant" or url_name == "feeds" %}class="has-active"{% endif %}>Integrations</summary>
 								<ul>
-									<li><a href="{% url "alexa" %}">Alexa</a></li>
-									<li><a href="{% url "api" %}">API</a></li>
-									<li><a href="{% url "ai-assistant" %}">AI</a></li>
-									<li><a href="{% url "feeds" %}">Feeds</a></li>
+									<li><a href="{% url "alexa" %}" {% if url_name == "alexa" %}aria-current="page"{% endif %}>Alexa</a></li>
+									<li><a href="{% url "api" %}" {% if url_name == "api" %}aria-current="page"{% endif %}>API</a></li>
+									<li><a href="{% url "ai-assistant" %}" {% if url_name == "ai-assistant" %}aria-current="page"{% endif %}>AI</a></li>
+									<li><a href="{% url "feeds" %}" {% if url_name == "feeds" %}aria-current="page"{% endif %}>Feeds</a></li>
 								</ul>
 							</details>
 						</li>
 						<li>
 							<details name="nav-submenu">
-								<summary>More</summary>
+								<summary {% if url_name == "about" %}class="has-active"{% endif %}>More</summary>
 								<ul>
-									<li><a href="{% url "about" %}">About</a></li>
+									<li><a href="{% url "about" %}" {% if url_name == "about" %}aria-current="page"{% endif %}>About</a></li>
 									<li><a href="https://paypal.me/BGlass42" target="_blank" rel="noopener">Tip Jar</a></li>
 								</ul>
 							</details>
 						</li>
 					</ul>
 				</nav>
+				{% endwith %}
 			</div>
 
 			<nav class="page-nav" id="page-nav" hx-swap-oob="true">
@@ -111,24 +113,90 @@
 		</main>
 
 		<script>
+			// The CSS entrance animation (main.css's dropdown-in keyframes)
+			// plays automatically whenever these panels go from hidden to
+			// shown, since that's a plain display change the browser
+			// animates from its "from" state on its own. There's no native
+			// equivalent for the reverse: content vanishes the instant
+			// <details> closes (or nav-open is removed), so playing an exit
+			// animation means deferring the actual close until our own
+			// dropdown-out animation finishes.
+			var reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+			function closeAnimated(content, onClose) {
+				if (reduceMotion) {
+					onClose();
+					return;
+				}
+				content.classList.add('closing');
+				var done = false;
+				function finish() {
+					if (done) return;
+					done = true;
+					content.classList.remove('closing');
+					onClose();
+				}
+				content.addEventListener('animationend', finish, { once: true });
+				// Backstop in case animationend never arrives (e.g. the tab
+				// is backgrounded mid-close and the browser throttles the
+				// animation timeline) -- without this the menu would stay
+				// open with no way to close it, since a later click just
+				// re-adds an already-present .closing class.
+				setTimeout(finish, 300);
+			}
+
 			document.addEventListener('DOMContentLoaded', function () {
 				var toggle = document.querySelector('.nav-toggle');
 				var nav = toggle && toggle.nextElementSibling;
 				if (!toggle || !nav) return;
+				var navList = nav.querySelector(':scope > ul');
 				toggle.addEventListener('click', function () {
-					var isOpen = nav.classList.toggle('nav-open');
-					toggle.setAttribute('aria-expanded', isOpen);
+					var isOpen = nav.classList.contains('nav-open');
+					toggle.setAttribute('aria-expanded', !isOpen);
+					if (isOpen) {
+						closeAnimated(navList, function () {
+							nav.classList.remove('nav-open');
+						});
+					} else {
+						nav.classList.add('nav-open');
+					}
 				});
 			});
 
 			// Native <details> only closes on a second click on its own
 			// <summary> (or when a sibling in the same name= group opens) --
 			// it doesn't close on a click elsewhere on the page, which reads
-			// as broken for a nav dropdown.
+			// as broken for a nav dropdown. Exclusivity between submenus and
+			// the click-outside close are both handled here (instead of
+			// relying on <details name=...>) so every close path -- not
+			// just a second click on the same summary -- gets the same
+			// animated close.
+			var submenus = document.querySelectorAll('.topbar-inner > nav details');
+			submenus.forEach(function (details) {
+				var summary = details.querySelector('summary');
+				var content = details.querySelector('ul');
+				details._closeAnimated = function () {
+					if (!details.open) return;
+					closeAnimated(content, function () {
+						details.open = false;
+					});
+				};
+				summary.addEventListener('click', function (event) {
+					event.preventDefault();
+					if (details.open) {
+						details._closeAnimated();
+					} else {
+						submenus.forEach(function (other) {
+							if (other !== details) other._closeAnimated();
+						});
+						details.open = true;
+					}
+				});
+			});
 			document.addEventListener('click', function (event) {
-				document.querySelectorAll('.topbar-inner > nav details[open]').forEach(function (details) {
-					if (!details.contains(event.target)) {
-						details.removeAttribute('open');
+				submenus.forEach(function (details) {
+					if (details.open && !details.contains(event.target)) {
+						details._closeAnimated();
 					}
 				});
 			});