meh the editor doesn't like that huh

css/main.css

@@ -108,8 +108,13 @@ h1 {
 	margin-block-end: .6em;
 }
 
-h2 { font-size: 2rem; }
-h3 { font-size: 1.8rem; }
+h2 { font-size: 2.1rem; }
+h3 { font-size: 1.7rem; }
+h4 { font-size: 1.4rem; }
+
+@media (max-width: 650px) {
+	h1 { font-size: 2.6rem; }
+}
 
 p {
   text-wrap: pretty; /* 9. Improve line wrapping */
@@ -143,17 +148,27 @@ ul p {
 
 /* Header/nav/footer */
 header {
-	height: 20vh;
-	padding: calc(20vh / 8);
+	--height-base: 20vh; /* Variable height for desktop vs mobile */
+}
+
+@media (max-width: 650px) {
+	header{
+		--height-base: 12vh; /* Variable height for desktop vs mobile */
+	}
+}
+
+header {
+	height: var(--height-base);
+	padding: calc(var(--height-base) / 8);
 	background-color: var(--color-accent);
 }
 
 .logo {
 	height: 100%;
 	width: auto;
-	padding: calc(20vh / 30);
-	border: calc(20vh / 50) solid var(--color-accent);
-	border-radius: calc(20vh / 3);
+	padding: calc(var(--height-base) / 30);
+	border: calc(var(--height-base) / 50) solid var(--color-accent);
+	border-radius: calc(var(--height-base) / 3);
 }
 
 header a:focus-visible {
@@ -162,7 +177,7 @@ header a:focus-visible {
 
 header a:focus-visible .logo {
 	border-color: var(--color-text);
-	outline: calc(20vh / 30) solid var(--color-accent-flipped);
+	outline: calc(var(--height-base) / 30) solid var(--color-accent-flipped);
 }
 
 @media (prefers-color-scheme: light) {

src/index.md

@@ -22,7 +22,7 @@ After a short break, we move into a dharma talk and discussion rooted in whateve
 
 ## When we meet
 
-We gather on the first and third Sunday of each month, from 10:30 am to noon, at [1633 Q Street NW, Washington, DC](https://maps.app.goo.gl/FHmY7spH5rAMUu7Q6){target=“\_blank”} — in the heart of Dupont Circle.
+We gather on the first and third Sunday of each month, from 10:30 am to noon, at [1633 Q Street NW, Washington, DC](https://maps.app.goo.gl/FHmY7spH5rAMUu7Q6) — in the heart of Dupont Circle.
 
 ### Upcoming meetings