/* Thīna · In Stride — css/sections/set.css
   The Run set. js/sections/set.js picks a mode and a composition at mount and puts both on #set:
   .set-live.set-wide     desktop: one pinned viewport (a transform) over the section's runway; the copy in the left column, the
                          photo centred on its pool of light, the four view names small at the lower right; the turn front,
                          three-quarter, side, back as 180 ms crossfades
   .set-flow.set-wide     touch tablets: the same composition, not pinned; a tap on a view name shows that view
   .set-flow.set-stack    phone (html.m) and portrait touch tablets: the photo first, the view names, then the copy; nothing pinned
   .set-static.set-strip  reduced motion / no CDN, desktop: the copy in the left column, the four stills in a row beside it
   .set-static.set-grid   reduced motion / no CDN, phone and windows under 1280: the stills wrapped (2 by 2 on the phone), then the copy
   Sizes and positions of the frame (the photo's own box), the pool and the shadow are set by the script from the measured
   garment. Only the brief's colours. */

#set{position:relative;--set-col:max(var(--gutter),6vw);--set-run:0px}
.set-stage{position:relative;width:100%;pointer-events:none}
.set-defs{position:absolute;left:0;top:0;width:0;height:0;overflow:hidden}

/* ---------- the copy: ink on the cloth (the name section's measure: Bodoni 56 at its true optical size, then Jost 300 17 on 27) ---------- */
.set-copy{color:var(--ink)}
.set-h{margin:0 0 24px;font-family:var(--serif);font-weight:400;font-size:56px;font-variation-settings:'opsz' 56;letter-spacing:-.005em;
  line-height:1;white-space:nowrap}
.set-l{margin:0;font-family:var(--sans);font-weight:300;font-size:17px;line-height:27px;letter-spacing:.01em;white-space:nowrap}
.set-l.set-sizes{margin-top:14px;color:var(--ink-70)}

/* ---------- the photo: the real cut-out on a pool of light, a flat floor shadow, lit as the cloth is ---------- */
.set-photo{position:relative}
.set-frame{position:absolute;left:0;top:0}
.set-pool,.set-shadow{position:absolute;left:0;top:0;border-radius:50%;pointer-events:none}
/* the pool is light, not paint: a soft cream lift of whatever lies under it (the cloth, or the check where the stride parts it) */
.set-pool{background:radial-gradient(closest-side,rgba(246,240,228,.62),rgba(246,240,228,.4) 40%,rgba(246,240,228,.14) 72%,rgba(246,240,228,0))}
@supports ((-webkit-backdrop-filter:brightness(1)) or (backdrop-filter:brightness(1))){
  .set-pool{background:none;-webkit-backdrop-filter:brightness(1.062) saturate(.8);backdrop-filter:brightness(1.062) saturate(.8);
    -webkit-mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.86) 32%,rgba(0,0,0,.52) 58%,rgba(0,0,0,.18) 82%,rgba(0,0,0,0) 100%);
            mask-image:radial-gradient(closest-side,#000 0%,rgba(0,0,0,.86) 32%,rgba(0,0,0,.52) 58%,rgba(0,0,0,.18) 82%,rgba(0,0,0,0) 100%)}
}
/* the floor shadow: a flat ellipse of espresso at 12 % where the hem stands, softened as by a 40 px blur (a tight contact core
   inside a wide soft fall) */
.set-shadow{background:
    radial-gradient(closest-side,rgba(59,42,28,.08),rgba(59,42,28,.042) 50%,rgba(59,42,28,0)) 50% 44% / 66% 40% no-repeat,
    radial-gradient(closest-side,rgba(59,42,28,.062) 0%,rgba(59,42,28,.045) 34%,rgba(59,42,28,.02) 66%,rgba(59,42,28,.006) 88%,rgba(59,42,28,0) 100%);
  transition:left .18s linear,top .18s linear,width .18s linear,height .18s linear}
