@jxsuite/starters 0.34.0 → 0.35.1

package/sites/portfolio/components/pv-project-card.json

@@ -1,6 +1,7 @@
 {
   "tagName": "pv-project-card",
   "state": {
+    "number": "",
     "title": "",
     "category": "",
     "year": "",
@@ -8,94 +9,150 @@
     "cover": { "type": "string", "format": "image", "default": "" },
     "alt": ""
   },
-  "style": {
-    "display": "block",
-    "breakInside": "avoid",
-    "marginBottom": "1.75rem"
-  },
+  "style": { "display": "block", "minWidth": "0" },
   "children": [
     {
       "tagName": "a",
       "attributes": { "href": "${state.href}" },
       "style": {
+        "position": "relative",
         "display": "block",
+        "height": "100%",
+        "overflow": "hidden",
         "textDecoration": "none",
-        "color": "var(--color-text-primary)",
-        ":hover img": { "transform": "scale(1.05)" },
-        ":hover h3": { "color": "var(--color-primary)" }
+        "color": "var(--color-text-white)",
+        "backgroundColor": "var(--color-bg-elev)",
+        ":hover img": { "transform": "scale(1.06)" },
+        ":hover figcaption": { "transform": "translateY(0)", "opacity": "1" }
       },
       "children": [
+        {
+          "tagName": "img",
+          "attributes": {
+            "src": "${state.cover}",
+            "alt": "${state.alt}",
+            "loading": "lazy"
+          },
+          "style": {
+            "position": "absolute",
+            "inset": "0",
+            "width": "100%",
+            "height": "100%",
+            "objectFit": "cover",
+            "display": "block",
+            "transition": "transform 0.8s cubic-bezier(0.22, 1, 0.36, 1)"
+          }
+        },
         {
           "tagName": "div",
           "style": {
-            "overflow": "hidden",
-            "borderRadius": "var(--radius)",
-            "backgroundColor": "var(--color-bg-cream)"
-          },
-          "children": [
-            {
-              "tagName": "img",
-              "attributes": {
-                "src": "${state.cover}",
-                "alt": "${state.alt}",
-                "loading": "lazy"
-              },
-              "style": {
-                "width": "100%",
-                "height": "auto",
-                "display": "block",
-                "objectFit": "cover",
-                "transition": "transform 0.6s cubic-bezier(0.22, 1, 0.36, 1)"
-              }
-            }
-          ]
+            "position": "absolute",
+            "inset": "0",
+            "background": "linear-gradient(to top, rgba(10,10,11,0.82) 0%, rgba(10,10,11,0.25) 40%, transparent 68%)"
+          }
         },
         {
           "tagName": "div",
           "style": {
-            "display": "flex",
-            "justifyContent": "space-between",
-            "alignItems": "baseline",
-            "gap": "1rem",
-            "margin": "1rem 0 0"
+            "position": "absolute",
+            "left": "0",
+            "right": "0",
+            "bottom": "0",
+            "padding": "clamp(1.25rem, 2.5vw, 2rem)"
           },
           "children": [
             {
-              "tagName": "h3",
+              "tagName": "div",
               "style": {
-                "fontFamily": "var(--font-heading)",
-                "fontSize": "1.5rem",
-                "fontWeight": "600",
-                "margin": "0",
-                "lineHeight": "1.2",
-                "transition": "color 0.15s"
+                "display": "flex",
+                "alignItems": "center",
+                "gap": "0.7rem",
+                "marginBottom": "0.6rem"
               },
-              "textContent": "${state.title}"
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "fontFamily": "var(--font-label)",
+                    "fontSize": "0.72rem",
+                    "letterSpacing": "0.1em",
+                    "color": "var(--color-primary)"
+                  },
+                  "textContent": "${state.number}"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "1.5rem",
+                    "height": "1px",
+                    "backgroundColor": "var(--color-primary)",
+                    "opacity": "0.7"
+                  }
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "${state.category ? 'inline' : 'none'}",
+                    "fontSize": "0.66rem",
+                    "fontWeight": "600",
+                    "letterSpacing": "0.2em",
+                    "textTransform": "uppercase",
+                    "color": "var(--color-text-white)",
+                    "opacity": "0.75"
+                  },
+                  "textContent": "${state.category}"
+                }
+              ]
             },
             {
-              "tagName": "span",
+              "tagName": "div",
               "style": {
-                "display": "${state.year ? 'inline' : 'none'}",
-                "fontSize": "0.85rem",
-                "color": "var(--color-text-muted)",
-                "whiteSpace": "nowrap"
+                "display": "flex",
+                "alignItems": "baseline",
+                "justifyContent": "space-between",
+                "gap": "1rem"
               },
-              "textContent": "${state.year}"
+              "children": [
+                {
+                  "tagName": "h3",
+                  "style": {
+                    "fontFamily": "var(--font-heading)",
+                    "fontWeight": "500",
+                    "fontSize": "clamp(1.6rem, 2.8vw, 2.4rem)",
+                    "lineHeight": "1.05",
+                    "margin": "0"
+                  },
+                  "textContent": "${state.title}"
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "display": "${state.year ? 'inline' : 'none'}",
+                    "fontSize": "0.8rem",
+                    "color": "var(--color-text-white)",
+                    "opacity": "0.6",
+                    "whiteSpace": "nowrap"
+                  },
+                  "textContent": "${state.year}"
+                }
+              ]
+            },
+            {
+              "tagName": "figcaption",
+              "style": {
+                "marginTop": "0.75rem",
+                "fontSize": "0.72rem",
+                "fontWeight": "600",
+                "textTransform": "uppercase",
+                "letterSpacing": "0.18em",
+                "color": "var(--color-primary)",
+                "transform": "translateY(0.75rem)",
+                "opacity": "0",
+                "transition": "transform 0.3s, opacity 0.3s"
+              },
+              "textContent": "View project →"
             }
           ]
