/* Two original, local SVG process illustrations. The approved Macramé layout is reused. */
.material-visual{display:block;width:100%;height:auto;max-height:350px;overflow:visible}
.material-item .macrame-canvas{padding-top:8px;padding-bottom:35px}
.material-item .macrame-canvas:before{background:radial-gradient(ellipse at 38% 50%,#fff8e466,transparent 68%)}
.material-item .macrame-canvas figcaption{font-size:9px;line-height:1.6;letter-spacing:.055em;margin-top:6px}
.clay-opening,.clay-lines{opacity:1}
.clay-paint{opacity:.92}
.canvas-stroke{stroke-dasharray:1;stroke-dashoffset:0}
.material-item.is-open .canvas-stroke{animation:paint-a-stroke 1.05s cubic-bezier(.25,.55,.35,1) var(--delay,0s) both}
@keyframes paint-a-stroke{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:650px){.material-visual{max-height:300px}.material-item .macrame-canvas{padding-bottom:25px}.material-item .macrame-canvas figcaption{font-size:8px;max-width:270px;margin:5px auto 0}}
@media(prefers-reduced-motion:reduce){.material-item .canvas-stroke{animation:none!important;stroke-dashoffset:0}.clay-opening,.clay-lines{opacity:1}}