/* Thīna · In Stride — css/sections/check.css
   The hidden check. js/sections/check.js lays the section out in px from the viewport (every left/top/width/height here is set
   there) and chooses the mode:
   .ck-rowmode  desktop: the line and the four pockets (label, then the seam) down the left, the three-quarter photo at the right
   .ck-col      phones and narrow windows: the line, the photo above, the pockets stacked, each label set under its seam
   .ck-live     scrubbed: each pocket parts as it crosses the middle of the viewport, the photo is held while they pass
   .ck-rest     reduced motion, no CDN, no WebGL: every pocket open with its crop in place, the hairlines drawn, nothing held
   The openings are the engine's lens seams; the crops inside them are the real photos under SVG lens clips. The photo is
   treated as in the Run set (pool of light, floor shadow, half-pixel feather, the light falling from the upper left).
   Only the brief's colours. */

#check{position:relative;overflow:visible}
.ck{position:absolute;inset:0;pointer-events:none}
.ck-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- the one line: ink on the cloth ---------- */
.ck-h{position:absolute;margin:0;color:var(--ink);white-space:nowrap}
#check.ck-col .ck-h{line-height:1.12;text-align:center}   /* the size is set by the script so the two lines fit the column; centred on it */

/* ---------- the pockets: a label and the seam (the engine draws the opening; the svg holds the crop and the fallback) ---------- */
.ck-rows{position:absolute;left:0;top:0;width:100%;height:100%;margin:0;padding:0;list-style:none}
.ck-row{position:absolute;left:0;width:100%}
.ck-lab{position:absolute;left:0;top:0;margin:0;white-space:nowrap;color:var(--ink-70);font-size:max(11px, calc(12 * var(--u)))}   /* scales with the nav */
.ck-col .ck-lab{font-size:11px;text-align:center}            /* one column: each caption centred under its pocket */
.ck-lens{position:absolute;top:0;display:block;overflow:visible;visibility:hidden}
.ck-li{mix-blend-mode:soft-light}
.ck-pv{fill:var(--esp2);opacity:.2}   /* the pocket's own check sits in the garment's shade, as the photographed check does */
.ck-dp{mix-blend-mode:multiply}
.ck-fb,.ck-rim{display:none}
.ck-rim{fill:none;stroke-linecap:round}
.ck-rim-u{stroke:var(--cream);stroke-width:1}
.ck-rim-b{stroke:var(--band);stroke-width:1.5}
html.nogl .ck-fb,html.nogl .ck-rim{display:inline}

/* ---------- the photo: the real cut-out on a pool of light, a flat floor shadow, lit as the cloth is (the Run set's treatment) ---------- */
.ck-fig{position:absolute;margin:0}
.ck-live .ck-fig{will-change:transform}
.ck-pool,.ck-shadow{position:absolute;border-radius:50%;pointer-events:none}
/* the pool is light, not paint: a soft lift of whatever lies under it (the cloth, or the check where the cloth is parted) */
.ck-pool{background:radial-gradient(closest-side,rgba(246,240,228,.5),rgba(246,240,228,.28) 45%,rgba(246,240,228,.07) 80%,rgba(246,240,228,0))}
@supports ((-webkit-backdrop-filter:brightness(1)) or (backdrop-filter:brightness(1))){
  .ck-pool{background:none;-webkit-backdrop-filter:brightness(1.045) saturate(.86);backdrop-filter:brightness(1.045) saturate(.86);
    -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.12) 84%,rgba(0,0,0,0) 100%);
            mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.8) 30%,rgba(0,0,0,.42) 60%,rgba(0,0,0,.12) 84%,rgba(0,0,0,0) 100%)}
}
.ck-shadow{background:radial-gradient(closest-side,rgba(59,42,28,.12) 0%,rgba(59,42,28,.09) 30%,rgba(59,42,28,.04) 62%,rgba(59,42,28,.012) 84%,rgba(59,42,28,0) 100%)}
.ck-photo,.ck-shade{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;-webkit-user-drag:none;-webkit-touch-callout:none}
.ck-photo{filter:url(#ck-feather)}                              /* a half-pixel inner feather on the cut-out edge */
/* the same photo again, a shade deeper and warmer toward the lower right: the light falls from the upper left, as on the cloth */
.ck-shade{filter:url(#ck-feather) brightness(.89) sepia(.2);
  -webkit-mask-image:linear-gradient(140deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.9) 100%);mask-image:linear-gradient(140deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.9) 100%)}

/* ---------- the hairlines: from each open pocket to its place on the garment ---------- */
.ck-leads{position:absolute;left:0;top:0;display:block;overflow:visible}
.ck-ld{opacity:0}
.ck-lp{fill:none;stroke:var(--esp);stroke-opacity:.6;stroke-width:1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.ck-halo{fill:none;stroke:var(--cream);stroke-width:1.6;stroke-opacity:.7}   /* a cream edge outside the ring, so it reads on the check and on the sand */
.ck-ring{fill:none;stroke:var(--esp);stroke-opacity:.85;stroke-width:1;stroke-dasharray:1.02 1;stroke-dashoffset:0}
.ck-col .ck-ring{stroke-width:1.1}