:root{
  /* Aubergine, the Auge Labs palette, after Ubuntu's: a dark aubergine ground, warm greys
     for everything normal, and colour only where it means something. Lilac is what is
     measured and settled, Ubuntu orange is what needs a person, crimson is a fault. The same
     tokens are in site/auge.css and auge_plant/console.html; keep them equal. */
  --bg:#140b12; --panel:#1c1119; --panel2:#231621; --line:#2f1f2c; --line2:#47313f;
  --ink:#f7f2f5; --read:#dacdd5; --dim:#ad9ca8; --faint:#7f6d7a;
  --ok:#c9a2e0; --raw:#e95420; --fail:#ff4d6d; --cool:#aea79f; --warn:#e95420;
  --ok-soft:color-mix(in srgb,var(--ok) 9%,var(--panel)); --ok-line:color-mix(in srgb,var(--ok) 40%,var(--panel));
  --raw-soft:color-mix(in srgb,var(--raw) 9%,var(--panel)); --raw-line:color-mix(in srgb,var(--raw) 40%,var(--panel));
  --fail-soft:color-mix(in srgb,var(--fail) 8%,var(--panel)); --fail-line:color-mix(in srgb,var(--fail) 40%,var(--panel));
  /* One family carries the whole page, the way an instrument panel is one family: Figtree for
     everything that is read, Fragment Mono for everything that is a tag, a number or a reading.
     Fragment Mono ships in a single weight, so emphasis in the technical text is done with
     colour and tracking rather than a synthesised bold. */
  --sans:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"Fragment Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --gut:clamp(22px,5vw,88px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:16px;line-height:1.62;-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums}
h1,h2,h3{font-weight:600;margin:0;letter-spacing:-.028em}
p{margin:0}
a{color:inherit}
.tnum{font-variant-numeric:tabular-nums}
/* The page used to be a 1180px column centred on the screen, which on a wide monitor is a
   narrow ribbon with six hundred pixels of black either side. The container now grows with the
   viewport and only the *text* is held to a readable measure, which is a different thing from
   holding the layout to one. */
.wrap{max-width:min(2200px,94vw);margin:0 auto;padding:0 var(--gut)}

/* Two tracks. The reading column stays at a readable width and the margin carries the
   numbers, so a claim and its evidence sit side by side instead of interrupting each other.
   Below 1080px there is no margin to use, so a note becomes a block in the flow with a rule
   down its left, which is what it would have been anyway. */
.wide{max-width:min(2200px,94vw);margin:0 auto;padding:0 var(--gut)}
@media(min-width:1080px){
  .wide{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:56px;
    align-items:start}
  .wide>*{grid-column:1}
  .wide>.side{grid-column:2;margin-top:6px}
  .wide>.side+*{margin-top:0}
}
.side{font-size:12.5px;line-height:1.68;color:var(--dim);border-left:2px solid var(--line2);
  padding-left:14px;margin:18px 0}
.side b{display:block;font-family:var(--mono);font-size:19px;color:var(--ok);
  letter-spacing:-.02em;margin-bottom:5px}
.side em{font-style:normal;color:var(--read)}
section{border-top:1px solid var(--line)}
section>.wrap{padding-top:clamp(64px,9vw,132px);padding-bottom:clamp(64px,9vw,132px)}
.eyebrow{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.15em;
  color:var(--faint)}
.h2{font-size:clamp(27px,3.9vw,46px);line-height:1.1;font-weight:640;letter-spacing:-.034em;
  max-width:23ch;margin-top:20px;text-wrap:balance}
.lede{font-size:clamp(16px,1.35vw,18px);color:var(--read);line-height:1.75;max-width:60ch;
  margin-top:24px}
.lede b{color:var(--ink);font-weight:600}

/* --- shared beyond the tokens: the schematic language, used on every page --- */
.sch{width:100%;height:auto;display:block}
.sch .blk{fill:var(--panel2);stroke:var(--line2)}
.sch .blk.hot{fill:var(--raw-soft);stroke:var(--raw-line)}
.sch .pipe{fill:none;stroke:var(--line2);stroke-width:1.4}
.sch .pipe.dash{stroke-dasharray:3 4}
.sch text{font-family:var(--mono);font-size:8.5px;fill:var(--dim)}
.sch text.t{fill:var(--read)}
.sch .inst{fill:var(--ok)}
.sch .inst.bad{fill:var(--fail)}
/* flow moves along the pipes, and an instrument that stopped reading blinks. Both are the
   only motion on the page, because motion that does not mean something is noise. */
.sch .flow{stroke:var(--ok);stroke-width:1.6;fill:none;opacity:.55;
  stroke-dasharray:5 11;animation:drift 2.6s linear infinite}
@keyframes drift{to{stroke-dashoffset:-32}}
.sch .inst.bad{animation:gone 1.9s ease-in-out infinite}
@keyframes gone{0%,100%{opacity:.9}50%{opacity:.18}}
.sch .trace{fill:none;stroke:var(--ok);stroke-width:1.6;
  stroke-dasharray:640;stroke-dashoffset:640;animation:draw 5s ease-out forwards}
.sch .trace.hot{stroke:var(--fail)}
@keyframes draw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .sch .flow,.sch .inst.bad{animation:none}
  .sch .trace{animation:none;stroke-dashoffset:0}
}


