its-swiss 0.3.0 → 0.7.0

data/app/assets/stylesheets/its_swiss/components.css

@@ -17,12 +17,21 @@
      underneath. The mark is the application's to fill; the library only knows
      that it does not break and that the nav sits beside it. */
 
+  /* Aligned on the under edge rather than on a baseline. Every child of this
+     row is a block of one line, and a block's under edge is the baseline of
+     its last line — so aligning the edges aligns the baselines, and does it
+     by construction rather than by asking the browser where the baseline is.
+     That question has more than one answer: the mark is a block and the nav
+     is a flex container, browsers synthesize a flex container's baseline
+     differently from a block's, and one that put the two a few pixels apart
+     grew this row past its three lines and carried the error down the rest
+     of the page. Nothing here needs the answer. */
   .masthead {
     display: flex;
     flex-wrap: wrap;
-    align-items: baseline;
-    gap: var(--space-2) var(--space-4);
-    padding-block: var(--space-3) calc(var(--space-3) - var(--rule-hair));
+    align-items: end;
+    gap: var(--line) var(--space-4);
+    padding-block: var(--line) calc(var(--line) - var(--rule-hair));
     border-bottom: var(--rule-hair) solid var(--rule);
   }
 
@@ -45,8 +54,8 @@
   .nav {
     display: flex;
     flex-wrap: wrap;
-    align-items: baseline;
-    gap: var(--space-3);
+    align-items: end;
+    gap: var(--line) var(--space-3);
   }
 
   .nav a { text-decoration: none; }
@@ -64,14 +73,20 @@
   /* --- Footer -------------------------------------------------------------
      A hairline, the micro register, and whatever the application has to say
      after the page. It carries no links of its own: what belongs down there
-     is not something a library can know. */
+     is not something a library can know.
+
+     A container, not a text block: what it holds goes in a paragraph, which
+     the shell writes when it is handed plain text. Trimmed text has to be in
+     an element that is trimmed, and a footer that held text directly would
+     be in step and off the baseline in a browser that ignores the faces. */
 
   .footer {
-    margin-top: var(--space-13);
-    padding-block: calc(var(--space-3) - var(--rule-hair)) var(--space-3);
+    margin-top: var(--line-4);
+    padding-block: calc(var(--line) - var(--rule-hair)) var(--line);
     border-top: var(--rule-hair) solid var(--rule);
+    font-family: var(--face-200), var(--font-family);
     font-size: var(--size-1);
-    line-height: var(--space-3);
+    line-height: var(--line);
   }
 
   /* --- Rules --------------------------------------------------------------
@@ -87,14 +102,56 @@
      the page. Both weights fit the same box, which is why the heavy one only
      changes the drawing. */
   hr {
-    height: var(--space-1);
+    height: var(--line);
     border: 0;
     border-top: var(--rule-hair) solid var(--rule);
-    margin-block: var(--space-3) var(--space-2);
+    margin-block: var(--line) 0;
   }
 
   hr.rule--heavy { border-top-width: var(--rule-heavy); border-color: var(--ink); }
 
