/* ============================================================
   LLS GROUP - "Finished work, without the filler."
   Ten completed projects, in the supplied carousel order.

   Occupies the same right-hand media area the previous static
   main+row block held, so the section keeps its 891px height and
   the left column is untouched. Controls mirror the transformations
   carousel, restated for a cream ground instead of the dark band.
   ============================================================ */
.l-work-stage{position:absolute;left:calc(535 * var(--u));top:calc(35 * var(--u));
  width:calc(845 * var(--u));height:calc(690 * var(--u))}

.l-work-view{position:relative;width:100%;height:100%;overflow:hidden;touch-action:pan-y;
  background:var(--cream)}

.l-work-track{list-style:none;margin:0;padding:0;display:flex;height:100%;
  width:100%;
  transition:transform 620ms cubic-bezier(.22,.61,.36,1)}
.l-work-track li{flex:0 0 100%;height:100%;position:relative;overflow:hidden}
.l-work-track img{width:100%;height:100%;object-fit:cover;display:block}

/* the frame is slightly squarer than the 4:3 sources, so the crop is
   held to the centre rather than drifting to an edge */
.l-work-track img{object-position:50% 50%}

.l-work-bar{position:absolute;left:calc(535 * var(--u));top:calc(762 * var(--u));
  width:calc(845 * var(--u));height:calc(42 * var(--u));
  display:flex;align-items:center;gap:calc(18 * var(--u))}
.l-work-count{font-family:var(--serif);font-size:calc(15 * var(--u));
  letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.l-work-count i{font-style:normal;color:var(--body);opacity:.55}
.l-work-cap{margin:0;font-size:calc(10.5 * var(--u));
  letter-spacing:calc(.4 * var(--u));color:var(--body);opacity:.8}
.l-work-nav{margin-left:auto;display:flex;gap:calc(10 * var(--u))}
.l-work-nav button{
  width:calc(42 * var(--u));height:calc(42 * var(--u));border-radius:50%;
  border:1px solid var(--hair);background:transparent;
  display:grid;place-items:center;cursor:pointer;
  transition:background 180ms cubic-bezier(.22,.61,.36,1),
             border-color 180ms cubic-bezier(.22,.61,.36,1)}
.l-work-nav button:hover{background:rgba(24,25,22,.06);border-color:var(--ink)}
.l-work-nav button:focus-visible{outline:2px solid var(--olive);outline-offset:3px}
.l-work-nav svg{width:calc(15 * var(--u));height:calc(15 * var(--u));
  stroke:var(--ink);stroke-width:1.5;fill:none}

/* ============================================================
   MOBILE - same order, thumb-friendly, swipe as the primary gesture
   ============================================================ */
@media (max-width:900px){
  /* this file loads after styles-lls.css, so its desktop rules would
     otherwise outrank that file's mobile reset - restate the reset here */
  .l-work-stage,.l-work-bar{position:static;inset:auto;width:auto}
  .l-work-stage{margin:calc(28 * var(--u)) calc(20 * var(--u)) 0;
    height:calc(340 * var(--u))}
  /* controls read as part of the carousel rather than floating clear of it */
  .l-work-bar{margin:calc(10 * var(--u)) calc(20 * var(--u)) 0;
    height:auto;gap:calc(12 * var(--u))}
  .l-work-count{font-size:calc(14 * var(--u))}
  .l-work-cap{display:none}
  .l-work-nav button{width:calc(46 * var(--u));height:calc(46 * var(--u))}
}

@media (prefers-reduced-motion:reduce){
  .l-work-track{transition:none!important}
  .l-work-nav button{transition:none!important}
}