/* A table is the one thing on a page that will not shrink: its columns have content widths
   and below those it simply sticks out, dragging the whole document sideways with it. Found
   by rendering the page at 390px and measuring, after it had been declared phone-safe by
   reading the stylesheet.

   Making the table scroll in its own box was the first attempt and it failed: the rows kept
   their max-content width and painted straight out of the scroll box, so the document was
   687px wide on a 390px screen anyway. A five column comparison is unreadable at that size
   regardless, so on a phone each row becomes its own small block and every figure carries
   the column heading next to it. Nothing scrolls sideways because nothing is a table. */
@media(max-width:700px){
  /* template.html sets min-width:620px so the five columns keep their shape on a desktop;
     once the table is no longer a table that floor is what was still forcing the page wide */
  .tbl table,.tbl tbody,.tbl tr,.tbl td{display:block;width:auto;min-width:0}
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tbl tr{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-top:12px}
  .tbl tr.miss{border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
  .tbl td{border:0;padding:3px 0;text-align:left}
  .tbl td[data-label]:not(:first-child){display:flex;justify-content:space-between;gap:16px}
  .tbl td[data-label]:not(:first-child)::before{
    content:attr(data-label);color:var(--read);font-size:13px;font-weight:400;letter-spacing:0;
    flex:0 0 auto}
  /* "0.85 and clear of the baseline" is a sentence, not a figure: it has to be allowed to
     wrap under its own label rather than push the row wide */
  .tbl td[data-label]:not(:first-child){flex-wrap:wrap}
  .tbl td:first-child{font-weight:600;margin-bottom:8px}
}


/* A heading's measure has to scale with its own size. A cap written in characters for a 27px
   font becomes fifteen characters a line at 46px, which is how a sentence ends up stacked one
   word per line and looking like a ransom note. Rendering it at 2400px and measuring found an
   h2 684px wide and 860px tall: seventeen lines for one sentence.

   Inside a headband the grid column is already the measure, so the character cap is dropped
   entirely there and the column does the work. */
.h2{max-width:min(24ch,100%)}
.headband .h2,.heroband h1{max-width:none}
.headband .lede{max-width:56ch}
@media(min-width:1100px){
  /* the heading column gets the larger share, because a heading at 46px needs more room per
     line than body text at 16px does. display:grid belongs here and not above: below 1100px
     the two have to stack, which is what a phone needs. */
  .headband{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,96px);align-items:end}
  .headband .h2{grid-column:1;margin-top:0}
  .headband .lede{grid-column:2;margin-top:0;max-width:none}
  .headband .kicker{grid-column:1/-1}
}


/* A terminal transcript is the other thing that will not shrink. Its lines are monospace and
   aligned in columns, so wrapping them destroys the very thing they are showing: at 390px the
   install figure was 654px wide and dragged the document sideways with it. Unlike a table it
   genuinely wants to stay one line per line, so here scrolling inside its own box is the right
   answer rather than the lazy one, and the type drops a little so most lines fit without it. */
@media(max-width:700px){
  .fig{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fig>*{min-width:max-content}
  .instfig{font-size:11px}
}


/* The closing paragraph of a section was the last thing still sitting as a narrow ribbon
   against a wall of black: measured at 2400px it reached 31% of the band and ran six lines
   down. Stretching the line instead would be worse, because a line of 140 characters is
   unreadable no matter how much space there is to put it in.

   So it flows into columns. The column width is set in characters, not in fractions, which
   means the browser fits as many readable columns as the screen allows: two at 1500px,
   four on a very wide monitor. The measure never changes, only how many of them there are.

   34ch is not a guess. Sweeping the breakpoint and the column width and measuring the real
   column of every such paragraph from 1500px to 3200px, it is the pair that never leaves a
   line longer than 55 characters and never falls back to one column that runs the full band,
   which is the failure the columns exist to prevent.

   The selector names the band as well as the paragraph. index.html carries its own style
   block after this sheet, where .cap2 caps the measure at 64ch, and two single class rules
   of equal weight are settled by whichever comes last. Naming the band wins on specificity
   instead of on ordering, which also keeps the rule working on the sector pages. */
@media(min-width:1500px){
  .wrap .cap2,.wrap .proof{max-width:none;column-width:34ch;
    column-gap:clamp(48px,4.5vw,104px);column-rule:1px solid var(--line2)}
}