+  /* --- Pictures -----------------------------------------------------------
+     The hard case, and the one place the convention nearly does not transfer.
+     In print a picture is cropped to a field, and a field is a whole number
+     of lines — Müller-Brockmann sized photographs exactly that way. On screen
+     the width is fluid, so the height is a fraction of a moving number and
+     lands wherever it lands, and the column below it is off the grid for the
+     rest of the page.
+
+     round() closes that: the box is the picture's natural height taken up to
+     the next whole line, recomputed as the container resizes. The picture is
+     then fitted inside it — contain by default, because a library must not
+     crop an image it did not choose, and the leftover is at most a line of
+     space. .figure--cover crops instead, which is the Müller-Brockmann move
+     and yours to make where you own the picture.
+
+     --ratio is the application's to declare. An intrinsic ratio cannot be
+     read in CSS, and guessing one is how a picture ends up letterboxed
+     against nothing.
+
+     No @supports: where round() is unknown the declaration drops and the
+     picture takes its natural height, which is what it would have done. */
+  .figure {
+    container-type: inline-size;
+    margin-block: var(--line);
+  }
+
+  .figure > img,
+  .figure > svg,
+  .figure > video {
+    inline-size: 100%;
+    block-size: round(up, calc(100cqw / var(--ratio, 1.5)), var(--line));
+    object-fit: contain;
+    /* The space the rounding adds falls under the picture, where the grid
+       wants it, rather than being split above and below it. */
+    object-position: left top;
+  }
+
+  .figure--cover > img,
+  .figure--cover > video { object-fit: cover; }
+
+  .figure figcaption { margin-block-start: var(--line); }
+
   /* --- Table --------------------------------------------------------------
      A grid of values, ruled horizontally and not vertically: the columns are
      already held apart by the type, and a vertical rule between them draws a
@@ -107,15 +164,24 @@
 
   .table caption {
     color: var(--ink-quiet);
-    margin-bottom: var(--space-1);
+    margin-bottom: var(--line);
   }
 
+  /* A cell is the shape a control is: a line the type is set on, and a line
+     the rule closes, with the rule's width taken out of the second. Nothing
+     above the type but the cap correction, which is nothing where the faces
+     work: the type's baseline is the under edge of its line and the cell's
+     over edge is on the grid, and anything else put between the two moves
+     the baseline off it. Aligned to the top for the same reason:
+     every cell in a row starts where the row does, so every cell's first
+     baseline is one line down, and a row is as tall as its tallest cell,
+     which is whole lines. */
   .table th,
   .table td {
-    padding-block: calc(var(--space-1) + var(--cap-correction)) calc(var(--space-1) - var(--rule-hair));
+    padding-block: var(--cap-correction) calc(var(--line) - var(--rule-hair));
     padding-inline-end: var(--space-3);
     border-bottom: var(--rule-hair) solid var(--rule);
-    vertical-align: baseline;
+    vertical-align: top;
   }
 
   .table th {
@@ -145,7 +211,7 @@
     display: grid;
     grid-template-columns: max-content 1fr;
     column-gap: var(--space-3);
-    row-gap: var(--space-1);
+    row-gap: 0;
   }
 
   .pairs dt { font-weight: 700; }
@@ -157,7 +223,7 @@
     row-gap: 0;
   }
 
-  .pairs--stacked dt { margin-top: var(--space-2); }
+  .pairs--stacked dt { margin-top: var(--line); }
 
   .pairs--stacked dt:first-child { margin-top: 0; }
 
@@ -171,7 +237,7 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--space-3);
+    gap: var(--line);
     max-width: var(--measure);
   }
 
@@ -179,20 +245,24 @@
     flex-direction: row;
     flex-wrap: wrap;
     align-items: flex-end;
-    gap: var(--space-2);
+    gap: var(--line) var(--space-2);
   }
 
   .field {
     display: flex;
     flex-direction: column;
-    gap: var(--space-1);
+    gap: 0;
     width: 100%;
   }
 
+  /* On the over edge. The label is a line and the control is two, and both
+     put their baseline one line below their own top — so starting them on
+     the same line puts the label's baseline on the control's, without the
+     browser being asked where either baseline is. */
   .field--inline {
     flex-direction: row;
-    align-items: baseline;
-    gap: var(--space-2);
+    align-items: flex-start;
+    gap: var(--line) var(--space-2);
   }
 
   .field input,
@@ -206,25 +276,37 @@
     font: inherit;
     /* No padding above it: the rule belongs under the text, not a line's
        height below it, or the label reads as belonging to nothing. */
-    padding-block: 0 calc(var(--space-1) - var(--rule-hair));
+    block-size: var(--line-2);
+    /* The rule sits a whole line under the text rather than a few pixels
+       under it. A control is two lines of box: one the text is set on, one
+       the rule closes. */
+    padding-block: 0 calc(var(--line) - var(--rule-hair));
   }
 
-  /* A select takes its height from the browser rather than from the leading
-     it was given — `font: inherit` hands it the family and the size and puts
-     the line box back to normal — so it is the one control told what it is:
-     the same four baselines the others come out at. */
-  .field select { height: var(--space-4); }
-
-  .field textarea { resize: vertical; }
+  .field textarea {
+    block-size: var(--line-4);
+    resize: vertical;
+  }
 
-  /* A checkbox or a radio is the one control whose label sits beside it. */
+  /* A checkbox or a radio is the one control whose label sits beside it. On
+     the under edge: the label's under edge is its baseline, and the box the
+     browser draws then stands on that baseline the way a glyph does, at
+     whatever size the browser drew it. */
   .choice {
     display: inline-flex;
-    align-items: baseline;
-    gap: var(--space-1);
+    align-items: flex-end;
+    gap: var(--line) var(--space-1);
   }
 
