From a92533eb4c7ec02e8edec07dd454b5c298606c1a Mon Sep 17 00:00:00 2001
From: Cole Peters <cole@colepeters.com>
Date: Thu, 5 Oct 2023 12:57:57 -0500
Subject: [PATCH] WIP new pages, mobile menu updates

---
 app/docs/nav-data.mjs                         |  12 -
 app/elements/docs/header.mjs                  | 210 ------------------
 app/elements/docs/layout.mjs                  |   4 +-
 app/elements/docs/nav.mjs                     |   3 +-
 app/elements/docs/theme-toggle.mjs            |   6 +-
 app/elements/editorial-header.mjs             |  10 +
 .../header-v2.mjs => enhance-header.mjs}      | 101 +++++++--
 app/head.mjs                                  |  32 ++-
 app/pages/index.html                          | 101 +--------
 app/pages/showcase.html                       |  28 +++
 styleguide.json                               |   3 +-
 11 files changed, 165 insertions(+), 345 deletions(-)
 delete mode 100644 app/elements/docs/header.mjs
 create mode 100644 app/elements/editorial-header.mjs
 rename app/elements/{docs/header-v2.mjs => enhance-header.mjs} (57%)
 create mode 100644 app/pages/showcase.html

diff --git a/app/docs/nav-data.mjs b/app/docs/nav-data.mjs
index d3e6c415..f9f84289 100644
--- a/app/docs/nav-data.mjs
+++ b/app/docs/nav-data.mjs
@@ -12,18 +12,6 @@ export const data = [
     label: 'Learn',
     slug: 'learn',
     items: [
-      {
-        type: TYPE.link,
-        slug: 'why-enhance',
-        label: 'Why Enhance?',
-        description: 'Our core philosophy',
-      },
-      {
-        type: TYPE.link,
-        slug: 'showcase',
-        label: 'Showcase',
-        description: 'Built with Enhance',
-      },
       {
         type: TYPE.category,
         slug: 'get-started',
diff --git a/app/elements/docs/header.mjs b/app/elements/docs/header.mjs
deleted file mode 100644
index 5503bc80..00000000
--- a/app/elements/docs/header.mjs
+++ /dev/null
@@ -1,210 +0,0 @@
-import arc from '@architect/functions'
-
-export default function DocsHeader({ html, state }) {
-  const { store } = state
-  const { searchTerm, sidebarData } = store
-
-  // check if today is Nov 30: Blue Beanie Day
-  const today = new Date()
-  const isBlueBeanieDay = today.getMonth() === 11 - 1 && today.getDate() === 30
-
-  const navItems = []
-  if (sidebarData?.length > 0) {
-    sidebarData
-      .filter((i) => i.type === 'tab')
-      .forEach((tab) => {
-        navItems.push(
-          `<li class="inline-block whitespace-no-wrap mi3 ${
-            tab.activeTab ? 'active font-semibold' : ''
-          }">
-            <a class="text-center" href="${tab.path}/">${tab.label}</a>
-          </li>`
-        )
-      })
-  }
-
-  return html`
-    <style>
-      /* Layout */
-      /* mobile first */
-
-      :host {
-        display: grid;
-        align-items: center;
-        grid-template-columns: 1fr;
-        grid-template-areas:
-          'logo'
-          'menu';
-        box-shadow: 0px 1px 2px var(--smoke-indigo);
-        position: relative;
-        z-index: 3;
-      }
-
-      #logo {
-        grid-area: logo;
-        display: flex;
-      }
-
-      #menu {
-        grid-area: menu;
-        display: flex;
-      }
-
-      #docs-nav {
-        grid-area: docs-nav;
-        display: block;
-        position: fixed;
-        background: var(--white-denim);
-        top: 130px;
-        left: -100vw;
-        bottom: 0;
-        overflow-y: auto;
-        width: 100vw;
-        -webkit-transition: left 0.2s ease;
-        transition: left 0.2s ease;
-      }
-
-      #burger-control {
-        display: block;
-        position: absolute;
-        opacity: 0;
-        height: 0.0001px;
-        width: 0.0001px;
-      }
-      #burger-control:focus-visible ~ #logo > #hamburger {
-        outline: 1px solid white;
-        border: 2px solid var(--lt-blue);
-        border-radius: 3px;
-      }
-      #burger-control:checked ~ #main-nav {
-        display: block;
-      }
-      #burger-control:checked ~ #docs-nav {
-        display: block;
-        left: 0vw;
-      }
-      #burger-control:checked ~ #menu {
-        display: flex;
-      }
-
-      @media only screen and (min-width: 48em) {
-        /* 2-col + */
-        :host {
-          grid-template-columns: 1fr 1fr;
-          grid-template-areas: 'logo menu';
-        }
-        #main-nav {
-          display: flex;
-        }
-
-        #hamburger,
-        #docs-nav {
-          display: none !important; /* even when :checked */
-        }
-
-        #docs-nav {
-          -webkit-transition: initial;
-          transition: initial;
-        }
-      }
-    </style>
-
-    <style>
-      /* Basic styles */
-
-      .axol {
-        margin-top: -0.65rem;
-      }
-      .axol-accessory {
-        position: absolute;
-      }
-      .axol-accessory.bluebeanie {
-        left: 12px;
-        top: -3px;
-        width: 38px;
-      }
-
-      #logo h1 a {
-        transition: transform ease 0.2s;
-      }
-      #logo a.enhance-link {
-        color: var(--denim-white);
-      }
-      #logo a.enhance-link:hover {
-        transform: rotate(-3deg);
-      }
-      #logo a.docs-link {
-        color: var(--purple-princess);
-      }
-    </style>
-
-    <input
-      id="burger-control"
-      class="absolute opacity-0 z-1"
-      type="checkbox"
-      name="open-burger"
-      autocomplete="off"
-      aria-label="Open navigation" />
-    <div
-      id="logo"
-      class="flex gap-1 justify-content-between align-items-center">
-      <div class="flex align-items-center">
-        <div class="relative axol-and-accessories">
-          <img
-            class="axol"
-            src="${arc.static('img/svg/enhance-axol.svg')}"
-            alt="Enhance mascot: Axol" />
-          ${isBlueBeanieDay &&
-          `<img
-              class="axol-accessory bluebeanie"
-              src="${arc.static('img/bluebeanie.png')}"
-              alt="Axol's blue beanie" />`}
-        </div>
-        <h1 class="text1 mis-1">
-          <a href="/" class="enhance-link inline-block font-semibold"
-            >Enhance</a
-          >
-          <a href="/docs/" class="docs-link inline-block">Docs</a>
-        </h1>
-      </div>
-      <label
-        id="hamburger"
-        class="cursor-pointer relative"
-        for="burger-control"
-        title="Open navigation">
-        <svg height="24" width="24">
-          <use xlink:href="#svg-hamburger"></use>
-        </svg>
-      </label>
-    </div>
-
-    <nav id="menu" class="flex gap-1 justify-content-end align-items-center">
-      <!-- GitHub
-      <svg height="24" width="24">
-        <use xlink:href="#svg-github"></use>
-      </svg> -->
-      <!-- Discord
-      <svg height="24" width="24">
-        <use xlink:href="#svg-discord"></use>
-      </svg> -->
-      <docs-theme-toggle></docs-theme-toggle>
-      <div id="search" class="flex-grow flex-grow-0-lg"></div>
-    </nav>
-
-    <nav id="docs-nav" class="z1">
-      <docs-nav></docs-nav>
-    </nav>
-
-    <script type="module">
-      import docsearch from '/_static/bundles/docsearch-js.mjs'
-
-      docsearch({
-        appId: '1QR8CXPN0C',
-        apiKey: '781b7bc665ad54b682ab4a31a5ccb55e',
-        indexName: 'enhance',
-        container: '#search',
-        initialQuery: ${searchTerm ? `'${searchTerm}'` : 'null'},
-      })
-    </script>
-  `
-}
diff --git a/app/elements/docs/layout.mjs b/app/elements/docs/layout.mjs
index 6ccd0536..36c1d45e 100644
--- a/app/elements/docs/layout.mjs
+++ b/app/elements/docs/layout.mjs
@@ -112,11 +112,11 @@ export default function DocsLayout({ html, state }) {
 
     <docs-symbols></docs-symbols>
 
-    <docs-header-v2 id="header"></docs-header-v2>
+    <enhance-header id="header"></enhance-header>
 
     <docs-nav
       id="sidebar"
-      class="pbs1-lg overflow-y-auto-lg"
+      class="overflow-y-auto-lg"
       aria-label="sidebar"></docs-nav>
 
     <doc-content id="content" class="overflow-y-auto-lg p1-lg pbe2">
diff --git a/app/elements/docs/nav.mjs b/app/elements/docs/nav.mjs
index 4021b141..bf5abee8 100644
--- a/app/elements/docs/nav.mjs
+++ b/app/elements/docs/nav.mjs
@@ -1,6 +1,6 @@
 function List(items, classes = []) {
   return `
-<ul role="list" class="${['list-none pis-1', ...classes].join(' ')}">
+<ul role="list" class="${['list-none pis-2', ...classes].join(' ')}">
   ${items
     .map((item) => {
       return `
@@ -85,7 +85,6 @@ export default function DocsNav({ html, state }) {
       }
     </style>
 
-    <docs-theme-toggle class="block hidden-lg mbe0 pis-1"></docs-theme-toggle>
     <nav>${List(activeTab.items)}</nav>
   `
 }
diff --git a/app/elements/docs/theme-toggle.mjs b/app/elements/docs/theme-toggle.mjs
index bea400a6..d5f3b1a7 100644
--- a/app/elements/docs/theme-toggle.mjs
+++ b/app/elements/docs/theme-toggle.mjs
@@ -8,16 +8,16 @@ export default function DocsThemeToggle({ html }) {
         width: ${size}px;
       }
       input + svg {
-        opacity: 0.3;
         padding-bottom: 2px;
+        color: var(--purple-princess);
       }
       input:hover + svg,
       input:checked + svg {
         opacity: 1;
-        color: var(--black-princess);
+        color: var(--rift-white);
       }
       input:checked + svg {
-        border-bottom: 2px solid var(--black-princess);
+        border-bottom: 2px solid var(--rift-white);
       }
     </style>
 
diff --git a/app/elements/editorial-header.mjs b/app/elements/editorial-header.mjs
new file mode 100644
index 00000000..550a8d7d
--- /dev/null
+++ b/app/elements/editorial-header.mjs
@@ -0,0 +1,10 @@
+export default function EditorialHeader({ html }) {
+  return html`
+    <style>
+      enhance-header {
+        inline-size: var(--editorial-width);
+      }
+    </style>
+    <enhance-header class="block mi-auto font-medium"></enhance-header>
+  `
+}
diff --git a/app/elements/docs/header-v2.mjs b/app/elements/enhance-header.mjs
similarity index 57%
rename from app/elements/docs/header-v2.mjs
rename to app/elements/enhance-header.mjs
index 420de46c..2553a863 100644
--- a/app/elements/docs/header-v2.mjs
+++ b/app/elements/enhance-header.mjs
@@ -1,17 +1,34 @@
 export default function Header({ html, state }) {
   const { store } = state
-  const { searchTerm } = store
+  const { path, searchTerm } = store
 
   // check if today is Nov 30: Blue Beanie Day
   const today = new Date()
   const isBlueBeanieDay = today.getMonth() === 11 - 1 && today.getDate() === 30
 
+  function createLink(route, label) {
+    const isActive = path.includes(route)
+    return isActive
+      ? `<span class="font-medium">${label}</span>`
+      : `<a href="${route}" class="global-nav-link">${label}</a>`
+  }
+
+  const globalNavItems = `
+    <ul class="list-none flex flex-col flex-row-lg gap-1 gap1-xl p-2">
+      <li>${createLink('/docs', 'Docs')}</li>
+      <li>${createLink('/showcase', 'Showcase')}</li>
+      <li>${createLink('/why-enhance', 'Why Enhance?')}</li>
+    </ul>
+  `
+
+  const isDocs = path.includes('docs')
+
   return html`
     <style scope="global">
       /* Docsearch overrides */
       :root {
         --docsearch-highlight-color: var(--purple);
-        --docsearch-searchbox-background: var(--smoke-indigo);
+        --docsearch-searchbox-background: hsla(0deg 0% 0% / 0.075);
         --docsearch-searchbox-shadow: inset 0 0 0 2px var(--purple);
         --docsearch-text-color: var(--rift-white);
         --docsearch-searchbox-focus-background: var(--white-denim);
@@ -24,6 +41,16 @@ export default function Header({ html, state }) {
         --docsearch-footer-shadow: none;
       }
 
+      :root[data-force-theme='dark'] {
+        --docsearch-searchbox-background: hsla(0deg 0% 0% / 0.5);
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --docsearch-searchbox-background: hsla(0deg 0% 0% / 0.5);
+        }
+      }
+
       .DocSearch-Button:focus {
         box-shadow: none;
         outline: 2px auto Highlight;
@@ -39,6 +66,7 @@ export default function Header({ html, state }) {
 
       .DocSearch-Container {
         backdrop-filter: blur(2px) contrast(50%);
+        font-size: var(--text-0);
       }
 
       .DocSearch-Hit-content-wrapper {
@@ -54,6 +82,23 @@ export default function Header({ html, state }) {
       }
     </style>
 
+    <style scope="global">
+      /* Mobile nav custom properties */
+      :root {
+        --mobile-nav-background: hsla(0deg 0% 100% / 0.75);
+      }
+
+      :root[data-force-theme='dark'] {
+        --mobile-nav-background: hsla(0deg 0% 0% / 0.33);
+      }
+
+      @media (prefers-color-scheme: dark) {
+        :root {
+          --mobile-nav-background: hsla(0deg 0% 0% / 0.33);
+        }
+      }
+    </style>
+
     <style>
       :host {
         position: relative;
@@ -61,7 +106,7 @@ export default function Header({ html, state }) {
       }
 
       header {
-        box-shadow: 0px 1px 2px var(--smoke-indigo);
+        box-shadow: ${isDocs ? '0px 1px 2px var(--smoke-indigo)' : 'none'};
         block-size: var(--nav-height);
       }
 
@@ -95,7 +140,7 @@ export default function Header({ html, state }) {
       }
 
       #navToggle:has(#navToggleInput:hover) {
-        background: var(--smoke-indigo);
+        background: hsla(0deg 0% 0% / 0.125);
       }
 
       #navToggle:has(#navToggleInput:focus-visible) {
@@ -104,20 +149,38 @@ export default function Header({ html, state }) {
         outline-offset: 2px;
       }
 
-      docs-nav {
-        background: var(--white-denim);
+      #mobileNav {
+        background: var(--mobile-nav-background);
+        backdrop-filter: blur(8px);
         inset-block-start: var(--nav-height);
         display: none;
       }
 
       @media screen and (width < 48em) {
-        :host:has(#navToggleInput:checked) docs-nav {
+        :host:has(#navToggleInput:checked) #mobileNav {
           display: block;
         }
       }
+
+      @media screen and (min-width: 48em) {
+        #header-logo {
+          inline-size: var(--docs-nav-width);
+          /* Accounts for padding on header */
+          margin-inline-end: calc(var(--space--2) * -1);
+        }
+      }
+
+      .global-nav-link {
+        color: var(--purple-princess);
+        transition: 0.15s color ease;
+      }
+
+      .global-nav-link:hover {
+        color: var(--denim-white);
+      }
     </style>
-    <header class="relative z1 p-2 flex align-items-center">
-      <figure class="flex align-items-center gap-1">
+    <header class="relative z1 flex align-items-center ${isDocs ? 'p-2' : ''}">
+      <figure id="header-logo" class="flex align-items-center gap-1">
         <div class="relative offset">
           <img id="logo-axol" src="/_public/img/svg/enhance-axol.svg" alt="" />
           ${isBlueBeanieDay &&
@@ -128,11 +191,15 @@ export default function Header({ html, state }) {
               alt="Axol's blue beanie" />`}
         </div>
 
-        <h1 class="font-medium text1"><a href="/">Enhance</a></h1>
+        <h1 class="font-medium text0 text1-lg"><a href="/">Enhance</a></h1>
       </figure>
 
-      <div class="mis-auto flex align-items-center">
-        <docs-theme-toggle class="hidden block-lg"></docs-theme-toggle>
+      <nav class="hidden block-lg text0">${globalNavItems}</nav>
+
+      <div class="mis-auto flex align-items-center text0">
+        ${isDocs
+          ? '<docs-theme-toggle class="hidden block-lg"></docs-theme-toggle >'
+          : ''}
         <article id="search"></article>
         <label
           id="navToggle"
@@ -150,8 +217,14 @@ export default function Header({ html, state }) {
     </header>
 
     <!-- mobile nav -->
-    <docs-nav
-      class="hidden-lg fixed inset-i-0 inset-be-0 pb0 overflow-auto"></docs-nav>
+    <nav
+      id="mobileNav"
+      class="hidden-lg text0 fixed inset-i-0 inset-be-0 pb0 overflow-auto">
+      ${isDocs
+        ? '<docs-theme-toggle class="block mbe-2"></docs-theme-toggle>'
+        : ''}
+      ${globalNavItems} ${path.includes('docs') ? `<docs-nav></docs-nav >` : ''}
+    </nav>
 
     <script type="module">
       import docsearch from '/_static/bundles/docsearch-js.mjs'
diff --git a/app/head.mjs b/app/head.mjs
index 4c1da27d..63a19643 100644
--- a/app/head.mjs
+++ b/app/head.mjs
@@ -3,21 +3,13 @@ import { getStyles } from '@enhance/arc-plugin-styles'
 
 /** @type {import('@enhance/types').EnhanceHeadFn} */
 export default function Head(state) {
-  const { store } = state
+  const { req, store } = state
   const { doc = {} } = store
   const { title: docTitle } = doc
 
   const title = docTitle ? `${docTitle} — Enhance` : 'Enhance'
 
-  const docsCSS = docTitle
-    ? `
-      <link rel="stylesheet" href="${arc.static('/css/docs-colors.css')}" />
-      <link rel="stylesheet" href="${arc.static('/css/docs-highlight.css')}" />
-      <link rel="stylesheet" href="${arc.static(
-        '/bundles/docsearch-css.css'
-      )}" />
-    `
-    : ''
+  store.path = req.path || ''
 
   return /* html */ `
 <!DOCTYPE html>
@@ -35,10 +27,14 @@ export default function Head(state) {
     )}">
     <link href="https://fosstodon.org/@enhance_dev" rel="me">
 
+    <link rel="stylesheet" href="${arc.static('/css/docs-colors.css')}" />
+    <link rel="stylesheet" href="${arc.static('/css/docs-highlight.css')}" />
+    <link rel="stylesheet" href="${arc.static('/bundles/docsearch-css.css')}" />
+
     <meta name="image" content="/_public/img/enhance-open-graph.png" />
     <meta name="og:image" content="/_public/img/enhance-open-graph.png" />
     <meta name="og:type" content="website" />
-    ${docsCSS}
+
     <link rel="manifest" href="${arc.static('/img/favicon/site.webmanifest')}">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -57,6 +53,20 @@ export default function Head(state) {
         font-weight: 400 900;
         font-style: italic;
       }
+
+      html,
+      body {
+        font-family: Rubik, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+        overflow-x: hidden;
+        text-rendering: optimizeLegibility;
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        html {
+          scroll-behavior: smooth;
+        }
+      }
+
     </style>
   </head>
 `
diff --git a/app/pages/index.html b/app/pages/index.html
index 0c5edfd1..cbd1db8a 100644
--- a/app/pages/index.html
+++ b/app/pages/index.html
@@ -29,78 +29,18 @@
     }
   }
 
-  html,
-  body {
-    font-family: Rubik, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-    overflow-x: hidden;
-    text-rendering: optimizeLegibility;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    html {
-      scroll-behavior: smooth;
-    }
-  }
-
   body {
     font-size: var(--landing-text-0);
   }
 
-  nav {
+  .header-wrapper {
+    display: block;
     background-color: #c9ecff;
-    background-image: linear-gradient(to bottom, hsla(0deg 0% 100% / 0.85), hsla(0deg 0% 100% / 0.35));
-    color: var(--rift);
-    z-index: 3;
-  }
-
-  .nav-content {
-    width: 85vw;
-  }
-
-  nav h1 img {
-    aspect-ratio: 56 / 51;
-    translate: 0 -6.25%;
-    width: 2.5rem;
-  }
-
-  nav a:not(.get-started) {
-    color: var(--dark-purple);
-    transition: color 0.15s ease;
-  }
-
-  nav a:not(.get-started):hover {
-    color: var(--princess);
-  }
-
-  nav a:not(.get-started):focus-visible {
-    outline-offset: 2px;
-  }
-
-  .get-started {
-    background: var(--dark-purple);
-    border-radius: 5px;
-    color: white;
-  }
-
-  .get-started:after {
-    content: '';
-    position: absolute;
-    inset: -2px;
-    box-shadow: 0 0 0 2px var(--dark-purple);
-    border-radius: 6px;
-    opacity: 0;
-    transform: scale(0.75);
-    transition: opacity 150ms linear, transform 150ms linear;
-  }
-
-  .get-started:focus {
-    outline: none;
-  }
-
-  .get-started:hover:after,
-  .get-started:focus:after {
-    opacity: 1;
-    transform: scale(1);
+    background-image: linear-gradient(
+      to bottom,
+      hsla(0deg 0% 100% / 0.85),
+      hsla(0deg 0% 100% / 0.35)
+    );
   }
 
   .clip {
@@ -169,30 +109,11 @@
   }
 </style>
 
-<nav class='pb-2 pb0-lg' id='top'>
-  <div class='nav-content mi-auto flex align-items-center'>
-    <h1 class='text0 text1-lg font-medium flex align-items-center'>
-      <img src="/_public/img/svg/enhance-axol.svg" alt="" class="inline mie-1" />
-      Enhance
-    </h1>
+<docs-symbols></docs-symbols>
 
-    <!-- .text0 needed to override body's --landing-text-0 default size -->
-    <div class='mis-auto flex align-items-center gap-1 font-medium text0'>
-      <a href='/docs' class='hidden inline-lg'>
-        Documentation
-      </a>
-      <a href='/docs/learn/showcase' class='hidden inline-lg'>
-        Showcase
-      </a>
-      <a href='/docs/learn/why-enhance' class='hidden inline-lg'>
-        Why Enhance?
-      </a>
-      <a class='relative uppercase tracking2 p-2 get-started' href='/docs'>
-        Get Started
-      </a>
-    </div>
-  </div>
-</nav>
+<div class='header-wrapper'>
+  <editorial-header id='top'></editorial-header>
+</div>
 
 <landing-intro class='block relative'></landing-intro>
 
diff --git a/app/pages/showcase.html b/app/pages/showcase.html
new file mode 100644
index 00000000..e1f72c6a
--- /dev/null
+++ b/app/pages/showcase.html
@@ -0,0 +1,28 @@
+<style scope='global'>
+  section {
+    color: var(--ateneo);
+    inline-size: var(--editorial-width);
+  }
+
+  h1 span:nth-child(2) {
+    color: var(--dark-purple);
+  }
+
+  p {
+    max-inline-size: 42ch;
+  }
+</style>
+
+<docs-symbols></docs-symbols>
+
+<editorial-header></editorial-header>
+
+<section class='mi-auto leading3'>
+  <h1 class='text3 text5-lg text-center tracking-2 leading1 mb5 mb8-lg mb10-xl'>
+    <span class='block'>Start with HTML.</span>
+    <span class='block font-semibold'>Continue with your wildest dreams.</span>
+  </h1>
+  <p class='text2-lg text-center mi-auto'>
+    With Enhance’s foundation in web standards, blazing fast performance, and peerless stability, the only limit to what you can build is your imagination.
+  </p>
+</section>
diff --git a/styleguide.json b/styleguide.json
index e7b53c78..90bef135 100644
--- a/styleguide.json
+++ b/styleguide.json
@@ -53,7 +53,8 @@
   "properties": {
     "bg-gradient": "linear-gradient(125deg, var(--orange), var(--magenta), var(--purple))",
     "docs-nav-width": "16rem",
-    "nav-height": "4rem"
+    "nav-height": "4rem",
+    "editorial-width": "max(320px - var(--space-0), 85vw)"
   },
   "queries": {
     "lg": "48em",