.set-turn{position:absolute;inset:0}
.set-view{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .18s linear}
.set-view.is-on{opacity:1}
.set-view.is-out{opacity:0;transition:opacity .1s linear .08s}   /* the outgoing view holds until the incoming one has covered it */
.set-view img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;-webkit-user-drag:none;-webkit-touch-callout:none}   /* a long press is the cloth's, not the image menu's */
.set-img{filter:url(#set-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 */
.set-shade{filter:url(#set-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%)}
/* without WebGL: the side view's two seams as static check lenses below the hem */
.set-fb{position:absolute;border-radius:0;
  clip-path:polygon(50% 0,68% 10%,82% 20%,92% 30%,98% 40%,100% 50%,98% 60%,92% 70%,82% 80%,68% 90%,50% 100%,32% 90%,18% 80%,8% 70%,2% 60%,0 50%,2% 40%,8% 30%,18% 20%,32% 10%);
  box-shadow:inset 1px 0 0 var(--cream),inset -1.5px 0 0 var(--band),inset 6px 0 8px -5px rgba(59,42,28,.35)}
html.nogl .set-fb{display:none}
html.nogl .set-photo.is-side .set-fb,html.nogl .set-still[data-view="2"] .set-fb{display:block}

/* ---------- the view names: the hero's small label, the current view in full ink ---------- */
.set-picks{display:flex;align-items:baseline;white-space:nowrap;pointer-events:auto;line-height:1}   /* baseline: site.js' alignBaseline probe sits on the words' baseline */
.set-pick{-webkit-appearance:none;appearance:none;background:none;border:0;border-radius:0;margin:0;padding:0;font:inherit;letter-spacing:inherit;
  text-transform:inherit;color:inherit;line-height:1;-webkit-tap-highlight-color:transparent;transition:color .18s linear}
.set-pick.is-on{color:var(--ink)}
.set-pick:focus-visible{outline:1.5px solid var(--esp);outline-offset:6px}
.set-picks:focus-within{opacity:1 !important;pointer-events:auto !important}   /* a view name the keyboard reached is seen */

/* ---------- wide: desktop (pinned) and touch tablets (not pinned) ---------- */
#set.set-live.set-wide{height:calc(100vh + var(--set-run))}
#set.set-flow.set-wide{height:100vh;height:100svh}
.set-wide .set-stage{height:100vh}
.set-flow.set-wide .set-stage{height:100svh}
.set-live .set-stage{position:absolute;left:0;top:0;will-change:transform}
.set-wide .set-copy{position:absolute;left:var(--set-col);top:50%;transform:translateY(-54%)}
.set-wide .set-photo{position:absolute;left:0;top:0;width:100%;height:100%}
.set-flow.set-wide .set-photo{pointer-events:auto}
.set-wide .set-picks{position:absolute;right:48px;top:0;font-size:max(11px,calc(12 * var(--u)))}   /* right and baseline set by set.js */
.set-wide .set-pick{padding:12px 0;margin-left:calc(32 * var(--u))}
.set-wide .set-pick:first-child{margin-left:0}
.set-wide .set-pick:last-child{margin-right:-.18em}

/* ---------- stack: the phone (html.m) — the photo first, the view names, the copy; ink inside the 36 px gutters ---------- */
.set-stack .set-stage{display:flex;flex-direction:column;padding:0 0 96px;overflow-x:clip}
.set-stack .set-photo{order:0;flex:none;width:100%;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.set-stack .set-picks{order:1;flex:none;justify-content:center;margin:0 var(--gutter);font-size:11px}
.set-stack .set-pick{padding:17px 9px}                                   /* a 45 px target */
.set-stack .set-copy{order:2;margin:30px var(--gutter) 0;text-align:center}   /* centred, as the hero's and the name's phone designs are */
.set-stack .set-h,.set-stack .set-l{white-space:normal}
html.m .set-h{font-size:40px;font-variation-settings:'opsz' 40;margin-bottom:18px}   /* the hairlines hold at 1x on the phone */
html.m .set-l{font-size:16px;line-height:25px}
html.m .set-l.set-sizes{margin-top:12px}

/* ---------- static: reduced motion or no CDN — the copy in the left column, the four stills in a row beside it; nothing moves ---------- */
#set.set-static{height:auto}
.set-strip .set-stage{display:flex;align-items:center;gap:64px;padding:112px var(--set-col) 104px}
.set-strip .set-copy{flex:none}
.set-row{display:flex;justify-content:center;align-items:flex-start;gap:32px;flex:1 1 auto;min-width:0}
.set-still{position:relative;flex:none}
.set-grid .set-stage{display:flex;flex-direction:column;padding:112px var(--gutter) 96px;overflow-x:clip}   /* the stills clear the fixed nav */
html.m .set-grid .set-stage{padding-top:64px}
.set-grid .set-row{order:0;flex-wrap:wrap;gap:32px}
html.m .set-grid .set-row{gap:18px}
.set-grid .set-copy{order:1;margin:36px 0 0;text-align:center}
.set-grid .set-h,.set-grid .set-l{white-space:normal}