-  .choice input { width: auto; border: revert; }
+  /* The browser draws this one at a size of its own, so it takes none of the
+     box a text control is given — including the two lines of height, which
+     it would otherwise wear as a 48px checkbox. */
+  .choice input {
+    inline-size: auto;
+    block-size: auto;
+    border: revert;
+    padding-block: 0;
+  }
 
   /* Refused. The accent is the whole signal here and it is a rule, not a
      fill: the field is still the field. */
@@ -234,8 +316,9 @@
 
   .field__error {
     color: var(--accent);
+    font-family: var(--face-200), var(--font-family);
     font-size: var(--size-1);
-    line-height: var(--space-2);
+    line-height: var(--line);
   }
 
   /* --- Buttons ------------------------------------------------------------
@@ -244,37 +327,61 @@
 
      Every one of them is the same box, so a row of them sits on one line and
      the only difference between them is what fills it. No radius, no shadow,
-     and the keyline is the hairline drawn everywhere else. */
+     and the keyline is the hairline drawn everywhere else.
+
+     A button is a box, not a line of type: two lines tall, on the grid, with
+     its label centred in it. The label's baseline is the one baseline in the
+     library that is not on a line, and on purpose — a button is read as a
+     shape, and a label set on the second line of a two-line box reads as a
+     field with a rule under it, which is the one thing a button must not be
+     mistaken for.
+
+     Centred by cap: a face puts the label's baseline on the under edge of
+     its line, so the line is let down by half the cap height and the cap
+     sits across the middle. Half a cap on a 64th of a pixel, because the
+     browser lays out in 64ths and snaps each padding on its own, and two
+     halves of a fraction each snapped down are a box a 64th short; rounded
+     up to the unit first, the two paddings sum to the line exactly. Where
+     the faces are not honoured the font's own metrics put the cap near the
+     middle of its line already, and the paddings are simply equal. The
+     keyline is drawn inside the box rather than laid out around it, so the
+     arithmetic is the label's line and two paddings, and nothing else. */
 
   .button {
+    --keyline: var(--rule);
+    --lift: round(up, 1cap / 2, 0.015625px);
     display: inline-block;
-    border: var(--rule-hair) solid var(--rule);
+    border: 0;
+    box-shadow: inset 0 0 0 var(--rule-hair) var(--keyline);
     background: transparent;
     color: var(--ink);
-    font-family: inherit;
-    padding-block: calc(var(--space-1) - var(--rule-hair));
+    min-block-size: var(--line-2);
+    padding-block: var(--lift) calc(var(--line) - var(--lift));
     padding-inline: var(--space-2);
     cursor: pointer;
     text-decoration: none;
   }
 
-  .button:hover { border-color: var(--ink); }
+  html.no-metric-overrides .button,
+  html.no-metric-overrides .skip-link { padding-block: var(--half-line); }
+
+  .button:hover { --keyline: var(--ink); }
 
   /* A solid block, the way a Swiss poster sets a call to action. Ink rather
      than the accent: the primary action is the one you were going to take,
      and the accent is for the one you have to be told about. */
   .button--primary {
-    border-color: var(--ink);
+    --keyline: var(--ink);
     background: var(--ink);
     color: var(--paper);
   }
 
-  .button--primary:hover { border-color: var(--ink-quiet); background: var(--ink-quiet); }
+  .button--primary:hover { --keyline: var(--ink-quiet); background: var(--ink-quiet); }
 
   /* The one filled area the accent gets, for the action a page exists to
      offer. Used once per page or not at all. */
   .button--accent {
-    border-color: var(--accent);
+    --keyline: var(--accent);
     background: var(--accent);
     color: var(--accent-ink);
   }
@@ -287,7 +394,7 @@
      because a keyboard reaches this button and touch never hovers at all. */
   .button--danger:hover,
   .button--danger:focus-visible {
-    border-color: var(--accent);
+    --keyline: var(--accent);
     color: var(--accent);
   }
 
