update

picker/pages/index.astro

@@ -49,7 +49,7 @@ const questions = [
     step: 'Motion',
     slug: 'motion',
     name: 'motion-energy',
-    title: 'How much movement should this design have?',
+    title: 'How much movement should it have?',
     legend: 'Motion energy',
     cta: 'Select motion energy',
     previewClass: 'picker-preview-motion',

picker/styles/screens/layout.css

@@ -31,7 +31,11 @@
    content box is the page width, so spans hold there; the gallery sits inside
    one editorial track, so its gutter is scaled by that track's share. The
    ladder runs to ten because the widest gallery track is a ten-column one,
-   and each answer's gallery gutter is derived from the number here. */
+   and each answer's gallery gutter is derived from the number here.
+
+   These are the numbers for a page that takes the whole field. Editorial
+   takes eleven of the field's twelve columns and re-fits the same ladder to
+   its own width, in its own block below. */
 [data-carry] {
   --pvs-gut: 1.6%;
   --pvs-w1: 6.8667%;
@@ -79,24 +83,35 @@
 
    Mixed from the artboard's own ink so the field survives a drenched ground,
    and kept under the page so nothing is read through it. */
+
+/* The field is nailed to six and six and carries its own twelve columns
+   rather than reading the answer's margins and the ladder above. A measure
+   that re-fits itself to whatever page is on it is not a measure: the origin
+   and the column width would both follow the answer, and four pages each
+   checked against a ruler cut to fit would be four pages checked against
+   nothing. The instrument is the same one under all four. What moves is the
+   page standing on it, which is the whole of what this screen is asking. */
 .picker-preview-layout .ps-desktop {
   position: relative;
   isolation: isolate;
 }
 
 .picker-preview-layout .ps-desktop::before {
-  --pvs-mark: calc(var(--pvs-w1) + var(--pvs-gut) / 2);
+  --pvs-field-col: 6.8667%;
+  --pvs-field-gut: 1.6%;
+  --pvs-mark: calc(var(--pvs-field-col) + var(--pvs-field-gut) / 2);
 
   content: "";
   position: absolute;
   z-index: -1;
-  inset: 0 var(--pvs-gutter-end) 0 var(--pvs-gutter);
+  inset: 0 6%;
   background-image: repeating-linear-gradient(
     to right,
     transparent 0 calc(var(--pvs-mark) - 0.5px),
     color-mix(in oklab, var(--pvs-ink) 17%, transparent)
       calc(var(--pvs-mark) - 0.5px) calc(var(--pvs-mark) + 0.5px),
-    transparent calc(var(--pvs-mark) + 0.5px) calc(var(--pvs-w1) + var(--pvs-gut))
+    transparent calc(var(--pvs-mark) + 0.5px)
+      calc(var(--pvs-field-col) + var(--pvs-field-gut))
   );
   pointer-events: none;
 }
@@ -167,22 +182,46 @@
 }
 
 /* ── Editorial ───────────────────────────────────────────────
-   Uneven margins, a standing text column at seven against a portrait at five,
-   a single column of section copy beside a ten-column gallery, and a hero
+   Uneven margins, a standing text column at seven against a portrait at four,
+   a single column of section copy beside a nine-column gallery, and a hero
    band that takes most of the page. Still every edge on a line: this is the
    grid used with nerve, not abandoned. Copy hangs from the top of each band
-   the way a column of text hangs from a rule. */
+   the way a column of text hangs from a rule.
+
+   The wide left margin is a whole column of the field rather than a round
+   number of its own: the page starts where the second column starts and ends
+   where the field ends, so it keeps eleven of the twelve. An answer is
+   allowed to spend fewer columns than the page has. It is not allowed to
+   spend them at a size the measure does not recognise, which is what a
+   margin picked for its look does. */
 #picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="editorial"]) .picker-preview-layout,
 :where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="editorial"]:checked)) [data-carry] {
-  --pvs-gutter: 11%;
-  --pvs-gutter-end: 4%;
+  --pvs-gutter: 13.4507%;
+  --pvs-gutter-end: 6%;
+  /* The ladder above, re-fitted. A column and a gutter are the same number of
+     pixels here as under the other three answers and a larger share of a page
+     one column narrower, so every span still stops on a drawn line. The
+     answer is written the way it was: --pvs-w7 against the rest is still a
+     seven, now a seven of eleven. */
+  --pvs-gut: 1.748%;
+  --pvs-w1: 7.5018%;
+  --pvs-w2: 16.7516%;
+  --pvs-w3: 26.0015%;
+  --pvs-w4: 35.2513%;
+  --pvs-w5: 44.5011%;
+  --pvs-w6: 53.7509%;
+  --pvs-w7: 63.0007%;
+  --pvs-w8: 72.2505%;
+  --pvs-w9: 81.5004%;
+  --pvs-w10: 90.7502%;
   --pvs-hero-cols: var(--pvs-w7) minmax(0, 1fr);
   --pvs-hero-gap: var(--pvs-gut);
   --pvs-editorial-cols: var(--pvs-w2) minmax(0, 1fr);
   --pvs-editorial-gap: var(--pvs-gut);
-  /* A lead card at four columns against three of two, in a ten-column track. */
-  --pvs-gallery-cols: 32.2667fr 15.3333fr 15.3333fr 15.3333fr;
-  --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 83.0667);
+  /* A lead card at three columns against three of two, in a nine-column
+     track. */
+  --pvs-gallery-cols: 26.0015fr 16.7516fr 16.7516fr 16.7516fr;
+  --pvs-gallery-gap: calc(var(--pvs-gut) * 100 / 81.5004);
   --pvs-section-align: start;
   --pvs-rows: 8% 57.5% 8.5% 18.5% 7.5%;
   --pvs-phone-gutter: 11%;
@@ -193,7 +232,9 @@
 
 /* ── Freeform ────────────────────────────────────────────────
    Columns of no particular relation, and blocks that leave the field. The
-   escapes are listed under the drift flag below. */
+   margins are the first thing off it: the page hangs past the measure on the
+   left and stops short of it on the right, before a single block has moved.
+   The escapes are listed under the drift flag below. */
 #picker-form:has(.picker-strategy-option:hover input[name="layout-structure"][value="freeform"]) .picker-preview-layout,
 :where(#picker-form:not(:has(.picker-strategy-option:hover input[name="layout-structure"])):has(input[name="layout-structure"][value="freeform"]:checked)) [data-carry] {
   --pvs-gutter: 3.5%;