. Corrected 3 September 2026 after looking at the rendered page. Putting the band on

looked right in the abstract and was wrong on screen, because

does not only contain the reading column — on every article and page its first child is header.vovn-dossier, the dark hero band, which editorial-visual-system.css builds as a FULL-BLEED object: a gradient background with vertical padding, no horizontal padding, and an inner .vovn-dossier__inner that carries `width: 90vw; margin-inline: auto` to hold the copy (it read `min(90vw, 72rem)` until the caps were retired). Clamping

to 90% broke that in two visible ways at once. The dark band stopped bleeding and became a floating rectangle with a strip of parchment down each side, out of line with the masthead above it — and because the inner was then exactly as wide as its parent, `margin-inline: auto` had nothing to distribute, so the headline sat hard against the band's own left edge with no inset at all. That is the framing fault, and it is a containment problem rather than a width problem. So

is a full-bleed canvas, and the band moves down one level to the containers that actually hold reading matter. Bands that are meant to touch both edges now do; columns that are meant to sit at 90% still do. -------------------------------------------------------------------------- */ body:not(.home):not(.front-page):not(.cew-mode) :is(main#main-content, main.vovn-main, main.vovn-route, main.vvs-page){ width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; } /* Hero bands bleed. vv-interior.css clamps them with body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero, .vovn-hub-hero, .vovn-article-hero, .vovn-dossier…) { width: 90vw !important; margin-inline: calc(…) !important } which is a third implementation of the same 90% idea, applied to the one class of element that should be exempt from it. Released here rather than edited there, because that file's rule is doing useful work on the elements in it that are NOT full-bleed bands. .vovn-dossier only: it is the one whose inner wrapper is verified to carry the copy, and a band cannot be released until something inside it holds the measure. */ body:not(.home):not(.front-page):not(.cew-mode) .vovn-dossier{ width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; } /* The band itself. */ body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-shell, .vovn-article-grid, .vovn-dossier__inner, .vvs-layout){ width: var(--bleed-w) !important; max-width: var(--bleed-w) !important; margin-inline: auto !important; min-width: 0; } /* The split dossier is a two-column grid whose inner IS a grid cell with its own padding. It must not be re-centred at 90% inside its own track. */ body:not(.home):not(.front-page):not(.cew-mode) .vovn-dossier--split .vovn-dossier__inner{ width: auto !important; max-width: none !important; margin-inline: 0 !important; } /* Everything inside the band fills the band. Full-width section wrappers stay full width so their backgrounds still run edge to edge. */ body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-body, .vovn-editorial-body, .vovn-content, .vovn-hub-source, .vovn-prose, .vovn-article-body, .entry-content, .article-content, .post-content, .vvs-copy, .vov-reading-width){ width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; min-width: 0; } /* The column already sits inside the band; a second inset inside it is what made the phone read at 81% of the screen rather than 90%. Vertical padding is untouched. */ body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-article-body, .vovn-route-body){ padding-inline: 0 !important; } /* Page templates carry the same fault under a different class. On an article the column is .vovn-article-body; on a page it is a bare .vovn-prose, and that one takes 31.6px of its own inline padding, which is why /devices/ measured at 80% of the screen while the article beside it measured 88%. Scoped to a direct child of the band so it cannot reach a .vovn-prose nested inside a callout or a card, where the inset is deliberate. */ body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-shell, .vovn-article-grid) > :is(.vovn-prose, .entry-content, .vvs-copy){ padding-inline: 0 !important; } /* 23 Sep 2026: vv-interior.css draws the reading column as a framed sheet (1px rule + shadow). With the inline padding zeroed above, the text ran hard against the frame on every page and post. The column is now 80% of the screen rather than the full band, so the inset comes back inside it. On phones the column is the band and the inset stays small. */ html body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-shell, .vovn-article-grid) > :is(.vovn-prose, .vovn-article-body, .entry-content, .vvs-copy){ padding-inline: clamp(1rem, 3vw, 3rem) !important; } /* ...and no measure cap on the blocks inside it. */ html body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content, .article-content, .post-content, .vvs-copy, .cew-prose, .vov-prose, .vov-reading-width) > :is(p, ul, ol, dl, blockquote, figure, table, .wp-block-table, .wp-block-group, .wp-block-columns){ max-width: none !important; } /* -------------------------------------------------------------------------- 3. Fluid prose scale - a long line stays legible because the type grows. -------------------------------------------------------------------------- */ /* The :not(.cew-mode) is not decoration. vv-interior.css carries body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose, .entry-content, …) p { font-size: 1.075rem !important } which scores (0,4,2) — :is() contributes its heaviest argument — and beat the (0,3,3) these rules had, so the fluid scale below was being written and then ignored: measured, the paragraph was still computing to 1.075rem. The fourth :not() brings this to (0,4,3) and the scale actually applies. */ html body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose, .vovn-article-body, .entry-content, .article-content, .post-content, .vvs-copy, .vov-prose, .vov-reading-width){ font-size: var(--bleed-prose-size); line-height: var(--bleed-prose-lh); } html body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose, .vovn-article-body, .entry-content, .article-content, .post-content, .vvs-copy, .vov-prose, .vov-reading-width) :is(p, li, dd, dt, blockquote):not(.vov-dfig *):not(.vov-figure *):not(.vov-verdict *):not(.vov-vindex *):not(.vov-rt *){ font-size: var(--bleed-prose-size) !important; line-height: var(--bleed-prose-lh) !important; } /* On the two :not()s above. The decision objects and the drawings live inside .vovn-article-body, so this rule was reaching into them and setting their

and

at running-body size — right for an article, wrong for a component whose entire job is a typographic hierarchy: a 0.68rem mono label over a 1.7rem display figure. Excluding their descendants lets assets/figures.css keep its own scale, while .vov-dfig__aside — a real sentence, and not matched by the label rules there — still inherits the fluid prose size from its container, which is what it should do. The earlier attempt at this used `font-size: revert !important` on the labels. That was wrong and worth recording: `revert` rolls back to the USER-AGENT origin, discarding the author declarations in figures.css entirely, so every label fell back to inheritance and rendered at body size — the exact fault it was meant to prevent. */ /* Small print stays small print. */ html body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose, .vovn-article-body, .entry-content, .vvs-copy) :is(figcaption, .vov-figure__caption, .vovn-sourceline, .vv-trust-note, small, .vov-disclosure, .vovn-eyebrow, .vov-module-kicker) :is(p, li), html body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose, .vovn-article-body, .entry-content, .vvs-copy) :is(figcaption, .vov-figure__caption, .vovn-sourceline, .vv-trust-note, small){ font-size: max(0.875rem, calc(var(--bleed-prose-size) * 0.78)) !important; line-height: 1.5 !important; } /* Headings ride the same scale; balance caps stay - they are typography, not a container pinch. */ html body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content) :is(h2, h3){ max-width: 34ch; } @media (max-width: 48rem){ html body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content) :is(h2, h3){ max-width: none; } } /* -------------------------------------------------------------------------- 4. No horizontal scroll on the page body, at any width. Wide things scroll inside their own box. -------------------------------------------------------------------------- */ /* The clip lives on the root only. On it also clips position:fixed descendants — which is not obvious, and it is why the mobile navigation panel rendered as a 370px sliver of itself with twenty-six of its twenty-seven links laid out but never painted. Overflow on the root propagates to the viewport, so horizontal scroll is still prevented and fixed overlays are no longer cut off. Verified: document scrollWidth does not exceed clientWidth on any template at 390, 768, 1440, 1920 or 2560. */ html{ max-width: 100%; overflow-x: clip; } body{ max-width: 100%; } body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content, .article-content, .vvs-copy, .cew-prose) :is(.wp-block-table, figure.wp-block-table, .vov-table, .vov-table-scroll){ display: block; width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content, .article-content, .vvs-copy, .cew-prose) :is(.wp-block-table, figure.wp-block-table, .vov-table) > table{ display: table; width: 100%; min-width: 42rem; margin: 0; } /* Bare tables become their own scroll box: the 42rem floor moves off the table element (where it forced the page sideways) onto the cells. */ html body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content, .article-content, .vvs-copy, .cew-prose) > table, html body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content, .article-content, .vvs-copy, .cew-prose) > :not(.wp-block-table):not(figure) > table{ display: block; width: 100%; max-width: 100%; min-width: 0 !important; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* No min-width floor on cells. On a display:block table the table element IS the scroll box, so a cell floor inflates the box itself and it grows past the column instead of scrolling. The 42rem floor belongs on the inner table of a wrapped table (above), never on the scroll box. */ html body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content, .vvs-copy) :is(th, td){ min-width: 0; white-space: normal; overflow-wrap: break-word; } /* The prose track must not grow to its widest child. vv-interior.css sets `max-width: none !important` on .vovn-article-body at (0,5,1); with no upper bound a wide table stretched the article to 713px inside a 351px container at 390 and the overflow was merely clipped, so the table was unreachable rather than scrollable. These selectors are (0,5,2) so they win, and 100% still means "the full 90% container" — the pinch vv-interior was removing stays removed. */ html body:not(.home):not(.front-page):not(.cew-mode) .vovn-article-grid > .vovn-article-body, html body:not(.home):not(.front-page):not(.cew-mode) .vovn-article-grid > .vovn-prose, html body:not(.home):not(.front-page):not(.cew-mode) .vovn-route-body > .vovn-prose, html body:not(.home):not(.front-page):not(.cew-mode) .vvs-layout > .vvs-copy{ max-width: 100% !important; min-width: 0 !important; } @media (max-width: 900px){ /* the grid is a column flex here; stretch the item rather than let it size to its content */ html body:not(.home):not(.front-page):not(.cew-mode) .vovn-article-grid > .vovn-article-body, html body:not(.home):not(.front-page):not(.cew-mode) .vovn-article-grid > .vovn-prose{ width: 100% !important; align-self: stretch !important; } } body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content, .vvs-copy, .cew-prose) :is(pre, code, .wp-block-code){ max-width: 100%; overflow-x: auto; overflow-wrap: anywhere; } body:not(.home):not(.front-page) :is(.vovn-prose, .vovn-article-body, .entry-content, .vvs-copy) :is(img, svg, video, iframe, canvas){ max-width: 100%; height: auto; } /* -------------------------------------------------------------------------- 5. The documented escape for elements meant to touch both edges. Applied only where the theme already asks for it - nothing new bleeds. -------------------------------------------------------------------------- */ body:not(.home):not(.front-page) :is(.alignfull, .vov-bleed, .vv-bleed){ width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); } /* -------------------------------------------------------------------------- 6. Mobile. 90% holds down to the smallest phone; nothing forces a min width. -------------------------------------------------------------------------- */ @media (max-width: 900px){ /* Collapse the rail, but do NOT reset the width here — the band lives on these elements now, and forcing them to 100% would hand the page back its full width and put the text against the screen edge. */ body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-article-grid, .vovn-route-body, .vvs-layout){ grid-template-columns: 1fr !important; } body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-article-grid, .vovn-route-body, .vvs-layout) > *{ min-width: 0 !important; max-width: 100% !important; } } @media (max-width: 620px){ /* Same shape as the desktop rule: main bleeds, the band is on the shell. The theme's own mobile rule pulls .vovn-shell to calc(100% - 1.25rem) and vv-interior.css re-pads .vovn-article-body at 1rem !important; both are answered above, which is why 90% now actually holds on a phone. */ body:not(.home):not(.front-page):not(.cew-mode) :is(main#main-content, main.vovn-main, main.vovn-route, main.vvs-page){ width: 100% !important; max-width: 100% !important; } body:not(.home):not(.front-page):not(.cew-mode) .vovn-shell{ width: var(--bleed-w) !important; max-width: var(--bleed-w) !important; margin-inline: auto !important; } } /* Touch targets survive the resize. */ body :is(.vv-toc__link, .vovn-nav a, .vv-btn, nav a){ min-height: 44px; } /* -------------------------------------------------------------------------- 8. The publication-system templates. /verdicts/, /the-register/ and the other vovps- routes do not use .vovn-shell at all — they are built from full-width

bands with their own inner padding (vvx-, vvr-). Sections 2 and 3 above never reached them, so the contract was being kept on articles and pages and quietly missed on the flagship index. Measured on /verdicts/ at 790px before this block: the hero sat inset at 90% with its copy at 80%, while the bands below it bled correctly but padded their content to 84%, and the Register strip to 95%. Three different measures down one page, which is what the framing actually looked wrong about — not any single band, but the fact that no two of them lined up. The fix is the same shape as the dossier's: the band bleeds, and the inset is expressed as a percentage so the content lands on the same 90% line as every other template. 5% a side is that line. -------------------------------------------------------------------------- */ body:not(.home):not(.front-page):not(.cew-mode) .vvx-hero{ width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; } body:not(.home):not(.front-page):not(.cew-mode) :is(.vvx-hero, .vvx-manifesto, .vvx-archive, .vvx-nominate, .vvx-topics, .vvr-strip, .vvr-entry__section){ padding-inline: 5% !important; } /* Their inner wrappers then fill the band rather than adding a second inset of their own — .vvx-hero__content carried a 992px cap that pulled the hero copy in to 80%. */ body:not(.home):not(.front-page):not(.cew-mode) :is(.vvx-hero__content, .vvx-manifesto__statement, .vvx-grid, .vvr-strip__head, .vvr-strip__list){ max-width: 100% !important; margin-inline: 0 !important; } /* -------------------------------------------------------------------------- 9. Archives that have no inner shell. Sections 2/3 moved the 90% off

and onto the inner shells, so that the measure is declared exactly once per template and never stacks to 81%. Category archives (main#main-content.vv-lookbook-archive) have no inner shell at all, so they lost their only container and rendered at 100%. This restores the 90% on

itself, but only when none of the known inner shells is present — so single posts, dossiers and route bodies, which do carry a shell, are left exactly as they are. Wrapped in @media screen so the print page-box reset below still applies; this selector is more specific than that block and would otherwise beat it. -------------------------------------------------------------------------- */ @media screen{ /* The vvx-/vvr- band routes (/verdicts/, /the-register/) are excluded as well: section 8 already lands their content on the 90% line by padding each full-bleed band by 5%. Putting 90% on their

too stacks the two and drops content to 81% — measured on /verdicts/ at 1440 before this exclusion was added. */ html body:not(.home):not(.front-page):not(.cew-mode) main#main-content:not(:has(.vovn-shell, .vvs-layout, .vovn-article-grid, .vovn-route-body, [class*="vvx-"], [class*="vvr-"])){ width: var(--bleed-w) !important; max-width: var(--bleed-w) !important; margin-inline: auto !important; } } /* -------------------------------------------------------------------------- 6b. The 80% reading column (restated by the owner 23 Sep 2026). Interior pages and posts: 90% band, 80% column. The band (.vovn-shell / .vovn-article-grid) stays at 90% of the screen so section backgrounds, framed article bodies and hero inners keep their edge; the column that holds the reading matter sits at 80% of the screen, which is 8/9 of the band, centred in it. Not a rem or ch cap, so it never becomes a narrow Gutenberg middle column at large widths. On phones the column takes the whole band: 80% of a 390px screen is a strip, not a column. Specificity (0,5,1) beats both section 2 (0,4,1) and article-toc.css. -------------------------------------------------------------------------- */ @media (min-width: 621px){ html body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-shell, .vovn-article-grid) > :is(.vovn-prose, .vovn-article-body, .entry-content, .vvs-copy){ width: calc(100% * 8 / 9) !important; max-width: calc(100% * 8 / 9) !important; margin-inline: auto !important; } /* The contents rail is retired (layout-depth.css hides it sitewide), so the column never shares the band with it. */ /* Landing-template hubs (Routines, Spa Intelligence, Editorial Standards, Event-Ready Beauty, Grounded Wellness, Regenerative Aesthetics, the Glossary...). Measured on the recrawl, some of these ran at 100% and some at 90% depending on which :has() rule caught them, and their prose sat at the full band. The band is .vov-landing; card grids and figures use all of it; reading sections take the 80% column. */ html body:not(.home):not(.front-page):not(.cew-mode) main#main-content.vovn-landing-page, html body:not(.home):not(.front-page):not(.cew-mode) main#main-content.vovn-landing-page > .vov-landing-shell{ width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; } html body:not(.home):not(.front-page):not(.cew-mode) .vov-landing-shell > .vov-landing{ width: var(--bleed-w) !important; max-width: var(--bleed-w) !important; margin-inline: auto !important; } html body:not(.home):not(.front-page):not(.cew-mode) .vov-landing > :is(.vov-intro, .vov-ledger, .vov-cta){ width: calc(100% * 8 / 9) !important; max-width: calc(100% * 8 / 9) !important; margin-inline: auto !important; } /* Look Book stories: the body is the 90% band, the story text the column. */ html body:not(.home):not(.front-page):not(.cew-mode) .vv-lookbook-story__body > .vv-lookbook-story__content{ width: calc(100% * 8 / 9) !important; max-width: calc(100% * 8 / 9) !important; margin-inline: auto !important; } /* Route pages (Claims & Evidence and its siblings): the depth copy. */ html body:not(.home):not(.front-page):not(.cew-mode) .vovps-depth > .vovps-depth__copy{ width: 80% !important; max-width: 80% !important; margin-inline: auto !important; } } /* -------------------------------------------------------------------------- 6c. Button text that could not be read (23 Sep 2026). vv-interior.css colours every prose link var(--vvi-accent), and that rule reaches core Button blocks, so "See the smallest useful routine" on /beauty-basics/ and five other pages rendered garnet text on a garnet button (1.2:1). Buttons carry their own colour; only a button with an explicit text colour set in the editor keeps it. -------------------------------------------------------------------------- */ html body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose, .vovn-article-body, .entry-content, .vvs-copy) .wp-block-button:not(.is-style-outline) > a.wp-block-button__link:not(.has-text-color), html body a.vov-object-actions-primary{ color: var(--wp--preset--color--parchment-50, #f7f4ee) !important; -webkit-text-fill-color: currentColor !important; } html body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose, .vovn-article-body, .entry-content, .vvs-copy) .wp-block-button:not(.is-style-outline) > a.wp-block-button__link:not(.has-text-color):is(:hover, :focus-visible){ color: #fff !important; } /* -------------------------------------------------------------------------- 7. Print ignores all of this and uses the page box. -------------------------------------------------------------------------- */ @media print{ body :is(main, main#main-content, .vovn-main, .vovn-shell, .vovn-article-grid, .vovn-prose, .vovn-article-body, .entry-content){ width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; font-size: 11pt !important; line-height: 1.45 !important; } body :is(.vovn-article-rail, .vv-toc-mobile){ display: none !important; } }