/* rep. foundation: Markup — perfect type, the editor's hand on top (chosen from buffet v6, essence H).
   Rules: type is square and still; every curve is ink. Green appears only where a person touched the page.
   Scope: put class="mk-root" on <body> (or any container). Ink engine: /js/ink/ink.js. */
.mk-root {
  --mk-paper: #f5f3ee;          /* desk */
  --mk-sheet: #fcfbf8;          /* the page */
  --mk-navy: #070c1e;           /* type */
  --mk-ink2: #353a4c;           /* body type (navy, softened) */
  --mk-grey: #a6a8ae;           /* "mainstream" copy */
  --mk-rule: rgb(7 12 30 / 0.12);
  --mk-rule2: rgb(7 12 30 / 0.07);
  --mk-green: #3bc24c;          /* the hand */
  --mk-flare: #ff5b3a;          /* errors only: the red pen */
  --mk-lean: -11.3deg;
  --mk-hand: cubic-bezier(.55,.06,.22,1);
  --mk-shadow: 0 1px 0 rgb(7 12 30 / .03), 0 1px 2px rgb(7 12 30 / .07), 0 14px 34px -14px rgb(7 12 30 / .22);
  --mk-shadow2: 0 1px 2px rgb(7 12 30 / .08), 0 4px 8px -2px rgb(7 12 30 / .1), 0 26px 50px -18px rgb(7 12 30 / .32);
  --mk-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .03 0 0 0 0 .05 0 0 0 0 .12 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
  /* the cursor is a marker nib */
  --mk-nib: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Cpath d='M3 25l2.2-6.6L19.6 4a2.4 2.4 0 013.4 0l1 1a2.4 2.4 0 010 3.4L9.6 22.8z' fill='%23070c1e'/%3E%3Cpath d='M3 25l2.2-6.6 4.4 4.4z' fill='%233bc24c'/%3E%3C/svg%3E") 3 25, crosshair;
}
.mk-root ::selection { background: rgb(59 194 76 / .42); color: inherit; }

/* ---------- ink layer ---------- */
.mk-root .mk-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 4; }
.mk-root .mk-svg-hi { mix-blend-mode: multiply; z-index: 3; filter: url(#mk-chisel); }
.mk-root .mk-svg-pen { filter: url(#mk-rough); }
.mk-root .mk-stroke { fill: none; stroke: var(--mk-green); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }
.mk-root .mk-hi { stroke-linecap: butt; stroke-opacity: .55; }
.mk-root .mk-c-flare { stroke: var(--mk-flare); }
.mk-root .mk-c-navy { stroke: var(--mk-navy); }
.mk-root .mk-c-paper { stroke: var(--mk-sheet); }

/* ---------- shared pieces ---------- */
.mk-root .mk-desk { background: var(--mk-fibre), var(--mk-paper); }
.mk-root .mk-sheet { position: relative; background: var(--mk-fibre), var(--mk-sheet); box-shadow: var(--mk-shadow); color: var(--mk-navy); }
.mk-root .mk-eyebrow { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgb(7 12 30 / .5); }
.mk-root .mk-note { display: inline-block; color: var(--mk-green); font-family: var(--font-display); font-weight: 700; font-size: 16px; line-height: 1.15; letter-spacing: -0.01em; transform: skewX(var(--mk-lean)); white-space: nowrap; }
.mk-root .mk-note .mk-w { display: inline-block; white-space: nowrap; }
.mk-root .mk-note i { display: inline-block; font-style: normal; }
.mk-root .mk-note.mk-c-flare, .mk-root .mk-msg.is-err { color: var(--mk-flare); }
.mk-root .mk-dot { display: inline-block; width: .2em; height: .2em; margin-left: .04em; border-radius: 50%; background: var(--mk-green); }
.mk-root .mk-pslot { display: inline-block; width: .3em; height: .3em; margin-left: .06em; vertical-align: baseline; }
.mk-root h1 .period { background: var(--mk-green); }

/* page head */
.mk-root .mk-head .line { position: relative; }

/* proof copy: double-spaced, so there's room for the editor */
.mk-root .mk-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 28px; align-items: start; }
.mk-root .mk-margin { position: relative; padding-top: 6px; display: grid; gap: 6px; justify-items: start; border-left: 1px solid var(--mk-rule2); padding-left: 16px; min-height: 100%; }
.mk-root .mk-proof { font-size: clamp(18px, 1.5vw, 22px); line-height: 2.25; font-weight: 400; letter-spacing: -0.012em; color: var(--mk-ink2); margin: 0 0 6px; }
.mk-root .mk-proof--head { font-size: clamp(26px, 2.6vw, 40px); line-height: 1.5; font-weight: 800; letter-spacing: -0.045em; color: var(--mk-navy); }
.mk-root .mk-rep { position: relative; white-space: nowrap; }
.mk-root .mk-ins { position: absolute; left: 4px; bottom: 74%; font-size: 15px; }
.mk-root .mk-caret-t { position: absolute; left: -3px; bottom: .32em; width: 1px; height: 1em; }

.mk-root svg .mk-p { fill: none; stroke: var(--mk-green); stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; }