diff --git a/web/index.html b/web/index.html
index 5faaaac..53bb3dc 100644
--- a/web/index.html
+++ b/web/index.html
@@ -24,8 +24,10 @@
     <a class="family-page" href="https://abap2ui5.github.io/samples-stack/"
        title="abap2UI5/samples-stack" aria-current="page"><b>Stack</b> <span>OData, RAP and your system</span></a>
     <span class="family-spacer"></span>
-    <a class="family-tool" href="https://abap2ui5.github.io/playground/">Playground ↗</a>
-    <a class="family-tool" href="https://abap2ui5.github.io/docs/">Docs ↗</a>
+    <a class="family-tool" href="https://abap2ui5.github.io/playground/"
+       target="_blank" rel="noopener">Playground ↗</a>
+    <a class="family-tool" href="https://abap2ui5.github.io/docs/"
+       target="_blank" rel="noopener">Docs ↗</a>
   </div>
 </nav>
 <!-- family-nav:end -->
diff --git a/web/stack.css b/web/stack.css
index 0c40b4a..c1164f9 100644
--- a/web/stack.css
+++ b/web/stack.css
@@ -94,7 +94,6 @@ code {
 .lede.small { font-size: .9rem; max-width: 46rem; }
 
 .masthead .note {
-  max-width: 46rem;
   margin: .9rem 0 0;
   font-size: .85rem;
   color: var(--ink-faint);
@@ -630,8 +629,10 @@ footer p { margin: .4rem 0; }
   letter-spacing: -.02em;
 }
 
+/* No max-width: the lede is the page's description and lines up with the
+ * column under it - the search box, the cards, the rail - rather than ending
+ * two thirds of the way across and leaving the masthead looking unfinished. */
 .lede {
-  max-width: 62ch;
   margin: 0;
   color: var(--ink-soft);
   font-size: 1.03rem;
@@ -655,7 +656,6 @@ footer p { margin: .4rem 0; }
 }
 .three > h2 { margin: 0 0 .3rem; font-size: 1.15rem; }
 .three-lede {
-  max-width: 46rem;
   margin: 0 0 1rem;
   font-size: .9rem;
   color: var(--ink-soft);