-        },
-        {
-          "tagName": "p",
-          "style": {
-            "display": "${state.category ? 'block' : 'none'}",
-            "margin": "0.3rem 0 0",
-            "fontSize": "0.75rem",
-            "fontWeight": "600",
-            "letterSpacing": "0.14em",
-            "textTransform": "uppercase",
-            "color": "var(--color-primary)"
-          },
-          "textContent": "${state.category}"
         }
       ]
     }

package/sites/portfolio/components/pv-project-grid.json

@@ -2,21 +2,29 @@
   "tagName": "pv-project-grid",
   "state": {},
   "style": {
-    "display": "block",
-    "maxWidth": "var(--max-width)",
-    "margin": "0 auto",
-    "padding": "0 1.5rem"
-  },
-  "children": [
-    {
-      "tagName": "div",
-      "style": {
-        "columns": "3",
-        "columnGap": "1.75rem",
-        "@--md": { "columns": "2" },
-        "@--sm": { "columns": "1" }
-      },
-      "children": [{ "tagName": "slot" }]
+    "display": "grid",
+    "gridTemplateColumns": "repeat(12, 1fr)",
+    "gridAutoRows": "clamp(230px, 32vw, 460px)",
+    "gap": "0.5rem",
+    "padding": "0 0.5rem",
+    "& pv-project-card": { "gridColumn": "span 6" },
+    "& pv-project-card:nth-of-type(6n + 1)": { "gridColumn": "span 7" },
+    "& pv-project-card:nth-of-type(6n + 2)": { "gridColumn": "span 5" },
+    "& pv-project-card:nth-of-type(6n + 3)": { "gridColumn": "span 5" },
+    "& pv-project-card:nth-of-type(6n + 4)": { "gridColumn": "span 7" },
+    "& pv-project-card:nth-of-type(6n + 5)": { "gridColumn": "span 6" },
+    "& pv-project-card:nth-of-type(6n + 6)": { "gridColumn": "span 6" },
+    "@--sm": {
+      "gridTemplateColumns": "1fr",
+      "gridAutoRows": "68vw",
+      "& pv-project-card": { "gridColumn": "span 1" },
+      "& pv-project-card:nth-of-type(6n + 1)": { "gridColumn": "span 1" },
+      "& pv-project-card:nth-of-type(6n + 2)": { "gridColumn": "span 1" },
+      "& pv-project-card:nth-of-type(6n + 3)": { "gridColumn": "span 1" },
+      "& pv-project-card:nth-of-type(6n + 4)": { "gridColumn": "span 1" },
+      "& pv-project-card:nth-of-type(6n + 5)": { "gridColumn": "span 1" },
+      "& pv-project-card:nth-of-type(6n + 6)": { "gridColumn": "span 1" }
     }
-  ]
+  },
+  "children": [{ "tagName": "slot" }]
 }

