Contain tables

blocks/header/header.css

@@ -4,7 +4,6 @@ header {
   --header-surface-transition: 200ms cubic-bezier(0.23, 1, 0.32, 1);
   --header-inner-shadow: light-dark(rgb(255 255 255), rgb(248 248 248));
   --header-outer-shadow: light-dark(rgb(255 255 255), var(--s2-gray-800));
-  --sh-brand-wordmark-opacity: 1;
   --sh-brand-mark-width-full: 140px;
   --sh-brand-mark-width-compact: 28px;
   --sh-brand-mark-width: var(--sh-brand-mark-width-full);
@@ -25,7 +24,7 @@ header {
       backdrop-filter: blur(var(--sh-glass-blur));
     }
 
-    @media (width >= 900px) {
+    @media (width >= 1200px) {
       box-shadow: none;
       background-color: unset;
       border-radius: 0;
@@ -50,7 +49,6 @@ header {
 
     & > .brand-section svg > path:nth-child(2) {
       opacity: 0;
-      transition: opacity 0.5s ease;
     }
   }
 
@@ -119,7 +117,7 @@ header {
         backdrop-filter var(--header-surface-transition);
     }
 
-    @media (width >= 900px) {
+    @media (width >= 1200px) {
       &::before {
         display: none;
       }
@@ -153,6 +151,13 @@ header {
       height: 56px;
     }
 
+    /* Wordmark. Declared here rather than only under `is-scrolled` so the fade
+    runs both when the class is added and when it is removed. */
+    svg > path:nth-child(2) {
+      opacity: 1;
+      transition: opacity 0.5s ease;
+    }
+
      /* Narrow screens keep the "A" and drop the wordmark. */
     @media (width < 900px) {
       a {
@@ -195,7 +200,7 @@ header {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  header .brand-section svg {
+  header .brand-section svg > path:nth-child(2) {
     transition: none;
   }
 

blocks/page-nav/page-nav.css

@@ -1,33 +1,37 @@
-/* Desktop-only in-page table of contents. Below 900px the block is removed
+/* Desktop-only in-page table of contents. Below 1200px the block is removed
 from the DOM and the accessibility tree (see page-nav.js). */
 .page-nav {
   display: none;
 }
 
-@media (width >= 900px) {
+@media (width >= 1200px) {
   .page-nav {
-    --pagenav-clamp-preferred-width: calc(100% - var(--pagenav-track-width));
+    display: grid;
 
-    display: block;
+    /* Column 1 is an empty spacer that acts as the margin-inline-start */
+    grid-template-columns:
+      minmax(var(--pagenav-inline-start-margin), 1fr)
+      minmax(var(--pagenav-min-inline-size), var(--pagenav-track-width));
+    grid-template-rows: min-content auto;
     position: sticky;
     inset-block-start: var(--sh-header-height); /* match the header so the page nav sticks in place */
-    max-block-size: calc(100vh - var(--sh-header-height, 0px));
-    max-inline-size: var(--pagenav-track-width);
+    max-block-size: calc(100dvh - var(--sh-header-height, 0px));
+    margin-inline-end: var(--pagenav-inline-end-margin);
     font-family: var(--s2-font-family, 'Adobe Clean', 'Trebuchet MS', sans-serif);
     font-size: var(--s2-component-m-medium-font-size);
     line-height: 1.4;
     color:  var(--s2-gray-700);
-    margin-inline: 
-      clamp(var(--pagenav-inline-start-margin), var(--pagenav-clamp-preferred-width), var(--pagenav-clamp-preferred-width))
-      24px;
-
+    overflow-y: scroll;
+
     & ul {
+      grid-column: 2;
+      grid-row: 1;
       border-inline-start: 2px solid rgb(from var(--s2-gray-1000) r g b / 12%);
       list-style: none;
       margin: 0;
       padding: 0;
     }
-    
+
     & li + li {
       margin-block-start: var(--s2-spacing-50);
     }
@@ -66,7 +70,10 @@ from the DOM and the accessibility tree (see page-nav.js). */
     }
   }
 
-  .page-nav ul a[aria-current="location"] {
+  /* [aria-current] is the scroll-spy state; .is-current is a visual-only
+  stand-in forced on the last link on the page */
+  .page-nav ul a[aria-current="location"],
+  .page-nav ul a.is-current {
     font-weight: var(--s2-component-m-bold-font-weight);
     color: var(--s2-gray-1000);
 
@@ -76,6 +83,8 @@ from the DOM and the accessibility tree (see page-nav.js). */
   }
 
   .page-nav > .page-nav-widgets {
+    grid-column: 2;
+    grid-row: 2;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -85,8 +94,8 @@ from the DOM and the accessibility tree (see page-nav.js). */
 }
 
 /* Headings opted-in by the block (see init() in page-nav.js) get scroll-margin so anchor scrolls
-clear the sticky chrome. At width >=900px the page-nav lives in the side rail, so only the site header matters. */
-@media (width >= 900px) {
+clear the sticky chrome. At width >=1200px the page-nav lives in the side rail, so only the site header matters. */
+@media (width >= 1200px) {
   .page-nav-target {
     scroll-margin-block-start: var(--sh-header-height, 56px);
   }