diff --git a/components/nav.tsx b/components/nav.tsx
index e275ba1..7300c25 100644
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -41,8 +41,11 @@ function ThemeToggle() {
         const next = !dark
         setDark(next)
         document.documentElement.classList.toggle('dark', next)
+        const v = next ? 'dark' : 'light'
         try {
-            localStorage.setItem('theme', next ? 'dark' : 'light')
+            // shared across every *.hovanhoa.net subdomain
+            document.cookie = `theme=${v}; path=/; max-age=31536000; samesite=lax`
+            document.cookie = `theme=${v}; path=/; max-age=31536000; samesite=lax; domain=.hovanhoa.net`
         } catch {}
     }
 
diff --git a/pages/_document.tsx b/pages/_document.tsx
index 63a2599..ee73eda 100644
--- a/pages/_document.tsx
+++ b/pages/_document.tsx
@@ -40,7 +40,7 @@ class MyDocument extends Document {
           <meta name="twitter:image" content="https://gallery.hovanhoa.net/avatar.png" />
           <script
             dangerouslySetInnerHTML={{
-              __html: `(function(){try{var t=localStorage.getItem('theme');var d=t?t==='dark':window.matchMedia('(prefers-color-scheme:dark)').matches;if(d)document.documentElement.classList.add('dark')}catch(e){}})()`,
+              __html: `(function(){try{var m=document.cookie.match(/(?:^|; )theme=(dark|light)/);if(m&&m[1]==='dark')document.documentElement.classList.add('dark')}catch(e){}})()`,
             }}
           />
         </Head>
diff --git a/pages/index.tsx b/pages/index.tsx
index eaf85fa..0aca3b6 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -78,7 +78,7 @@ const Home: NextPage = ({ images }: { images: ImageProps[] }) => {
                 'radial-gradient(100% 140% at 0% 0%, var(--rd-accent-bg), transparent 55%), var(--rd-surface-2)',
             }}
           >
-            <div className="px-[var(--rd-pad)] pt-12 pb-12">
+            <div className="mx-auto max-w-[var(--rd-maxw)] px-[var(--rd-pad)] pt-12 pb-12">
               <Eyebrow>hovanhoa · gallery</Eyebrow>
               <h1 className="mt-[18px] text-[clamp(2rem,4.6vw,3.4rem)] font-semibold tracking-[-0.04em] text-[var(--rd-text)]">
                 photographs
@@ -94,7 +94,7 @@ const Home: NextPage = ({ images }: { images: ImageProps[] }) => {
                   onClose={closeModal}
               />
           )}
-          <div className="mt-12 columns-1 gap-4 px-[var(--rd-pad)] sm:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5">
+          <div className="mx-auto mt-12 max-w-[var(--rd-maxw)] columns-1 gap-4 px-[var(--rd-pad)] sm:columns-2 lg:columns-3 xl:columns-4">
             {images.map(({id, public_id, format, blurDataUrl}) => (
                 <Link
                     key={id}