/* Vibetiles: the reader's choices, spent on core WordPress markup. * * THE OTHER THREE GUEST SHEETS DRAW THE PANEL. This one is the only sheet the * plugin has that touches the page it landed on, so it is the only one with a * rule that can be wrong about somebody else's design. Two things keep it * honest, and both are checkable rather than promised: * * 1. It is THE ROLE TABLE and nothing else. The panel has carried eight * roles since 2026-09-17 (reading-panel.js ROLE_META), each one an area * of the page with its own face, weight, size, spacing and case. On * Architrave each role binds its tokens to Architrave's own parts. Here * it binds the same tokens to the core blocks a plain theme prints. So * the reach is the reader's, decided area by area on Typography, and not * one setting of ours. A guest carries THE READER'S CHOICES, never * Architrave's design: nothing in here is a look, every line is a dial. * * 2. EVERY SINGLE RULE IS GATED ON AN ATTRIBUTE. Not one declaration in this * file applies until `data--` is on the root, and presets.js * writes that only where the reader has moved that dial away from its * rest. A page nobody has touched is its own theme's page, and that is * mechanically checkable: every selector here begins `:root[data-`. * * WHY ATTRIBUTES AND NOT FALLBACKS. On Architrave a role's rule carries the * theme's own value as its fallback, because Architrave IS the theme. A guest * has no such value. `inherit` is not what a host gives its headings, `none` is * not necessarily its text-transform, and there is no way to say "whatever this * theme would have used" in CSS. Worse, four of the eight faces are written on * the root even at rest (--head-face, --small-face, --comment-face, * --title-face, measured on stock Twenty Twenty-Five), so the presence of a * property is not a choice. presets.js knows which dials the reader has * actually moved and, where the panel is a guest, writes that out for these * rules to gate on. * * NO SIZE IS SET HERE. A size dial is a multiplier and needs the element's own * size to multiply, and CSS cannot ask an element how big it already is. * `calc(1em * factor)` looks like the answer and is not: in a `font-size`, `1em` * is the PARENT's size, so on any element that carries its own the rule throws * that size away, which took the post title from 48px to 22px and the date from * 14px to 22px. Every size, the roles' rows and the A/A stepper both, is read * and written by assets/js/guest-size.js, which can ask the browser. The * stepper's ratios are generated at the foot of this file, one for each part of * the article, out of the theme's own ladder. * * THE ADDRESSES were measured by reading a stock Twenty Twenty-Five page, not * guessed. Seven roles have somewhere to land. The eighth, Interface titles, is * the titled sections of Architrave's rail and a plain theme has none. * * EVERY DIAL WINS, WITH !important. It was font-family alone at first, because * core prints a block's own font-family preset with its own !important, and * every other property was left to lose against a host that is more specific. * Measured 2026-09-22, that lost the Category line's weight to an inline * `font-weight: 300` the block editor had written on the terms block, and a * dial the reader has moved that changes nothing is the one thing this sheet * is for. Every rule here is gated on a press, so "the reader asked for it" * is what !important says; on an untouched page not one applies. */ /* ── A look's own scale ─────────────────────────────────────────────────── Under any tile but the theme's own (`data-chosen`) the article takes Architrave's line spacing and the title its tightening, as it takes Architrave's sizes from guest-size.js; a look is its whole type system, not its faces alone (Manuel, 2026-09-22: "how can we make it look more like on Elmastudio?"). These stand FIRST so that a role's own dial, written below at the same weight, wins. The reading text's line spacing is with its dial. */ :root[data-chosen] :is(.wp-block-post-title, .entry-title):not([data-ldp-designed]) { line-height: var(--line-height-article-title, 1.12) !important; letter-spacing: var(--tracking-tight, -0.025em) !important; text-wrap: balance; } :root[data-chosen] :is(.wp-block-heading, .wp-block-post-content :is(h1, h2, h3, h4, h5, h6), .entry-content :is(h1, h2, h3, h4, h5, h6)):not([data-ldp-designed]) { line-height: var(--line-height-article-heading, 1.25) !important; } /* ── Reading text ───────────────────────────────────────────────────────── The paragraphs of the article, and the excerpts on an index. Its face is the panel's own reading-face dial, so it gates on `data-face`, which a guest writes for every face including the default (reading-face.js). */ :root[data-face] :is(.wp-block-post-content, .entry-content, .wp-block-post-excerpt) { font-family: var(--font-reading) !important; } :root[data-read-weight] :is(.wp-block-post-content, .entry-content, .wp-block-post-excerpt) { font-weight: var(--read-weight) !important; } :root:is([data-leading], [data-chosen]) :is(.wp-block-post-content, .entry-content, .wp-block-post-excerpt) { line-height: var(--text-reading-body-line-height) !important; } :root[data-read-caps] :is(.wp-block-post-content, .entry-content) :is(p, li) { text-transform: var(--read-case) !important; } :root[data-read-tracking] :is(.wp-block-post-content, .entry-content) :is(p, li) { letter-spacing: var(--reading-tracking) !important; } :root[data-read-words] :is(.wp-block-post-content, .entry-content) :is(p, li) { word-spacing: var(--reading-word-gap) !important; } /* ── THE PAGE'S TWO AREAS ───────────────────────────────────────────────── (Manuel, 2026-09-24, Neve FSE's front page under Classic: the headings in Newsreader and the line under them still in the theme's sans. "It seems like a general problem … we have to find a holistic solution. Think of all the other patterns we haven't seen.") The reading text had one address, the inside of a post. A page built from patterns, a landing page, an about page, a theme's demo sections, has its paragraphs outside any post, and the reading face never reached them. No pattern's classes can be listed, because the next theme's are not known. What every block theme shares is the frame WordPress itself draws: its header and footer template parts are rendered as
and