/* Learn — /blog, /guides, and every article and guide under them. Four routes, one stylesheet, on the same reasoning styles/industries.css gives for its thirteen: an index and a page are two shapes, and a blog post and a guide are one shape with two labels on it. Scoped by prefix — every selector here starts `.learn-`, so nothing in this file can reach a page that does not load it. Nothing here restates a colour, a size, a radius or a duration: every value is a token from styles/tokens.css, which is what makes both themes and both grounds free. The two exceptions are `color-mix()` tints of `--fg` for a ground that has to sit a shade off the page, and hairline widths — both of which base.css already establishes as the way a tint is written here rather than as a second palette. ── The one structural decision ───────────────────────────────────────────── These pages open on **paper**, not on the black hero every other page on this site opens on. A reading surface that opens dark asks the reader to change eyes twice before the first sentence. `PAGES.blog/post/guides/guide` in build.mjs carry `bar: 'light'` for the same reason, and it is the only thing separating Learn from /industries and /faq. ── The two decisions taken on 2026-09-07 ─────────────────────────────────── Both from the same reading of the built pages, and both are corrections rather than changes of mind, so they are recorded here where the values are. **The reading column is set from `--learn-*` and not from `--measure`.** The site's measure tokens are sized for marketing copy — a paragraph beside a diagram, a standfirst under a headline — and `--measure` resolved to 528px inside `.learn-body`. 528px is right for a page a reader scans and wrong for one they stay inside for four thousand words: the column was narrower than the heading above it, every table was narrower than the prose it explained, and the whole article read as a sidebar. The four widths are declared once, immediately below, and the argument for each number is there. **The editorial accent is `--info`, not `--accent`.** Every one of the ten places this file marked with the accent token — `#f15a2a` — now takes the blue. Not a repaint of the site: `--accent` is still the accent on /product-cost-estimator, on /suppliers and on the home page, where it carries human expert judgment, and Learn was borrowing a meaning it does not have. `--info` is the semantic blue (`var(--route)`, `#2855F6`), documented at 5.7:1 on white at the head of tokens.css, already the blue of this site's interactive surfaces, and already in this file on `.learn-callout--note`. It was chosen over `--lot-blue` (`#2b8fc2`) on contrast — 3.61:1 fails AA for the 12px label and the inline-link underline this has to carry — and over raw `--route`, which is a palette entry with no dark-theme rebinding of its own. The swap is one for one: no element that was neutral became coloured. */ /* ── The widths ────────────────────────────────────────────────────────────── Declared on the four Learn blocks rather than on `:root`, so nothing outside a Learn page can inherit them — the same scoping the class prefix gives everything else here. `--learn-head` 900px. The article's h1, in the hero. It replaced `26em`, which at a 46px display size is 1196px and therefore no cap at all inside a 1240px shell. 900 is a heading of two lines for a title of ten words in either language, which is what the hero is for. `--learn-measure` 720px. The reading column, and the bottom of the 720–800px the brief asks for — chosen at the bottom, not the middle, for the reason in the paragraph below. `--learn-wide` 980px. The breakout cap, for a table or a comparison block. Wider than the prose by 260px so the relationship reads as deliberate, and short of the 1240px shell so a row's last cell is still findable from its first. Since 2026-09-07 it is a cap and not the width: on an article with a rail the main track is narrower than 980 and wins. `--learn-t-body` 18px. Body copy, up from the site's 16.5px, and the top of the 17–18 the brief allows. A column 36% wider at an unchanged size is denser rather than more readable, which is the failure mode this token exists to prevent. Learn-local, not a change to `--t-body`: the marketing pages are set on 528px and 16.5px is right there. `--learn-rail` 216–272px. The section-index column added on 2026-09-07. See below. `--learn-rail-gap` 28–52px. The gutter between the reading column and that rail. Wide enough that the rail reads as a separate object and not as a hanging indent of the prose. ── The measured line, and what it costs ───────────────────────────────── Worth writing down rather than leaving for the next person to rediscover. The display face averages 0.465em per character here, so the reading column runs about **86 characters** — measured with a `Range` over the built Dutch article, not estimated. That is past the 60–68 `--measure` is documented for and past the 75–80 usually given as the ceiling for continuous text. It is the best available inside the brief, and the brief is right about the defect it was fixing: 528px was narrower than the h1 above it and narrower than every table it explained. Getting to 80 characters *and* keeping 720px would take 19.5px type; getting there at 18px would take a 620px column, which is the defect again. So the column is pinned at the low end of the range and the size at the high end — the pair that minimises the line inside what was asked for — and the leading does the rest: `line-height: 1.7` on 18px is 30.6px, which is what returns the eye reliably to the start of a long line. Moving either number outside its range is a decision for whoever asked for this range, not one to take quietly here. ── 2026-09-07: the width was used, and the measure was NOT ────────────── The request, verbatim: "de blogs en guides moeten iets meer gebruik maken van de breedte van de pagina" — the blog and guide pages should make somewhat more use of the page width. Looked at on a ~2000px monitor, a 17-minute guide had two defects, both measured before anything moved: 1. Two vertical axes. Breadcrumb, h1, KORT GEZEGD callout and the meta line all began at the shell's left edge; the first body paragraph began **260px to their right**, because `.learn-body` was a symmetric three-track grid centring a 720px column in a 1240px shell. 260px at 2000 and at 1440; 100.8px at 1024. 2. The right half of the viewport was blank for the whole length of the article. Read the first defect as the cause of the second and there is exactly one honest fix: the reading column moves to the shell's left edge, and the space it stops wasting becomes a real column. `.learn-body` is now two tracks — `min(--learn-measure, 100%)` then `minmax(0, 1fr)` — and `.learn-layout` puts a sticky section index in the freed track. The axis spread is 0 at every width. **The measure did not change, and must not be "fixed" by stretching it.** This is the trap: the page now looks like it has room for a wider column, and it does not. 720px already runs ~86 characters, which is past the ceiling in the paragraph above — the whole point of the two-track grid is to spend the freed width on a *second object* rather than on a longer line. Widening `--learn-measure` to fill the main track would put body copy at ~109 characters and reintroduce, worse, the defect these tokens exist to prevent. If a future brief really wants a wider reading column, it has to buy it with type size, and that is a decision for whoever writes the brief. The same argument is why the callouts, the numbered step lists, the checklists and the formula were *not* given `.learn-wide` even though the layout would let them span both tracks: they are prose, and prose at the main track's width is the 109-character line again. The formula in particular looks like a candidate and is not — see the `formula` arm of `learnBlock` for the measurement that settled it. What did get the breakout is what gains from width without carrying a measure: tables, comparison grids and the four generated end sections. Below `1000px` the rail collapses to a bordered box above the article and `.learn-body` is a single column, so the phone layout is what it was. Between 1001 and ~1075px the main track is narrower than 720 and the measure narrows with it, to ~655–720px — that is `min()` doing its job, it is *fewer* characters per line, and it is the only band where the rendered measure is not exactly 720. None of these is imposed on a phone. They are all `max-width` or a `min()` track, so below ~800px the column is the viewport minus `--gutter` and the type is unchanged — the one thing a reading page must not do at 375px is shrink to keep a desktop measure. */ .learn-hero, .learn-top, .learn-body-band, .learn-prose { --learn-head: 900px; --learn-measure: 720px; --learn-wide: 980px; --learn-t-body: 18px; --learn-rail: clamp(216px, 20vw, 272px); --learn-rail-gap: clamp(28px, 3vw, 52px); } /* ── The index hero ───────────────────────────────────────────────────────── Shorter than /industries' and /faq's, and deliberately. Those two open on a full screenful of black because the hero *is* the statement; an index whose job is to get the reader into a list should spend less of the first screen on itself. Same top offset — the bar's height plus air — so the three still read as one site. */ .learn-hero { padding: calc(var(--topbar-h) + clamp(44px, 6vh, 80px)) var(--gutter) clamp(32px, 4vh, 52px); background: var(--bg); color: var(--fg); } .learn-hero .eyebrow { margin-bottom: clamp(16px, 2vw, 24px); } .learn-hero h1 { font-size: var(--t-display); max-width: 20em; margin-bottom: clamp(16px, 2vw, 26px); } .learn-hero .lead { max-width: var(--measure-lead); } /* ── The filter row ───────────────────────────────────────────────────────── Chips, in the canonical order content/learn/validate.mjs declares, with `All` first. They are `