/* Paint stripe (Ligna graphic device) — beveled parallelogram at exact 17.6°.
   Rendered as SVG to preserve squircular corners. CSS skewX is intentionally
   NOT used because it distorts corner radii.

   Bevel offset = height × tan(17.6°) ≈ height × 0.3172
*/

.ps-stripe {
	display: block;
	max-width: 100%;
	height: auto;
}

.ps-stripe path { transition: fill .2s ease; }

/* Variants */
.ps-stripe--orange path { fill: var(--ps-orange); }
.ps-stripe--burnt path  { fill: var(--ps-burnt-orange); }
.ps-stripe--white path  { fill: var(--ps-white); }
.ps-stripe--forest path { fill: var(--ps-forest); }

/* Stacked decorative band (two stripes layered) */
.ps-stripe-stack {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
}
.ps-stripe-stack > svg { position: absolute; inset: 0; }
.ps-stripe-stack > svg + svg { transform: translate(-6%, -8%); }