don't use divs when just a p will do

about/index.html

@@ -35,15 +35,11 @@
       <main id="main">
         <h1>About the Beall Greenhouses</h1>
 
-        <h2 id="past">Past</h2>
+        <div class="no-header">
-
           <p><a href="https://www.historylink.org/File/2346" target="_blank">
             Read about the Beall Greenhouses on HistoryLink.org
           </a></p>
-
+        </div>
-        <h2 id="present">Present</h2>
-
-        <h2 id="future">Future</h2>
       </main>
     </div>
     <footer id="footer"><!-- auto-populated by nav.js --></footer>

assets/styles/artist-market.css

@@ -83,7 +83,7 @@
   margin-right: 1.75rem;
 }
 
-@media (max-width: 650px) {
+@media (max-width: 750px) {
   .artist:nth-child(odd) .description {
     margin-left: .875rem;
   }

assets/styles/artist-resident.css

@@ -45,6 +45,12 @@
   }
 }
 
+.resident #bio,
+.contact ul {
+  background-color: var(--color-bg-alt);
+  border-radius: 0 0 1rem 1rem;
+}
+
 .contact {
   margin-top: 4rem;
   text-align: center;

assets/styles/main.css

@@ -58,7 +58,7 @@ main {
   margin: 0 auto 1rem;
 }
 
-@media (max-width: 650px) {
+@media (max-width: 750px) {
   header,
   main {
     width: 92%;
@@ -128,23 +128,9 @@ a:focus-visible {
 main p,
 main ul {
   padding: .8rem;
-  background-color: var(--color-bg-alt);
-  border-radius: 0 0 1rem 1rem;
   line-height: 1.5rem;
 }
 
-main > p,
-main > ul {
-  margin-left: 2.5rem;
-}
-
-@media (max-width: 650px) {
-  main > p,
-  main > ul {
-    margin-left: 1.25rem;
-  }
-}
-
 main li {
   margin-left: 1rem;
 }
@@ -152,3 +138,40 @@ main li {
 main li:not(:last-child) {
   padding: 0 0 .5rem;
 }
+
+/* styles for sets of <p>s under an h2/3/etc vs alone */
+.under-header,
+.no-header {
+  background-color: var(--color-bg-alt);
+}
+
+.under-header {
+  border-radius: 0 0 1rem 1rem;
+  margin-left: 2.5rem;
+}
+
+@media (max-width: 750px) {
+  .under-header {
+    margin-left: 1.25rem;
+  }
+}
+
+.no-header {
+  border-radius: 1rem;
+}
+
+.two-col {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 1rem;
+}
+
+.two-col > * {
+  place-self: start center;
+}
+
+@media (max-width: 750px) {
+  .two-col {
+    grid-template-columns: 1fr;
+  }
+}

assets/styles/nav.css

@@ -5,6 +5,14 @@ nav {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
+  background-image: url("/assets/img/greenhouse.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  border-radius: 2rem .25rem .25rem 2rem;
+}
+
+nav a {
+  margin: 0;
 }
 
 nav a:not(:has(img)) {
@@ -14,6 +22,7 @@ nav a:not(:has(img)) {
   padding: 0 .25rem;
   border: solid .125rem var(--color-accent);
   border-radius: .25rem;
+  background-color: var(--color-bg);
 }
 
 @media (any-hover: hover) {
@@ -39,13 +48,6 @@ nav a:not(:has(img)):focus-visible {
 	height: 1px;
 	overflow: hidden;
 	z-index: -99;
-  background-color: var(--color-bg);
-}
-
-@media (any-hover: hover) {
-  #skip:hover {
-    background-color: var(--color-text-alt);
-  }
 }
 
 #skip:focus-visible {
@@ -56,7 +58,7 @@ nav a:not(:has(img)):focus-visible {
 	z-index: 999;
 }
 
-@media (max-width: 650px) {
+@media (max-width: 750px) {
   #skip:focus-visible {
     left: 5rem;
   }

assets/styles/palette.css

@@ -7,7 +7,7 @@
 	font-weight: bold;
 }
 
-@media (max-width: 650px) {
+@media (max-width: 550px) {
 	.color p {
 		width: 100%;
 	}

events/2025-solstice/index.html

@@ -38,17 +38,18 @@
         <h1>Solstice 2025 Market at the Beall Greenhouses</h1>
 
         <h2>When?</h2>
-        <p><time datetime="2025-12-21 10:00">Sunday, December 21st, 2025, 10am - 5pm</time>.</p>
+        <p class="under-header"><time datetime="2025-12-21 10:00">Sunday, December 21st, 2025, 10am - 5pm</time>.</p>
 
         <h2>Where?</h2>
-        <p>Studios in the former cold storage facility at the old Beall Greenhouses:
+        <p class="under-header">Studios in the former cold storage facility at the old Beall Greenhouses:
           <a href="https://maps.app.goo.gl/5p1NAArdjX4vaEgw9" target="_blank">18527 Beall Rd SW, Vashon, WA 98070</a>
         </p>
 
         <h2>What else?</h2>
-        <p>There will be popcorn, cookies, fresh hot coffee from
+        <p class="under-header">There will be popcorn, cookies, fresh hot coffee from
           <a href="www.zenbelliescoffeeco.com" target="_blank">Zenbellies Coffee Co.</a>,
-        and a warm fire.</p>
+          and a warm fire.
+        </p>
 
         <h2>Who?</h2>
         <div id="artists"><!-- auto-populated by artists.js --></div>

events/2026-imbolc/index.html

@@ -37,18 +37,20 @@
       <main id="main">
         <h1>Imbolc 2026 Celebration & Market at the Beall Greenhouses</h1>
 
-        <h2>What?</h2>
+        <div class="two-col">
-        <p>Join us to celebrate the returning of the light.</p>
+          <div class="no-header">
-
+            <p>Join us to celebrate the returning of the light on
-        <h2>When?</h2>
+              <time datetime="2026-01-31 10:00">Saturday, January 31st, 2026, 10am - 5pm</time>.</p>
-        <p><time datetime="2026-01-31 10:00">Saturday, January 31st, 2026, 10am - 5pm</time>.</p>
+            <p>Find us in studios in the former cold storage facility at the old Beall Greenhouses:
-
-        <h2>Where?</h2>
-        <p>Studios in the former cold storage facility at the old Beall Greenhouses:
               <a href="https://maps.app.goo.gl/5p1NAArdjX4vaEgw9" target="_blank">18527 Beall Rd SW, Vashon, WA 98070</a>
             </p>
+            <p>Share the flyer and bring friends!</p>
+          </div>
 
-        <h2>Who?</h2>
+          <img src="/assets/img/2026-imbolc/flyer.jpg" alt="a black and white flyer for the Imbolc event that reads: Imbolc Celebration and Market at the Beall Greenhouses. Crafting and art, open studios. It then lists the address, time, and website. The text is overlaid on a darkened image of a dilapidated greenhouse, and the site's hummingbird logo is inset.">
+        </div>
+
+        <h2>Artists</h2>
         <div id="artists"><!-- auto-populated by artists.js --></div>
       </main>
     </div>

index.html

@@ -35,10 +35,10 @@
         <h1>The Beall Greenhouses</h1>
 
         <h2>Upcoming Imbolc celebration</h2>
-        <p>See the <a href="/events/2026-imbolc">Imbolc event page</a> for more details.</p>
+        <p class="under-header">See the <a href="/events/2026-imbolc">Imbolc event page</a> for more details.</p>
 
         <h2>A successful Solstice</h2>
-        <p>Our inaugural <a href="/events/2025-solstice">Solstice Market</a> was a rousing success.</p>
+        <p class="under-header">Our inaugural <a href="/events/2025-solstice">Solstice Market</a> was a rousing success.</p>
       </main>
     </div>
     <footer id="footer"><!-- auto-populated by nav.js --></footer>