/* Variant 3 skin: the same recursive site, dressed in the rekursiv. brand.
   Ink, paper and one yellow. Instrument Serif italic for the words that matter. */
:root{
  --ink:#0d0d0d; --ink-2:#181818; --paper:#F6F6F4; --white:#F6F6F4; --yellow:#FFDE59;
  --orange:var(--yellow); --blue:var(--ink-2); --grid:var(--paper);
  /* type from the Canva decks and Instagram: Helvetica-style grotesque at regular weight, tracked tight; serif italic for emphasis */
  --sans:"Helvetica Neue",Helvetica,Arimo,Arial,sans-serif; --mono:var(--sans);
  --page-bg:var(--ink); --page-fg:var(--paper); --page-line:rgba(244,241,232,.16); --page-accent:var(--yellow);
  --btn-bg:var(--yellow); --btn-fg:var(--ink); --band-bg:var(--yellow); --band-fg:var(--ink); --logo-filter:none;
  --card-bg:var(--paper); --card-fg:var(--ink); --card-line:var(--ink);
  --em:var(--yellow);
  --page-logo:none; /* white logos on the dark pages */
  --page-logo-mode:mono;
}
.eyebrow,.tags span,.hb,.meter,.dock .hint,.portal-label,.mono-s{font-weight:650}

/* rhythm: dark, light, dark, light… like a desk lamp switching rooms */
.sc-box{--bg:var(--ink);--fg:var(--paper);background:radial-gradient(circle at 76% 42%,rgba(255,214,140,.17),rgba(255,190,110,.05) 34%,transparent 62%),var(--ink)}
.sc-clients{--bg:var(--paper);--fg:var(--ink);--em:var(--ink)}
.sc-q{--bg:var(--ink);--fg:var(--paper)}
.sc-r{--bg:var(--paper);--fg:var(--ink);--em:var(--ink)}
.sc-d{--bg:var(--ink-2);--fg:var(--paper);--s1:var(--yellow);--s2:var(--paper);--s3:#9c978a;--s4:var(--ink);--s-line:var(--ink)}
.sc-t{--bg:var(--paper);--fg:var(--ink);--em:var(--ink);--scr-bg:var(--ink);--scr-ink:var(--paper);--scr-a:var(--yellow);--scr-b:var(--yellow)}
.sc-c{--bg:var(--ink);--fg:var(--paper)}

/* emphasis: serif italic, yellow on dark, highlighter on paper */
.mega em,.pg em,.hm-copy em,.hm-cap b,.cta-band em,.manifesto em,.sc-c .s-head h2 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;
  background:none;color:var(--em);padding:0 .04em}
.sc-clients .mega em,.sc-r .mega em,.sc-t .mega em,.cta-band em{background:linear-gradient(transparent 62%,var(--yellow) 62% 92%,transparent 92%);color:inherit}
.mega s{text-decoration-color:var(--yellow)}
.s1-eyebrow i,.s1-eyebrow b{font-family:var(--serif);font-size:1.25em;font-weight:400}

/* scene details */
.sc-q .chip{border-color:rgba(244,241,232,.55);background:var(--ink);color:var(--paper)}
.sc-q .chip:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.sc-q .qmark path{stroke:var(--yellow)}
.sc-r .note .ins{color:var(--ink)}
/* the highlight follows every wrapped line of the insight */
.sc-r .note .ins span{background:linear-gradient(transparent 55%,var(--yellow) 55%);-webkit-box-decoration-break:clone;box-decoration-break:clone;padding:0 2px}
.notes.mag{background:var(--paper)}
.pad-clear:hover{color:var(--ink)}
.sc-t{background-image:radial-gradient(rgba(17,18,16,.18) 1px,transparent 1.5px)}
.cables path{stroke:var(--ink)}
.node.on .port{background:var(--yellow)}
.node.out.hot{box-shadow:5px 5px 0 var(--yellow)}
.portal-win{background:var(--ink)}

/* pages */
.ink-panel{background:var(--ink-2);box-shadow:inset 0 0 0 1.5px var(--page-line)}
.case figure{border-radius:6px}
.steps div{background:var(--ink-2)}
.cl-logo:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}

/* ═════════ brand type: regular weight, tight tracking, like the decks ═════════ */
body h1,body h2,.hm-note blockquote,.cta-band h2,.manifesto{font-weight:400!important;letter-spacing:-.065em!important;line-height:.9}
body h3,.pc-title,.wk-ghead h2,.pd-next{font-weight:500!important;letter-spacing:-.04em!important}
.hm-copy h1 em,.pg-hero h1 em,.cta-band h2 em,.hm-note em{letter-spacing:-.03em!important}
.btn,.pill,.ghost,.more{font-weight:500!important;letter-spacing:-.02em}
.eyebrow,.top-nav a,.top-cta,.wk-chip,.pc-client,.pc-play,.tags span,.k,.hm-hint,.hm-reel b{font-weight:700!important;letter-spacing:-.01em!important}
.pc-stat b,.stats b{font-weight:500!important;letter-spacing:-.04em}
.lede,.hm-svc li,.kv p{letter-spacing:-.015em}
.manifesto{line-height:1.08!important;letter-spacing:-.045em!important}