package/sites/portfolio/components/pv-section-header.json

@@ -3,51 +3,88 @@
   "state": {
     "eyebrow": "",
     "heading": "",
-    "subheading": "",
-    "align": "center"
+    "subheading": ""
   },
   "style": {
     "display": "block",
-    "maxWidth": "var(--max-width-narrow)",
-    "margin": "0 auto 3rem",
-    "textAlign": "${state.align}"
+    "maxWidth": "var(--max-width)",
+    "margin": "0 auto",
+    "padding": "0 clamp(1.5rem, 4vw, 4rem)"
   },
   "children": [
     {
-      "tagName": "p",
+      "tagName": "div",
       "style": {
-        "display": "${state.eyebrow ? 'block' : 'none'}",
-        "textTransform": "uppercase",
-        "letterSpacing": "0.2em",
-        "fontSize": "0.78rem",
-        "fontWeight": "600",
-        "color": "var(--color-primary)",
-        "margin": "0 0 0.85rem"
+        "display": "flex",
+        "alignItems": "flex-end",
+        "justifyContent": "space-between",
+        "gap": "2rem",
+        "flexWrap": "wrap",
+        "borderBottom": "1px solid var(--color-line)",
+        "paddingBottom": "1.5rem"
       },
-      "textContent": "${state.eyebrow}"
-    },
-    {
-      "tagName": "h2",
-      "style": {
-        "fontFamily": "var(--font-heading)",
-        "fontSize": "clamp(2rem, 4.5vw, 3rem)",
-        "fontWeight": "600",
-        "lineHeight": "1.12",
-        "letterSpacing": "-0.01em",
-        "margin": "0"
-      },
-      "textContent": "${state.heading}"
-    },
-    {
-      "tagName": "p",
-      "style": {
-        "display": "${state.subheading ? 'block' : 'none'}",
-        "fontSize": "1.1rem",
-        "lineHeight": "1.7",
-        "color": "var(--color-text-muted)",
-        "margin": "1.1rem 0 0"
-      },
-      "textContent": "${state.subheading}"
+      "children": [
+        {
+          "tagName": "div",
+          "children": [
+            {
+              "tagName": "div",
+              "style": {
+                "display": "${state.eyebrow ? 'flex' : 'none'}",
+                "alignItems": "center",
+                "gap": "0.85rem",
+                "marginBottom": "1.1rem"
+              },
+              "children": [
+                {
+                  "tagName": "span",
+                  "style": {
+                    "width": "2.25rem",
+                    "height": "1px",
+                    "backgroundColor": "var(--color-primary)"
+                  }
+                },
+                {
+                  "tagName": "span",
+                  "style": {
+                    "textTransform": "uppercase",
+                    "letterSpacing": "0.24em",
+                    "fontSize": "0.7rem",
+                    "fontWeight": "500",
+                    "color": "var(--color-primary)"
+                  },
+                  "textContent": "${state.eyebrow}"
+                }
+              ]
+            },
+            {
+              "tagName": "h2",
+              "style": {
+                "fontFamily": "var(--font-heading)",
+                "fontSize": "clamp(2.2rem, 5vw, 3.6rem)",
+                "fontWeight": "400",
+                "lineHeight": "1.02",
+                "letterSpacing": "-0.01em",
+                "margin": "0",
+                "color": "var(--color-text-primary)"
+              },
+              "textContent": "${state.heading}"
+            }
+          ]
+        },
+        {
+          "tagName": "p",
+          "style": {
+            "display": "${state.subheading ? 'block' : 'none'}",
+            "fontSize": "1.02rem",
+            "lineHeight": "1.7",
+            "color": "var(--color-text-muted)",
+            "margin": "0",
+            "maxWidth": "40ch"
+          },
+          "textContent": "${state.subheading}"
+        }
+      ]
     }
   ]
 }

package/sites/portfolio/layouts/base.json

@@ -8,7 +8,7 @@
     "minHeight": "100vh",
     "display": "flex",
     "flexDirection": "column",
