:root {
    /* These used to jump at the 1100px breakpoint — 40px to 20px for the vine,
       220px to 100px for the handle. Because the vine graphic is a 1:3 tile whose
       height follows its width, halving the column halved the flowers AND doubled
       how often they repeated, which is what made it read as busy noise on a
       narrow window. clamp() scales it smoothly instead, with a floor that keeps
       a flower legible. */
    --handle-size: clamp(110px, 16vw, 220px);
    --slider-height: 100vh;

    /* The vine no longer scales with the viewport at all.
       Its artwork is a 1:3 tile of four flowers whose height follows its width,
       so every pixel taken off the column shrank the flowers AND multiplied how
       often they repeated. Scaling it down "responsively" was the whole problem:
       a decorative motif has one size at which it reads. This is that size, and
       it is now the same on a phone as on a desktop. 40px is ~10% of a 390px
       screen — narrower than a native scrollbar's touch target. */
    --slider-width: 40px;
    --slider-decal-X: clamp(8px, 1.6vw, 22px);
    --handle-decal-X-force: 2.6;

    /* Exactly the artwork's 1:3 ratio, at a fixed size. */
    --vine-tile-height: calc(var(--slider-width) * 3);
}

.slider-container {
    position: fixed;
    right: var(--slider-decal-X);
    /* Starts under the top bar and its branch, not at y=0 — otherwise the bar
       overlaps the vine at scroll top and clips the bird's face. --nav-offset
       is measured by js/customSlider.js, because the bar's height depends on
       the page and on whether its links wrap. */
    top: var(--nav-offset, 0px);
    height: calc(var(--slider-height) - var(--nav-offset, 0px));
    width: var(--slider-width);
    /* Above the bar, so the bird is never clipped by it. The vine itself is a
       separate layer BELOW the bar — see .vine-track. */
    z-index: var(--z-handle);
    pointer-events: none;          /* only the handle takes input */
}

/* The vine itself: a stack of tiles built by js/customSlider.js, each one of
   three flower variants picked at random. They share an identical stem, so the
   joins are seamless whatever order they land in.

   It is its own fixed layer.
   It used to live inside .slider-container, which meant the track and the bird
   shared one stacking context and had to sit on the same side of the top bar.
   They need opposite sides: the vine tucks UNDER the branch so the two read as
   one continuous plant, and the bird rides OVER it. */
.vine-track {
    position: fixed;
    right: var(--slider-decal-X);
    top: var(--vine-top, 0px);
    width: var(--slider-width);
    height: calc(100vh - var(--vine-top, 0px));
    overflow: hidden;
    z-index: var(--z-vine);
    pointer-events: none;
}

.vine-tile {
    width: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

/* Overlap adjacent tiles by 2px. background-size clips the stem's overshoot at
   each tile edge, leaving a faint anti-aliased seam; the overlap makes the stem
   double-draw across the join (flowers stay clear of the edges) so it vanishes. */
.vine-tile + .vine-tile {
    margin-top: -2px;
}

svg {
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}

.slider-handle {
    position: absolute;
    pointer-events: auto;
    z-index: 1;           /* above the vine track */
    touch-action: none;   /* the handle drags; the page behind it still scrolls */
    width: var(--handle-size);
    height: var(--handle-size);
    background: url('../img/elements/WookCockSlider.png') no-repeat center;
    background-size: contain;
    left: calc(-1 * (var(--handle-size) / var(--handle-decal-X-force) ));
    cursor: grab;
    transition: top var(--motion-fast) var(--ease-out);
}

@media screen and (max-width: 1100px) {
    :root {
        /* Tuck the handle closer to the vine on narrow screens. */
        --handle-decal-X-force: 3.2;
    }
}