` outside the `VAMTAM_NO_PAGE_CONTENT` guard, so it is emitted on every template that calls `get_header()`. Markup: `functions.php` on `wp_body_open` priority 1, so it is the first focusable node in the document. Hiding: the clip technique, not `left: -9999px`, which can widen the scroll container and create horizontal overflow. `position: fixed` on focus so it clears the sticky header when the page is scrolled. ========================================================================== */ .sun-skip-link { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; white-space: nowrap; clip: rect(0 0 0 0); clip-path: inset(50%); } .sun-skip-link:focus, .sun-skip-link:focus-visible { position: fixed; top: 12px; left: 12px; z-index: 100000; /* over the sticky header and Elementor overlays */ display: inline-flex; align-items: center; box-sizing: border-box; width: auto; height: auto; min-height: 44px; /* SC 2.5.8 target size */ margin: 0; padding: 12px 22px; overflow: visible; clip: auto; clip-path: none; border: 0; border-radius: 0; background: #242E35; /* ink */ color: #FFFFFF; /* 13.84:1 on ink */ font-family: var(--vamtam-h6-font-family, "Alata"), sans-serif; font-size: 14px; line-height: 1.2; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; /* Dual ring, same recipe as §26: the white inner ring carries 13.84:1 against this ink panel, the gold outer ring carries 4.87:1 against the page behind it. */ outline: 3px solid var(--sun-focus-ring, #906A3C); outline-offset: 2px; box-shadow: 0 0 0 2px var(--sun-focus-ring-inner, #FFFFFF); /* The theme transitions `a` colours and §26c keeps that transition alive on focus, which would leave the link ink-on-transparent — i.e. unreadable over a dark hero — for the first 300 ms after the first Tab. The whole point of a skip link is that it is legible the instant it appears, so it opts out entirely. `!important` because 26c's is. */ transition: none !important; } /* ========================================================================== 26. FOCUS RING (UX-T05) -------------------------------------------------------------------------- The gap: keyboard tab stops with neither an outline nor a box-shadow — ADD TO CART, `.c7-link`, the PDP quantity inputs, the collection filter selects, the reservation form, the member password field. Three causes, all addressed here: (a) §5 carried `outline: 0` on every Commerce7 input/select/ textarea for ALL focus, keyboard included. Now narrowed to `:focus:not(:focus-visible)` — that edit is in §5, the one change this section makes outside its own block. (b) Commerce7's own stylesheet suppresses the ring on real keyboard focus for four controls. Fetched and measured 2026-10-02 (`cdn.commerce7.com/v2/commerce7.css`, 117867 bytes): 12 rules mention `outline`, and while most correctly scope to `:focus:not(:focus-visible)`, these four do not — h1.c7-h1:focus { outline: 0 } .c7-date-picker-toggle:focus { outline: 0 } .rdp-nav_button:focus { outline: none } .rdp-day_button:focus { outline: none } so they kill the KEYBOARD indicator too. 26b overrides them. (c) the indicator was being ANIMATED, not suppressed. See 26c — this is the cause that actually explains most of the count. Why two colours: no single colour clears 3:1 on white, cream, slate AND ink. Computed here with the WCAG 2.x relative-luminance formula (2026-10-02): white cream slate ink #906A3C 4.87 4.58 1.39 2.84 #FFFFFF 1.00 1.06 6.78 13.84 So: a 2px white ring at the control edge, a 3px #906A3C ring outside it. Gold carries white (4.87) and cream (4.58); white carries slate (6.78) and ink (13.84). The two rings contrast 4.87:1 with EACH OTHER, so the indicator reads as a shape on any ground — the published dual-ring technique for SC 1.4.11. Not gated on §27: the ring names #906A3C in its own tokens, so reverting the palette section leaves the ring intact. ========================================================================== */ :root { --sun-focus-ring: #906A3C; /* outer ring — carries light grounds */ --sun-focus-ring-inner: #FFFFFF; /* inner ring — carries dark grounds */ --sun-focus-ring-width: 3px; --sun-focus-ring-gap: 2px; } /* 26a. Baseline — every natively focusable element, keyboard focus only. */ a[href]:focus-visible, area[href]:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, details:focus-visible, summary:focus-visible, iframe:focus-visible, object:focus-visible, audio[controls]:focus-visible, video[controls]:focus-visible, [tabindex]:focus-visible, [contenteditable="true"]:focus-visible { outline: var(--sun-focus-ring-width, 3px) solid var(--sun-focus-ring, #906A3C); outline-offset: var(--sun-focus-ring-gap, 2px); box-shadow: 0 0 0 var(--sun-focus-ring-gap, 2px) var(--sun-focus-ring-inner, #FFFFFF); /* The ring must be instant, not animated — see 26c, which is where that is actually enforced against the parent theme's `!important`. */ transition-property: color, background-color, border-color; } /* 26b. Commerce7 controls — see (b) in the banner for the four rules this overrides. WHY `!important` HERE, STATED HONESTLY. It is not load order. Measured in the rendered homepage 2026-10-02: `cdn.commerce7.com/v2/commerce7.css` is the 6th stylesheet in the document and this file is the 38th, so source order already favours this file, and `body .rdp-day_button:focus-visible` (0,2,1) already out-specifies `.rdp-day_button:focus` (0,2,0). The `!important` buys robustness, not a tie-break, and it buys it against two specific things: * That URL is NOT version-pinned — `/v2/commerce7.css`, no `?ver=` — so Commerce7 can ship a higher-specificity or `!important` focus rule into production at any time without a deploy on our side. Today their file carries zero `outline … !important` declarations; nothing guarantees tomorrow's does. * Commerce7 mounts its components client-side and replaces the `#c7-content` subtree wholesale after boot, so what the browser ends up with is not what the server sent, and a style injected at runtime lands after every . Keyboard focus is the one affordance whose absence locks a user out rather than merely looking wrong, so it is worth being unsubtle about. Scoped to the Commerce7 class namespace so nothing else on the site is forced. */ body .c7wp-wrap .c7-btn:focus-visible, body #c7-content .c7-btn:focus-visible, body .c7-btn:focus-visible, body .c7-link:focus-visible, body .c7-form input:focus-visible, body .c7-form select:focus-visible, body .c7-form textarea:focus-visible, body .c7wp-wrap .c7-form input:focus-visible:not([disabled]), body .c7wp-wrap .c7-form select:focus-visible:not([disabled]), body .c7wp-wrap .c7-form textarea:focus-visible:not([disabled]), body #c7-content .c7-form input:focus-visible:not([disabled]), body #c7-content .c7-form select:focus-visible:not([disabled]), body #c7-content .c7-form textarea:focus-visible:not([disabled]), body .c7-filters select:focus-visible, body .c7-pagination a:focus-visible, body .c7-pagination button:focus-visible, body .c7-user-nav a:focus-visible, body .c7-user-nav button:focus-visible, body .c7-side-cart a:focus-visible, body .c7-side-cart button:focus-visible, body .c7-side-cart input:focus-visible, body .c7-modal a:focus-visible, body .c7-modal button:focus-visible, body .c7-modal input:focus-visible, body .c7-modal select:focus-visible, body .c7-modal textarea:focus-visible, body .c7-date-picker-toggle:focus-visible, body .rdp-day_button:focus-visible, body .rdp-button_previous:focus-visible, body .rdp-button_next:focus-visible { outline: var(--sun-focus-ring-width, 3px) solid var(--sun-focus-ring, #906A3C) !important; outline-offset: var(--sun-focus-ring-gap, 2px) !important; box-shadow: 0 0 0 var(--sun-focus-ring-gap, 2px) var(--sun-focus-ring-inner, #FFFFFF) !important; /* §4 puts `transition: all .3s !important` on every Commerce7 button, so the ring FADES IN over 300 ms. That is not a cosmetic detail: a probe that reads computed style in the same tick as `.focus()` sees `outline-offset: 0` and `box-shadow: none` and records "no indicator". Keep the colour transitions, make the indicator instant. */ transition-property: color, background-color, border-color !important; } /* 26c. THE RING MUST BE INSTANT — the subtlest half of the ticket. The parent theme sets `transition: all 0.3s !important` on `.button, button, input[type=button], input[type=submit]` (`lagar/vamtam/assets/css/dist/all.css`) and §4 repeats it for every `.c7-btn`. `all` includes outline-color, outline-offset and box-shadow, so the ring does not appear — it FADES IN over 300 ms. A probe that reads computed style in the same tick as `.focus()` therefore samples t=0 and sees `outline-offset: 0`, `outline-color: currentcolor`, `box-shadow: none`, and records a tab stop with no indicator even though the ring is correct 300 ms later. Only an `!important` beats an `!important`. Drop the three indicator properties from the transition list while focus is visible; keep the colour transitions. -------------------------------------------------------------------------- */ a:focus-visible, area:focus-visible, button:focus-visible, summary:focus-visible, .button:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible, [tabindex]:focus-visible { transition-property: color, background-color, border-color !important; } /* 26d. The two rings this file already drew in ornament gold #B98D58, which computes 2.99:1 on the white cards they sit on — below the 3:1 floor for a non-text indicator. Same dual ring, and each card's own lift shadow is kept by appending it to the ring shadow rather than replacing it. */ body .ssx-family .ssx-family__card:focus-visible { outline: var(--sun-focus-ring-width, 3px) solid var(--sun-focus-ring, #906A3C); outline-offset: var(--sun-focus-ring-gap, 2px); box-shadow: 0 0 0 var(--sun-focus-ring-gap, 2px) var(--sun-focus-ring-inner, #FFFFFF), 0 10px 28px rgba(36, 46, 53, 0.09); /* Both cards transition `box-shadow`, so the ring would otherwise fade in. */ transition-property: border-color, transform; } body .ss-soldout__card-link:focus-visible { outline: var(--sun-focus-ring-width, 3px) solid var(--sun-focus-ring, #906A3C); outline-offset: var(--sun-focus-ring-gap, 2px); box-shadow: 0 0 0 var(--sun-focus-ring-gap, 2px) var(--sun-focus-ring-inner, #FFFFFF), 0 6px 20px rgba(36, 46, 53, 0.08); transition-property: border-color, transform; } /* 26e. Forced-colours mode draws its own ring; do not fight it. */ @media (forced-colors: active) { a[href]:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline-color: Highlight; box-shadow: none; } } /* ========================================================================== 27. ACCESSIBLE PALETTE (D-V6 — decided) -------------------------------------------------------------------------- TO REVERT: delete this whole section and nothing else. Nothing outside it depends on it — §23, §24, §25 and §26 all name their colours directly, and every `var()` below carries a literal fallback. STATUS: draft — not yet claims-audited (owner instruction: the claims auditor is not run this wave). Decision (D-V6): #906A3C is the text gold on every light ground — prices, links, badges, button fills. #B98D58 stays for non-text ornament and for text on ink #242E35, the one ground where it already passes. #909090 body/placeholder text becomes #6E6E6E, the Commerce7 field border #DEDDD9 becomes #938F82, the header "Log in" becomes #FFFFFF. Computed 2026-10-02 with the WCAG 2.x relative-luminance formula, before → after: gold text on white #B98D58 2.99 → #906A3C 4.87 (text ≥4.5) gold text on cream #B98D58 2.82 → #906A3C 4.58 (text ≥4.5) white on gold fill #B98D58 2.99 → #906A3C 4.87 (text ≥4.5) grey text on white #909090 3.19 → #6E6E6E 5.10 (text ≥4.5) grey text on cream #909090 3.00 → #6E6E6E 4.80 (text ≥4.5) field border on white #DEDDD9 1.36 → #938F82 3.23 (UI ≥3.0) field border on cream #DEDDD9 1.28 → #938F82 3.04 (UI ≥3.0) "Log in" on slate #242E35 2.04 → #FFFFFF 6.78 (text ≥4.5) Cream is #F9F8F4, the body background set by the theme-options inline style. The usual "accessible grey" #767676 computes only 4.27 on cream and FAILS, which is why the grey here is #6E6E6E and not #767676. THE TOKEN CHAIN, traced rather than guessed, because it is the whole reason this section is as short as it is. Three layers: 1. the Elementor kit emits the palette on the body — `.elementor-kit-13 { --e-global-color-vamtam_accent_1: #B98D58; --e-global-color-vamtam_accent_4: #909090; … }` (fetched from `uploads/elementor/css/post-13.css`); 2. the PARENT THEME aliases every one of them, at `all.css` line 1 — `body { --vamtam-accent-color-1: var(--e-global-color-vamtam_accent_1); --vamtam-accent-color-4: var(--e-global-color-vamtam_accent_4); … }`; 3. this file reads `--vamtam-accent-color-N` 62 times (24 of them accent-1, 9 accent-4). So re-pointing a kit global in 27c propagates through the alias to EVERY consumer, this file's and the parent theme's alike, with no further work. Note for anyone editing this: an earlier draft of this section asserted that `--vamtam-accent-color-4` was undefined and that each consumer therefore had to be re-pointed by hand. That was wrong — layer 2 defines it — and the mistake matters in both directions, so it is recorded here rather than quietly dropped. What that means for the two tokens in play: * `vamtam_accent_4` (the grey) IS re-pointed in 27c, and the propagation is wanted. The parent theme reads the alias with no fallback in several places — a slider tab border, a WooCommerce breadcrumb, a select2 border, an Elementor tabs background — and all of those move #909090 → #6E6E6E, i.e. 3.19 → 5.10 against white. That is a darkening of an existing colour, never the introduction of a colour where there was none, so there is no surface it can make worse. Of this file's 9 reads of the alias, 6 are `color:` and 3 define a local token; 27f restates the 6 as belt-and-braces so the grey survives a kit rebuild under a new ID, and 27d/27g carry the 3. * `vamtam_accent_1` (the gold) is deliberately NOT re-pointed, because D-V6 keeps the brand gold for ornament and this file reads the alias 24 times for BOTH text and ornament. Counted by property: 10 `color:` (text) and 14 ornament-or-token (3 `border-color`, 1 each of `outline`, `border`, `border-bottom`, `background`, and 7 local/Commerce7 token definitions). The 10 gold-TEXT call sites are listed one by one in 27e; the 14 others are absent and keep #B98D58, except the three local tokens 27g re-points on purpose. Effect on §23 and §24, checked rather than assumed. Both are untouched: * §23's Reserve pill names #906A3C literally in its own rules. * §24 declares no colours at all, and neither footer template 623 nor either header template (5796, 316) references a single Elementor global colour — `_elementor_data` for all three contains zero `globals/colors?id=` references, and `post-623.css` contains zero mentions of the two globals 27c re-points. So 27c cannot reach them. * The footer columns set `background-color: var(--vamtam-accent-color-8)`, which through the chain above resolves to #F9F8F4 — cream, not transparent. On that ground the footer link hover moves from #B98D58 (2.82, failing) to #906A3C (4.58, passing). The footer reads better after this section, not worse. ========================================================================== */ /* 27a. The token rule, named once. */ :root { --sun-gold-text: #906A3C; /* text, links, badges, button fills on light grounds */ --sun-gold-ornament: #B98D58; /* non-text ornament, and text on ink #242E35 */ --sun-grey-text: #6E6E6E; /* replaces #909090 for body + placeholder text */ --sun-field-border: #938F82; /* replaces #DEDDD9 on form-field boundaries */ --sun-on-slate: #FFFFFF; /* text on the slate header #545D5C */ } /* 27b. Site-level tokens. These three ARE defined on the live site by the theme-options inline style — fetched from the served homepage, verbatim: `--vamtam-body-link-hover: #B98D58`, `--vamtam-body-link-active: #B98D58`, `--vamtam-btn-text-color: #B98D58` — so this re-points existing values rather than introducing new ones. That rule's selector is `body` (0,0,1), as is the parent theme's alias block at `all.css` line 1, so `html body` (0,0,2) clears both. */ html body { --vamtam-body-link-hover: var(--sun-gold-text, #906A3C); --vamtam-body-link-active: var(--sun-gold-text, #906A3C); --vamtam-btn-text-color: var(--sun-gold-text, #906A3C); } /* 27c. Elementor kit globals — layer 1 of the chain in the banner, and the lever that moves everything downstream. The kit is post 13 and emits the palette at `.elementor-kit-13` (0,1,0) on the ; measured in `post-13.css`, `vamtam_h6_color` and `vamtam_accent_1` are both #B98D58 and `vamtam_accent_4` is #909090. The attribute selector below is (0,1,1), so it wins on specificity as well as on source order (post-13.css is the 8th stylesheet in the document, this file the 38th), and it keeps working if the kit is ever rebuilt under a new ID. `vamtam_h6_color` is the label/eyebrow/price style and `vamtam_accent_4` is the body grey — both text, both re-pointed. `vamtam_accent_1` is left at the ornament gold on purpose. EVERY DOCUMENT-LEVEL CONSUMER WAS CHECKED FOR A DARK GROUND, because darkening a grey is only an improvement on a LIGHT ground and this section would be a regression on a dark one. Searched `_elementor_data` across the whole database: * `vamtam_h6_color` — 0 documents reference it. Re-pointing it moves only the kit's own h6 default, which nothing overrides on a dark ground. * `vamtam_accent_4` — 3 live references in 2 published pages: page 340 /our-story/vineyard/ — a text-editor `text_color`, body copy on the page's light ground. page 364 /membership/ — call-to-action widget `454290a`, both `description_color` and `button_color`. Its `bg_image` is EMPTY and its `overlay_color` is `vamtam_accent_5` = #FFFFFF, while its `title_color` is `vamtam_accent_3` = #242E35 — a dark title on a white overlay, so the ground is light. All three move #909090 → #6E6E6E, i.e. 3.19 → 5.10 on white. No dark ground anywhere, so there is no consumer this makes worse. The remaining references are a draft, two unassigned library templates and six revisions, none of which render. The durable fix is the kit's own `_elementor_page_settings`, which is `content-migration`'s surface. */ body[class*="elementor-kit-"] { --e-global-color-vamtam_h6_color: var(--sun-gold-text, #906A3C); --e-global-color-vamtam_accent_4: var(--sun-grey-text, #6E6E6E); } /* 27d. Commerce7 tokens. §1 sets these on `.c7wp-wrap, #c7-content`; the `body` prefix lifts both branches above it. This also covers §1's `--c7-alt-text-color` and `--c7-field-placeholder`, which both read `--vamtam-accent-color-4`. */ body .c7wp-wrap, body #c7-content { --c7-primary-color-text: var(--sun-gold-text, #906A3C); --c7-primary-color-focus: rgba(144, 106, 60, 0.25); --c7-alt-text-color: var(--sun-grey-text, #6E6E6E); --c7-field-placeholder: var(--sun-grey-text, #6E6E6E); --c7-field-border-color: var(--sun-field-border, #938F82); } /* §5 hard-codes the field border rather than reading --c7-field-border-color, so the token above does not reach it. */ body .c7wp-wrap .c7-form input[type='text'], body .c7wp-wrap .c7-form input[type='email'], body .c7wp-wrap .c7-form input[type='number'], body .c7wp-wrap .c7-form input[type='tel'], body .c7wp-wrap .c7-form input[type='password'], body .c7wp-wrap .c7-form textarea, body .c7wp-wrap .c7-form select, body #c7-content .c7-form input[type='text'], body #c7-content .c7-form input[type='email'], body #c7-content .c7-form input[type='number'], body #c7-content .c7-form input[type='tel'], body #c7-content .c7-form input[type='password'], body #c7-content .c7-form textarea, body #c7-content .c7-form select { border-color: var(--sun-field-border, #938F82); } /* 27e. Gold TEXT on light grounds — all 10 call sites in this file that read --vamtam-accent-color-1 for a `color`. The ornament uses of the same token (field focus border, option-selected colour, field border, pagination active border, the `.ss-soldout__all` underline) are deliberately absent and keep #B98D58. */ body .c7wp-wrap .c7-product__title a:hover, body #c7-content .c7-product__title a:hover, body .c7wp-wrap .c7-product__add-to-cart__price, body #c7-content .c7-product__add-to-cart__price, body .c7wp-wrap .c7-price--discounted, body #c7-content .c7-price--discounted, body .c7wp-wrap .c7-pagination__pages a:not([disabled]):hover, body .c7wp-wrap .c7-pagination__pages button:not([disabled]):hover, body #c7-content .c7-pagination__pages a:not([disabled]):hover, body #c7-content .c7-pagination__pages button:not([disabled]):hover, body .c7wp-wrap .c7-pagination__pages a.c7-active, body .c7wp-wrap .c7-pagination__pages button.c7-active, body #c7-content .c7-pagination__pages a.c7-active, body #c7-content .c7-pagination__pages button.c7-active, body .c7wp-wrap .c7-breadcrumbs .c7-active, body #c7-content .c7-breadcrumbs .c7-active, body .c7wp-wrap .ss-pdp__gallery-main--empty::after, body #c7-content .ss-pdp__gallery-main--empty::after, body .ss-soldout__eyebrow, body .ss-soldout__card-cta, body .ss-soldout__all:hover, body .ss-soldout__all:focus-visible { color: var(--sun-gold-text, #906A3C); } /* 27f. Grey text — all 6 call sites in this file that read --vamtam-accent-color-4 for a `color`. 27c already reaches every one of them through the alias chain, so this is belt-and-braces: it keeps the grey if the kit is rebuilt under a new ID or the parent theme drops the alias. The disabled-info button is listed at its full original specificity (0,4,1), because a shorter selector would lose to §12's rule rather than override it. */ body .c7wp-wrap .c7-product__subtitle, body #c7-content .c7-product__subtitle, body .c7wp-wrap .c7-price--original, body #c7-content .c7-price--original, body .c7wp-wrap .c7-product__add-to-cart__price__variant, body #c7-content .c7-product__add-to-cart__price__variant, body .c7wp-wrap .c7-product__login-message, body #c7-content .c7-product__login-message, body .c7wp-wrap .c7-btn--disabled-info, body #c7-content .c7-btn--disabled-info, body .c7wp-wrap .c7-btn.c7-btn--disabled-info[disabled], body #c7-content .c7-btn.c7-btn--disabled-info[disabled], body .c7wp-wrap .c7-pagination__total, body #c7-content .c7-pagination__total { color: var(--sun-grey-text, #6E6E6E); } /* 27g. Local module tokens. `--ssx-gold` (§16 cross-sell, live) is read six times: the price, the note, the CTA and the "LARGE FORMAT" badge FILL — `color: #fff` on that fill is 2.99:1, which is D-V6's ribbon case — plus the card border and the card focus outline. So it becomes the text gold. The two ornament uses darken from 2.99 to 4.87 against white, which is an improvement under SC 1.4.11, not a regression, and is why this is one token change rather than a split. `--ss-pdp-gold` (§10–§17) styles the Commerce7 Product Template v2, which is not installed. Re-pointing it now means nobody can install a template carrying the failing palette. `--ssv-gold` (§21 spec bars) is read exactly once, for an 11×11 px marker square — pure ornament. It keeps #B98D58 and is absent below. `--ss-pdp-muted` carries the grey. */ body .c7wp-wrap .ss-pdp, body #c7-content .ss-pdp { --ss-pdp-gold: var(--sun-gold-text, #906A3C); --ss-pdp-muted: var(--sun-grey-text, #6E6E6E); } body .ssx-family { --ssx-gold: var(--sun-gold-text, #906A3C); } /* 27h. Header "Log in". Commerce7 renders its user nav into , outside `.c7wp-wrap`/`#c7-content`, so §1's token remap cannot reach it — this is the one unscoped rule the section needs. #242E35 on the slate header #545D5C computes 2.04:1; white on that slate is 6.78:1. */ body a.c7-user-nav__account__login, body .c7-user-nav__account__login { color: var(--sun-on-slate, #FFFFFF); } /* 27i. (moved) Account + cart icons and the logo sizes now live in §46 HEADER. */ /* ========================================================================== 28. 21+ AFFIRMATION DIALOG + AGE STATEMENT (UX-T01, D-V5 — CSS half) -------------------------------------------------------------------------- CSS ONLY, AND THE MARKUP DOES NOT EXIST YET. The dialog element, the trigger, the `sessionStorage` persistence and every string belong to an `mu-plugins/sunstone-age-affirmation.php` that is not in the tree as of 2026-10-02 (`grep -rl sun-age site/web/app/mu-plugins/` → no match). That file is `bedrock-app`'s surface. Shipping the CSS first is the same ordering this file uses everywhere else — stylesheet before document — and costs nothing while the markup is absent: not one selector below can match. THE MARKUP CONTRACT. These nine class names are the whole interface between the two surfaces, and this section styles those nine and nothing else: `__confirm` is a