Wrap blog routes in InteriorWrap for the parchment surface

The blog list and post pages were rendering directly over the body's
back.jpg cover, leaving them unreadable when the hero image was busy.
Wrap both /blog and /blog/p/:slug (plus their bare-path equivalents on
the blog subdomain) in the same InteriorWrap that /admin, /account,
and the legal pages use, and drop the now-duplicate inner padding so
content sits on a parchment card matching the rest of the site.

Author: tastybento

src/web/components/ContentBox.tsx

@@ -123,16 +123,20 @@ export default function ContentBox() {
                             to the routes below. */}
                         {onBlogHost && (
                             <Route exact path="/">
-                                <Suspense fallback={<div />}>
-                                    <BlogList />
-                                </Suspense>
+                                <InteriorWrap>
+                                    <Suspense fallback={<div />}>
+                                        <BlogList />
+                                    </Suspense>
+                                </InteriorWrap>
                             </Route>
                         )}
                         {onBlogHost && (
                             <Route path="/p/:slug">
-                                <Suspense fallback={<div />}>
-                                    <BlogPost />
-                                </Suspense>
+                                <InteriorWrap>
+                                    <Suspense fallback={<div />}>
+                                        <BlogPost />
+                                    </Suspense>
+                                </InteriorWrap>
                             </Route>
                         )}
 
@@ -184,14 +188,18 @@ export default function ContentBox() {
                             also server-rendered with OG metadata in
                             src/index.ts. */}
                         <Route path="/blog/p/:slug">
-                            <Suspense fallback={<div />}>
-                                <BlogPost />
-                            </Suspense>
+                            <InteriorWrap>
+                                <Suspense fallback={<div />}>
+                                    <BlogPost />
+                                </Suspense>
+                            </InteriorWrap>
                         </Route>
                         <Route path="/blog">
-                            <Suspense fallback={<div />}>
-                                <BlogList />
-                            </Suspense>
+                            <InteriorWrap>
+                                <Suspense fallback={<div />}>
+                                    <BlogList />
+                                </Suspense>
+                            </InteriorWrap>
                         </Route>
                         <Route path="/terms">
                             <InteriorWrap>

src/web/components/blog/BlogList.tsx

@@ -52,7 +52,7 @@ export default function BlogList() {
     }, [page, tagParam]);
 
     return (
-        <div style={{ maxWidth: 760, margin: '0 auto', padding: '32px 24px' }}>
+        <div style={{ maxWidth: 760, margin: '0 auto' }}>
             <header style={{ marginBottom: 32 }}>
                 <p className="bb-eyebrow" style={{ marginBottom: 8 }}>BentoBox Blog</p>
                 <h1

src/web/components/blog/BlogPost.tsx

@@ -251,5 +251,4 @@ export default function BlogPost() {
 const containerStyle: React.CSSProperties = {
     maxWidth: 720,
     margin: '0 auto',
-    padding: '32px 24px',
 };