/* ============================================================================ theme.css — Miracle Mind front-facing fleet One token file, two domains, FOUR registers. Re-founded 2026-09-01 on the blessed Ecosystem Identity Codex (round 16, design/codex/brand-codex.html). Every value below now traces to a swatch, a role binding, or a law on that sheet. What was here before predated it. ---------------------------------------------------------------- THE MODEL Two layers, and only two — codex § "Role bindings: the layer that ends the drift". ASSET TOKENS the palette. The ONLY place a hex is ever written. ROLE TOKENS name a job (--cta-background, --link, --text) and bind to exactly one asset token per register. A SURFACE CONSUMES ROLE TOKENS ONLY. It never reaches past them to a palette value and it never invents a shade. Both CTA misses of 2026-08-29 happened in the gap this model closes: a hex was chosen at the surface, by eye, and no rule was available to be broken. ------------------------------------------------------------------- LAWS 1. No pure white, no pure black, anywhere, in any register. 2. --cta-background has NO per-register override. Every primary action computes to rgb(216, 173, 84) = #D8AD54, on all four grounds. Contrast is solved on --cta-text, never by darkening the gold: a darkened gold is a different colour standing in the identity's slot, and it passes every check you have. (Matthew, 2026-08-29 — raised to a binding rather than a fix. Asserted by design/check-cta-token.mjs.) 3. The orbit star is NEVER rendered in teal. Three shipped variants and no others: gold gradient, ink #0D0A08, warm white #FFF8E7. 4. Teal holds link tier on the two light-ish grounds and never travels to the founder or the dark register. SUPERSEDED 2026-08-29, kept because a deleted law gets reinvented: "the two type systems are deliberately unharmonised — matthewmiceli.com is serif/editorial, miraclemind.dev is sans/systematic. Person vs product. Do not merge them." Matthew's ruling: "Let's have a completely unified type." One family, Manrope, across all four registers. His "for now" is the stated tripwire: if the founder ground ever needs to read as a person rather than a product, the split reopens and this block is the record of what it was. ------------------------------------------------- REGISTERS ARE SCOPES A surface sets exactly one on . narrative-spine.md rule 5 is why "sales" is a register and not a modifier. data-register="business" 01 · Light paper · miraclemind.dev home, proof, contact, and the answer/article web (S04) data-register="sales" 02 · Dark · the funnel and the tribe landers (S03, S05). Ceremonial. data-register="personal" 03 · Bone + deep · matthewmiceli.com, founder data-register="interior" 04 · Chrome · the OS behind the login wall Register 04 is DECLARED AND UNCONSUMED. No surface in this fleet sets it; the auth seam (A01–A04) and the OS interior are named and never designed. It is written down so that whoever builds it inherits the bindings rather than picking them, and so the CTA law reaches indoors, which is the one place register 04's own visual law makes an explicit exception for. Base styles are 390px single column. Desktop layers up. ========================================================================= */ /* Manrope 300/700 + IBM Plex Mono — "2b Manifold", LOCKED 2026-08-29. Imported here rather than per surface so the fleet has one place to change it; a production build swaps this for preconnect + , which is faster and is a build concern, not a token concern. */ @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Manrope:wght@300;400;500;600;700&display=swap"); /* ============================================================== ASSET LAYER The palette. Every hex in the fleet is on this page and nowhere else. Values marked DERIVED have no corpus source and are named as such on the codex's provenance panel; they are the ones to challenge first. */ :root { /* the golds. Three, with distinct jobs, and they are not interchangeable. */ --gold-light: #F6E6C1; /* mark gradient stop 1 */ --gold: #D8AD54; /* THE identity gold. Every CTA fill, every ground */ --gold-way: #A9863F; /* wayfinding stop: rules and hairlines, NOT type */ --gold-dark: #8C5C26; /* mark gradient stop 3. Text-safe. NEVER a fill */ /* teal — behaviour, never identity, never the mark */ --teal: #0F726E; --teal-deep: #1C5B58; --teal-wash: #DDEEED; --teal-bright: #63C4BE; /* teal ON dark grounds only */ /* 01 · light paper */ --paper: #FAF9F5; --paper-alt: #F2F1EA; --ink: #23241F; --ink-muted: #6B6C63; --ink-faint: #9A9B90; --rule-paper: #E2E1D8; /* 02 · dark */ --black: #0D0A08; /* ground. Not #000 — law 1 */ --black-raised:#171310; /* panels · DERIVED */ --warm-white: #FFF8E7; /* body on dark. Not #fff — law 1 */ --muted-dark: #9A8F7C; /* DERIVED */ --rule-dark: #2A231C; /* DERIVED */ /* 03 · bone + deep */ --bone: #EFECE4; /* mineral, flatter than cream */ --bone-sunk: #E7E3D9; /* DERIVED. A recessed panel, not a raised one: on bone, "lighter" runs at the no-white law, so separation goes down toward the rule. */ --deep: #171614; /* hero band, footer. Never pure black */ --ink-bone: #22211D; --muted-bone: #696560; --rule-bone: #DEDAD0; /* 04 · interior chrome (declared, unconsumed) */ --workspace: #E1E6E8; /* stand-in: the operator's own ground replaces it */ --work-surface:#FAF9F5; --muted-work: #5F6367; --rule-work: #C8D0D3; /* ------------------------------------------------------------- spacing 4px base, named by intent not size */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-9: 36px; --sp-10: 40px; /* sp-7/sp-9 added 2026-09-02: consumed by PB01 + .rw-prose while undefined, so every declaration touching them computed to 0 */ --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-26: 104px; /* section rhythm — mobile first, desktop layered in the media query */ --rhythm: 64px; --gutter: 20px; /* ---------------------------------------------------------------- type One family, four registers. Weight and density carry the difference the serif used to carry. Mono is the half of the old kit that survived the Manifold lock untouched. */ --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-display: var(--font-sans); --font-body: var(--font-sans); --mono-size: 11px; --mono-track: 0.14em; /* motion — spec §3.4 both sites */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-hover: 0.2s; --dur-enter: 0.75s; --rise: 14px; /* focus — a11y floor, never removed, never register-specific */ --focus-width: 2px; --focus-offset: 2px; } /* ============================================================== ROLE LAYER One block per register. Swapping a register means swapping one of these blocks and nothing downstream. --cta-background and --cta-text are DELIBERATELY ABSENT from all four and are bound once, globally, below. A per-register CTA colour is the thing law 2 forbids, so the file does not offer a place to write one. */ /* --fg-faint IS NOT A TEXT COLOUR. Ruled 2026-09-01 after a fleet contrast sweep, and it holds in all four registers for the same arithmetic reason: business --ink-faint #9A9B90 on --paper 2.67:1 personal (derived) #8B877F on --bone 3.03:1 sales --rule-dark #2A231C on --black 1.27:1 interior (derived) #8A9094 on --workspace 2.57:1 Every one of them is under the 4.5:1 floor, and darkening any of them until it clears lands within a hair of that register's --fg-muted -- #6D6E66 next to #6B6C63 on paper, #68655F next to #696560 on bone. The faint tier cannot be both faint and readable; the ladder has three steps and only two of them can carry type. So the tier is defined by what it is for rather than patched: TEXT A PERSON MUST READ -> --fg-muted. Captions, metadata, surface IDs, route paths, status chips, placeholders. DECORATION -> may sit under the floor, and then it MUST carry aria-hidden. --fg-faint is the usual value; the gold step ordinals are the other one. Ghost ordinals, bullet glyphs, tallies. Hierarchy below --fg-muted is carried by SCALE and by MONO, which is the same mechanism the registers themselves use. Nothing is carried by fading type until it stops being type. If a new caller needs faint-coloured text that must be read, the caller is wrong, not the token. */ /* --gold-type is the gold USED AS TYPE, added 2026-09-01 by the same sweep. Two surfaces wanted a gold label on paper and both reached past the role layer to get it, because the role layer had no way to say it: --accent is teal on the business ground, and --heading-accent is --gold-way, which is a hairline colour and reads 3.23:1 as type. The brand gold itself is 1.99:1 on paper -- it is a FILL on light grounds, which is why law 2 puts it behind --cta-background and solves contrast on --cta-text. So: on the two light grounds --gold-type is --gold-dark (5.43:1 on --paper, 5.05:1 on --paper-alt, 4.46:1 on --bone-sunk); on the dark grounds and inside .band-dark it is --gold itself, which clears AAA at 9.42:1. One name, right value per ground, and no surface has to know which. --gold-way stays what its own line says it is: rules and hairlines, never type. */ /* ------------------------------------------- 01 · business — light paper miraclemind.dev: home, product, proof, contact, and the S04 answer web. The diligence-grade ground. Someone doing homework lands here and needs to believe the thing is real, named, and survivable without us. */ [data-register="business"] { --bg: var(--paper); --bg-alt: var(--paper-alt); --bg-raised: var(--paper); --fg: var(--ink); --fg-muted: var(--ink-muted); --fg-faint: var(--ink-faint); --border: var(--rule-paper); --link: var(--teal); --focus: var(--teal); --heading-accent: var(--gold-way); /* rules and numbering. See the A' note */ --gold-type: var(--gold-dark); /* gold AS TYPE. See the note below */ --mark: gold-gradient; /* the orbit star's inline gradient */ --accent: var(--teal); --accent-soft: var(--teal-wash); /* dark-band values, so a band inside this ground knows what to become */ --dark: var(--black); --dark-raised: var(--black-raised); --dark-border: var(--rule-dark); --h1: clamp(46px, 5.6vw, 88px); --h2: clamp(30px, 3.4vw, 40px); --h3: clamp(20px, 2vw, 24px); --body-size: 16px; /* 17.5px from sm up */ --body-lh: 1.6; --body-measure: 62ch; --lede-size: 19.5px; --lede-measure: 52ch; --h1-lh: 0.98; --h1-track: -0.03em; --h2-lh: 1.08; --h2-track: -0.03em; --h3-lh: 1.25; --h3-track: -0.02em; --display-weight: 700; /* Manrope 700 against body 400: weight is the only contrast, which is the point of one family */ --container: 1240px; --radius: 4px; --radius-pill: 999px; --shadow: none; } /* -------------------------------------------- 02 · sales — dark ceremonial The funnel (PB02) and the six tribe landers (W01–W06). THIS GROUND IS DARK. It was light until 2026-09-01 and the flip is the codex's, not a preference: register 02 declares #0D0A08 and the type specimen for this register is set on it. Ceremonial means the page is an occasion — you arrive from a search or an ad, and the room is different. narrative-spine.md rule 5: the funnel extracts pain and books a call; the corporate home earns diligence-grade trust. What this ground must NOT borrow from 01: the seven-module diligence grid, the tech-stack table, the exit-guarantee band. Mixing them is a category error, not a style choice. Teal does not travel here. Gold holds link tier as well as the action, which is why a second gold-coloured button on one screenful reads as two primary actions: one CTA per screenful, and the rule bites hardest here. */ [data-register="sales"] { --bg: var(--black); --bg-alt: var(--black-raised); --bg-raised: var(--black-raised); --fg: var(--warm-white); --fg-muted: var(--muted-dark); --fg-faint: var(--rule-dark); --border: var(--rule-dark); --link: var(--gold); --focus: var(--gold); --heading-accent: var(--gold); --gold-type: var(--gold); /* 9.42:1 on --black: the gold IS the type here */ --mark: gold-gradient; --accent: var(--gold); --accent-soft: color-mix(in srgb, var(--gold) 14%, transparent); --dark: var(--black); --dark-raised: var(--black-raised); --dark-border: var(--rule-dark); --h1: clamp(40px, 6.4vw, 72px); --h2: clamp(28px, 3.2vw, 38px); --h3: clamp(20px, 2vw, 24px); --body-size: 16px; --body-lh: 1.62; --body-measure: 60ch; --lede-size: 19.5px; --lede-measure: 46ch; --h1-lh: 1; --h1-track: -0.028em; /* looser than 01's -0.03em: the headline reads spoken, not set */ --h2-lh: 1.1; --h2-track: -0.025em; --h3-lh: 1.25; --h3-track: -0.02em; --display-weight: 700; --container: 1240px; --radius: 4px; --radius-pill: 999px; --shadow: none; --rhythm-sales: 56px; /* a funnel moves; a home lets you dwell */ /* The cost band (PB02) used to be a dark block inverting out of a light page. The page is the dark block now, so the band becomes a raised panel and the figure takes the gold it was already reaching for. */ --cost-band-bg: var(--bg-alt); --cost-band-fg: var(--fg); --cost-figure: var(--gold); } /* ------------------------------------------------ 03 · personal — founder matthewmiceli.com. Bone ground, deep near-black band, brass at hairline scale, the photograph as the accent. This palette OVERRIDES site-spec-personal.md §3.1, which states the warm paper-and-ink palette stays and the WDN influence is compositional rather than chromatic. Matthew's 2026-08-29 direction supersedes it. The spec wants a dated amendment; that is a 00-thesis/ path and therefore a human merge, tracked in TODO.md, not silently edited here. Brass (--gold-dark) is the one accent, and it is the mark's own dark gradient stop rather than a second identity colour. Teal never arrives. */ [data-register="personal"] { --bg: var(--bone); --bg-alt: var(--bone-sunk); --bg-raised: var(--bone-sunk); --fg: var(--ink-bone); --fg-muted: var(--muted-bone); --fg-faint: #8B877F; /* DERIVED: one step past muted, for metadata */ --border: var(--rule-bone); --link: var(--gold-dark); --focus: var(--gold-dark); --heading-accent: var(--gold-dark); --gold-type: var(--gold-dark); /* already the accent here; named for parity */ --mark: var(--gold-dark); --accent: var(--gold-dark); --accent-soft: color-mix(in srgb, var(--gold-dark) 10%, transparent); --dark: var(--deep); --dark-raised: #1E1D1A; /* DERIVED */ --dark-border: #2E2C28; /* DERIVED */ --h1: clamp(46px, 7vw, 104px); /* codex register 03: "runs to 104px at 0.98 line-height and -0.035em: further than any other register may go". Was 92px; raised to the codex ceiling 2026-09-03 (PM01 revamp). */ --h2: clamp(30px, 3.4vw, 42px); --h3: clamp(21px, 2.2vw, 26px); --body-size: 17px; /* 18px from sm up. The founder ground reads longer-form than the product ground */ --body-lh: 1.66; --body-measure: 66ch; --lede-size: 21px; --lede-measure: 54ch; --h1-lh: 0.98; --h1-track: -0.035em; --h2-lh: 1.1; --h2-track: -0.025em; --h3-lh: 1.28; --h3-track: -0.015em; --display-weight: 700; --container: 1180px; --radius: 3px; /* 2–4px max. Nothing pill on this domain */ --radius-pill: 3px; /* deliberately NOT a pill: shape is the one delineation left now that type is unified */ --shadow: none; /* hairlines over shadows. The aesthetic is print */ } /* -------------------------------------- 04 · interior — declared, unconsumed The operator's brand leads and ours recedes to an attribution seam. Chrome is a STAND-IN for the client's own ground, not our colour. Gold is attribution-only indoors with exactly one exception, and it is law 2: the primary action is #D8AD54 here too, because the CTA rule does not stop at the login wall. */ [data-register="interior"] { --bg: var(--workspace); --bg-alt: var(--work-surface); --bg-raised: var(--work-surface); --fg: var(--ink); --fg-muted: var(--muted-work); --fg-faint: #8A9094; /* DERIVED */ --border: var(--rule-work); --link: var(--teal); --focus: var(--teal); --heading-accent: var(--muted-work); --gold-type: var(--gold-dark); /* declared with the rest of this register */ --mark: var(--gold-dark); --accent: var(--teal); --accent-soft: var(--teal-wash); --dark: var(--black); --dark-raised: var(--black-raised); --dark-border: var(--rule-dark); --h1: clamp(28px, 3vw, 34px); /* indoors nothing shouts: every pixel is either data or a control */ --h2: clamp(21px, 2.2vw, 25px); --h3: 18px; --body-size: 15px; --body-lh: 1.5; --body-measure: 72ch; --lede-size: 17px; --lede-measure: 60ch; --h1-lh: 1.15; --h1-track: -0.02em; --h2-lh: 1.2; --h2-track: -0.015em; --h3-lh: 1.3; --h3-track: 0; --display-weight: 600; --container: 1440px; --radius: 4px; --radius-pill: 4px; --shadow: none; } /* ------------------------------------------------------- legacy aliases Names the fleet already consumes, kept alive so the codex re-founding is a token change and not 15 surface rewrites. Declared on [data-register] so each resolves against the register's own binding on the same element. Do not reach for these in new work: --border, --bg-raised and --gold are the role names. These three exist because deleting a token that 15 files consume is how a renovation turns into an outage. --gold-bright was #CFAB63, a shade that appears nowhere on the codex. It now resolves to the identity gold, which is what a bright gold on a dark footer was always trying to be. */ [data-register] { --rule: var(--border); --paper-raised: var(--bg-raised); --gold-bright: var(--gold); } /* ====================================================== THE ONE GLOBAL ROLE Law 2, made structural. This is the only role token in the file bound outside a register block, and that is the entire point: there is nowhere to write a per-register override without deleting this comment first. */ :root { --cta-background: var(--gold); --cta-text: var(--black); } /* ------------------------------------------------------------ dark band A band inside a light surface, without a register change. Each register supplies its own --dark-* above, so the same class is near-black on miraclemind.dev and #171614 on the founder ground. */ .band-dark { --bg: var(--dark); --bg-alt: var(--dark-raised); --bg-raised: var(--dark-raised); --fg: var(--warm-white); --fg-muted: var(--muted-dark); --border: var(--dark-border); --link: var(--gold); --focus: var(--gold); --heading-accent: var(--gold); --gold-type: var(--gold); background: var(--bg); color: var(--fg); } /* --------------------------------------------------------------- base reset Mobile-first. 390px single column is the base case, not a breakpoint. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: var(--body-size); line-height: var(--body-lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: var(--display-weight); margin: 0; text-wrap: balance; } h1 { font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: var(--h1-track); } h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: var(--h2-track); } h3 { font-size: var(--h3); line-height: var(--h3-lh); letter-spacing: var(--h3-track); } p { margin: 0 0 var(--sp-4); max-width: var(--body-measure); } a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-hover) var(--ease); } img, svg, video { max-width: 100%; height: auto; display: block; } /* Focus is a floor, not a style choice. Never remove, never restyle away. */ :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); border-radius: 2px; } /* --------------------------------------------------------------- primitives */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: var(--rhythm); } [data-register="sales"] .section { padding-block: var(--rhythm-sales); } .rule { border: 0; border-top: 1px solid var(--border); margin: 0; } /* ---------------------------------------------------------------- eyebrow The mono label. On miraclemind.dev it is NUMBERED and the numbering is the site's spine — keep it coherent after any section reorder. TREATMENT A-PRIME, applied 2026-09-01. On the two light-ish grounds the eyebrow is a GOLD CHIP with near-black type, not gold lettering. The codex measured #A9863F at this size against paper at 3.23:1 — under the 4.5:1 floor — and #D8AD54 at 1.99:1. Accessibility is a floor in this fleet and is not traded for a layout, so gold-as-type on a pale ground is not available; where gold cannot be type it becomes a fill or a rule instead of becoming a different colour. This is option A' from the codex's gold panel. It is the codex's own recommendation and Matthew has not ruled between A, A' and B — the panel is still open as gate item 10. It is applied here because the alternative ships a measured contrast failure, and it is cheap to reverse: this rule and the .go underline below are the whole of it. Flagged for his ruling. */ .eyebrow { font-family: var(--font-mono); font-size: var(--mono-size); letter-spacing: var(--mono-track); text-transform: uppercase; color: var(--fg-muted); margin: 0 0 var(--sp-4); display: block; } [data-register="business"] .eyebrow, [data-register="personal"] .eyebrow { display: inline-block; background: var(--gold); color: var(--black); padding: 3px var(--sp-2) 2px; border-radius: 2px; margin-bottom: var(--sp-4); } /* On the dark grounds gold clears AAA as type at 9.42:1, so it stays type: a chip on dark would be a fill fighting the ground for no reason. */ [data-register="sales"] .eyebrow, .band-dark .eyebrow { display: block; background: none; color: var(--gold); padding: 0; } .lede { font-size: var(--lede-size); line-height: 1.55; max-width: var(--lede-measure); color: var(--fg); } /* ----------------------------------------------------------------- buttons Shape is register-owned via --radius-pill. Colour is not register-owned at all: .btn-primary is the identity gold on every ground, which is law 2. It used to be background: var(--fg) — ink on light, and that is how a primary action ended up being a different colour on every register. */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-body); font-size: 15px; font-weight: 600; padding: 13px var(--sp-6); border-radius: var(--radius-pill); border: 1px solid transparent; cursor: pointer; text-decoration: none; min-height: 44px; /* touch target floor */ transition: background var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease); } .btn-primary { background: var(--cta-background); color: var(--cta-text); } .btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); } /* Hover darkens toward the mark's own third gradient stop, so the button stays inside the gradient rather than leaving the identity on hover. */ .btn-primary:hover { background: var(--gold-light); color: var(--cta-text); } .btn-secondary:hover { border-color: var(--fg-muted); } /* --------------------------------------------------------- the nav CTA stamp CHROME IS NOT CONTENT, and until 2026-09-01 this fleet could not tell the difference: the business nav's CTA and PB01's hero CTA were the same object, .btn.btn-primary, both measuring 52x197px. Every gate passed -- same token, same fill, same contrast -- because nothing any checker measures distinguishes a button in a bar from a button in a page. It is the reason the nav read heavy, and it is the drift Matthew kept naming without it ever being written down as a number. The codex had already drawn the answer and the fleet did not read it. `.navdemo-cta` in codex/codex.css is a COMPACT stamp sitting inside the bar -- mono, uppercase, tracked, 5px by 12px on a 2px radius -- while the page's own button is the large one. A bar is a frame. A frame wearing the content register's full-size button competes with the thing it is framing. THIS IS ONE COMPONENT, NOT TWO. The personal register had already built this as .navp-cta; the business register never did. So the fleet shipped two nav CTA implementations that happened to disagree, which is how chrome drifts even when both halves look deliberate. Both navs consume this class now, and a third implementation is the defect to watch for. HEIGHT 40, TOUCH TARGET 44. The visual sits under the 44px floor on purpose: that floor is about the finger, not the ink. ::after restores a 44px hit area centred on the button, so the tap target never shrank -- shrinking the ink and the target together is the version of this that quietly fails a11y. */ .btn-compact { font-family: var(--font-mono); font-size: var(--mono-size); letter-spacing: var(--mono-track); text-transform: uppercase; font-weight: 500; padding: 0 var(--sp-4); min-height: 40px; border-radius: var(--radius); position: relative; } .btn-compact::after { content: ""; position: absolute; inset: -2px 0; } /* The inline arrow link. On pale grounds it is ink type with a gold rule under it — same A' reasoning as the eyebrow. On dark it is gold type. */ .go { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--mono-size); letter-spacing: var(--mono-track); text-transform: uppercase; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } [data-register="business"] .go, [data-register="personal"] .go { color: var(--fg); text-decoration-color: var(--gold); } [data-register="sales"] .go, .band-dark .go { color: var(--gold); text-decoration-color: var(--gold); } /* The 1px-gap grid: cells on --bg over a --border ground. miraclemind.dev's signature module. Single column at 390 — the gap IS the grid, so it holds at one column too. */ .grid-hairline { display: grid; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .grid-hairline > * { background: var(--bg); padding: var(--sp-6); } /* ------------------------------------------------------- the reading web Twelve surfaces at /articles/*, /compare/*, /for, /faq, /proof and /business-nervous-system share one reading layout. It lives here rather than in twelve