Fix possum align

Author: zachleat

src/_includes/components/header.css

@@ -34,13 +34,10 @@
 	}
 }
 .elv-nav-menu {
-	padding-left: 1rem;
-	padding-top: 1rem;
-	padding-bottom: 1rem;
-	margin-left: auto;
-	margin-right: auto;
+	padding: 1rem;
+	margin-inline: auto;
 }
-@media (min-width: 55em) {
+@media (min-width: 58.125em) { /* 930px */
 	.elv-nav-menu.elv-nav-menu {
 		flex-wrap: nowrap;
 		white-space: nowrap;
@@ -72,16 +69,6 @@
 	max-width: none;
 }
 
-/* Make room for the possum */
-.elv-nav-menu {
-	padding-right: 1rem;
-}
-@media (min-width: 34.4375em) and (max-width: 74.9375em) {
-	/* 551px–1199px */
-	.elv-header-docs .elv-nav-menu {
-		padding-right: 4em;
-	}
-}
 /* Sticky, #2col × 600px */
 @media (min-width: 41.4375em) and (min-height: 43.75em) {
 	/* Take care with the sticky toc too */

src/_includes/components/possum.css

@@ -8,24 +8,28 @@
 	transition: 0.3s opacity ease-out;
 	filter: drop-shadow(3px 3px #0006);
 }
+
+:root {
+	--possum-margin: 5rem;
+}
+.elv-header-docs .elv-possum {
+	width: calc(var(--possum-margin) - .5rem);
+	height: auto;
+	aspect-ratio: 790 / 2125;
+	filter: drop-shadow(1px 1px #0006);
+}
 /* #2col */
 @media (max-width: 41.375em) {
 	/* Hide moving possum on docs only */
 	.elv-possum-island {
 		display: none;
 	}
 }
-
-.elv-header-docs .elv-possum {
-	width: 10vw;
-	height: auto;
-	aspect-ratio: 790 / 2125;
-	max-width: 3.75em; /* 60px /16 */
-	filter: drop-shadow(1px 1px #0006);
-}
-@media (min-width: 81.25em) { /* 1300px */
-	.elv-header-docs .elv-possum {
-		width: 15vw;
-		max-width: 6.25rem; /* 100px /16 */
+@media (min-width: 41.4375em) and (max-width: 78.125em) { /* 663px-1250px */
+	.elv-header-docs:has(.announcement) .products-max {
+		padding-right: calc(var(--possum-margin) - 1em); /* subtract link padding */
+	}
+	.elv-header-docs .elv-nav-menu {
+		padding-right: var(--possum-margin);
 	}
 }