@@ -318,7 +425,7 @@
 
   .copy {
     border: 0;
-    padding: 0;
+    padding: var(--cap-correction) 0 0;
     background: none;
     color: inherit;
     cursor: pointer;
@@ -343,13 +450,16 @@
      A run of numbers under a hairline. The current page carries weight as
      well as the accent, for the same reason the current nav item does. */
 
+  /* On the under edge, for the reason the masthead is: a run of one-line
+     blocks has a shared baseline already, and asking for one is asking a
+     question two browsers answer differently. */
   .pagination {
     display: flex;
     flex-wrap: wrap;
-    align-items: baseline;
-    gap: var(--space-1) var(--space-2);
-    margin-top: var(--space-5);
-    padding-top: calc(var(--space-2) - var(--rule-hair));
+    align-items: end;
+    gap: 0 var(--space-2);
+    margin-top: var(--line-2);
+    padding-top: calc(var(--line) - var(--rule-hair));
     border-top: var(--rule-hair) solid var(--rule);
   }
 
@@ -376,7 +486,7 @@
 
   .errors {
     width: 100%;
-    padding-top: calc(var(--space-2) - var(--rule-heavy));
+    padding-top: calc(var(--line) - var(--rule-heavy));
     border-top: var(--rule-heavy) solid var(--accent);
   }
 
@@ -384,7 +494,7 @@
 
   .errors ul {
     color: var(--ink-quiet);
-    margin-top: var(--space-1);
+    margin-top: 0;
   }
 
   .empty { color: var(--ink-quiet); }
@@ -413,10 +523,12 @@
     left: var(--space-2);
     top: var(--space-2);
     z-index: 1;
-    padding-block: calc(var(--space-1) - var(--rule-hair));
+    --lift: round(up, 1cap / 2, 0.015625px);
+    min-block-size: var(--line-2);
+    padding-block: var(--lift) calc(var(--line) - var(--lift));
     padding-inline: var(--space-2);
     background: var(--paper);
-    border: var(--rule-hair) solid var(--ink);
+    box-shadow: inset 0 0 0 var(--rule-hair) var(--ink);
     transform: translateY(calc(-100% - var(--space-4)));
   }
 

data/app/assets/stylesheets/its_swiss/faces.css