-    "backgroundColor": "var(--color-bg-white)"
+    "backgroundColor": "var(--color-bg)"
   },
   "children": [
     { "tagName": "pv-nav" },

package/sites/portfolio/package.json

@@ -9,7 +9,7 @@
     "dev": "jx dev"
   },
   "devDependencies": {
-    "@jxsuite/compiler": "^0.19.0",
-    "@jxsuite/runtime": "^0.19.0"
+    "@jxsuite/compiler": "^0.34.0",
+    "@jxsuite/runtime": "^0.34.0"
   }
 }

package/sites/portfolio/pages/[slug].json

@@ -29,7 +29,7 @@
       "style": {
         "maxWidth": "var(--max-width-narrow)",
         "margin": "0 auto",
-        "padding": "3.5rem 1.5rem clamp(3.5rem, 8vw, 6rem)"
+        "padding": "clamp(7rem, 11vw, 9rem) 1.5rem clamp(3.5rem, 8vw, 6rem)"
       },
       "children": [
         {

package/sites/portfolio/pages/about.md

@@ -2,13 +2,14 @@
 title: "About — Aperture Studio"
 ---
 
-:::::section{style.padding="clamp(3rem, 6vw, 5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+:::::section{style.padding="clamp(7rem, 12vw, 10rem) 0 clamp(2rem, 5vw, 3.5rem)"}
 ::pv-section-header{props.eyebrow="The studio" props.heading="An image-forward practice" props.subheading="Available light, a patient pace, and a tight final edit — that is the whole philosophy."}
 :::::
 
 :::::pv-about-split{props.image="/images/about.jpg" props.imageAlt="Aperture Studio photographer with camera"}
-
-### Photographs that still feel like the moment
+::::h2{style.fontFamily="var(--font-heading)" style.fontWeight="400" style.fontSize="clamp(2rem, 4vw, 3rem)" style.lineHeight="1.05" style.letterSpacing="-0.01em" style.margin="0 0 1.25rem" style.color="var(--color-text-primary)"}
+Photographs that still feel like the moment
+::::
 
 Aperture Studio began as one photographer, a single lens, and a stubborn preference for natural light. Years later the tools have grown but the approach has not: show up early, watch closely, and only press the shutter when something real is happening.
 

package/sites/portfolio/pages/contact.md

@@ -2,7 +2,7 @@
 title: "Contact & Inquiries — Aperture Studio"
 ---
 
-::::::section{style.padding="clamp(3rem, 6vw, 5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
+::::::section{style.padding="clamp(7rem, 12vw, 10rem) 0 clamp(1rem, 3vw, 2rem)"}
 ::pv-section-header{props.eyebrow="Inquire" props.heading="Start a project" props.subheading="Tell us a little about what you have in mind. We reply to every message personally, usually within two business days."}
 ::::::
 

package/sites/portfolio/pages/index.md

@@ -11,35 +11,40 @@ state:
     limit: 4
 ---
 
-::pv-hero{props.eyebrow="Photography & Creative Studio" props.heading="Light, patience, and a good eye." props.subheading="Aperture Studio makes image-forward work for people and places — weddings, portraits, editorial, and everything in the frame between." props.cta="View the Work" props.ctaHref="/work/" props.cta2="Start a Project" props.cta2Href="/contact/" props.bg="/images/hero.jpg"}
+::pv-hero{props.eyebrow="Photography & Creative Studio" props.heading="Light, patience, and a good eye." props.subheading="Image-forward work for people and places — weddings, portraits, editorial, and everything in the frame between." props.cta="Enter the work" props.ctaHref="/work/" props.bg="/images/hero.jpg"}
 
-:::::section{style.padding="clamp(4rem, 9vw, 7rem) 1.5rem"}
-::pv-section-header{props.eyebrow="Selected work" props.heading="A few recent stories" props.subheading="A small edit from the archive. Every project begins with a conversation and ends with prints worth keeping."}
+::::::section{style.padding="clamp(4rem, 9vw, 7rem) 0"}
+::pv-section-header{props.eyebrow="Selected work" props.heading="A few recent stories" props.subheading="A small edit from the archive — each project a short story told in light."}
 
+:::::div{style.marginTop="clamp(2rem, 4vw, 3rem)"}
 ::::pv-project-grid
 :::Array{items.ref="#/state/featured"}
-::pv-project-card{props.title="${item.data.title}" props.category="${item.data.category}" props.year="${item.data.year}" props.cover="${item.data.cover}" props.href="/${item.data.slug}/" props.alt="${item.data.title}"}
+::pv-project-card{props.number="0${item.data.order}" props.title="${item.data.title}" props.category="${item.data.category}" props.year="${item.data.year}" props.cover="${item.data.cover}" props.href="/${item.data.slug}/" props.alt="${item.data.title}"}
 :::
 ::::
+:::::
 
-::::div{style.textAlign="center" style.marginTop="3rem"}
-:::a{href="/work/" style.display="inline-block" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="0.9rem" style.letterSpacing="0.05em" style.textTransform="uppercase"}
+::::div{style.textAlign="center" style.marginTop="clamp(2.5rem, 5vw, 3.5rem)" style.padding="0 1.5rem"}
+:::a{href="/work/" style.display="inline-flex" style.alignItems="center" style.gap="0.6rem" style.color="var(--color-text-primary)" style.fontSize="0.78rem" style.fontWeight="600" style.textTransform="uppercase" style.letterSpacing="0.2em" style.textDecoration="none" style.borderBottom="1px solid var(--color-primary)" style.paddingBottom="0.5rem"}
 View all work →
 :::
 ::::
-:::::
+::::::
 
 :::::pv-about-split{props.image="/images/about.jpg" props.imageAlt="Aperture Studio photographer at work" props.reverse="true"}
+::::p{style.display="flex" style.alignItems="center" style.gap="0.85rem" style.margin="0 0 1.5rem" style.textTransform="uppercase" style.letterSpacing="0.24em" style.fontSize="0.7rem" style.fontWeight="500" style.color="var(--color-primary)"}
+Behind the lens
+::::
 
-### Behind the lens
-
-Aperture Studio is a small, image-forward practice led by a photographer who prefers available light and unhurried days. We shoot a little, edit hard, and hand back a tight set of frames you will actually want to live with.
+::::h2{style.fontFamily="var(--font-heading)" style.fontWeight="400" style.fontSize="clamp(2rem, 4vw, 3rem)" style.lineHeight="1.05" style.letterSpacing="-0.01em" style.margin="0 0 1.25rem" style.color="var(--color-text-primary)"}
+A small, image-forward practice
+::::
 
-We work across the country and answer every inquiry personally.
+Aperture Studio is led by a photographer who prefers available light and unhurried days. We shoot a little, edit hard, and hand back a tight set of frames you will actually want to live with. We work across the country and answer every inquiry personally.
 
-:::a{href="/about/" style.display="inline-block" style.marginTop="1.25rem" style.color="var(--color-primary)" style.fontWeight="600" style.textDecoration="none" style.fontSize="0.9rem" style.letterSpacing="0.05em" style.textTransform="uppercase"}
+::::a{href="/about/" style.display="inline-flex" style.alignItems="center" style.gap="0.6rem" style.marginTop="1.75rem" style.color="var(--color-text-primary)" style.fontSize="0.78rem" style.fontWeight="600" style.textTransform="uppercase" style.letterSpacing="0.2em" style.textDecoration="none" style.borderBottom="1px solid var(--color-primary)" style.paddingBottom="0.5rem"}
 More about the studio →
-:::
+::::
 :::::
 
 ::pv-cta{props.heading="Have something worth photographing?" props.text="Tell us about the day, the story, or the space. We take on a limited number of projects each season." props.cta="Start a Project" props.ctaHref="/contact/"}

package/sites/portfolio/pages/work.md

@@ -10,10 +10,10 @@ state:
       order: asc
 ---
 
-:::::section{style.padding="clamp(3rem, 6vw, 5rem) 1.5rem" style.backgroundColor="var(--color-bg-cream)"}
-::pv-section-header{props.eyebrow="Portfolio" props.heading="Selected work" props.subheading="Six recent projects across weddings, portraits, editorial, travel, food, and architecture — each a short story told in light."}
+::::::section{style.padding="clamp(7rem, 12vw, 10rem) 0 clamp(3rem, 6vw, 4.5rem)"}
+::pv-section-header{props.eyebrow="Portfolio" props.heading="Selected work" props.subheading="Six recent projects — weddings, portraits, editorial, travel, food, and architecture."}
 
-::::div{style.display="flex" style.flexWrap="wrap" style.gap="0.6rem" style.justifyContent="center" style.maxWidth="var(--max-width-narrow)" style.margin="0 auto"}
+::::div{style.display="flex" style.flexWrap="wrap" style.gap="0.6rem" style.maxWidth="var(--max-width)" style.margin="1.75rem auto 0" style.padding="0 clamp(1.5rem, 4vw, 4rem)"}
 ::pv-category-pill{props.label="Weddings"}
 
 ::pv-category-pill{props.label="Portraits"}
@@ -26,14 +26,14 @@ state:
 
 ::pv-category-pill{props.label="Architecture"}
 ::::
-:::::
+::::::
 
-:::::section{style.padding="clamp(3.5rem, 8vw, 6rem) 1.5rem"}
+::::::section{style.padding="0 0 clamp(4rem, 8vw, 6rem)"}
 ::::pv-project-grid
 :::Array{items.ref="#/state/projects"}
-::pv-project-card{props.title="${item.data.title}" props.category="${item.data.category}" props.year="${item.data.year}" props.cover="${item.data.cover}" props.href="/${item.data.slug}/" props.alt="${item.data.title}"}
+::pv-project-card{props.number="0${item.data.order}" props.title="${item.data.title}" props.category="${item.data.category}" props.year="${item.data.year}" props.cover="${item.data.cover}" props.href="/${item.data.slug}/" props.alt="${item.data.title}"}
 :::
 ::::
-:::::
+::::::
 
 ::pv-cta{props.heading="Let's make something." props.text="Commissions, collaborations, and personal shoots — the studio takes on a handful of projects each season." props.cta="Start a Project" props.ctaHref="/contact/"}

package/sites/portfolio/project.json

@@ -33,7 +33,7 @@
       "tagName": "link",
       "attributes": {
         "rel": "stylesheet",
-        "href": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&display=swap"
+        "href": "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Fraunces:opsz,wght@9..144,300;9..144,400&display=swap"
       }
     }
   ],
@@ -44,27 +44,31 @@
     "--sm": "(max-width: 640px)"
   },
   "style": {
-    "--color-primary": "#d97706",
-    "--color-primary-hover": "#b45309",
-    "--color-ink": "#111827",
-    "--color-bg-dark": "#111827",
-    "--color-bg-cream": "#f8f7f4",
-    "--color-bg-white": "#ffffff",
-    "--color-text-primary": "#111827",
-    "--color-text-white": "#ffffff",
-    "--color-text-muted": "#6b7280",
-    "--color-border": "#e5e7eb",
-    "--color-accent": "#d97706",
+    "--color-primary": "#c8a45c",
+    "--color-primary-hover": "#dcbd77",
+    "--color-ink": "#ece9e3",
+    "--color-bg-dark": "#161619",
+    "--color-bg-cream": "#161619",
+    "--color-bg-white": "#0c0c0d",
+    "--color-bg": "#0c0c0d",
+    "--color-bg-elev": "#161619",
+    "--color-text-primary": "#ece9e3",
+    "--color-text-white": "#ece9e3",
+    "--color-text-muted": "#8f8b82",
+    "--color-border": "#2a2a2e",
+    "--color-line": "#2a2a2e",
+    "--color-accent": "#c8a45c",
     "--font-heading": "'Cormorant Garamond', Georgia, 'Times New Roman', serif",
-    "--max-width": "1200px",
-    "--max-width-narrow": "820px",
-    "--radius": "0.25rem",
+    "--font-label": "'Fraunces', Georgia, serif",
+    "--max-width": "1400px",
+    "--max-width-narrow": "760px",
+    "--radius": "0",
     "margin": "0",
     "padding": "0",
     "fontFamily": "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
     "lineHeight": "1.6",
     "color": "var(--color-text-primary)",
-    "backgroundColor": "var(--color-bg-white)"
+    "backgroundColor": "var(--color-bg)"
   },
   "imports": {
     "Markdown": "@jxsuite/parser/Markdown.class.json",