/* homepage: the paper world. Drawing-paper white, charcoal only. */
:root { --paper: #f1f0ec; --ink: #1e1d1b; --soft: #55534e; --dust: #706d67;
  --sans: "Geist", ui-sans-serif, system-ui, sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --g: clamp(20px, 5vw, 72px); --ease: cubic-bezier(.16, 1, .3, 1); }
@font-face { font-family: "Geist"; src: url(/fonts/Geist-Latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url(/fonts/GeistMono-Latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
* { box-sizing: border-box; margin: 0; }
html { background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { font: 400 17px/1.5 var(--sans); overflow-x: hidden; min-height: 100svh; position: relative; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
:focus-visible { outline: 1.5px solid currentColor; outline-offset: 4px; border-radius: 2px; }
.grain { position: fixed; inset: 0; width: 100%; height: 100%; opacity: .22; mix-blend-mode: multiply; pointer-events: none; z-index: 9; }
.study img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }

/* name: small, in the corner. navigation: small words, a charcoal stroke draws under the one you point at */
.nv { font: 400 15.5px/1 var(--sans); }
.nv a, .nv button { position: relative; display: inline-block; padding: 11px 0; }
.nv .lbl { position: relative; display: inline-block; padding: 11px 0; }
.nv svg { position: absolute; left: -3px; bottom: 3px; width: calc(100% + 6px); height: 8px; overflow: visible; pointer-events: none; }
.nv path { fill: none; stroke: var(--ink); stroke-width: 1.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s var(--ease); vector-effect: non-scaling-stroke; opacity: .8; }
.nv path + path { stroke-width: 3.2; opacity: .09; }
.nv :is(a, button):is(:hover, :focus-visible, [aria-current], [aria-pressed=true]) path { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) { .nv path { transition: none; } }
/* sketch canvas sits exactly on its drawing; the walking figure */
canvas.sk { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: multiply; pointer-events: none; display: none; }
.walker { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 4; opacity: 0; transition: opacity .45s; transform-origin: 0 0; will-change: transform; }
.walker.on { opacity: .92; }
.walker path, .walker ellipse { fill: var(--ink); stroke: none; }
.walker .st { fill: none; stroke: var(--ink); stroke-width: 1.15; stroke-linecap: round; }
.walker .sh { opacity: .16; filter: blur(1.3px); }
.wd .far { opacity: .6; } .wd .pa { opacity: .86; } .wd .lit { fill: var(--paper); opacity: .46; } .wd-a .cast { display: none; } .wd-b .sh { opacity: .12; }