@@ -0,0 +1,204 @@
+/* Faces.
+ *
+ * Where the baseline actually comes from. A line box puts its baseline
+ * wherever the font's ascent and descent leave it: half the leading either
+ * side of the ascent-plus-descent, and then the ascent down. Those two
+ * numbers are the font file's, so every line of type on the page sat on a
+ * baseline the library had never been told and could not move, and a page
+ * that was on the grid in one font was off it in the next.
+ *
+ * These faces replace the numbers. Each one is the application's typeface —
+ * or, until the application names one, the grotesque that is on the machine
+ * — declared again with its ascent set to the leading it will be set on and
+ * its descent set to nothing. A line box is then exactly the ascent tall, the
+ * half-leading either side of it is zero, and the baseline is the under edge
+ * of the line box: a block of type ends on its last baseline, every earlier
+ * baseline is a whole number of lines above it, and none of it depends on a
+ * metric the library cannot see.
+ *
+ * One face per ratio of leading to size, because that ratio is the ascent.
+ * The ladder in tokens.css produces three: body, subhead and title are set
+ * on one and a half times their size, the small register and the section on
+ * twice it, and the subgrid puts the small register on its own size. The
+ * name is the ratio, and the number in it is the ascent-override — so an
+ * application declaring its own font under the same names (the helper
+ * its_swiss_typeface writes them) has nothing to work out.
+ *
+ * Nothing here is downloaded. src: local() is the font already on the
+ * machine, named by the names the machine knows it by, and the chain runs
+ * from the Helveticas through the system grotesques to the ones a Linux
+ * ships with. A machine with none of them falls through to --font-family,
+ * with the font's own metrics and whatever baseline they produce — the page
+ * is still readable, and still in step, and no longer registered.
+ *
+ * Each bold face names the regular ones after its own. A face whose every
+ * local() fails is a face that does not load, and the browser goes on to
+ * the next family in the list — the grotesque stack, with its own metrics —
+ * for every heading on the page, while the body stays on the grid. Falling
+ * through to the regular file instead keeps the metrics and loses the
+ * weight, which with synthesis off is a heading set regular: visible, and
+ * still registered.
+ *
+ * The application's own @font-face under these names wins: they are
+ * unlayered, and a name defined outside a layer beats one defined inside
+ * it, just as its rules do.
+ */
+
+@layer its-swiss.faces {
+  /* Body, subhead, page title: the size and a half of it again. */
+  @font-face {
+    font-family: "its-swiss-150";
+    font-weight: 400;
+    src: local("Helvetica Neue"), local("HelveticaNeue"),
+         local("Helvetica"),
+         local("Segoe UI"), local("SegoeUI"),
+         local("Arial"), local("ArialMT"),
+         local("Liberation Sans"), local("LiberationSans"),
+         local("Roboto"), local("Roboto-Regular"),
+         local("Noto Sans"), local("NotoSans-Regular"),
+         local("DejaVu Sans"), local("DejaVuSans");
+    ascent-override: 150%;
+    descent-override: 0%;
+    line-gap-override: 0%;
+  }
+
+  @font-face {
+    font-family: "its-swiss-150";
+    font-weight: 700;
+    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+         local("Helvetica Bold"), local("Helvetica-Bold"),
+         local("Segoe UI Bold"), local("SegoeUI-Bold"),
+         local("Arial Bold"), local("Arial-BoldMT"),
+         local("Liberation Sans Bold"), local("LiberationSans-Bold"),
+         local("Roboto Bold"), local("Roboto-Bold"),
+         local("Noto Sans Bold"), local("NotoSans-Bold"),
+         local("DejaVu Sans Bold"), local("DejaVuSans-Bold"),
+         /* And the regular faces after them: a machine with no bold the
+            browser can name is better served by the same face at one weight,
+            with the metrics that put it on the grid, than by another family
+            with its own. Synthesis is off, so it renders regular. */
+         local("Helvetica Neue"), local("HelveticaNeue"),
+         local("Helvetica"),
+         local("Segoe UI"), local("SegoeUI"),
+         local("Arial"), local("ArialMT"),
+         local("Liberation Sans"), local("LiberationSans"),
+         local("Roboto"), local("Roboto-Regular"),
+         local("Noto Sans"), local("NotoSans-Regular"),
+         local("DejaVu Sans"), local("DejaVuSans");
+    ascent-override: 150%;
+    descent-override: 0%;
+    line-gap-override: 0%;
+  }
+
+  /* The small register and the section: twice the size. */
+  @font-face {
+    font-family: "its-swiss-200";
+    font-weight: 400;
+    src: local("Helvetica Neue"), local("HelveticaNeue"),
+         local("Helvetica"),
+         local("Segoe UI"), local("SegoeUI"),
+         local("Arial"), local("ArialMT"),
+         local("Liberation Sans"), local("LiberationSans"),
+         local("Roboto"), local("Roboto-Regular"),
+         local("Noto Sans"), local("NotoSans-Regular"),
+         local("DejaVu Sans"), local("DejaVuSans");
+    ascent-override: 200%;
+    descent-override: 0%;
+    line-gap-override: 0%;
+  }
+
+  @font-face {
+    font-family: "its-swiss-200";
+    font-weight: 700;
+    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+         local("Helvetica Bold"), local("Helvetica-Bold"),
+         local("Segoe UI Bold"), local("SegoeUI-Bold"),
+         local("Arial Bold"), local("Arial-BoldMT"),
+         local("Liberation Sans Bold"), local("LiberationSans-Bold"),
+         local("Roboto Bold"), local("Roboto-Bold"),
+         local("Noto Sans Bold"), local("NotoSans-Bold"),
+         local("DejaVu Sans Bold"), local("DejaVuSans-Bold"),
+         /* And the regular faces after them: a machine with no bold the
+            browser can name is better served by the same face at one weight,
+            with the metrics that put it on the grid, than by another family
+            with its own. Synthesis is off, so it renders regular. */
+         local("Helvetica Neue"), local("HelveticaNeue"),
+         local("Helvetica"),
+         local("Segoe UI"), local("SegoeUI"),
+         local("Arial"), local("ArialMT"),
+         local("Liberation Sans"), local("LiberationSans"),
+         local("Roboto"), local("Roboto-Regular"),
+         local("Noto Sans"), local("NotoSans-Regular"),
+         local("DejaVu Sans"), local("DejaVuSans");
+    ascent-override: 200%;
+    descent-override: 0%;
+    line-gap-override: 0%;
+  }
+
+  /* The subgrid: the small register on a half-line, which is its own size. */
+  @font-face {
+    font-family: "its-swiss-100";
+    font-weight: 400;
+    src: local("Helvetica Neue"), local("HelveticaNeue"),
+         local("Helvetica"),
+         local("Segoe UI"), local("SegoeUI"),
+         local("Arial"), local("ArialMT"),
+         local("Liberation Sans"), local("LiberationSans"),
+         local("Roboto"), local("Roboto-Regular"),
+         local("Noto Sans"), local("NotoSans-Regular"),
+         local("DejaVu Sans"), local("DejaVuSans");
+    ascent-override: 100%;
+    descent-override: 0%;
+    line-gap-override: 0%;
+  }
+
+  @font-face {
+    font-family: "its-swiss-100";
+    font-weight: 700;
+    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
+         local("Helvetica Bold"), local("Helvetica-Bold"),
+         local("Segoe UI Bold"), local("SegoeUI-Bold"),
+         local("Arial Bold"), local("Arial-BoldMT"),
+         local("Liberation Sans Bold"), local("LiberationSans-Bold"),
+         local("Roboto Bold"), local("Roboto-Bold"),
+         local("Noto Sans Bold"), local("NotoSans-Bold"),
+         local("DejaVu Sans Bold"), local("DejaVuSans-Bold"),
+         /* And the regular faces after them: a machine with no bold the
+            browser can name is better served by the same face at one weight,
+            with the metrics that put it on the grid, than by another family
+            with its own. Synthesis is off, so it renders regular. */
+         local("Helvetica Neue"), local("HelveticaNeue"),
+         local("Helvetica"),
+         local("Segoe UI"), local("SegoeUI"),
+         local("Arial"), local("ArialMT"),
+         local("Liberation Sans"), local("LiberationSans"),
+         local("Roboto"), local("Roboto-Regular"),
+         local("Noto Sans"), local("NotoSans-Regular"),
+         local("DejaVu Sans"), local("DejaVuSans");
+    ascent-override: 100%;
+    descent-override: 0%;
+    line-gap-override: 0%;
+  }
+
+  /* Code. Inline, it is given no leading at all and so never asks the line
+     for room, and the ascent is beside the point; the descent still has to
+     be nothing, so that what the browser reports as the under edge of a run
+     of it is its baseline. As a block — a <pre> — it is set at nine tenths
+     of the body on the body's line, and five thirds of nine tenths is the
+     one and a half the body is set on. */
+  @font-face {
+    font-family: "its-swiss-mono";
+    src: local("SF Mono"), local("SFMono-Regular"),
+         local("Menlo"), local("Menlo Regular"), local("Menlo-Regular"),
+         local("Consolas"),
+         local("Cascadia Mono"), local("CascadiaMono"),
+         local("Liberation Mono"), local("LiberationMono"),
+         local("Roboto Mono"), local("RobotoMono-Regular"),
+         local("Noto Sans Mono"), local("NotoSansMono-Regular"),
+         local("DejaVu Sans Mono"), local("DejaVuSansMono"),
+         local("Courier New"), local("CourierNewPSMT");
+    ascent-override: 166.6667%;
+    descent-override: 0%;
+    line-gap-override: 0%;
+  }
+}

