/* ntvrli design system — the markup layer.
   The hand-drawn marks the owner's reference video draws over the finished
   page: coloured-pencil wireframes, marker arrows, loops and the figure
   retrace. Generated at build time (tools/markup/), drawn by scroll
   (motion.js). Every mark is decorative and aria-hidden; nothing a reader
   needs lives in this layer.

   Colour: the marker palette was sampled from the stroke cores in the
   reference video. None of these carries text on bone (1.6–3.1:1), and none
   needs to — they mark, they never label. Lettering near a mark stays ink. */
:root {
  --mk-graphite: #57554F;
  --mk-terra:    #C98772;
  --mk-orange:   #D1AB7D;
  --mk-yellow:   #D8BE77;
  --mk-teal:     #75AD9D;
  --mk-blue:     #5E90AE;
  --mk-green:    #79AC7C;
  --mk-construct: color-mix(in srgb, var(--ink) 30%, transparent);
  /* Chalk: the graphite of a mark drawn over a dark panel. */
  --mk-chalk:    #BDB8AE;
  /* Terracotta deep enough to carry LARGE lettering on bone (3.3:1; WCAG
     large-text 3:1). Only for display-size numerals such as the method's
     "(1)"; never for body text. */
  --mk-terra-text: #B07460;
  /* The crayon tier — gestures only (Pass 1, 21 Sept 2026). Sampled from the
     stroke cores of the owner's second reference video: saturated wax, far
     louder than the pencil palette above, so it is spent sparingly: one
     gesture per moment, never on lettering. */
  --mk-c-orange: #DB753E;
  --mk-c-amber:  #E39944;
  --mk-c-cobalt: #487BA6;
  --mk-c-deep:   #3C5580;
  --mk-c-ochre:  #E2B058;
  /* Paper-coloured crayon: the bone stroke dragged across a colour plane. */
  --mk-paper: var(--bone);
}

.mk-layer { position:absolute; pointer-events:none; overflow:visible; }

/* PAPER TOOTH — every mark is masked by a static, tileable grain
   (tools/render-textures.mjs), so a stroke skips over the paper the way a
   pencil does. A still image composited by the browser: drawing a stroke
   recomputes nothing. Crayon gestures get the coarse, streaked wax tooth. */
.mk-layer { -webkit-mask-image:url("texture/pencil.webp"); mask-image:url("texture/pencil.webp");
  -webkit-mask-size:150px; mask-size:150px; }
.mk-layer.mk-crayon { -webkit-mask-image:url("texture/crayon.webp"); mask-image:url("texture/crayon.webp");
  -webkit-mask-size:210px; mask-size:210px; }

/* PENCIL — a stroked rough.js path. Width is screen pixels, not user units,
   so a layer stretched to its box never thickens or thins a line. */
.mk-pencil { fill:none; stroke:var(--mk); stroke-width:calc(1.5px * var(--w, 1));
  stroke-linecap:round; stroke-linejoin:round; vector-effect:non-scaling-stroke; }
/* MARKER — a filled, pressure-tapered outline, revealed through a mask whose
   centreline is what actually gets "drawn". */
.mk-fill { fill:var(--mk); }
.mk-reveal { fill:none; stroke:#fff; stroke-linecap:round; stroke-linejoin:round; }

/* The finished hero's drafting: ruled graphite hairlines, never animated. */
.mk-construct :is(line, path, rect) { fill:none; stroke:var(--mk-construct); stroke-width:1px; vector-effect:non-scaling-stroke; }
.mk-construct .fill { fill:var(--ink); stroke:none; }

/* Word-level marks sit on the word they mark. The wrapper is inline so the
   text flows exactly as it would without it. */
.mk-word { position:relative; display:inline-block; }
.mk-box  { inset:-.02em -.09em -.07em -.08em; width:calc(100% + .17em); height:calc(100% + .09em); }
.mk-around { left:-14px; top:-11px; width:calc(100% + 28px); height:calc(100% + 22px); }
.mk-frame { inset:0; width:100%; height:100%; }
.mk-under { left:-4%; bottom:-11px; width:108%; height:18px; }
.mk-swipe { left:-6%; top:0; width:112%; height:100%; opacity:.5; }
.mk-hatch { left:1.25rem; bottom:1.1rem; width:calc(100% - 2.5rem); height:2.9rem; }
.engage-under { bottom:-.16em; height:.3em; }
.mk-host { position:relative; }
.mk-loop { left:-.7em; top:-.55em; width:calc(100% + 1.4em); height:calc(100% + 1.1em); }

/* ARMED — set on <html> by the inline script in the homepage head, only when
   the marks will be drawn. Unarmed (no JavaScript, reduced motion, or the
   runtime failed to arrive), every rule below is inert and every mark is
   simply on the page: the finished state is the baseline. The dash gap is
   longer than the path so a drawn-back stroke can never wrap around. */
.mk-armed .mk { opacity:0; }
.mk-armed :is(.mk-pencil, .mk-reveal) { stroke-dasharray:1 2; stroke-dashoffset:1; }

/* Lenis (MIT, vendor/lenis-1.3.26/LICENSE): the rules its smooth scroll
   needs, carried here rather than as a second stylesheet request. Inert
   until motion.js starts Lenis and it adds the .lenis class. */
html.lenis, html.lenis body { height:auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow:clip; }
.lenis [data-lenis-prevent] { overscroll-behavior:contain; }
.lenis.lenis-smooth iframe { pointer-events:none; }