/* s-crew.css v3: Crew on chalk. Giant 7 + h2, pinned edge-to-edge track, square tall photos, name + next open + link under each. */
.s-crew{padding:0}
.crew__stage{position:relative;height:100svh;min-height:640px;display:flex;flex-direction:column;
  padding:calc(var(--nav-h) + var(--s2)) 0 88px;overflow:hidden;
  /* photo row height drives the card width: 3:4 tall; the info block (name, next open, book link) is budgeted below it */
  --ph:clamp(300px, calc(100svh - 488px), 520px);--cw:min(84vw, calc(var(--ph) * .75))}
.crew__head{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s2);padding:0 var(--gut)}
.crew__title{display:flex;align-items:flex-end;align-items:last baseline;gap:var(--s2);font:inherit;letter-spacing:0;margin:0}
.crew__seven{display:block;font-size:128px;line-height:.8;margin-top:.06em;padding-bottom:.02em}
.crew__h{display:block;line-height:1;letter-spacing:-.025em}
.crew__count{padding-top:6px;white-space:nowrap}
.crew__n{display:inline-block;color:var(--ink);min-width:1.4em;text-align:right}

/* default (no JS / reduced motion): a native horizontal scroll row */
.crew__view{position:relative;flex:1;min-height:0;margin-top:var(--s3);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.crew__view::-webkit-scrollbar{display:none}
.crew__track{list-style:none;display:flex;gap:var(--s1);height:100%;width:max-content;align-items:flex-start;padding:0 calc((100vw - var(--cw)) / 2)}
.crew__card{position:relative;flex:none;width:var(--cw);scroll-snap-align:center;transform-origin:50% 0}
.crew__ph{position:relative;overflow:hidden;border-radius:0;background:#d9d5cc;aspect-ratio:3/4;width:100%}
.crew__img{position:absolute;top:0;left:-4%;width:108%;height:100%;max-width:none;object-fit:cover;object-position:50% 18%}
.crew__dim{position:absolute;inset:0;background:var(--chalk);opacity:0;pointer-events:none}
.crew__owner{position:absolute;z-index:2;top:var(--s1);left:var(--s1)}
.crew__info{display:flex;flex-direction:column;align-items:flex-start;padding-top:10px}
.crew__name{font-size:max(24px,var(--t-h3))}
.crew__next{margin-top:4px}
.crew__info .link{margin-top:10px}

/* end item: plain text, no box, centred on the photo row */

/* pinned mode (JS adds .is-pinned): the track is driven by vertical scroll */
.s-crew.is-pinned .crew__view{overflow:hidden;scroll-snap-type:none}
.s-crew.is-pinned .crew__track{will-change:transform}
.s-crew.is-pinned .crew__card{scroll-snap-align:none}
.s-crew:not(.is-pinned) .crew__count{display:none}

@media (min-width:900px){
  .crew__stage{padding:calc(var(--nav-h) + var(--s2)) 0 100px;--ph:clamp(320px, calc(100svh - 566px), 600px);--cw:calc(var(--ph) * .75)}
  .crew__seven{font-size:200px}
  .crew__title{gap:var(--s3)}
  .crew__count{padding-top:var(--s2)}
  .crew__track{gap:var(--s1);padding:0}
  .crew__view{margin-top:var(--s2)}
}
/* owner 22:00: the track ends on a real card like the barbers, so no empty chalk screen at the end.
   owner 22:25: their empty chair (Squire gallery photo) replaces the floor-decal logo, which read as a placeholder */
.crew__img--chair{object-position:70% 60%}

/* >= 1200: a 4 x 2 grid of big 3:4 cards inside the page gutters (12px gaps). No overflow, so nothing pins; the same layout holds in reduced motion.
   Each photo is framed with --z (zoom) and --fx/--fy (focus, like object-position) so heads sit at about one height across a row. */
@media (min-width:1200px){
  .crew__stage{height:auto;min-height:0;padding-bottom:var(--s10)}
  .crew__view{flex:none;overflow:visible;scroll-snap-type:none;margin-top:var(--s5)}
  .crew__track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5) 12px;width:100%;height:auto;padding:0 var(--gut);align-items:start}
  .crew__card{width:auto;min-width:0;scroll-snap-align:none}
  .crew__count{display:none}
  .crew__img{--z:1;--fx:.5;--fy:.5;left:calc(-100% * (var(--z) - 1) * var(--fx));top:calc(-100% * (var(--z) - 1) * var(--fy));
    width:calc(100% * var(--z));height:calc(100% * var(--z));object-position:50% 50%}
  .crew__card[data-slug="joshua-frazier"] .crew__img{--z:1.08;--fx:.3;--fy:.2}
  .crew__card[data-slug="juan-sanchez-3"] .crew__img{--z:1.08;--fx:.3;--fy:.3}
  .crew__card[data-slug="sol-77"] .crew__img{--z:1.12;--fx:.5;--fy:.9}
  .crew__card[data-slug="jaeyden-1"] .crew__img{--z:1.12;--fx:.2;--fy:1}
  .crew__card[data-slug="issa-birriel"] .crew__img{--fx:.4;--fy:0}
  .crew__img--chair{--fx:.7;--fy:.6}
}

/* owner 00:09 (salesman test): a verbatim fragment from a real 5-star review that names this barber, with the reviewer's first name */
.crew__tag{margin-top:2px;font:500 13px/1.3 var(--body);color:rgba(10,10,10,.66)}

/* RESUME-14: phones and touch screens swipe the row natively (JS adds .is-swipe; no pin). The count shows with a swipe cue. */
.crew__cue{display:none}
.s-crew.is-swipe .crew__count{display:flex;align-items:center;gap:12px}
.s-crew.is-swipe .crew__cue{display:inline-flex;align-items:center;gap:8px}
@media (max-width:429px){   /* narrow phones: the cue sits over the count so "01 / 07" never runs off the edge */
  .s-crew.is-swipe .crew__count{flex-direction:column;align-items:flex-end;gap:8px}
}