/* Frenchify — the NP skin for site pages outside the maps (the dashboard): the maps' paper and grain,
   riso inks, Bricolage Grotesque + Shantell Sans and cut-paper corners (the header itself is site-header.css). Pages add body.np-skin
   and load this after frenchify.css / nav-layout.css; the page file (dashboard-npv.css) builds on it. */

body.np-skin {
  --paper: #F3EDE2; --paper-2: #E8DECD; --paper-3: #DCD0BB; --white: #FFFDF8;
  --ink: #1F1D2B; --ink-2: #4A4558; --muted: #7A7383;
  --pink: #FF48B0; --blue: #0078BF; --sun: #FFB511; --green: #00A95C; --orange: #FF6C2F; --purple: #765BA7;
  --pink-t: #FFD3EA; --blue-t: #CBE3F3; --sun-t: #FFE6A6; --green-t: #C6EAD5; --orange-t: #FFD7C4; --purple-t: #DFD5EE;
  --pink-i: #C2187D; --blue-i: #005A90; --sun-i: #9A6200; --green-i: #007A42; --orange-i: #C2410C; --purple-i: #55408A;
  --cut: 16px 24px 14px 22px / 22px 14px 24px 16px;
  --cut-2: 24px 14px 22px 16px / 14px 22px 16px 24px;
  --head: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --hand: 'Shantell Sans', 'Bradley Hand', 'Segoe Print', cursive;
  --lift: 0 22px 34px -24px rgba(31,29,43,.5), 0 2px 0 rgba(31,29,43,.04);
  --bounce: cubic-bezier(.3,1.6,.5,1);
  --lc: var(--pink); --lc-t: var(--pink-t); --lc-i: var(--pink-i);
  margin: 0; background: var(--paper); color: var(--ink); font-family: var(--head); font-size: 17px; line-height: 1.5; font-optical-sizing: auto; -webkit-font-smoothing: antialiased;
}
/* riso grain over the whole page, as on the maps */
body.np-skin::after { content: ""; position: fixed; inset: 0; z-index: 300; pointer-events: none; opacity: .32; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45  0 0 0 0 .4  0 0 0 0 .35  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.np-skin :is(h1,h2,h3,p) { margin: 0; }
.np-skin button { font-family: var(--head); }
.np-skin :is(a,button):focus-visible { outline: 3px solid var(--ink); outline-offset: 4px; }
.np-skin [hidden] { display: none !important; }

/* ink doodles drawn with a rough filter (#np-rough, or the page's own) */
body.np-skin .np-doodle { max-width: none; overflow: visible; fill: none; filter: url(#np-rough); stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
body.np-skin .np-doodle path { vector-effect: non-scaling-stroke; }