/* ========================================================================== SPARSKEY — SERVICE PAGES, PLACEMENT LAYER Loads after tokens.css and site.css, and only on the eight public service pages (/op-maat, /professionals, /studio, /studio/halil, /contact, /journal, /journal/{slug}), pulled in from each view's `head` section. Layer 6 of VISUAL-SYSTEM §11: PLACEMENT ONLY. Ported from the approved prototype screens and re-scoped from their #screen-* ids to the page hook class on : prototype/screen-custom.html #screen-custom -> .page-custom prototype/screen-pro.html #screen-pro -> .page-pro prototype/screen-studio.html #screen-studio -> .page-studio, .page-halil prototype/screen-forms.html #screen-forms -> .page-contact prototype/screen-journal.html #screen-journal -> .page-journal, .page-article No token is redefined here and no component is restyled. Every value is a token, a ratio, or a ch/percentage measure — no raw colours, no magic px. The collapse uses @container queries against .sk, exactly as the prototype: the same markup genuinely re-flows. It sits in its own file rather than in site.css so that parallel work on the catalogue pages and on this set cannot collide in one stylesheet. ========================================================================== */ /* ========================================================================== A · SHARED BY EVERY SERVICE PAGE ========================================================================== */ /* Controls inherit the body face: the reset in tokens.css does not reach them. */ .sk :is(input, textarea, select, button, fieldset, legend) { font: inherit; color: inherit; } /* ...but `color: inherit` above is (0,1,1) and the button variants in tokens.css are (0,1,0), so it wins — and a .sk-btn--canvas