data/app/assets/stylesheets/its_swiss/grid.css

@@ -50,18 +50,26 @@
      Almost every horizontal arrangement in an interface is one thing: items
      on a shared baseline, a space apart, wrapping when they must. Said once
      here the way the field's tracks are, so a component below says only how
-     it differs. */
+     it differs.
+
+     Aligned on the over edge, and the baselines follow. Every item starts on
+     the line the row does, every item's baselines are whole lines below its
+     own top, so every item's first baseline is the same line — a word beside
+     a button beside a field — and the row is as tall as its tallest item,
+     which is whole lines. Asking for `baseline` instead asks the browser to
+     find one in each item, and a button, a form and a block of text are
+     three answers. */
   .run {
     display: flex;
     flex-wrap: wrap;
-    align-items: baseline;
-    gap: var(--space-2);
+    align-items: flex-start;
+    gap: var(--line) var(--space-2);
   }
 
   /* The same idea turned ninety degrees. */
   .stack {
     display: flex;
     flex-direction: column;
-    gap: var(--space-3);
+    gap: var(--line);
   }
 }

data/app/assets/stylesheets/its_swiss/reset.css

@@ -16,11 +16,16 @@
     color: var(--ink);
   }
 
-  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend, blockquote {
+  h1, h2, h3, h4, p, ul, ol, dl, dd, figure, fieldset, legend, blockquote, pre {
     margin: 0;
     padding: 0;
   }
 
+  /* A control brings a margin of its own in one browser and not another —
+     Firefox gives a textarea a pixel above and below — and a pixel above a
+     control is a column a pixel off the grid from that control down. */
+  button, input, select, textarea { margin: 0; }
+
   ul, ol { list-style: none; }
 
   fieldset { border: 0; }