/* Self-hosted site enhancement: accessibility toolbar + language menu. No third-party overlay. No external dependencies. */ .enh-bar{position:fixed;left:16px;bottom:16px;z-index:2147483000;display:flex;gap:8px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif} .enh-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:8px 12px;border:1px solid rgba(0,0,0,.18);border-radius:10px;background:#ffffff;color:#1a1a1a;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.18)} .enh-btn:hover{background:#f3f3f3} .enh-btn:focus-visible{outline:3px solid #1f44c4;outline-offset:2px} .enh-btn svg{width:20px;height:20px;flex:0 0 auto} .enh-panel{position:fixed;left:16px;bottom:72px;z-index:2147483001;width:288px;max-width:calc(100vw - 32px);background:#ffffff;color:#1a1a1a;border:1px solid rgba(0,0,0,.18);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.28);padding:14px;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif} .enh-panel[hidden]{display:none} .enh-panel h2{margin:0 0 10px;font-size:15px;font-weight:700;color:#1a1a1a} .enh-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 0;border-top:1px solid #eee} .enh-row:first-of-type{border-top:0} .enh-row span{font-size:14px} .enh-ctrl{display:inline-flex;gap:6px} .enh-toggle{min-width:64px;min-height:38px;padding:6px 12px;border:1px solid rgba(0,0,0,.22);border-radius:8px;background:#f5f5f5;color:#1a1a1a;font-size:13px;font-weight:600;cursor:pointer} .enh-toggle[aria-pressed="true"]{background:#1f44c4;border-color:#1f44c4;color:#fff} .enh-toggle:focus-visible,.enh-step:focus-visible,.enh-reset:focus-visible,.enh-lang a:focus-visible{outline:3px solid #1f44c4;outline-offset:2px} .enh-step{width:40px;height:38px;border:1px solid rgba(0,0,0,.22);border-radius:8px;background:#f5f5f5;color:#1a1a1a;font-size:17px;font-weight:700;cursor:pointer} .enh-reset{margin-top:12px;width:100%;min-height:40px;border:1px solid rgba(0,0,0,.22);border-radius:8px;background:#fff;color:#1a1a1a;font-size:14px;font-weight:600;cursor:pointer} .enh-reset:hover{background:#f3f3f3} .enh-lang{position:fixed;left:16px;bottom:72px;z-index:2147483001;width:220px;max-width:calc(100vw - 32px);background:#fff;color:#1a1a1a;border:1px solid rgba(0,0,0,.18);border-radius:14px;box-shadow:0 8px 30px rgba(0,0,0,.28);padding:8px} .enh-lang[hidden]{display:none} .enh-lang ul{list-style:none;margin:0;padding:0} .enh-lang a{display:block;padding:9px 10px;border-radius:8px;color:#1a1a1a;text-decoration:none;font-size:14px} .enh-lang a:hover{background:#f3f3f3} .enh-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* User toggles applied to */ html.enh-contrast,html.enh-contrast body{background:#000 !important;color:#fff !important} html.enh-contrast a{color:#ffe14d !important} html.enh-contrast img{filter:none} html.enh-links a{text-decoration:underline !important;outline:1px dashed currentColor;outline-offset:2px} html.enh-readable body,html.enh-readable p,html.enh-readable li,html.enh-readable span,html.enh-readable a,html.enh-readable td,html.enh-readable div{font-family:Verdana,"Segoe UI",Tahoma,Arial,sans-serif !important;letter-spacing:.01em;line-height:1.7 !important} @media (prefers-reduced-motion:no-preference){.enh-panel,.enh-lang{animation:enh-in .12s ease-out}} @keyframes enh-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} @media print{.enh-bar,.enh-panel,.enh-lang{display:none !important}} /* ============================================================ SECTION LABELS - eyebrow / page-eyebrow / topic badge Added 2026-06-29. Token-adaptive, collision-free (lbl- prefix). Inherits each site palette via CSS variable fallbacks. ============================================================ */ .lbl-eyebrow{ display:block; font-family:var(--sans,var(--body,ui-sans-serif,system-ui,sans-serif)); font-size:.72rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; line-height:1.4; color:var(--accent,var(--gold,var(--cobalt,var(--navy,#8C6E4D)))); margin:0 0 .55rem; } .lbl-pageeyebrow{ display:block; font-family:var(--sans,var(--body,ui-sans-serif,system-ui,sans-serif)); font-size:.78rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; line-height:1.4; color:var(--ink-2,var(--ink-mid,var(--ink-quiet,#5A635E))); margin:0 0 .85rem; } .lbl-badges{ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin:.7rem 0 0; padding:0; list-style:none; } .lbl-badge{ display:inline-flex; align-items:center; font-family:var(--sans,var(--body,ui-sans-serif,system-ui,sans-serif)); font-size:.7rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; line-height:1; color:var(--ink-2,var(--ink-mid,var(--ink-quiet,#5A635E))); background:transparent; border:1px solid var(--line,var(--rule,var(--hairline,rgba(0,0,0,.16)))); border-radius:999px; padding:.5em .9em; } .lbl-badge--accent{ color:var(--accent,var(--gold,var(--cobalt,var(--navy,#8C6E4D)))); } @media (max-width:480px){ .lbl-pageeyebrow{letter-spacing:.16em} .lbl-eyebrow{letter-spacing:.13em} } /* ============================================================ BRAND MARKS ยท correct current mark, official colour Rebuilt 20260712T231301Z. Every colour below was read from the brand's OWN asset, not from a third-party colour database and not from memory. Source URL for each mark is recorded in _BRANDMARKS_REPORT.json. Rule 1 CORRECT MARK. Five marks were not the brand's logo at all and have been replaced in the HTML with the brand's own current mark: Instagram (now the official gradient glyph), Wikidata (now the official tri-colour bar mark), Academia.edu (was a generic graduation cap), SlideShare (was a generic slideshow glyph; also rebranded in 2025), F6S (was the letters "F6S" set in Arial). Rule 2 OFFICIAL COLOUR. No mark is greyed out, inverted or arbitrarily recoloured. GitHub and Academia.edu ship black by their own guidelines. ACCESSIBILITY. Official brand colours are NOT altered to chase contrast. ORCID green is 1.82:1 on white and F6S coral is 2.9:1. Per WCAG 1.4.11 the CONTROL, not the brand mark inside it, is what must be identifiable: - 3:1 control boundary on every icon, independent of the mark colour - accessible name (aria-label) on every icon, so colour and shape are never the sole carrier of meaning - focus indicator is ours, 8:1, never the brand colour - hit target 44x44, well over the 24x24 minimum ============================================================ */ #social-cluster-bar a[aria-label], .chip[aria-label]{ border:1px solid #8A9099 !important; min-width:44px; min-height:44px; } #social-cluster-bar a[aria-label]:focus-visible, .chip[aria-label]:focus-visible, .share-btn:focus-visible{ outline:3px solid #1F44C4 !important; outline-offset:3px; border-radius:50%; } .share-btn:focus-visible{ border-radius:8px; } #social-cluster-bar a[aria-label]:hover, .chip[aria-label]:hover{ border-color:#0F1218 !important; } /* clear space: each mark keeps its own margin inside the 44px control */ #social-cluster-bar a[aria-label] svg, .chip[aria-label] svg{ width:18px !important; height:18px !important; } /* Wikidata's mark is 1050x590. Never stretch it to a square. */ .chip[aria-label="Wikidata"] svg, #social-cluster-bar a[aria-label="Wikidata"] svg{ width:20px !important; height:11.24px !important; } /* SlideShare's mark is 170x133. */ .chip[aria-label="SlideShare"] svg, #social-cluster-bar a[aria-label="SlideShare"] svg{ width:18px !important; height:14.08px !important; } /* Academia's mark is 24x23. */ .chip[aria-label="Academia"] svg, #social-cluster-bar a[aria-label="Academia"] svg{ width:18px !important; height:17.25px !important; } /* --- official brand colours (glyphs use fill:currentColor) --- */ /* ORCID #A6CE39 https://info.orcid.org/brand-guidelines/ */ #social-cluster-bar a[aria-label="ORCID"], .chip[aria-label="ORCID"]{ color:#A6CE39 !important; } /* Substack #FF6719 https://substack.com/brand */ #social-cluster-bar a[aria-label="Substack"], .chip[aria-label="Substack"]{ color:#FF6719 !important; } /* SoundCloud #FF5500 https://soundcloud.com/company/media-kit */ #social-cluster-bar a[aria-label="SoundCloud"], .chip[aria-label="SoundCloud"]{ color:#CD4400 !important; } /* LinkedIn #0A66C2 https://brand.linkedin.com/ */ #social-cluster-bar a[aria-label="LinkedIn"], .chip[aria-label="LinkedIn"]{ color:#0A66C2 !important; } /* X #000000 https://about.x.com/en/who-we-are/brand-toolkit */ #social-cluster-bar a[aria-label="X"], .chip[aria-label="X"]{ color:#000000 !important; } /* YouTube #FF0000 https://www.youtube.com/howyoutubeworks/resources/brand-resources/ */ #social-cluster-bar a[aria-label="YouTube"], .chip[aria-label="YouTube"]{ color:#FF0000 !important; } /* Bluesky #0A7AFF https://bsky.social/about/blog/4-18-2024-bluesky-logo */ #social-cluster-bar a[aria-label="Bluesky"], .chip[aria-label="Bluesky"]{ color:#0A7AFF !important; } /* GitHub #000000 https://brand.github.com/foundations/logo */ #social-cluster-bar a[aria-label="GitHub"], .chip[aria-label="GitHub"]{ color:#000000 !important; } /* Medium #242424 https://medium.com/ masthead wordmark SVG, path fill */ #social-cluster-bar a[aria-label="Medium"], .chip[aria-label="Medium"]{ color:#242424 !important; } /* Crunchbase #146AFF https://about.crunchbase.com/ own logo asset "Logo (Blue).svg", path fill */ #social-cluster-bar a[aria-label="Crunchbase"], .chip[aria-label="Crunchbase"]{ color:#146AFF !important; } /* ResearchGate #011716 https://c5.rgstatic.net/m/46072002334150/images/template/brand-header-logo--black.svg */ #social-cluster-bar a[aria-label="ResearchGate"], .chip[aria-label="ResearchGate"]{ color:#011716 !important; } /* Scribd #098647 https://www.scribd.com/ own favicon, pixel-sampled */ #social-cluster-bar a[aria-label="Scribd"], .chip[aria-label="Scribd"]{ color:#098647 !important; } /* SlideShare #312E56 https://www.slideshare.net/ design token --navy-700 + own favicon glyph */ #social-cluster-bar a[aria-label="SlideShare"], .chip[aria-label="SlideShare"]{ color:#312E56 !important; } /* Academia #000000 https://www.academia.edu/images/academia-logo-2021.svg (fill="black") */ #social-cluster-bar a[aria-label="Academia"], .chip[aria-label="Academia"]{ color:#000000 !important; } /* Instagram, Wikidata and F6S carry their colour inside the SVG: Instagram is an official gradient, Wikidata is officially tri-colour, F6S is an official coral disc with a white glyph. Do not set colour on them. */