/* ============================================================================ Just Another Day in CA — CANDIDATE DESIGN-DIRECTION REGISTER ---------------------------------------------------------------------------- Discharges OC-2 in the engagement's acceptance.md: exactly three surfaces — the home hero, one sector page (semiconductors), and the data surface — showing how the client's own 2026-08-07 creative logic lands on a web page. THE JOB, stated the way OC-2 states it: "A comp that does not provoke a correction has not done its job." This file is a QUESTION addressed to Misfit, who own the creative. It is not a proposal, and every value in it is a candidate sampled from 90dpi JPEG renders of a Keynote deck. The intended next action is that they hand over the type, the hexes and the accent rules and tell us where this is wrong. That is why § 14 exists and why it is the single most important block in the file. A comp that looks like a brand and does not say it is guessing is a false claim about somebody else's property. WHAT IT ASSERTS — carried from design-system/CANDIDATE-TOKENS.md, measured rather than guessed: - Ground is white. The LED-board family, not the pitch-era navy. - Ink is near-black and carries the entire contrast burden. - The accent is a SLOT, filled per execution, and on a light ground it is DECORATIVE. It never carries meaning, state, or text contrast. - Type is a condensed bold grotesque, all-caps in display positions, tight, with hierarchy by SIZE and not by weight. WHAT IT DOES NOT ASSERT - That any hex here is the campaign's colour. Six of ten sampled accents fail 3:1 against white; the set is almost certainly a rotation family rather than a swatch book, and no value below is presented as canon. - That the display face is the campaign's face. It is a system-resident substitute, labelled as one. See § 1 and § 15. - That the scrim is a colour. Sampling found the "dark scrim" is each photograph's own dark tones — navy on aerospace, cool grey on manufacturing, warm dark grey on startups. This file therefore leaves the alpha-wash scrim mechanism in tokens.css completely alone. LOAD ORDER — this file is FOURTH, and it only works there: 1. assets/tokens.css defines every --jad-* name 2. assets/wp-core-shim.css core block layout, for the static render 3. assets/base.css structural rules + the WCAG floor 4. assets/candidate.css this file — same specificity, later, so it wins The shim precedes base.css because that is the order WordPress itself serves them: core's block-layout styles are the substrate, and the theme's own rules are written to override them rather than to be overridden. It is deliberately NOT enqueued in functions.php, and it is never loaded alongside wireframe.css. The two are alternative registers over one build: wireframe.css makes no brand claim so the room can discuss structure; this file makes a labelled, correctable brand GUESS so the room can correct it. Which one is in play is passed explicitly through render-static.mjs's `--stylesheets` and is never implied. THE ACCESSIBILITY RULE, non-negotiable and measured. Recomputed in CANDIDATE-TOKENS.md § Accessibility carry-forward against #FFFFFF: mint 1.54 · pale lime 1.39 · punchy lime 1.88 · amber 1.94 / 1.69 · gold 1.47 / 2.00 · coral 2.98 — all below the 3:1 non-text minimum. Only purple (5.27) and the fixed LED red (4.46) clear it, and they are two members of a rotation whose next value is not knowable today. So the accent may never be the only thing distinguishing a control, a state, or a link, and it may never be set as type on a light ground. What it MAY do is be a GROUND with near-black ink on it — every sampled accent clears 3:1 against #1A1A1A (mint 11.27 · lime ~12 · amber 10.33 · gold 8.71 · coral 5.83 · LED red 3.90 · purple 3.30, the floor). That inversion is how this register gets the boards' loudness without repeating their contrast failure, and it is bounded in § 2: accent-as-ground is permitted behind LARGE display type only, because purple's 3.30 clears the 3:1 large-text threshold and fails the 4.5:1 normal-text one. RAW LITERALS. tools/raw-dimension-check.py scans every theme/assets/*.css that is not tokens.css, and it is right to. A token-override layer cannot avoid carrying literals — being a second value source is its entire job — so the literals are confined to ONE block of `--cand-*` primitives in § 1, each carrying the `raw-ok` suppression the tripwire ships. Every other declaration in this file reaches for a name. A literal anywhere below § 1 is a defect. ========================================================================= */ /* =========================================================================== 1. PRIMITIVES — the only literals in this file. COLOUR. A white ground and a near-black ink, which is the whole structural finding of the sampling pass rendered as two values. ground #FFFFFF page. Sampled #FCFCFC on all three LED boards at 77-86% of pixels; that gap is inside the method's JPEG noise floor and the authored fill is almost certainly pure white. panel #F4F4F4 claim blocks and quiet panels 15.82:1 with ink line #8C8C8C rules and seams 3.36:1 on ground ink-soft #595959 provenance and meta 7.00:1 on ground ink #1A1A1A everything that carries meaning 17.40:1 on ground THE INK CORRECTION, and it is a correction rather than a preference. BRAND-INPUTS.md recorded the LED-board headline ink as #282828 on 2026-08-13. Re-sampling the same crop across all three LED boards found #000000 at ~74% of filtered pixels, #282828 at ~12%, #202020 at ~8% — the exact signature a flat-fill glyph produces at 90dpi under JPEG compression, a dominant mode at the true fill decaying into lighter anti-aliased edges. #282828 was sampled from that tail, not from the fill. #1A1A1A is used here rather than the better-evidenced #000000 because this token gets used broadly across a site rather than once on a billboard, and both readings — this pass's and BRAND-INPUTS.md's — describe the type as NEAR-black rather than black. Nothing downstream weakens either way: the claim that ink carries the contrast burden holds at 17.40:1 as it does at 21.0:1. Swapping this one value to #000000 is a one-line change if Misfit says the fill is true black. ======================================================================== */ :root { --cand-panel: #F4F4F4; /* raw-ok — candidate register primitive */ --cand-line: #8C8C8C; /* raw-ok — candidate register primitive */ --cand-ink-soft: #595959; /* raw-ok — candidate register primitive */ --cand-ink: #1A1A1A; /* raw-ok — candidate register primitive; #000000 is the more literal sample */ /* The placeholder marker. NOT a brand colour and deliberately outside the palette: it is a build alarm whose whole job is to look like it does not belong. base.css paints `.is-placeholder` with --jad-color-crimson, which this register retunes away from, so § 13 repoints the marker here rather than letting it inherit a campaign value and stop reading as an alarm. */ --cand-alarm: #B3261E; /* raw-ok — placeholder alarm, not a brand value */ /* ---- OBSERVED ACCENT SAMPLES ------------------------------------------ These are READINGS, not a palette, and they are deliberately not wired into anything. Every rule in this file reaches for --jad-accent (§ 2) and never for one of these names, so an execution carrying a colour nobody has sampled yet works without editing a rule. They are here so the comp can demonstrate rotation with real observed values rather than invented ones, and so a reader can see the spread that makes the decorative-only rule necessary. The warm cluster in particular reads as a continuous hue family rather than two fixed swatches — four distinct values were sampled across the boards — so treating any one of them as "the amber" would be inventing a decision. -------------------------------------------------------------------- */ --cand-sample-mint: #64E6BE; /* raw-ok — aerospace x3 + startups-03; most stable observed value */ --cand-sample-lime: #8CE050; /* raw-ok — midpoint of an observed #82D228 to #A0F064 spread */ --cand-sample-amber: #FABE28; /* raw-ok — manufacturing x2; highered-01 sampled #FAAA28 */ --cand-sample-gold: #E4B000; /* raw-ok — highered-04 LED; startups-02 sampled #FAD232 */ --cand-sample-coral: #FA645A; /* raw-ok — startups-01 */ --cand-sample-purple: #9048CC; /* raw-ok — startups-04 LED; 5.27:1 on white */ --cand-sample-led-red: #F00008; /* raw-ok — the FIXED LED-digit red, not a rotation member */ /* LOSSLESS, 2026-08-17. Sampled from 3000px flat PNG boards rather than 90dpi JPEG, so these are the only two accents in this file that are not estimates — flat-fill dominant clusters (9,120 and 8,900 px at the exact value). ADDED, NOT SUBSTITUTED, and that is deliberate: they come from a LATER round (internal dates 8/13 and 8/17; sector label "Education" where the 8/7 set said "highered"), so mapping them onto the sampled set above would be an inference wearing a measurement's clothes. Nearest neighbours are amber #FABE28 and lime #8CE050 — close, which is mild evidence the JPEG sampling was sound, and not proof they are the same values. */ --cand-measured-gold: #FAC52B; /* raw-ok — GO-Biz_OOH_Manu08png, lossless. 1.60:1 on white */ --cand-measured-lime: #96E84B; /* raw-ok — GO-Biz_OOH_Education019, lossless. 1.51:1 on white */ /* ---- TYPE ------------------------------------------------------------- The display step is re-cut rather than inherited. tokens.css's --jad-text-display (52-72px) was cut for Barlow Condensed at the pitch; the substitute face here is heavier and narrower, and the boards set their stat line far larger relative to everything around it than a 72px ceiling allows. The floor stays modest so a 360px viewport still fits the value and its measure in the first screen (RA1 / A3.2). -------------------------------------------------------------------- */ --cand-display: clamp(44px, 9vw, 104px); /* raw-ok — the stat line */ --cand-display-sm: clamp(34px, 6vw, 64px); /* raw-ok — the punchline / secondary display */ /* The in-body stat figure. tokens.css sets this at a flat 44px, which was cut for a narrower face: "$4.4 trillion" in the substitute display face measures ~240px, and a claim block on a 390px viewport gives it 230px between its own paddings. The result is a three-pixel horizontal page overflow — a WCAG 1.4.10 reflow failure, caught by render-check rather than by eye. Fluid, so the figure stays the largest thing in its block without ever exceeding it. */ --cand-stat: clamp(32px, 9vw, 44px); /* raw-ok */ /* Tracking. The boards set almost-touching counters; a condensed grotesque at display size needs negative tracking to match, and positive tracking at small caps sizes to stay legible. tokens.css carries only positive steps. */ --cand-track-display: -0.02em; /* raw-ok — display, matches the boards' set */ --cand-track-caps: 0.02em; /* raw-ok — small all-caps, legibility floor */ /* Reading measure. tokens.css sets prose against the full 1030px column, which at 18px is roughly 100 characters a line. The campaign register up top is display; the body copy below it is the July talking-points formality, and a room reading it needs a real measure. */ --cand-measure-body: 68ch; /* raw-ok */ /* Link underline offset and weight. Underlines are the second, non-hue signal RA4 requires, and they have to survive a near-black-on-white page where nothing else marks a link. */ --cand-underline-offset: 0.16em; /* raw-ok */ --cand-underline-weight: 2px; /* raw-ok */ /* Sector-card grid track floor. A minmax() cannot take a custom property in a media query but takes one fine here, so the one number the grid depends on stays a name like everything else. Sized so eight cards fall to two columns on a tablet and one on a phone without a breakpoint. */ --cand-card-min: 204px; /* raw-ok — sized so eight cards fall to four equal columns at the full column width */ } /* =========================================================================== 2. THE ACCENT SLOT — the mechanism, and the only part of this file that has to survive a colour nobody has seen yet. THE INVARIANT: a page sets a default, a section may override it, and NO COMPONENT EVER DECLARES AN ACCENT. tools/accent-slot-check.py enforces the same discipline one layer down, in the brand SVGs — every paint resolves to currentColor so the art cannot bake in a campaign colour. This section is that gate's stylesheet-side twin: the value lives in one inherited custom property and every consumer reads it. HOW AN UNKNOWN FUTURE COLOUR DROPS IN. Every derived value below is computed FROM var(--jad-accent) with color-mix, never restated from a sampled hex. So setting the slot once —
— regenerates the field, the rule, the wash and the hairline together, in a hue nothing in this repo has ever sampled, with no rule edited. That is the test the mechanism has to pass, because the 8/07 deck is titled "Initial Creative Executions" and the next execution's accent is not knowable today. The `.accent-*` helpers below exist ONLY to set the slot. They set no other property, deliberately: the moment a helper also paints something, it stops being a slot-filler and becomes a component that declares an accent. WHAT MAY TAKE THE ACCENT, and this list is closed: - a decorative field behind LARGE display type (--cand-accent-field) - a decorative rule or bar carrying no meaning of its own - a tint wash behind a block that is already distinguished structurally WHAT MAY NOT, measured rather than stylistic: - type on a light ground. Every warm sample fails even the 3:1 large-text threshold against white. - a focus ring. § 5 pins focus to ink and white, both of which hold on every ground this register produces. - a link, a control, a state, or an icon's only signal. RA4 / A2.3. - normal-size body text on an accent field. Purple's 3.30:1 against ink clears the 3:1 large-text bar and fails the 4.5:1 normal-text one, so the field is bounded to display sizes and the bound is stated at every rule that uses it. ======================================================================== */ :root { /* THE PAGE DEFAULT. Mint is the most stable value the sampling pass found — the identical hex on aerospace x3 and startups-03, two sectors and two photographs — which makes it the honest choice for a visible default and NOT a ruling that mint is the campaign accent. Swap this one line to re-shoot every comp in a different execution. */ --jad-accent: var(--cand-sample-mint); /* Anything that must stay legible NEAR or ON the accent takes ink, never a colour derived from the accent. This is what makes the slot safe to fill with an unknown value: the legibility does not depend on what went in. */ --jad-accent-ink: var(--cand-ink); /* ---- Derived family. All computed from the slot; none restated. -------- */ /* The field: the accent as a GROUND for large display type. The inversion of the LED boards, which set accent type on white and therefore fail. */ --cand-accent-field: var(--jad-accent); /* A decorative rule or bar. Carries no meaning, so its own contrast is not load-bearing — but it sits on white where most samples fall under 3:1, so § 6 and § 11 always pair it with a structural signal rather than letting it mark anything alone. */ --cand-accent-rule: var(--jad-accent); /* A tint wash behind a block that is already distinguished structurally. */ --cand-accent-wash: color-mix(in srgb, var(--jad-accent) 16%, var(--jad-color-white)); /* A hairline that reads as a seam rather than a rule. */ --cand-accent-hairline: color-mix(in srgb, var(--jad-accent) 55%, var(--cand-line)); } /* Slot-fillers. Each sets the slot and nothing else — that is the contract. They exist so a comp can demonstrate rotation without a component ever naming a colour, and so a reader can see that rotation is a one-property change rather than a restyle. */ .accent-mint { --jad-accent: var(--cand-sample-mint); } .accent-lime { --jad-accent: var(--cand-sample-lime); } .accent-amber { --jad-accent: var(--cand-sample-amber); } .accent-gold { --jad-accent: var(--cand-sample-gold); } .accent-coral { --jad-accent: var(--cand-sample-coral); } .accent-purple { --jad-accent: var(--cand-sample-purple); } .accent-measured-gold { --jad-accent: var(--cand-measured-gold); } .accent-measured-lime { --jad-accent: var(--cand-measured-lime); } /* The same door, opened for a value this repo has never sampled: any element may set the slot inline — style="--jad-accent: #3C7AE0" — and every derived value above follows it, in a hue no helper names and no sampling pass has seen. That inline form is the mechanism; the helpers are only a convenience over it. Nothing here enumerates the permitted colours, because a closed list of accents is exactly what the creative refuses to be. No `attr()`-driven variant is shipped on purpose: the typed `attr()` that would read a colour from a data attribute is too new to rely on, and a rule that resolves to the guaranteed-invalid value on most browsers would empty the slot rather than fill it — a silent failure in the one mechanism this file exists to prove. */ /* =========================================================================== 3. TOKEN OVERRIDES — names unchanged, values retuned. Every declaration below reaches for a --cand-* name. Nothing downstream is edited: base.css, wp-core-shim.css, the templates and the block markup are untouched and simply resolve differently. ======================================================================== */ :root { /* ---- Colour ------------------------------------------------------------ The campaign's colour tokens map onto the candidate palette by ROLE, so every rule already written against them keeps its meaning: navy was brand ground + strong ink -> ink (footer ground, headings) cream was light ground + light ink -> white (header ground, footer ink) crimson was accent + focus + marker -> ink (carries no hue at all) ink / ink-soft were already reading ink -> ink / ink-soft The crimson slot is the one to watch. In the pitch-era register it was a hue doing four unrelated jobs — the nav current-item rule, the inner focus ring, the `.fact` rule, and the placeholder outline. Three of those are structure and become ink here. The fourth is an alarm and is repointed explicitly in § 13, because an alarm that resolves to the palette has stopped being an alarm. */ --jad-color-navy: var(--cand-ink); --jad-color-cream: var(--jad-color-white); --jad-color-crimson: var(--cand-ink); --jad-color-ink: var(--cand-ink); --jad-color-ink-soft: var(--cand-ink-soft); /* ---- Scrims: DELIBERATELY UNTOUCHED ------------------------------------ The sampling pass looked for a single scrim hex and found a family instead — #182A42 cool navy on aerospace, #48484E cool grey on manufacturing, #2A2A2A warm dark grey on startups. Three sectors, three genuinely different values, which reads as each photograph's own dark tones under a partial-opacity wash rather than one brand overlay. So pinning a flat scrim colour here would be inventing the thing the evidence says does not exist. tokens.css's --jad-scrim-* family already composes as an alpha wash, which is the right shape for "a legibility layer over photography whose own values vary board to board", and this file leaves every one of them exactly as authored. At 13-28% alpha they read as neutral seams on a white ground, which is what § 6 uses them for. The one consequence worth naming: the scrims stay navy-tinted while the footer ground becomes near-black. Nothing in the three comp surfaces shows both at once, and the day real photography lands, the scrim is a per-photograph decision rather than a token. */ /* ---- Gradients --------------------------------------------------------- Both composed gradients exist to hold text legible over PHOTOGRAPHY, and the build ships no image element inside `main` on any of the thirteen pages. A scrim with nothing under it is a grey wash that reads as a design decision, so they are off until there is a photograph to wash. */ --jad-gradient-hero: none; --jad-gradient-card: none; /* ---- Type -------------------------------------------------------------- A SUBSTITUTE, LABELLED AS ONE. OC-2 forbids naming a typeface as *the* face, and A8.4 records that the licensed face is still unidentified. CANDIDATE-TOKENS.md ranks Anton first on shape, Archivo Black second, Oswald Bold third — all three are Google-hosted, and a webfont link is a network dependency this comp cannot take: the review copy has to render offline and on a phone with no CDN reachability guarantee, and a font that silently fails to load turns the comp into an argument about a fallback. So the display stack is SYSTEM-RESIDENT, and picked for lineage rather than convenience. Impact is the ubiquitous member of the same heavy condensed-grotesque family Anton belongs to — squared terminals, near-uniform stroke, almost-touching counters, one weight — which is the construction the boards actually show. Haettenschweiler carries Windows, the Helvetica Neue and Avenir Next condensed cuts carry iOS, and Arial Narrow is the floor. No @font-face, no network request, nothing to fail. BODY IS A SECOND FAMILY, and that is a real divergence from the evidence rather than an oversight. BRAND-INPUTS.md records one face throughout the boards with no secondary face anywhere. A billboard sets one line; this site sets several thousand words of sourced body copy, and that copy is the July talking-points register by a decision already ruled. Setting it in a heavy condensed display face would be unreadable and would provoke the wrong correction. The pairing is named in § 15 as the largest single thing this register could not translate. */ /* IDENTIFIED 2026-08-17 and placed FIRST — zero-risk by construction. The campaign face is ITC Franklin Gothic LT Pro Demi Compressed, read from the FontSet descriptors in Misfit's own production PSD, not guessed. We do not hold a licensed copy, so the system stack behind it is unchanged and still does all the work today. If the face is ever installed locally the display type simply becomes correct; if it never is, rendering is byte-identical to before this line. Naming it costs nothing and removes a re-derivation. Do NOT add a webfont @font-face here — the review copy must render offline and a silently-failing webfont turns the comp into an argument about its own fallback (§ 15.1). Licensing is unresolved: Adobe Fonts licenses to a subscriber, not a site. */ --jad-font-display: "ITC Franklin Gothic LT Pro", "FranklinGothicLTPro-DmCm", "Franklin Gothic Demi Cond", Impact, Haettenschweiler, "Arial Narrow Bold", "HelveticaNeue-CondensedBold", "Avenir Next Condensed", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif; --jad-font-body: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --jad-text-display: var(--cand-display); /* ---- Focus ------------------------------------------------------------- The dual ring survives the repalette, and it has to: base.css composes it from these two names and cannot be edited. The contract is that ONE of the two rings always contrasts with whatever sits behind it. Measured on every ground this register produces: on white ground -> halo vanishes, ink ring works 17.40:1 on the near-black footer -> ink ring vanishes, halo works 17.40:1 on an accent field -> ink ring works, floor is purple 3.30:1 on an ink button -> halo works 17.40:1 Every one clears the 3:1 non-text minimum. The accent is not in this pair and must never be: a ring coloured from a rotating slot would silently stop being visible the first execution a pale value lands in it. */ --jad-focus-color: var(--cand-ink); --jad-focus-halo: var(--jad-color-white); } /* =========================================================================== 4. CORE-LAYOUT STAND-INS — REMOVED, deliberately, and the removal is worth more than the rules were. This file briefly restated the flex containers for the global chrome, written defensively against a collapsed header before wp-core-shim.css covered them. It was a second source of truth for layout that this register does not own, and it did real damage: the restatement included .primary-nav .wp-block-navigation__submenu-container { display: flex } which pinned the Industries submenu permanently open, because core's own rule keeps that container hidden until the menu is opened. A defensive duplicate of a rule you have not read in full does not degrade gracefully — it wins the cascade and takes the behaviour with it. Layout is wp-core-shim.css's job. This file asserts brand and nothing else. ======================================================================== */ /* =========================================================================== 5. PAGE GROUND AND BASE TYPOGRAPHY The whole structural finding in four declarations: white ground, near-black ink, 17.40:1. Everything the register does afterward is arrangement. ======================================================================== */ html { background: var(--jad-color-white); } body { margin: 0; background: var(--jad-color-white); color: var(--cand-ink); font-family: var(--jad-font-body); font-size: var(--jad-text-base); line-height: var(--jad-leading-relaxed); -webkit-font-smoothing: antialiased; } /* The header is the white ground continuing rather than a band of its own. The boards' LED family is one flat white field with the mark sitting in it, and a tinted header bar would introduce a second ground the creative does not have. The hairline is the existing alpha-on-navy scrim, untouched. */ .site-header { background: var(--jad-color-white); } .site-main { max-width: var(--jad-measure-prose); margin-inline: auto; padding-inline: var(--jad-gutter); padding-block: var(--jad-space-section-lg) var(--jad-space-21); } .site-main > *:first-child { margin-block-start: 0; } .site-main > *:last-child { margin-block-end: 0; } /* =========================================================================== 6. THE DISPLAY REGISTER — hierarchy by SIZE, never by weight. The boards carry one bold weight at several sizes; the large stat line and the smaller punchline read as the same weight. So every display element below sits at the same weight and differs only in size, which is the single most transferable thing about the creative and the easiest to lose. `font-synthesis-weight: none` is load-bearing rather than tidy. The substitute display face has one weight; asking a browser for 700 on a single-weight face makes it smear a synthetic bold that destroys exactly the squared terminals and tight counters the face was chosen for. Suppressing synthesis means Impact renders as drawn, while the iOS Helvetica Neue fallback — which does have a real bold — still picks it. ALL-CAPS IS SCOPED TO DISPLAY POSITIONS, not applied globally. The boards set at most six words; this site's section heads run past a dozen, and a dozen words of all-caps is a legibility cost paid by every reader. The ruled voice split (campaign register in hero, eyebrow and section heads) is a COPY decision and is already honoured by the strings; setting long heads in caps as well would be this register answering a question it was not asked. Named in § 15. ======================================================================== */ .site-main :is(h1, h2, h3, h4), .claim__value, .sector__eyebrow, .wp-block-button__link, .site-footer__head { font-family: var(--jad-font-display); font-weight: 700; font-synthesis-weight: none; font-stretch: condensed; } .site-main :is(h1, h2, h3, h4) { color: var(--cand-ink); text-wrap: balance; } /* H1 is a display position. Caps, the display step, tight, and the accent nowhere near it — the type carries the whole contrast burden at 17.40:1. */ .site-main h1 { font-size: var(--cand-display-sm); line-height: var(--jad-leading-none); letter-spacing: var(--cand-track-display); text-transform: uppercase; margin-block: 0 var(--jad-space-8); max-width: var(--cand-measure-body); } /* A section head is marked by a rule plus a size change, and the rule is INK rather than accent. That is the one-accent-moment discipline holding: a page carries eight to ten section heads, and an accent rule on each turns a rotation into a texture. The moment a reader can read a colour as "this is a section", the accent has acquired meaning — which is the one thing the slot may never have. Each surface's single accent moment is in § 10, § 11 and § 12 respectively, and nowhere else. */ .site-main h2 { font-size: var(--jad-text-h2-lg); line-height: var(--jad-leading-tight); letter-spacing: var(--cand-track-display); margin-block: var(--jad-space-section-lg) var(--jad-space-6); padding-block-start: var(--jad-space-6); border-block-start: var(--jad-hairline) solid var(--cand-ink); max-width: var(--cand-measure-body); } .site-main h3 { font-size: var(--jad-text-h3); line-height: var(--jad-leading-heading); letter-spacing: var(--jad-tracking-tight); margin-block: var(--jad-space-12) var(--jad-space-4); } /* A panel draws its own boundary, so a head inside one does not draw a second and does not take the accent rule. Two boundaries a few pixels apart read as an error, not as emphasis. */ :is(.sector__hero, .sector__contact, .sector__routing) :is(h1, h2, h3) { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; } /* The eyebrow is the boards' small line: caps, tracked open for legibility at size, ink rather than accent. */ .sector__eyebrow { font-size: var(--jad-text-sm); line-height: var(--jad-leading-body); letter-spacing: var(--cand-track-caps); text-transform: uppercase; color: var(--cand-ink-soft); margin-block: 0 var(--jad-space-5); } /* =========================================================================== 7. RUNNING COPY, LINKS, LISTS Below the display register the page is the July talking-points formality, set for reading rather than for impact. Links are underlined everywhere in content, which is RA4 made unavoidable: on a page whose only colours are near-black and white, the underline is the ONLY thing marking a link, and building the comp this way proves the campaign register never depends on a hue to mark one. ======================================================================== */ /* LEFT-ALIGN THE MEASURE, and this is a real defect fixed rather than a preference. Core's constrained layout centres any child narrower than the container (`margin-inline: auto`), so the moment a reading measure is set, every paragraph on the page drifts to the middle of the column while the headings — whose measure in a condensed display face exceeds the container — stay left. The page then reads as two columns that do not share an edge. Caught in the first render of all three comps. Start margin is pinned to zero; the end stays auto so the measure still governs the line length. */ .site-main :is(p, ul, ol, h1, h2, h3, h4) { margin-inline: 0 auto; } .site-main p { margin-block: var(--jad-space-5); max-width: var(--cand-measure-body); } .site-main a { color: var(--cand-ink); text-decoration: underline; text-decoration-thickness: var(--cand-underline-weight); text-underline-offset: var(--cand-underline-offset); } .site-main a:hover { text-decoration-thickness: var(--jad-rule); } .site-main .wp-block-list { max-width: var(--cand-measure-body); padding-inline-start: var(--jad-space-6); } .site-main .wp-block-list li { margin-block: var(--jad-space-3); } /* =========================================================================== 8. THE CLAIM BLOCK — the workhorse Five of six Tier-1 jobs resolve on a page built out of these. Four ranks inside one block, each carried by a different signal so none depends on colour: value display step, caps-height figures, own line — the figure statement lead size, body face — what it means comparison 14px, muted — the rival provenance 15px, muted, below a hairline — the source Provenance is 15px (--jad-text-nav, the step below body) rather than 14px: RA2 requires "body minus one step, never below 14px" and body here is 18px, so 15px satisfies both readings where 14px satisfies only the floor. #595959 at 15px on the #F4F4F4 panel is 6.37:1. The value is set in the display face with tabular figures. That is the closest this register gets to the LED-digit device without borrowing it — see § 15 for why the device itself did not translate. ======================================================================== */ .claim { margin-block: var(--jad-space-12); padding: var(--jad-space-8); background: var(--cand-panel); border-inline-start: var(--jad-rule) solid var(--cand-ink); } .claim__value-row { margin: 0; } .claim__value { display: block; font-size: var(--cand-stat); line-height: var(--jad-leading-none); letter-spacing: var(--cand-track-display); font-variant-numeric: tabular-nums; color: var(--cand-ink); } .claim__statement { font-size: var(--jad-text-lead); line-height: var(--jad-leading-heading); color: var(--cand-ink); margin-block: var(--jad-space-5) 0; max-width: var(--cand-measure-body); } .claim__comparison { font-size: var(--jad-text-sm); line-height: var(--jad-leading-body); color: var(--cand-ink-soft); margin-block: var(--jad-space-5) 0; max-width: var(--cand-measure-body); } .claim__comparison-measure { display: block; } .claim__provenance { font-size: var(--jad-text-nav); line-height: var(--jad-leading-body); color: var(--cand-ink-soft); margin-block: var(--jad-space-6) 0; padding-block-start: var(--jad-space-4); border-block-start: var(--jad-hairline) solid var(--jad-scrim-navy-28); max-width: var(--cand-measure-body); } /* Source strings are long, unbroken and not authored for a 360px column — "PitchBook, Venture capital deal data, trailing twelve months to July 2026, California-headquartered companies" is one of the shorter ones. Without a break opportunity a single token can push the page wider than the viewport, which is a WCAG 1.4.10 reflow failure and reads as a broken comp. */ .claim__provenance, .claim__unlinkable { overflow-wrap: anywhere; } .claim__provenance a { color: inherit; } /* A source that cannot be linked says so at the same rank as one that can, rather than dropping to a quieter treatment that would read as an omission — which matters here because the strongest semiconductor figures are PitchBook, identifiable and paywalled. */ .claim__unlinkable { font-size: var(--jad-text-nav); line-height: var(--jad-leading-body); color: var(--cand-ink-soft); margin-block: var(--jad-space-4) 0; max-width: var(--cand-measure-body); } .claim__actions { display: flex; flex-wrap: wrap; gap: var(--jad-space-3); margin-block-start: var(--jad-space-6); } /* =========================================================================== 9. BUTTONS Ink outline on white, filling to ink on hover. The accent is not here and must not be: a control is exactly the thing A2.3 forbids distinguishing by hue, and these two are the champion-lift affordance — the one flow in Sprint 1 with a genuine feedback requirement. Shape plus border plus weight plus caps means the control is never marked by colour alone. 44px minimum block size, which is the takeaway affordance's own requirement rather than the 24px global floor. ======================================================================== */ .wp-block-buttons { display: flex; flex-wrap: wrap; gap: var(--jad-space-3); } .wp-block-button__link { display: inline-flex; align-items: center; min-block-size: var(--jad-space-11); padding-block: var(--jad-space-3); padding-inline: var(--jad-space-6); font-size: var(--jad-text-sm); line-height: var(--jad-leading-body); letter-spacing: var(--cand-track-caps); text-transform: uppercase; color: var(--cand-ink); background: var(--jad-color-white); border: var(--jad-hairline) solid var(--cand-ink); border-radius: 0; text-decoration: none; } .wp-block-button__link:hover { color: var(--jad-color-white); background: var(--cand-ink); } /* =========================================================================== 10. COMP SURFACE ONE — THE HOME HERO This is the closest the site gets to a board, and the markup now says so: `home__eyebrow` carries the campaign signature and `h1.home__head` carries the payoff. That is the setup/payoff pair every one of the fifteen boards is built on, and it arrived in the markup rather than being imposed here. THE ACCENT MOMENT, and there is exactly one per surface. Every board carries a single accent element; a page that sprays the rotation across six components has stopped being the creative and started being a theme. Here the accent is the FIELD behind the h1 — near-black caps on a coloured ground. *** THIS IS AN INTERPRETATION, NOT AN OBSERVATION, AND IT IS THE ONE PLACE IN THIS FILE THAT INVENTS SOMETHING. *** No board does this. The photo boards colour the stat NUMBER and leave everything else white; the LED boards colour the punchline and the silhouette stroke and leave the type near-black. A solid highlight field behind a headline appears nowhere in the fifteen. It is here because both observed treatments put the accent ON TYPE, and on a white ground that measures 1.39-2.98:1 across the sampled set — failing even the 3:1 large-text threshold, on the campaign's largest element. The field is the same relationship inverted: ink type on an accent ground measures 3.30:1 at the rotation's floor and 17.40:1 where the ground stays white. Same loudness, opposite failure mode. So it is offered as a proposal with its reasoning attached rather than as a reading of the boards. The on-page label in § 14 carries the claim status only — it is one line by necessity, and the admission that THIS element is invented rather than observed is too specific for it. That admission lives here, in CANDIDATE-TOKENS.md, and in the presentation frame, and it has to be said out loud in the room. If Misfit's answer is "no, the accent goes on the number and we accept the contrast", that is a decision they own and this comp existed to get it. What it must not do is let an invention pass as a finding. The field is bounded to LARGE display type on purpose. Purple's 3.30:1 clears the 3:1 large-text threshold and fails the 4.5:1 normal-text one, so the eyebrow stays on white above the field rather than inside it — which also keeps the field to one element and the accent to one moment. ======================================================================== */ .home__eyebrow { font-family: var(--jad-font-display); font-weight: 700; font-synthesis-weight: none; font-stretch: condensed; font-size: var(--jad-text-h3); line-height: var(--jad-leading-tight); letter-spacing: var(--cand-track-caps); text-transform: uppercase; color: var(--cand-ink); margin-block: 0 var(--jad-space-5); max-width: var(--cand-measure-body); } /* The h1 field. `box-decoration-break: clone` is what makes it read as a board rather than as a coloured rectangle: the ground follows the line boxes, so the ragged right edge of the payoff line is the shape of the field, exactly as painted copy sits on the boards. */ h1.home__head { display: inline; box-decoration-break: clone; -webkit-box-decoration-break: clone; /* Vertical padding only. HORIZONTAL padding cannot be used here: with `box-decoration-break: clone` the inline box's side padding is applied to every fragment AFTER the line-breaker has already decided where to break, so the last fragment overflows its container by up to the padding width. Measured at 390px it escaped by 3px — invisible to the eye, a WCAG 1.4.10 reflow failure to a tool, and caught by render-check rather than by looking. The two offset shadows below paint the same horizontal breathing room and contribute nothing to layout width, so the band cannot overflow no matter how the text wraps. */ padding: var(--jad-space-2) 0; box-shadow: var(--jad-space-2) 0 0 var(--cand-accent-field), calc(var(--jad-space-2) * -1) 0 0 var(--cand-accent-field); font-size: var(--cand-display-sm); /* 1.25 rather than the tighter display leading: an inline field's padding does not grow the line box, so at any tighter leading the coloured bands of consecutive lines overlap. At 1.25 with a 8px vertical pad they meet exactly, which is the continuous band the boards paint. */ line-height: var(--jad-leading-heading); letter-spacing: var(--cand-track-display); text-transform: uppercase; color: var(--jad-accent-ink); background: var(--cand-accent-field); } /* The h1 is inline, so it needs a block to sit in and space beneath it. */ h1.home__head + p { margin-block-start: var(--jad-space-12); } /* h2.home__head is a section head, not the hero, and takes the ordinary section treatment from § 6 rather than the field. Restated here so the shared class name cannot quietly hand a second element the accent. */ h2.home__head { display: block; background: none; box-shadow: none; color: var(--cand-ink); text-transform: none; } /* ---- The sector grid ------------------------------------------------------ Eight cards, and SIX of them carry an "Argued against …" line while aerospace and AI do not, because their rival state is still pending. The grid is therefore built to be ragged: the cards stretch to their row, and the rival line is pushed to the bottom of the card so the six that have one align across the row and the two that do not simply end early. Nothing here assumes uniform content, and nothing renders an empty slot where a missing rival would be — an absent line is absent, not a gap with a label. */ .home__sector-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--cand-card-min), 1fr)); /* START, not stretch. Six of eight cards carry an "Argued against …" line and two do not, because aerospace and AI have no rival state yet. Stretched to a common row height, those two render as a title followed by dead space, which reads as broken rather than as shorter. Sized to content, a card with less in it is simply a shorter card — which is what "absent beats empty" looks like in a grid. No placeholder string is invented for the missing line, and none should be. */ align-items: start; gap: var(--jad-space-6); margin-block: var(--jad-space-12); /* The grid is a constrained-layout group, so core would cap it at the content size and centre it — leaving the cards inset from the column edge the headings above them sit on. The grid is the one block that wants the full column. */ max-width: none; margin-inline: 0; } /* Core's block-gap puts a top margin on every child after the first. Inside a grid that margin lands INSIDE the cell and shifts each card down by a different amount, which is what the first render showed: eight cards, no two top edges level. The gap is the grid's job here. THE INLINE MARGINS MATTER MORE THAN THEY LOOK, and this is the mobile bug. The shim gives every constrained child `margin-left: auto; margin-right: auto`, and per the grid spec **auto margins absorb free space, which suppresses stretch** — so each card sizes to its content and centres in its track instead of filling it. At desktop the cards nearly fill their tracks and the effect passes for content-sizing. At 390px there is one wide track, and eight differently-sized cards each centred in it read as a staggered, broken column rather than as a list. Zeroing the inline margins restores stretch: one edge, one width, every card. */ .home__sector-grid > * { margin-block: 0; margin-inline: 0; max-width: none; } /* Padding is one step down from the section default. At four tracks across a 934px column each card is ~214px wide, and 24px paddings leave 166px for a name — "Semiconductors" in the substitute display face needs about 170 and escaped its own card by four pixels. Twenty gives it 174. */ .sector-card { display: flex; flex-direction: column; padding: var(--jad-space-5); background: var(--jad-color-white); border: var(--jad-hairline) solid var(--cand-line); } /* THE ACCENT IS NOT ON THIS CARD, and that is deliberate rather than an omission. The card's heading IS the link to the sector page, so anything marking it has to survive the rotation landing on a value at 1.39:1 against white. The signals that carry it are the display face, the size step, the underline, and the card border — all of them non-colour. A2.3 and RA4 are the reason; the accent's own measured failure against white is the proof. The one accent-adjacent treatment the card takes is a hairline that thickens on hover, and it is paired with an underline-thickness change so the hover state is never signalled by colour alone either. */ /* Scoped through .site-main so it outranks the generic h3 rule in § 6, whose 48px top margin would otherwise push every card name off its own card. */ .site-main .sector-card__name { font-size: var(--jad-text-h3); line-height: var(--jad-leading-tight); letter-spacing: var(--jad-tracking-tight); margin-block: 0 var(--jad-space-3); /* The floor under the padding change above. Sector names are single words the design cannot shorten and the substitute face is wider than the real one will be, so a name that still cannot fit breaks rather than escaping its card. `break-word` only breaks when there is no other option, so nothing that fits is ever hyphenated. */ overflow-wrap: break-word; } .sector-card__name a { color: var(--cand-ink); text-decoration: underline; text-decoration-thickness: var(--cand-underline-weight); text-underline-offset: var(--cand-underline-offset); } .sector-card:hover { border-color: var(--cand-ink); } .sector-card:hover .sector-card__name a { text-decoration-thickness: var(--jad-rule); } /* The rival line is the boards' comparative needle, set quiet. It takes a fixed space above it rather than being pushed to a card bottom: with cards sized to content there is no bottom to push to, and a card without a rival simply ends after its name. #595959 on white is 7.00:1. */ .sector-card__rival { margin-block: 0; padding-block-start: var(--jad-space-5); font-size: var(--jad-text-sm); line-height: var(--jad-leading-body); letter-spacing: var(--cand-track-caps); text-transform: uppercase; color: var(--cand-ink-soft); } .home__proof-cta { margin-block: var(--jad-space-12); } /* =========================================================================== 11. COMP SURFACE TWO — THE SECTOR PAGE (semiconductors) The white-ground LED family rather than the photographic one, and that choice is forced rather than aesthetic: the build carries ZERO image elements inside `main` on any of the thirteen pages, so a photographic hero would mean inventing a photograph. The sampling pass also found the "dark scrim" is three different values across three sectors, which means the photographic family cannot be specified from this evidence anyway. So the sector hero is the board's white field: eyebrow, then the stat at display size, then the punchline. The accent moment is the rule under the hero rather than a field, because the sector hero's largest element is the claim VALUE and a coloured ground behind a figure would read as the figure being flagged rather than being the headline. ======================================================================== */ .sector__hero { margin-block: 0 var(--jad-space-section-lg); padding-block-end: var(--jad-space-12); border-block-end: var(--jad-rule) solid var(--cand-accent-rule); } /* The head that follows the hero drops its own rule. The hero's accent rule is already the boundary, and two rules seventy pixels apart read as an error rather than as emphasis — which is the same call § 6 makes for heads inside panels, arriving here because the first render showed it. */ .sector__hero + h2 { border-block-start: 0; padding-block-start: 0; margin-block-start: 0; } /* The hero claim is the page's largest element, so it drops the panel treatment it carries in the proof stack and takes the display step. */ .sector__hero .claim { margin: 0; padding: 0; background: none; border-inline-start: 0; } .sector__hero .claim__value { font-size: var(--cand-display); text-transform: uppercase; } .sector__hero .claim__statement { font-size: var(--jad-text-hero-lead); max-width: var(--cand-measure-body); } .sector__sub, .data__lede { font-size: var(--jad-text-lead); line-height: var(--jad-leading-relaxed); color: var(--cand-ink); max-width: var(--cand-measure-body); } .sector__contact, .sector__routing { margin-block: var(--jad-space-section); padding: var(--jad-space-8); background: var(--cand-panel); border: var(--jad-hairline) solid var(--cand-line); } /* Contact carries a heavy top rule and routing does not. That difference is the one piece of ranking this register expresses: contact is the primary call and routing is the honest exit, and showing them identically would flatten a decision the room needs to see. The rule is ink, not accent — it is carrying rank, which is meaning, which the accent may not do. */ .sector__contact { border-block-start: var(--jad-rule) solid var(--cand-ink); } .sector__contact-fallback { font-size: var(--jad-text-sm); color: var(--cand-ink-soft); margin-block-end: 0; } .sector__press { margin-block: var(--jad-space-12); font-size: var(--jad-text-base); } /* Routing and methodology blocks — outside the three comp surfaces, styled only so they do not render unstyled beside them. */ .routing-card, .about__methodology { padding: var(--jad-space-6); background: var(--cand-panel); border: var(--jad-hairline) solid var(--cand-line); margin-block: var(--jad-space-6); } .routing-card__head { font-family: var(--jad-font-display); font-weight: 700; font-synthesis-weight: none; font-size: var(--jad-text-h3); line-height: var(--jad-leading-tight); margin-block: 0 var(--jad-space-3); } .routing-card__link a, .routing-card a { color: var(--cand-ink); text-decoration: underline; text-decoration-thickness: var(--cand-underline-weight); text-underline-offset: var(--cand-underline-offset); } /* =========================================================================== 12. COMP SURFACE THREE — THE DATA SURFACE The page the campaign's own boards point at when they say "feel free to check our math", and the one surface where the register has to get quieter rather than louder. Forty claims stacked under sector heads is a reference document, and a reference document that shouts is one nobody checks. So the accent appears ONCE on this page — the wash behind the counter- evidence list — and nowhere else. No field, no per-claim colour, and no accent on the section heads, which take an ink hairline from § 6. Forty accent rules down a page would turn a rotation into a texture, and the moment a reader reads a colour as a category the accent has acquired meaning, which is the one thing the slot may never have. That the campaign's single loudest element on its most sceptical page is the list of figures that run AGAINST it is not an accident of layout. It is the argument the boards make when they say "feel free to check our math", and it is the one place a colour is worth spending. ======================================================================== */ .data__lede { margin-block: 0 var(--jad-space-12); } /* The "figures that run against us" list is the campaign's own honesty affordance and the thing a hostile checker looks for first. It gets the accent WASH — a tint, not a field — because the block is already distinguished by its heading and its position, so the tint adds emphasis without carrying any signal alone. The wash is computed from the slot, so an unknown execution colour tints it correctly with nothing edited. Scoped through `:has(.data__lede)` rather than by adjacency: the counter- evidence list is separated from its heading by a paragraph, and a `~` selector would have reached every later list on the page. The data surface carries exactly one list, so scoping to the surface is both precise and readable. If `:has()` is unavailable the list simply renders untinted, which is a quiet degradation rather than a wrong one. */ .site-main:has(.data__lede) .wp-block-list { padding: var(--jad-space-6) var(--jad-space-6) var(--jad-space-6) var(--jad-space-12); background: var(--cand-accent-wash); border-inline-start: var(--jad-rule) solid var(--cand-accent-rule); } /* A claim that is the target of a /data/#{id} deep link — the single most load-bearing URL contract on the site. Marked with a heavy ink rule and a panel change, never with colour: the champion pasting that link has no guarantee the reader's rendering carries the same execution accent. */ .claim:target { background: var(--jad-color-white); outline: var(--jad-rule) solid var(--cand-ink); outline-offset: var(--jad-space-1); } /* =========================================================================== 13. THE WORDMARK AND THE PLACEHOLDER MARKER The lockup in parts/header.html is a TRACED approximation of a mark the client's agency owns, and this comp is being shown to that agency. It is the sharpest edge in the whole set, so the label carries the full sentence here rather than the single word base.css uses. The art itself stays visible. Replacing it with an empty box would make the header read as broken, and A8.2 is a LAUNCH gate — client review running on labelled placeholders is the design, which is exactly why the label has to be a rule rather than something a reviewer remembers. The marker is repointed off the palette. base.css paints `.is-placeholder` with --jad-color-crimson, which § 3 retunes to ink; a stand-in outlined in the same colour as the body copy has stopped announcing itself. It takes --cand-alarm instead, which belongs to no palette on purpose. The class itself is untouched, so tools/placeholder-check.py --launch still sees it. ======================================================================== */ .is-placeholder { outline-color: var(--cand-alarm); } .is-placeholder::after { content: "placeholder — not the client's asset"; font-size: var(--jad-text-eyebrow); color: var(--cand-alarm); background: var(--jad-color-white); } /* RESOLVED 2026-08-18 — this block used to say the mark's two-colour state "cannot be expressed through this asset". That was true of the traced placeholder and is no longer true of anything: the production vector carries two slots, `currentColor` on the 18 type paths and `var(--jad-mark-bracket, currentColor)` on the CA bracket, and base.css fills the second from --jad-color-tan. ONE THING IS STILL OPEN, and it is a creative question rather than a mechanism. On the boards' white-ground family the silhouette takes the EXECUTION'S ACCENT; the vector's own bracket is a fixed tan (#B58151). So the header could reach for --jad-accent here instead and rotate with the page. It deliberately does not, for the reason the accent rule already states: five of seven accents fail 3:1 on white, and the mark is a meaningful graphic that has to clear it. Rotating the bracket would make the site's one permanent identity element the one element whose contrast is not knowable in advance. If Misfit's guardrails say the mark rotates, that is a guardrail decision with an accessibility cost to price, not a default to drift into. Still named in § 15. The ink override stays: the candidate register's near-black is what the rest of this comp reads in, and the header should not be the one place a second ink appears. --jad-color-charcoal is the vector's own type colour and is the value this override should probably become at the token retune. */ .site-header .wordmark__art { color: var(--cand-ink); } /* =========================================================================== 14. THE CANDIDATE LABEL — the most important block in this file. OC-2: "Every comp carries a visible label naming them as candidates sampled from 90dpi board renders, pending Misfit's brand guardrails." THIS IS WHAT MAKES THE COMP AN HONEST QUESTION RATHER THAN A FALSE CLAIM ABOUT SOMEBODY ELSE'S BRAND. Every colour here was pulled off a compressed JPEG, the typeface is a system substitute for a face nobody has identified, and the accent set may be a continuous family rather than the seven swatches it looks like. A comp that shows all of that without saying it is asserting a brand back to the people who own it. IT IS A RULE, NOT AN ANNOTATION, and that is the load-bearing choice. The label is generated from `body` rather than authored into markup, so it cannot be forgotten on the fourth render and cannot be lost when someone renders a page nobody thought to label. IN FLOW, NEVER FIXED — and both halves of that were learned by rendering. The first version was a bar fixed to the bottom of the viewport. It failed twice, in opposite directions: - It went MISSING in a full-page capture, which has no viewport bottom in the sense a fixed element means. A label whose visibility depends on how the page was captured is not a visible label. - Then, once it rendered, it OVERLAID the comp — a full-page capture paints a fixed element once, at the first viewport's bottom edge, which landed it midway down the page across the `$4.4 trillion` claim and covered a line of it. A caveat that damages the thing it is annotating is worse than no caveat. So there is one band, static, first in the document, above the site header. It is present in every capture mode there is including print, it cannot cover anything, and it is read before the comp is — which is the right order for a caveat. Anyone who has scrolled past it has already read it. ONE SENTENCE, SIZED FOR A PHONE. The longer version ran to seven lines at 390px: a wall the reader hits before the comp starts, which inverts what it is for — at that length a caveat reads as anxiety rather than as honesty. The reasoning it used to carry (the substitute face, the accent block being our interpretation) belongs in the presentation frame and in CANDIDATE-TOKENS.md, where a reader who wants it will go looking. What has to survive on the page is the claim status, and that fits in one line. White on the near-black band is 17.40:1. ======================================================================== */ :root { --cand-label-text: "CANDIDATE — colour, type and accent sampled from the 8/07 boards, pending Misfit's guardrails."; } body::before, .site-footer::before { content: var(--cand-label-text); display: block; padding: var(--jad-space-3) var(--jad-space-5); background: var(--cand-ink); color: var(--jad-color-white); font-family: var(--jad-font-body); font-size: var(--jad-text-xs); line-height: var(--jad-leading-body); letter-spacing: var(--cand-track-caps); } body::before { border-block-end: var(--jad-rule) solid var(--cand-alarm); } /* The second in-flow instance, at the head of the footer. `/data/` runs past 22,000px, and a reader who has scrolled that far left the top band a long way behind them. This costs one rule, cannot overlay anything, and puts the status back in front of anyone who reaches the end of a long page. It is deliberately at the document's one natural boundary rather than repeated at every section head — forty of these down the data surface would be the same texture problem § 12 refuses for the accent. */ .site-footer::before { margin-block-end: var(--jad-space-8); border-block-end: var(--jad-hairline) solid var(--cand-alarm); } /* The same label as a class, for the day the markup can carry one. Identical copy, so the two cannot drift into saying different things. A surface using this should still not remove the generated bar — the point of the rule is that the label does not depend on anyone remembering. */ .candidate-label { display: block; margin-block: var(--jad-space-6); padding: var(--jad-space-3) var(--jad-space-5); background: var(--cand-ink); color: var(--jad-color-white); border-inline-start: var(--jad-rule) solid var(--cand-alarm); font-family: var(--jad-font-body); font-size: var(--jad-text-xs); line-height: var(--jad-leading-body); } /* =========================================================================== 15. WHAT THIS REGISTER REFUSES, AND WHAT IT COULD NOT TRANSLATE The refusals first, stated as rules so they cannot quietly stop being true. ======================================================================== */ /* No decorative background image survives. The build ships none today, and a photograph appearing under a hero whose scrim cannot be specified from the evidence would be inventing the one thing the sampling pass could not read. */ .site-main :is(.wp-block-cover, .wp-block-group)[style*="background-image"] { background-image: none; } /* No text is set in a third family by an inline style. */ .site-main [style*="font-family"] { font-family: var(--jad-font-body); } /* The accent never reaches a focus ring, whatever a surface does to the slot. base.css composes the ring from --jad-focus-color and --jad-focus-halo, and § 3 pins both to values that hold on every ground. This restates the ban at the element so a future rule cannot quietly repoint it. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--jad-focus-color); } /* --------------------------------------------------------------------------- WHAT DID NOT TRANSLATE. Five things, each a genuine limit rather than a deferral, and each one a question worth putting to Misfit in the room. 1. THE TYPEFACE. IDENTIFIED 2026-08-17 -- and the gap below is unchanged. The face is ITC Franklin Gothic LT Pro Demi Compressed (`FranklinGothicLTPro-DmCm`), read from the type-layer descriptors inside Misfit's own production PSD. It is now named first in the display stack, but we hold no licensed copy, so what actually renders is still the system fallback. Identification did not close this gap; it converted it from "we do not know the face" into "we know it and cannot license it yet." Note the prior guesses were all CONDENSED and the real face is COMPRESSED -- a narrower width class, which is exactly the axis that decides whether a substitute can carry these headlines. The three closest free candidates are all network-hosted. The review copy has to render offline and on a phone with no CDN guarantee, so a webfont that silently fails would turn the comp into an argument about its own fallback. The display stack is system-resident and chosen for LINEAGE — Impact is the ubiquitous member of the same heavy condensed-grotesque family Anton belongs to. It is heavier and less refined than the boards. That gap is the single most visible inaccuracy in these comps and it is deliberate. 2. ONE FACE BECAME TWO. The boards show a single face throughout with no secondary anywhere. A billboard sets one line; this site sets several thousand words of sourced body copy, in the July talking-points register by a decision already ruled. Setting that in a heavy condensed display face would be unreadable. So display and body diverge here, and whether the campaign intends a body face at all is a real open question the boards cannot answer. 3. ALL-CAPS DID NOT REACH THE SECTION HEADS. The boards set at most six words; this site's heads run past a dozen, and a dozen words of caps is a legibility cost every reader pays. Caps are scoped to the eyebrow, the h1, the hero figure and the buttons. If Misfit wants caps throughout, that is one declaration — but it should be their call rather than ours. 4. THE LED-DIGIT DEVICE. A gas-price-style physical counter standing in for the number, with a FIXED red independent of the execution's accent. It is the most distinctive thing about the white-ground family and it has no web equivalent that is not pastiche. The nearest honest echo is here — the figure set in the display face with tabular figures — and the fixed red is deliberately absent from the rotation set's usage, because borrowing a device colour as an accent would make it mean something it does not. 5. THE TWO-COLOUR LOCKUP. On the white-ground boards the silhouette stroke carries the execution's accent while the type stays near-black. That is an internal relationship inside one asset, and the lockup SVG resolves every paint to a single currentColor by the accent-slot gate's design — correctly, since that gate is what stops a campaign colour being baked into art. Expressing the real two-colour state needs the asset to grow a second slot, which is a change to a file this register does not touch. The header therefore renders the mark in one ink and understates the creative. And one thing that is a question rather than a limit: THE SCRIM. Sampling three sectors found three genuinely different dark values, which reads as each photograph's own tones under a partial-opacity wash rather than one brand overlay. This file leaves tokens.css's alpha-wash mechanism untouched and pins no scrim colour. Whether the campaign intends a fixed scrim or a per-photograph one is the question, and it cannot be answered from a 90dpi JPEG. ------------------------------------------------------------------------ */ /* =========================================================================== SECTOR EYEBROW AS h1 — a specificity fix, not a restyle 2026-08-15: the sector eyebrow became the page's h1 (upstream in emit.py), because the sector wireframe asks for one h1 in the eyebrow/hero pairing and the pages previously had zero. One side effect: the display h1 rule outscores the eyebrow rule authored in section 6, so the eyebrow rendered at display size and ate the hero's headroom. Re-asserts the section 6 rule at a specificity that can reach an h1. It deliberately does NOT introduce new values -- every declaration here is the one already chosen above. If the eyebrow stops being the h1, delete this. ======================================================================== */ .site-main h1.sector__eyebrow { font-size: var(--jad-text-sm); line-height: var(--jad-leading-body); letter-spacing: var(--cand-track-caps); text-transform: uppercase; color: var(--cand-ink-soft); margin-block: 0 var(--jad-space-5); } /* --------------------------------------------------------------------------- Claim copy affordance — hidden until enhanced, and announced when it works. `.claim__actions` declares `display: flex`, which is specificity 0,1,0 and loads AFTER the UA stylesheet's `[hidden] { display: none }` — the same specificity, later in the cascade, so flex WINS and the `hidden` attribute would have done nothing. This rule is the guard, and it is the reason the attribute is trustworthy at all. Do not remove it because "hidden already hides things"; here it did not. The status region is the polite live region a11y.md requires for copy feedback. It is visually hidden rather than absent: the confirmation is for a screen-reader user, and a sighted user already saw the clipboard work. ------------------------------------------------------------------------ */ .claim__actions[hidden] { display: none; } .claim__copy-status { position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }