/* ---- THE SCALE: every space, radius, border and mono face on this page is spent from here ---
         Nothing below this block writes a px SPACING or px RADIUS of its own (see notes.md, "Spacing
         scale"). The px left below are NOT spacing and each one is named: a font size (its own axis,
         and a clamp() mixes it with vw), the `font:` shorthand on body, and the mark's own 28px box.
         A new element takes a step, or sits inside a container that already spaces its children;
         it does not get a margin of its own. Colours stay in /theme.css (loomd's), not here. */
      :root {
        --sp-1: 8px;   /* inside a control; a label to the thing it labels */
        --sp-2: 12px;  /* between siblings of one group; a card's inner padding */
        --sp-3: 16px;  /* between paragraphs of one block */
        --sp-4: 24px;  /* between the blocks of one section */
        --sp-5: 48px;  /* between sections; the page's own rhythm */
        --radius: 14px;       /* a card */
        --radius-sm: 10px;    /* a control inside a card: the command box, the button */
        --radius-pill: 999px; /* a tag: a pill rounds fully, so it has no corner to spend a card radius on */
        --hair: 1px solid var(--line, GrayText);
        --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        --fs-sm: var(--fs-ui, 14px);   /* chrome you operate: nav, commands, buttons, facts */
        --fs-xs: 13.5px;               /* the smallest print: a label, a status line, the footer */
      }
      /* ---- ONE PLACE FOR EVERY COLOUR: loomd's variables, with Canvas fallbacks ---------------- */
      body {
        margin: 0;
        background: var(--bg, Canvas);
        color: var(--fg, CanvasText);
        font: 16px/1.55 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
        -webkit-text-size-adjust: 100%;
      }
      .wrap { max-width: 62rem; margin: 0 auto; padding: var(--sp-4) var(--sp-3) calc(var(--sp-5) + var(--sp-4)); }

      /* ---- THE STACK: the vertical rhythm belongs to the CONTAINER, never to the child ---------
         A container carries stack-N and every pair of adjacent children inside it is --sp-N apart.
         A child writes no margin of its own, so nothing needs a `.a + .b` patch when a block is
         added, moved or removed. To get two different gaps in one place, GROUP the children that go
         together into a wrapper that is itself a stack (a platform label + its command is one unit). */
      .stack-1 > * + * { margin-top: var(--sp-1); }
      .stack-2 > * + * { margin-top: var(--sp-2); }
      .stack-3 > * + * { margin-top: var(--sp-3); }
      .stack-5 > * + * { margin-top: var(--sp-5); }
      h1, h2, p { margin: 0; }
      /* the muted colour, spent in ONE rule: a new muted element is added to this list, not given a colour */
      .dim, a:hover, header .tag, .lede2, .facts, .trait .k, .say, footer {
        color: var(--dim, GrayText);
      }
      a { color: inherit; }
      code { font-family: var(--mono); font-size: 0.94em; }

      /* ---- THE TOP ROW: the mark, the name, and two in-page anchors ---------------------------- */
      header { display: flex; align-items: center; gap: var(--sp-1); }
      header img { display: block; width: 28px; height: 28px; }
      header .word { font-weight: 650; letter-spacing: -0.01em; font-size: 17px; }
      header .tag {
        font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
        border: var(--hair); border-radius: var(--radius-pill); padding: 0.18em var(--sp-1);
      }
      header nav { margin-left: auto; display: flex; gap: var(--sp-2); font-size: var(--fs-sm); }
      /* nowrap: at 414px a two-word label broke into two lines and pushed the row taller than the
         mark. One-word labels fit beside the wordmark at every width we render. */
      header nav a { white-space: nowrap; }

      /* ---- THE ONE SENTENCE ------------------------------------------------------------------- */
      h1 {
        font-size: clamp(27px, 6vw, 44px); line-height: 1.12; letter-spacing: -0.022em;
        max-width: 22ch; font-weight: 700;
      }
      .lede { font-size: clamp(17px, 2.4vw, 20px); max-width: 56ch; }
      .lede { font-weight: 560; letter-spacing: -0.005em; text-wrap: balance; }
      .lede2 { font-size: clamp(15px, 2vw, 17px); max-width: 60ch; line-height: 1.55; }
      .facts { font-size: var(--fs-sm); }

      h2 { font-size: 20px; letter-spacing: -0.01em; }
      p { max-width: 68ch; }

      /* ---- THE TRAITS: his word as the label, one sentence under it ---------------------------- */
      .traits {
        display: grid; gap: var(--sp-2);
        grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
      }
      .trait {
        border: var(--hair); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
        background: var(--panel, transparent);
      }
      .trait .k {
        display: block; font-family: var(--mono);
        font-size: var(--fs-xs); letter-spacing: 0.01em;
      }
      .trait p { font-size: 15px; }
      /* ---- ONE LABEL PER PLATFORM: the label belongs to the command under it, so a reader
         knows which machine a line is for without reading the line. ---- */
      .plat { font-size: var(--fs-sm); font-weight: 650; }

      /* ---- INSTALL: a card that says out loud that it is not live ----------------------------- */
      .card {
        border: var(--hair); border-radius: var(--radius); padding: var(--sp-2) var(--sp-3);
        background: var(--panel, transparent); max-width: 42rem;
      }
      .crow { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
      pre {
        margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); flex: 1 1 17rem; min-width: 0;
        border: var(--hair); overflow-x: auto;
        font-family: var(--mono); font-size: var(--fs-sm);
        white-space: pre; line-height: 1.5;
      }
      button {
        font: inherit; font-size: var(--fs-sm); color: inherit; background: transparent;
        border: var(--hair); border-radius: var(--radius-sm); padding: var(--sp-1) var(--sp-3);
        cursor: pointer;
      }
      button:hover { border-color: var(--fg, CanvasText); }
      .say { font-size: var(--fs-xs); min-height: 1.2em; }
      /* THE TWO NOTE LINES ARE OFF THE PAGE (owner, 2026-10-10): "`loom` is the formula this
         installs - not the cask of the same name ..." and "`SHA256SUMS` from the release is what the
         Linux script checks both binaries against ..." were DELETED, element and all, and the `.alt`
         rules went with them rather than being left orphaned. Their FACTS live in the rules comment
         above and in notes.md; nothing on the page replaced them, and nothing may be put back on the
         strength of the old text. THE TRAP THAT GOES WITH THEM, kept because it cost a render: `.alt`
         was a FLEX row, and a `<code>` chip inside a flex row starts its own line. Whatever carries a
         note under a command next must NOT be a flex row. (`button.mini` was DELETED in the spacing pass: it was dead, and its padding 4px 9px /
         radius 8px were the last px literals below the scale and neither is a step. Put it
         back only with a step from the scale.) */

      footer {
        padding-top: var(--sp-3); border-top: var(--hair);
        font-size: var(--fs-xs);
      }

/* THE LANGUAGE SWITCH, in both pages. It is a nav link like any other -- only separated, so the
   three section links stay one group and this one reads as "the same page, other language". */
nav .lang {
  margin-left: 0.6rem;
  padding-left: 0.6rem;
  border-left: 1px solid currentColor;
  opacity: 0.75;
}