/* Clay shape kit (idea 6, shape-kit.html).
   Shapes are flat SVG fills; a per-shape lighting filter (clay.js) turns them into puffy, matte clay.
   Size: width = viewBox width × --u (px per unit, set on a container) × --s (this shape's scale). */
:root { --clay-cream: #EFE8D6; --u: 1px; }

.shape { display: block; line-height: 0; pointer-events: none; width: calc(var(--vbw, 128) * var(--u) * var(--s, 1)); }
.shape svg { display: block; width: 100%; height: auto; overflow: visible; }

/* filled forms: fill and stroke the same colour, so every corner rounds off like pressed clay */
.kf-yellow { fill: var(--c-accent); stroke: var(--c-accent); }
.kf-coral  { fill: var(--c-accent-2); stroke: var(--c-accent-2); }
.kf-sage   { fill: var(--c-accent-3); stroke: var(--c-accent-3); }
.kf-cream  { fill: var(--clay-cream); stroke: var(--clay-cream); }
/* rolled tubes */
.ks-yellow { fill: none; stroke: var(--c-accent); }
.ks-coral  { fill: none; stroke: var(--c-accent-2); }
.ks-sage   { fill: none; stroke: var(--c-accent-3); }
.ks-cream  { fill: none; stroke: var(--clay-cream); }
.body [class^="kf-"] { stroke-width: 10; stroke-linejoin: round; }
.body text[class^="kf-"] { stroke-width: 3; }
.body [class^="ks-"] { stroke-linecap: round; stroke-linejoin: round; }

/* the pencil line drawn before the clay fills in */
.ol * { fill: none !important; stroke-width: 2.2 !important; vector-effect: non-scaling-stroke; }
.ol { opacity: 0; }