/* ============================================================================
   Shared inks (30 Sep 2026, Paul: expert review of greys and black)

   ONE file for text colour on all four live pages (landing, about,
   selected-projects, case-study), linked last in <head> after header.css.
   Three inks, one job each. Change a value here and every page follows.

     --ink    #171717  anything that is the point
     --ink-2  #6e6e6b  supporting sentences: descriptions, "11+ years...",
                       the invitation. 5.1:1 on white, passes WCAG AA
     --ink-3  30% black labels and scaffolding only, never a sentence:
                       section labels, badges, tags, the row dot, inactive
                       tabs, "coming soon". 2.1:1, decoration-level

   Before this, six greys were in use (30%, 30% of #171717, 25%, 15%, a
   blue-grey dot at 50%, and #6e6e6b on hover). Backups: _<page>-backup-pre-inks.html
   ========================================================================== */

:root{--ink:#171717;--ink-2:#6e6e6b;--ink-3:rgba(0,0,0,.3)}

/* ---- ink-2: supporting sentences ----------------------------------------- */
.hi-intro .hi-sub,.name-lines .hi-sub{color:var(--ink-2)}   /* home "11+ years..."; projects invitation */
.pj-desc{color:var(--ink-2)}                                  /* project descriptions */
.pj a[href]:is(:hover,:focus-visible) .pj-desc{color:var(--ink)}   /* hover lifts one step, to ink */

/* ---- ink-3: labels and scaffolding --------------------------------------- */
.label,.cs-sec .label,.hi-label{color:var(--ink-3)}
.cs-tags{color:var(--ink-3)}
.pj-dot{color:var(--ink-3)}
.pj-badge,.pj-ext{color:var(--ink-3)}
.pj a[href]:is(:hover,:focus-visible) :is(.pj-badge,.pj-ext){color:var(--ink)}
.who__tab{color:var(--ink-3)}                                 /* unselected tabs (were 15%); selected and hover stay ink */
.hi-links .is-soon{color:var(--ink-3)}                        /* "Experiments (coming soon)" (was 25%) */

/* the scramble's number swaps (e to 3, o to 0...) (11 Oct, Paul: mobile audit): the digit is drawn over the letter, which
   stays in place but unpainted, so the line keeps its width and never rewraps mid-scramble. Set by the pages' scripts as data-leet */
[data-leet]{position:relative;-webkit-text-fill-color:transparent}
[data-leet]::after{content:attr(data-leet);position:absolute;left:50%;top:0;line-height:normal;transform:translateX(-50%);-webkit-text-fill-color:currentColor;pointer-events:none}