/* ========================================================================== Proximity — shared foundation Loaded by every page. Page-specific CSS stays inline in the page that owns it. WHAT BELONGS HERE — three tiers, and nothing else: 1 Tokens the colour ramps and all four polarity blocks, radii, type tokens, art tokens, the semantic layer. The highest-churn thing in the codebase and the reason this file exists. 2 Primitives reset, type scale, .wrap, .sec, .rule, .eyebrow, .btn, .lnk, .card, .pill, focus rules. What any page composes with. 3 House devices nav, footer, the theme switch, the chip-and-modal definition mechanism, .frame, the bloom washes. The site's identity. These belong here even when only one page uses them today — a page not using the nav is a fact about that page, not evidence the nav is page-specific. WHAT DOES NOT — anything named for one page's furniture: .hero-*, .path*, .ring*, .orbit, .plane, .queues, .feat*, .fp-*, .hf-*, .dg-*. If a selector only makes sense while looking at one page, it lives with that page. Two things that cannot move into this file: - the pre-paint theme script, which must run inline in each page or the wrong polarity flashes before CSS applies - @media print token overrides, which sit with the page that needs them No build step, so no content hashing, so this is served must-revalidate rather than long-cached — see the header rule in vercel.json. At ~7KB gzipped that costs nothing and is always correct. ========================================================================== */ /* ========================================================== PROXIMITY — HOMEPAGE PROTOTYPE Copy: Website Homepage Copy, Draft 5 (Aug 2026), verbatim. Anchor: coral #FF5C64. Light = the sky. Dark = the water. ========================================================== */ :root{ --coral-50:#FBF1F2; --coral-100:#F9DEE0; --coral-200:#F9BBBE; --coral-300:#FC888D; --coral-400:#FF545D; --coral-500:#FF2631; --coral-600:#EF0612; --coral-700:#B90C14; --coral-800:#850F15; --coral-900:#530E11; --coral-950:#320B0D; --coral:#FF5C64; --ember-100:#F6EBE1; --ember-200:#F3D8C2; --ember-300:#EFBD94; --ember-400:#ECA367; --ember-500:#E78A3E; --ember-600:#D57120; --ember-700:#A65B1F; --ember-900:#4C2E15; --mauve-100:#F3E5EE; --mauve-200:#EBC9DF; --mauve-300:#E2A2CA; --mauve-400:#D97BB6; --mauve-500:#CE57A3; --mauve-600:#BA3A8B; --mauve-700:#92336F; --mauve-900:#441D36; --ice-100:#E4EBF4; --ice-200:#C7D7EE; --ice-300:#9EBDE6; --ice-400:#75A3DF; --ice-500:#4F8AD6; --ice-600:#3271C2; --ice-700:#2D5B98; --ice-900:#1B2E46; --abyss-100:#E3E9F5; --abyss-300:#9BB4E8; --abyss-400:#7195E2; --abyss-500:#4B78DA; --abyss-600:#2E5EC7; --abyss-800:#233C71; --abyss-900:#192847; --abyss-950:#111A2C; --slate-50:#FAFBFC; --slate-100:#F2F4F7; --slate-200:#E3E7ED; --slate-300:#CCD2DB; --slate-400:#ADB5C2; --slate-500:#8B95A7; --slate-600:#67758E; --slate-700:#4B5971; --slate-800:#313E54; --slate-900:#1B2537; --slate-950:#0E1622; --sans:"Inter",ui-sans-serif,-apple-system,"Segoe UI",sans-serif; --serif:"Newsreader",ui-serif,Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* content box lands at ~1200px on a 1512 viewport, matching Interfere */ --maxw:1296px; --gut:clamp(22px,3vw,48px);--nav-h:56px; /* One radius scale. The page had thirteen values; a drafting language wants tight, consistent corners, and 12px reads as a soft UI card next to a 1px technical drawing. Three steps only: --r-in compartments cut INTO a surface (source blocks, wells) --r-sf surfaces that sit ON the page (cards, panels, frames) --r-ct controls (buttons, chips, menu items, steppers) */ --r-in:2px; --r-sf:4px; --r-ct:6px; /* Both references use only weights 400 and 500 and track headings at -0.01 to -0.02em. 600 + tight tracking is the tell we were failing on. */ --w-head:500; --track:-0.015em; --measure:54ch; } /* ---------- LIGHT — the sky ---------- */ :root, [data-theme="light"]{ --ground:#FFFFFF; --ground-2:var(--slate-50); --ground-3:var(--slate-100); --ink:#131C2B; --ink-2:var(--slate-700); --ink-3:var(--slate-600); --ink-4:var(--slate-500); --line:var(--slate-200); --line-2:#EDF0F4; --action:var(--coral); --action-ink:#131C2B; --action-hover:var(--coral-400); --underline:rgba(255,92,100,.55); --coral-tint:rgba(255,92,100,.13); --coral-edge:rgba(255,92,100,.34); --coral-halo:rgba(255,92,100,.16); --status-tint:rgba(79,138,214,.13); --status-edge:rgba(79,138,214,.36); --chip-edge:rgba(255,92,100,.48); --chip-ice-tint:rgba(117,163,223,.17); --chip-ice-edge:rgba(117,163,223,.55); --chip-tint-hi:rgba(255,92,100,.20); --chip-edge-hi:rgba(255,92,100,.68); --dash:rgba(255,92,100,.42); --chip-ice-tint-hi:rgba(117,163,223,.26); --chip-ice-edge-hi:rgba(117,163,223,.75); --chip-mauve-tint:rgba(217,123,182,.15); --chip-mauve-edge:rgba(217,123,182,.58); --rail:var(--slate-300); --rail-0:rgba(204,210,219,0); --logo-ink:#161E2A; --art-line:rgba(19,28,43,.30);--mesh:rgba(19,28,43,.10);--card-g:linear-gradient(180deg,#FFFFFF 0%,#FAFBFC 100%); --obj:rgba(19,28,43,.82);--ann:rgba(19,28,43,.30);--ko:#FFFFFF; --hair:#131C2B;--hair-o:.62;--hair-a:.20; --art-dot:rgba(19,28,43,.55); --art-rule:rgba(19,28,43,.16); --nav-bg:rgba(255,255,255,.82); --chip:rgba(19,28,43,.08); /* The hero's bloom, re-aimed for a card — one per queue. Same three-ellipse structure and the same palette throughout, so the five read as a family; what varies is which hue leads and where the light sits. The origin walks left to right across the row and the lower bloom counter-walks, so it reads as one light moving over five objects rather than five colour codes. */ /* light */ --bc1: radial-gradient(ellipse 94% 72% at 18% -8%, rgba(255,92,100,.16), rgba(255,92,100,0) 62%), radial-gradient(ellipse 82% 66% at 82% 104%, rgba(226,162,202,.10), rgba(226,162,202,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.07), rgba(239,189,148,0) 72%); --bc2: radial-gradient(ellipse 94% 72% at 36% -8%, rgba(226,162,202,.16), rgba(226,162,202,0) 62%), radial-gradient(ellipse 82% 66% at 64% 104%, rgba(255,92,100,.10), rgba(255,92,100,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.07), rgba(239,189,148,0) 72%); --bc3: radial-gradient(ellipse 94% 72% at 50% -8%, rgba(117,163,223,.15), rgba(117,163,223,0) 62%), radial-gradient(ellipse 82% 66% at 50% 104%, rgba(255,92,100,.10), rgba(255,92,100,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(226,162,202,.07), rgba(226,162,202,0) 72%); --bc4: radial-gradient(ellipse 94% 72% at 64% -8%, rgba(239,189,148,.17), rgba(239,189,148,0) 62%), radial-gradient(ellipse 82% 66% at 36% 104%, rgba(226,162,202,.10), rgba(226,162,202,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(117,163,223,.07), rgba(117,163,223,0) 72%); --bc5: radial-gradient(ellipse 94% 72% at 82% -8%, rgba(255,92,100,.16), rgba(255,92,100,0) 62%), radial-gradient(ellipse 82% 66% at 18% 104%, rgba(117,163,223,.10), rgba(117,163,223,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.07), rgba(239,189,148,0) 72%); --bg-hero: radial-gradient(ellipse 78% 62% at 88% -14%, rgba(255,92,100,.11), rgba(255,92,100,0) 64%), radial-gradient(ellipse 62% 54% at 4% 96%, rgba(226,162,202,.11), rgba(226,162,202,0) 66%), radial-gradient(ellipse 90% 50% at 46% 50%, rgba(239,189,148,.06), rgba(239,189,148,0) 72%); --bg-close: radial-gradient(ellipse 66% 70% at 50% 108%, rgba(255,92,100,.11), rgba(255,92,100,0) 62%), radial-gradient(ellipse 80% 46% at 50% -12%, rgba(226,162,202,.06), rgba(226,162,202,0) 70%); --bg-foot: radial-gradient(ellipse 60% 90% at 92% 100%, rgba(255,92,100,.06), rgba(255,92,100,0) 68%), linear-gradient(180deg,#FAFBFC,#FAFBFC); --bg-ice: radial-gradient(ellipse 70% 60% at 96% 8%, rgba(117,163,223,.06), rgba(117,163,223,0) 66%); --bg-gold: radial-gradient(ellipse 40% 92% at 0% 46%, rgba(239,189,148,.10), rgba(239,189,148,0) 72%), radial-gradient(ellipse 36% 84% at 100% 58%, rgba(226,162,202,.08), rgba(226,162,202,0) 74%); /* glow behind the hero frame — Interfere runs a 4-stop bar at 20% alpha, blurred 50px. Ours walks the fjord left to right: coral → mauve → ice. */ --glow:linear-gradient(90deg, rgba(255,92,100,.22) 0%, rgba(226,162,202,.20) 34%, rgba(217,123,182,.18) 58%, rgba(117,163,223,.22) 100%); /* icon wash on menu hover — same alphas as the hero glow, and it fades to nothing before the far corner so the square is never uniformly filled */ --icon-glow:linear-gradient(135deg, rgba(255,92,100,.22) 0%, rgba(217,123,182,.15) 42%, rgba(117,163,223,.13) 72%, rgba(117,163,223,0) 100%); --shadow:0 1px 2px rgba(19,28,43,.04), 0 10px 30px -14px rgba(19,28,43,.13); --ring:rgba(19,28,43,.09); --code-bg:var(--slate-50); --skel:var(--slate-200); --skel-2:var(--slate-100); } /* ---------- DARK — the water ---------- */ [data-theme="dark"], [data-theme="auto"].force-dark{ --ground:#0B1322; --ground-2:#0E1727; --ground-3:#152034; --ink:var(--slate-100); --ink-2:var(--slate-300); --ink-3:var(--slate-400); --ink-4:var(--slate-500); --line:#1D2839; --line-2:#161F2F; --action:var(--coral); --action-ink:#0B1322; --action-hover:var(--coral-300); --underline:rgba(255,92,100,.70); --coral-tint:rgba(255,92,100,.15); --coral-edge:rgba(255,92,100,.38); --coral-halo:rgba(255,92,100,.18); --status-tint:rgba(79,138,214,.20); --status-edge:rgba(79,138,214,.46); --chip-edge:rgba(255,92,100,.58); --chip-ice-tint:rgba(117,163,223,.18); --chip-ice-edge:rgba(117,163,223,.62); --chip-tint-hi:rgba(255,92,100,.24); --chip-edge-hi:rgba(255,92,100,.78); --dash:rgba(255,92,100,.50); --chip-ice-tint-hi:rgba(117,163,223,.28); --chip-ice-edge-hi:rgba(117,163,223,.82); --chip-mauve-tint:rgba(217,123,182,.17); --chip-mauve-edge:rgba(217,123,182,.66); --rail:#2A3752; --rail-0:rgba(42,55,82,0); --logo-ink:#FFFFFF; --art-line:rgba(226,232,240,.26);--mesh:rgba(226,232,240,.11);--card-g:linear-gradient(180deg,#101A2C 0%,#0C1424 100%); --obj:rgba(242,244,247,.74);--ann:rgba(242,244,247,.30);--ko:#0C1424; --hair:#F2F4F7;--hair-o:.55;--hair-a:.22; --art-dot:rgba(226,232,240,.52); --art-rule:rgba(226,232,240,.14); --nav-bg:rgba(11,19,34,.82); --chip:rgba(242,244,247,.09); /* dark — mauve gives way to the blue, as the hero does */ --bc1: radial-gradient(ellipse 94% 72% at 18% -8%, rgba(255,92,100,.24), rgba(255,92,100,0) 62%), radial-gradient(ellipse 82% 66% at 82% 104%, rgba(117,163,223,.15), rgba(117,163,223,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.10), rgba(239,189,148,0) 72%); --bc2: radial-gradient(ellipse 94% 72% at 36% -8%, rgba(117,163,223,.22), rgba(117,163,223,0) 62%), radial-gradient(ellipse 82% 66% at 64% 104%, rgba(255,92,100,.15), rgba(255,92,100,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.10), rgba(239,189,148,0) 72%); --bc3: radial-gradient(ellipse 94% 72% at 50% -8%, rgba(117,163,223,.22), rgba(117,163,223,0) 62%), radial-gradient(ellipse 82% 66% at 50% 104%, rgba(255,92,100,.16), rgba(255,92,100,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.10), rgba(239,189,148,0) 72%); --bc4: radial-gradient(ellipse 94% 72% at 64% -8%, rgba(239,189,148,.24), rgba(239,189,148,0) 62%), radial-gradient(ellipse 82% 66% at 36% 104%, rgba(117,163,223,.15), rgba(117,163,223,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(255,92,100,.10), rgba(255,92,100,0) 72%); --bc5: radial-gradient(ellipse 94% 72% at 82% -8%, rgba(255,92,100,.24), rgba(255,92,100,0) 62%), radial-gradient(ellipse 82% 66% at 18% 104%, rgba(117,163,223,.16), rgba(117,163,223,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.10), rgba(239,189,148,0) 72%); --bg-hero: radial-gradient(ellipse 78% 62% at 88% -14%, rgba(255,92,100,.20), rgba(255,92,100,0) 64%), radial-gradient(ellipse 62% 54% at 4% 96%, rgba(75,120,218,.18), rgba(75,120,218,0) 66%), radial-gradient(ellipse 90% 50% at 46% 50%, rgba(231,138,62,.10), rgba(231,138,62,0) 72%); --bg-close: radial-gradient(ellipse 66% 70% at 50% 108%, rgba(255,92,100,.20), rgba(255,92,100,0) 62%), radial-gradient(ellipse 80% 46% at 50% -12%, rgba(75,120,218,.11), rgba(75,120,218,0) 70%); --bg-foot: radial-gradient(ellipse 60% 90% at 92% 100%, rgba(255,92,100,.10), rgba(255,92,100,0) 68%), linear-gradient(180deg,#0E1727,#0E1727); --bg-ice: radial-gradient(ellipse 70% 60% at 96% 8%, rgba(117,163,223,.10), rgba(117,163,223,0) 66%); --bg-gold: radial-gradient(ellipse 40% 92% at 0% 46%, rgba(231,138,62,.11), rgba(231,138,62,0) 72%), radial-gradient(ellipse 36% 84% at 100% 58%, rgba(217,123,182,.09), rgba(217,123,182,0) 74%); --glow:linear-gradient(90deg, rgba(255,92,100,.40) 0%, rgba(217,123,182,.34) 34%, rgba(117,163,223,.32) 62%, rgba(75,120,218,.40) 100%); --icon-glow:linear-gradient(135deg, rgba(255,92,100,.34) 0%, rgba(217,123,182,.24) 42%, rgba(75,120,218,.24) 72%, rgba(75,120,218,0) 100%); --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 46px -20px rgba(0,0,0,.75); --ring:rgba(255,255,255,.09); --code-bg:#0F1929; --skel:#22314A; --skel-2:#18233A; } @media (prefers-color-scheme: dark){ [data-theme="auto"]{ --ground:#0B1322; --ground-2:#0E1727; --ground-3:#152034; --ink:var(--slate-100); --ink-2:var(--slate-300); --ink-3:var(--slate-400); --ink-4:var(--slate-500); --line:#1D2839; --line-2:#161F2F; --action-ink:#0B1322; --action-hover:var(--coral-300); --underline:rgba(255,92,100,.70); --coral-tint:rgba(255,92,100,.15); --coral-edge:rgba(255,92,100,.38); --coral-halo:rgba(255,92,100,.18); --status-tint:rgba(79,138,214,.20); --status-edge:rgba(79,138,214,.46); --chip-edge:rgba(255,92,100,.58); --chip-ice-tint:rgba(117,163,223,.18); --chip-ice-edge:rgba(117,163,223,.62); --chip-tint-hi:rgba(255,92,100,.24); --chip-edge-hi:rgba(255,92,100,.78); --dash:rgba(255,92,100,.50); --chip-ice-tint-hi:rgba(117,163,223,.28); --chip-ice-edge-hi:rgba(117,163,223,.82); --chip-mauve-tint:rgba(217,123,182,.17); --chip-mauve-edge:rgba(217,123,182,.66); --rail:#2A3752; --rail-0:rgba(42,55,82,0); --logo-ink:#FFFFFF; --art-line:rgba(226,232,240,.26); --art-dot:rgba(226,232,240,.52); --art-rule:rgba(226,232,240,.14); --nav-bg:rgba(11,19,34,.82); --chip:rgba(242,244,247,.09); /* dark — mauve gives way to the blue, as the hero does */ --bc1: radial-gradient(ellipse 94% 72% at 18% -8%, rgba(255,92,100,.24), rgba(255,92,100,0) 62%), radial-gradient(ellipse 82% 66% at 82% 104%, rgba(117,163,223,.15), rgba(117,163,223,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.10), rgba(239,189,148,0) 72%); --bc2: radial-gradient(ellipse 94% 72% at 36% -8%, rgba(117,163,223,.22), rgba(117,163,223,0) 62%), radial-gradient(ellipse 82% 66% at 64% 104%, rgba(255,92,100,.15), rgba(255,92,100,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.10), rgba(239,189,148,0) 72%); --bc3: radial-gradient(ellipse 94% 72% at 50% -8%, rgba(117,163,223,.22), rgba(117,163,223,0) 62%), radial-gradient(ellipse 82% 66% at 50% 104%, rgba(255,92,100,.16), rgba(255,92,100,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.10), rgba(239,189,148,0) 72%); --bc4: radial-gradient(ellipse 94% 72% at 64% -8%, rgba(239,189,148,.24), rgba(239,189,148,0) 62%), radial-gradient(ellipse 82% 66% at 36% 104%, rgba(117,163,223,.15), rgba(117,163,223,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(255,92,100,.10), rgba(255,92,100,0) 72%); --bc5: radial-gradient(ellipse 94% 72% at 82% -8%, rgba(255,92,100,.24), rgba(255,92,100,0) 62%), radial-gradient(ellipse 82% 66% at 18% 104%, rgba(117,163,223,.16), rgba(117,163,223,0) 66%), radial-gradient(ellipse 100% 58% at 46% 52%, rgba(239,189,148,.10), rgba(239,189,148,0) 72%); --bg-hero: radial-gradient(ellipse 78% 62% at 88% -14%, rgba(255,92,100,.20), rgba(255,92,100,0) 64%), radial-gradient(ellipse 62% 54% at 4% 96%, rgba(75,120,218,.18), rgba(75,120,218,0) 66%), radial-gradient(ellipse 90% 50% at 46% 50%, rgba(231,138,62,.10), rgba(231,138,62,0) 72%); --bg-close: radial-gradient(ellipse 66% 70% at 50% 108%, rgba(255,92,100,.20), rgba(255,92,100,0) 62%), radial-gradient(ellipse 80% 46% at 50% -12%, rgba(75,120,218,.11), rgba(75,120,218,0) 70%); --bg-foot: radial-gradient(ellipse 60% 90% at 92% 100%, rgba(255,92,100,.10), rgba(255,92,100,0) 68%), linear-gradient(180deg,#0E1727,#0E1727); --bg-ice: radial-gradient(ellipse 70% 60% at 96% 8%, rgba(117,163,223,.10), rgba(117,163,223,0) 66%); --bg-gold: radial-gradient(ellipse 40% 92% at 0% 46%, rgba(231,138,62,.11), rgba(231,138,62,0) 72%), radial-gradient(ellipse 36% 84% at 100% 58%, rgba(217,123,182,.09), rgba(217,123,182,0) 74%); --glow:linear-gradient(90deg, rgba(255,92,100,.40) 0%, rgba(217,123,182,.34) 34%, rgba(117,163,223,.32) 62%, rgba(75,120,218,.40) 100%); --icon-glow:linear-gradient(135deg, rgba(255,92,100,.34) 0%, rgba(217,123,182,.24) 42%, rgba(75,120,218,.24) 72%, rgba(75,120,218,0) 100%); --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 46px -20px rgba(0,0,0,.75); --ring:rgba(255,255,255,.09); --code-bg:#0F1929; --skel:#22314A; --skel-2:#18233A; /* kept in step with the explicit dark block — anything added there has to be added here too, or a visitor whose OS is dark gets light values for it while everything around it is dark. */ --action:var(--coral); --mesh:rgba(226,232,240,.11); --card-g:linear-gradient(180deg,#101A2C 0%,#0C1424 100%); --obj:rgba(242,244,247,.74); --ann:rgba(242,244,247,.30); --ko:#0C1424; --hair:#F2F4F7; --hair-o:.55; --hair-a:.22; }} /* ---------- BASE ---------- */ *{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-print-color-adjust:exact;print-color-adjust:exact;} body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-size:16px; line-height:1.6;font-feature-settings:"cv05" 1,"cv11" 1,"ss01" 1;-webkit-font-smoothing:antialiased; -webkit-print-color-adjust:exact;print-color-adjust:exact;transition:background .3s,color .3s;} h1,h2,h3,h4{margin:0;font-weight:var(--w-head);letter-spacing:var(--track);line-height:1.1;} p{margin:0;} a{color:inherit;} .wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);} .sec{position:relative;padding-block:clamp(58px,7.5vw,102px);} .rule{height:1px;background:var(--line);border:0;margin:0;} .bloom-hero{background:var(--bg-hero);} .bloom-close{background:var(--bg-close);} .bloom-foot{background:var(--bg-foot);} .wash-ice{background:var(--bg-ice);} .wash-gold{background:var(--bg-gold);} /* ---------- TYPE ---------- */ .eyebrow{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.14em; text-transform:uppercase;color:var(--ink-4);display:flex;align-items:center;gap:11px;margin-bottom:22px;} .eyebrow::after{content:"";flex:1;height:1px;background:var(--line);max-width:90px;} /* One tracking value across the scale. Two weights only: 400 and 500. */ .t-hero{font-size:clamp(34px,4.6vw,60px);font-weight:var(--w-head);letter-spacing:var(--track);line-height:1.05;} .t-h2{font-size:clamp(24px,2.6vw,34px);font-weight:var(--w-head);letter-spacing:var(--track);line-height:1.14;} .t-h3{font-size:clamp(19px,1.9vw,25px);font-weight:var(--w-head);letter-spacing:var(--track);line-height:1.22;} .t-h4{font-size:clamp(17px,1.5vw,19px);font-weight:var(--w-head);letter-spacing:var(--track);line-height:1.3;} .t-lead{font-size:clamp(16px,1.35vw,18px);line-height:1.6;color:var(--ink-2);} .t-body{font-size:15px;line-height:1.62;color:var(--ink-2);} .t-sm{font-size:13.5px;line-height:1.58;color:var(--ink-3);} .t-data{font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em;} /* A turn inside body copy — puts everything before it into the past tense. Weight 500 and full --ink, which is all the emphasis the type system allows (400 and 500 only). Set inline so it stops orphaning under the paragraph. */ .t-turn{font-weight:500;color:var(--ink);} .ital{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.004em;} /* Program names set in mono. 340B is an identifier, and mono is already this page's language for identifiers — every NDC, claim ID and figure in the product UI. 0.92em because Plex Mono runs wide and tall against Inter, tightened so it sits level with the sans around it. */ /* Weight 400 to match the product UI below — every .ui-c cell, label and figure in the interface is Plex Mono 400. The chip and the data now sit at the same weight, which is the point of the device. */ .prog{font-family:var(--mono);font-size:.92em;font-weight:400;letter-spacing:-.02em;} /* Display use gets a bordered token. Sized in em off the *parent* headline, not off the mono inside it, so the box tracks the surrounding type at every breakpoint. Inter's cap height is .727em and the chip is .86em tall, so the box is centred on the cap height when it hangs .03em below the baseline — enough overhang for the mono inside it to keep its own descender space, and no more. At .07em it read as sitting low against the line. The mono steps down to .80em so the box does not feel cramped. */ .chip{position:relative;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box; height:.86em;padding:0 .17em;line-height:1;white-space:nowrap; vertical-align:-.03em;border-radius:.14em; background:var(--coral-tint);border:1px solid var(--chip-edge); font:inherit;color:inherit;cursor:pointer; appearance:none;-webkit-appearance:none; /* background-color, not the background shorthand — the shorthand also transitions background-image, which forces a repaint each frame */ transition:background-color .17s ease, border-color .17s ease;} .chip .prog{font-size:.80em;letter-spacing:-.01em;} /* Affordance mark. Sized well under .prog so it reads as a hint rather than a second glyph, and it inherits color so the ice chip needs no variant. */ /* Weight 400 explicitly: without it the mark inherits the headline's 500 and its strokes come out heavier than the mono text it sits beside. */ .chip::after{content:"+";font-family:var(--mono);font-weight:400;font-size:.44em; line-height:1;margin-left:.13em;opacity:.5;transform:translateY(-.06em); transition:opacity .17s ease;} .chip:hover::after{opacity:.85;} .chip:hover{background-color:var(--chip-tint-hi);border-color:var(--chip-edge-hi);} .chip:focus-visible{outline:2px solid var(--action);outline-offset:2px;} /* :where() keeps specificity at zero, so any component declaring its own focus treatment still wins without needing !important or ordering games. */ :where(a,button,[tabindex],summary):focus-visible{ outline:2px solid var(--action);outline-offset:2px;border-radius:var(--r-in);} /* Two chips, two categories: coral is the program we serve, ice is the discipline we bring. 143 degrees apart on the wheel, so they never read as the same kind of thing. */ .chip-ice{background:var(--chip-ice-tint);border-color:var(--chip-ice-edge);} .chip-ice:hover{background-color:var(--chip-ice-tint-hi);border-color:var(--chip-ice-edge-hi);} /* ---- Chip gloss ------------------------------------------------------------- A one-line definition on hover, with the panel still one click away. Why a gloss and not the panel's own text: the panels run 80-130 words, which is not readable in a transient overlay, and duplicating them would leave two surfaces to keep in sync. Why not a "click me" hint instead: a tooltip whose only content is an instruction is an admission the affordance is not reading. The gloss serves the reader who wants a reminder without making them leave the sentence, and the panel stays canonical for the reader who wants all of it. That split is also what makes touch work. There is no hover on a phone, tap already opens the panel, and nothing is lost — which would not be true if the definition lived only in the popover. The gloss is a child of the button rather than a wrapper around it, because wrapping would disturb the chip's baseline placement (see .chip above). Three inherited properties have to be undone: white-space:nowrap would refuse to wrap, font:inherit would set this at headline size, and the heading's negative letter-spacing would follow it in. aria-hidden, and the chip's aria-label already names it, so the accessible name does not pick this up. Shown on focus-visible as well as hover, since the chips are real buttons and keyboard users should get the same shortcut. */ .chip-g{position:absolute;top:calc(100% + 9px);left:-8px;z-index:30; width:272px;padding:11px 13px;text-align:left; white-space:normal;letter-spacing:normal; /* font:inherit on .chip means this box would otherwise compute at the headline's 56px. Children set their own px sizes, but resetting here keeps any future em-based value inside sane. */ font-size:16px;line-height:1.4;font-weight:400; background:var(--ground);border:1px solid var(--line);border-radius:var(--r-sf); box-shadow:var(--shadow);opacity:0;transform:translateY(-3px); transition:opacity .15s ease,transform .15s ease;pointer-events:none;} /* pointer-events only while shown. The panel is 272px wide and sits over the content below the chip, so leaving it clickable when invisible would have it swallowing clicks meant for whatever is underneath. */ .chip:hover .chip-g,.chip:focus-visible .chip-g{opacity:1;transform:none;pointer-events:auto;} /* Bridge the gap between chip and panel. Without this the pointer leaves the button before it reaches the panel, the hover drops, and the panel vanishes with its own call to action still unread — which is exactly what it was inviting you to do. Because the panel is a DESCENDANT of the button, keeping the pointer inside it both holds the panel open and makes a click on it open the modal, so "read the full definition" becomes a promise the panel keeps. One rule per placement, matching the three offsets below. */ .chip-g::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px;} .chip.g-up .chip-g::before{top:auto;bottom:-9px;} .chip.g-side .chip-g::before{top:0;bottom:0;left:-12px;right:auto;width:12px;height:auto;} .chip-g b,.chip-g i,.chip-g u{display:block;font-style:normal;text-decoration:none;} .chip-g b{font-family:var(--mono);font-size:8.5px;font-weight:500;letter-spacing:.1em; text-transform:uppercase;color:var(--ink);line-height:1.35;} .chip-g i{font-family:var(--sans);font-size:12px;font-weight:400;line-height:1.5; color:var(--ink-3);margin-top:5px;} .chip-g u{font-family:var(--mono);font-size:9.5px;color:var(--coral);margin-top:8px;} /* Placement is per chip, because the layouts genuinely differ. The test is whether heading text sits BELOW the chip's line: the two hero chips are on the last line of the H1, so opening downward lands in whitespace. The path and close chips have another line under them and opening downward covers it. .g-side opens right, for the close, where the headline is a 262px column with over 1000px of empty space beside it. .g-up opens upward, for the path, where the chip is the first word of the H2 — right would cross the heading's own second half, and above it is only the eyebrow and section padding. */ .chip.g-side .chip-g{top:50%;left:calc(100% + 12px);transform:translateY(-50%) translateX(-3px);} .chip.g-side:hover .chip-g,.chip.g-side:focus-visible .chip-g{transform:translateY(-50%);} .chip.g-up .chip-g{top:auto;bottom:calc(100% + 9px);transform:translateY(3px);} .chip.g-up:hover .chip-g,.chip.g-up:focus-visible .chip-g{transform:none;} /* ---------- CONTEXT MODAL ---------- Native dialog element, so Escape, the backdrop and focus return are free. */ .modal{border:0;padding:0;background:transparent;width:min(880px,92vw);max-height:88vh; color:var(--ink);} .modal::backdrop{background:rgba(11,19,34,.52);backdrop-filter:blur(3px);} .modal-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr); background:var(--ground);border:1px solid var(--line);border-radius:var(--r-sf);overflow:hidden; box-shadow:0 24px 70px -24px rgba(0,0,0,.45);} .modal-fig{position:relative;padding:26px;display:flex;align-items:center; border-right:1px solid var(--line-2);background:var(--bg-hero),var(--ground-2);} .modal-body{padding:clamp(24px,3vw,34px);position:relative;} .modal-x{position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:var(--r-ct); border:1px solid var(--line);background:var(--ground);color:var(--ink-3);cursor:pointer; display:grid;place-items:center;font:inherit;font-size:15px;line-height:1;transition:.16s;} /* The dialog carries tabindex="-1" so it can take focus on open, which means it also matches the global [tabindex]:focus-visible rule. Suppress it here or the coral ring simply moves from the close button to the whole panel. It is a container, not a control, so it has no business showing a focus ring. */ .modal:focus,.modal:focus-visible{outline:none;} .modal-body h3{margin-bottom:12px;} .modal-body p + p{margin-top:12px;} .modal[open]{animation:mIn .22s cubic-bezier(.2,.7,.3,1);} .modal[open]::backdrop{animation:bIn .22s ease;} @keyframes mIn{from{opacity:0;transform:translateY(8px) scale(.985);}} @keyframes bIn{from{opacity:0;}} /* every prose block gets a measure — nothing runs the full column */ .t-lead,.t-body,.t-sm{max-width:var(--measure);} .t-lead{max-width:58ch;} /* ---------- BUTTONS / LINKS ---------- */ /* One button size everywhere — the nav scale, carried through to the hero. 32px tall, 8px radius, 12.5px/500, 12px side padding. Interfere runs 40px in the hero and 28px in the nav; we use one. */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font:inherit; font-size:12.5px;font-weight:500;letter-spacing:normal;height:32px;padding:0 12px; border-radius:var(--r-ct);border:1px solid transparent;text-decoration:none;cursor:pointer; transition:.18s;white-space:nowrap;} /* Ink, not coral. --ink and --ko are a matched pair that swap with the polarity: in light mode this is a near-black button with white text, and in dark mode it inverts to a near-white button with dark text. A literal dark button would disappear against the dark theme, so the token pair is doing the work rather than a hardcoded colour. Coral is now reserved for the drawings, where it means a finding — a call to action is not a finding. */ .btn-primary{background:var(--ink);color:var(--ko);border-color:var(--ink);} .btn-primary:hover{background:var(--ink-2);border-color:var(--ink-2);} .btn-ghost{background:var(--ground);color:var(--ink);border-color:var(--line);box-shadow:var(--shadow);} .btn-ghost:hover{border-color:var(--ink-4);} .btn .ar{font-size:11.5px;opacity:.7;} .btn-quiet{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none;} .btn-quiet:hover{border-color:var(--ink-4);} /* Has to work on and