From 3a1aa160a8b1bd2277c40bd7fb16aaf2b838a758 Mon Sep 17 00:00:00 2001
From: Mark Randall Havens <mark.r.havens@gmail.com>
Date: Sun, 9 Nov 2025 20:44:07 +0000
Subject: [PATCH] =?UTF-8?q?v3.0.3=20=E2=80=94=20Living=20Frame=20Update=20?=
 =?UTF-8?q?Breathing=20margins,=20dynamic=20heights,=20and=20unified=20aes?=
 =?UTF-8?q?thetic=20for=20all=20bounded=20pages.=20Freedom=20inside=20the?=
 =?UTF-8?q?=20frame;=20harmony=20within=20recursion.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json      |  2 +-
 public/app.js     | 30 +++++++++++++++++++++++++-----
 public/styles.css | 43 ++++++++++++++++++++++++++++++++++++-------
 3 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index 8d7cdc5..9ebd7f7 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "the-fold-within",
-  "version": "3.0.2",
+  "version": "3.0.3",
   "dependencies": {
     "pdf-parse": "^1.1.1"
   }
diff --git a/public/app.js b/public/app.js
index cf895d9..ba41946 100755
--- a/public/app.js
+++ b/public/app.js
@@ -265,11 +265,31 @@ function renderIframe(rel) {
       const doc = iframe.contentDocument;
       const style = doc.createElement("style");
       style.textContent = `
-        html,body{background:#0b0b0b;color:#e6e3d7;font-family:Inter,sans-serif;
-                  margin:0;padding:2rem;}
-        *{max-width:720px;margin:auto;}
-        img,video,iframe{max-width:100%;height:auto;}
-      `;
+  html,body{
+    background:#0b0b0b;
+    color:#e6e3d7;
+    font-family:Inter,sans-serif;
+    margin:0;
+    padding:3vh 6vw;
+    line-height:1.8;
+  }
+  body{
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:flex-start;
+    min-height:100vh;
+  }
+  *{
+    max-width:960px;
+    width:100%;
+  }
+  img,video,iframe{
+    max-width:100%;
+    height:auto;
+    border-radius:8px;
+  }
+`;
       doc.head.appendChild(style);
     } catch {}
   };
diff --git a/public/styles.css b/public/styles.css
index 0499fed..3dd32e9 100755
--- a/public/styles.css
+++ b/public/styles.css
@@ -190,19 +190,48 @@ body.sidebar-open #sidebar { transform: translateX(0); }
   to { opacity: 1; transform: translateY(0); }
 }
 
-.viewer iframe {
-  width: 100%; height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 80px);
-  border: 0; border-radius: var(--radius); background: transparent;
-  display: block;
+/* === DYNAMIC BREATHING FRAME === */
+.preview-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 0;
+  padding: 1rem 0 3rem 0;
+  min-height: calc(100vh - var(--topbar-h) - var(--subnav-h));
 }
 
-/* === POP-OUT PREVIEW === */
 .preview-header {
   text-align: right;
-  background: rgba(224,184,75,0.08);
+  width: 100%;
+  max-width: 960px;
+  background: rgba(224,184,75,0.06);
   border-bottom: 1px solid #333;
-  padding: .4rem 1rem;
+  padding: .6rem 1rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.4);
 }
+
+.viewer iframe {
+  width: 100%;
+  max-width: 960px;
+  height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 120px);
+  min-height: 500px;
+  border: 0;
+  border-radius: var(--radius);
+  background: #0b0b0b;
+  box-shadow: 0 0 30px rgba(0,0,0,0.6);
+  margin: 0 auto;
+  transition: all .4s ease;
+}
+
+@media (max-width: 768px) {
+  .viewer iframe {
+    max-width: 100%;
+    height: calc(100vh - var(--topbar-h) - var(--subnav-h) - 80px);
+    border-radius: 0;
+  }
+}
+
 .popout-btn {
   background: none;
   border: 1px solid var(--accent);