. That works while every section is transparent, which is how the floor was written. A chapter paints an opaque ground, so it covers the grain, and the six chaptered routes lost the one thing that makes the ground read as paper rather than as a flat fill. Measured, not guessed: #EFE8DB exactly inside a chapter, #ECE5DA on an unchaptered section directly below it. So each ground carries its own grain, under the content and over the fill. */ .chapter::after, .title-page::after, .colophon::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .3; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E"); } /* A flat dark ground bands on a real display; grain is what stops it, but it needs less of it than paper does. */ .chapter--dusk::after, .chapter--close::after, .colophon::after { opacity: .16; } .chapter-head, .title-page__grid, .colophon__grid { position: relative; z-index: 1; } /* --- 15. the glass panels ------------------------------------------------- */ /* 🔴 digital-theme builds every panel on this site out of a 34% black wash (`rgba(24,18,8,.34)`) with a 20px radius and a 22px backdrop blur. That is correct on espresso and it is a grey slab on paper: measured on /pricing, the Custom Application panel painted #9E9588 on a #E6DCCB ground while its own --surface token read #E7DECE, because the wash never consults the token. One list, one paper surface per ground, one radius. The wash is not tuned, it is replaced. */ :is(.service-portrait, .service-sample, .pricing-columns, .price-grid, .score-grid article, .two-column article, .connection-flow, .wt-stage, .wt-panel, .contact-aside, .calculator, .audit-form, .ad-stage, .ad-side, .ad-tabs button, .pc-stats > div, .pc-status, .audit-sample, .sample-tiles div, .wt-msg, .wt-msg.wt-bot, .ad-msg, .home-audit .container, .empty-explorer, .sample-payload, .bot-context) { background: var(--panel, #F4EEE3); border-radius: 2px; backdrop-filter: none; } /* 🔴 #audit-findings is listed on its OWN, never inside an :is(). :is() takes the specificity of its most specific argument, so one ID in that list lifted the whole 26-selector rule to (1,0,0) and it silently beat `.ad-tabs button[aria-selected="true"]` (0,2,1) at (1,0,0): the selected demo tab lost its brass fill and rendered bone-on-paper at 1.1:1. Exactly the trap this repo recorded on 2026-09-26 for the header button, walked into again by writing a convenience list. */ #audit-findings { background: var(--panel, #F4EEE3); border-radius: 2px; backdrop-filter: none; } :is(.chapter--dusk, .chapter--close) #audit-findings { background: var(--ch-plate); color: #1A1714; } :is(.chapter--dusk, .chapter--close) :is(.calculator, .service-sample, .audit-form, .score-grid, .wt-stage, .wt-panel, .sample-payload, .empty-explorer, .bot-context) { background: var(--ch-plate); /* the light islands stay light: see section 0 */ }