/* One decorative seam, no flow height, no hit area, no clipping of page content. */
.ck-home .ck-belt {
    position: relative;
    height: 0;
    z-index: 2;
    pointer-events: none;
}
.ck-home .ck-belt__drawing {
    position: absolute;
    top: -35px;
    left: 0;
    display: block;
    width: 100%;
    height: 70px;
    overflow: hidden;
}
.ck-home .ck-belt__cloth { fill: url(#ck-belt-light); stroke: #090a0b; stroke-width: 1; }
.ck-home .ck-belt__grain { fill: url(#ck-belt-weave); }
.ck-home .ck-belt__fold { fill: url(#ck-belt-fold); stroke: #090a0b; stroke-width: 1; }
.ck-home .ck-belt__crease { fill: none; stroke: #070809; stroke-width: 2; stroke-opacity: .65; }
.ck-home .ck-belt__stitch { fill: none; stroke: #686760; stroke-opacity: .3; stroke-width: .75; stroke-dasharray: 3 3; }
.ck-home .ck-belt__pan { transform-origin: 720px 70px; }
.ck-home .ck-belt__wrap { transform-origin: 735px 48px; }
.ck-home .ck-belt__cross { transform-origin: 694px 62px; }
.ck-home .ck-belt__end--left { transform-origin: 704px 66px; }
.ck-home .ck-belt__end--right { transform-origin: 739px 66px; }
/* Preserve a readable knot width on phones inside the existing SVG viewport. */
@media (max-width: 600px) {
    .ck-home .ck-belt__geometry { transform-origin: 720px 70px; transform: scaleX(2); }
}
@media (min-width: 1150px) {
    .ck-home .ck-belt__drawing { top: -70px; height: 140px; }
}
/* No CSS transitions: every pose is determined only by the current scroll. */
@media (prefers-reduced-motion: reduce) {
    .ck-home :is(.ck-belt__pan, .ck-belt__wrap, .ck-belt__cross, .ck-belt__end) { transform: none; }
}