/* ═══════════════════════════════════════════════════════════════════
   Reels — the site walkthroughs, on a rail.

   Same footage shape as the reviews above: filmed on a phone held
   upright, so the card is upright too. What is different is that there
   are five of them rather than two, which is one more than fits a page
   at a readable size — hence a rail you move along instead of a grid
   that shrinks to hold everything at once.

   The rail is a native scroller with scroll-snap, not a transform on a
   track. Three things fall out of that and all three matter: a phone
   flicks it with the scrolling it already has, no touch handler in the
   way; a keyboard can tab to a card and the browser scrolls it into
   view by itself; and with js/reels.js absent it is still a rail you
   can push, just without the arrows. The arrows and dots are an
   easier way to do a thing that already works, which is the only kind
   of control worth adding.
   ═══════════════════════════════════════════════════════════════════ */

.reel{
  padding:clamp(5rem,14vh,9rem) 0;
  background:var(--ink);
  border-top:1px solid var(--hair);
  position:relative;
}

/* ── the statement ────────────────────────────────────────────────── */
.reel__head{
  max-width:78rem;
  margin:0 auto clamp(2.5rem,7vh,4rem);
  padding:0 var(--gut);
}
.reel__title{
  margin:clamp(1rem,2.5vh,1.5rem) 0 0;
  font-family:var(--display); font-weight:400;
  font-size:var(--fs-major);
  line-height:1.06;
  color:var(--bone);
}
.reel__title em{ font-style:normal; color:var(--bronze-lt) }
.reel__lede{
  margin:1.1rem 0 0; max-width:46ch;
  font-size:var(--fs-body);
  line-height:1.65; color:var(--bone-dim);
}

/* ── the rail ─────────────────────────────────────────────────────── */
.reel__vp{ position:relative }

.reel__track{
  list-style:none; margin:0;
  padding:.5rem var(--gut) 1.25rem;
  display:flex;
  gap:clamp(1rem,2.4vw,1.75rem);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-padding-left:var(--gut);
  overscroll-behavior-x:contain;      /* no back-swipe out of the page */
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.reel__track::-webkit-scrollbar{ display:none }

/* Wide enough that five of them do not simply fit. At the old size the
   whole set landed inside a laptop viewport with seventy pixels to
   spare, which left the arrows and the dots controlling a rail that had
   nowhere to go — a slider that cannot slide. Around three and a half
   cards to a screen now, so there is always one more just off the edge
   asking to be brought in. */
.reel__item{
  flex:0 0 auto;
  width:clamp(15rem,26vw,23rem);
  scroll-snap-align:start;
}

/* ── the card ─────────────────────────────────────────────────────── */
.reel__card{
  display:block; width:100%; padding:0; border:0;
  background:none; text-align:left; color:inherit;
  cursor:pointer;
  font:inherit;
}

/* The mount from the reviews: a hairline drawn a few pixels proud of
   the picture, so the clip sits on board rather than on the page. */
.reel__frame{
  position:relative; display:block;
  aspect-ratio:9/16;
  overflow:hidden;
  background:var(--black);
  box-shadow:0 0 0 1px var(--hair);
  transition:box-shadow .4s var(--ease-out), transform .5s var(--ease-out);
}
.reel__card:hover .reel__frame,
.reel__card:focus-visible .reel__frame{
  box-shadow:0 0 0 1px var(--bronze-lt);
  transform:translateY(-3px);
}
.reel__card:focus-visible{ outline:none }
.reel__card:focus-visible .reel__frame{
  outline:2px solid var(--bronze-hi); outline-offset:3px;
}

.reel__vid{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  display:block;
}

/* the play badge, sitting on the picture */
.reel__play{
  position:absolute; left:.7rem; bottom:.7rem;
  display:inline-flex; align-items:center; gap:.4rem;
  padding:.34rem .62rem;
  color:var(--on-media);
  background:rgba(12,12,14,.55);
  backdrop-filter:blur(6px);
  border:1px solid var(--on-media-hair);
  border-radius:2rem;
  font-size:var(--fs-micro); letter-spacing:.12em; text-transform:uppercase;
  transition:background .35s var(--ease-out);
}
.reel__play svg{ width:9px; height:9px; flex:none }
.reel__card:hover .reel__play{ background:rgba(12,12,14,.72) }

.reel__cap{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:.75rem; margin-top:.7rem;
}
.reel__name{
  font-size:var(--fs-body); line-height:1.3; color:var(--bone);
}
.reel__dur{
  font-size:var(--fs-fine); letter-spacing:.06em;
  color:var(--bone-faint); font-variant-numeric:tabular-nums; flex:none;
}

/* ── arrows and dots ──────────────────────────────────────────────── */
/* Added by js/reels.js, which is why they are hidden until it says so —
   a control the script never wired up is a control that does nothing. */
.reel__nav, .reel__dots{ display:none }
.has-reel .reel__nav{ display:block }
.has-reel .reel__dots{ display:flex }

.reel__nav{
  position:absolute; top:calc(50% - 2rem); z-index:3;
  width:2.75rem; height:2.75rem; padding:0;
  transform:translateY(-50%);
  display:grid; place-items:center;
  color:var(--bone);
  background:var(--black);
  border:1px solid var(--hair);
  border-radius:50%;
  cursor:pointer;
  transition:background .3s var(--ease-out), color .3s var(--ease-out),
             opacity .3s var(--ease-out), border-color .3s var(--ease-out);
}
.reel__nav:hover{ background:var(--sage); border-color:var(--bronze-lt) }
.reel__nav--prev{ left:calc(var(--gut) - 1.375rem) }
.reel__nav--next{ right:calc(var(--gut) - 1.375rem) }
.reel__nav svg{ width:15px; height:15px }

/* At an end the arrow stays in place and stops working, rather than
   disappearing and shifting the one opposite it. */
.reel__nav[disabled]{ opacity:.28; cursor:default; pointer-events:none }

.reel__dots{
  justify-content:center; gap:.5rem;
  margin:.35rem auto 0; padding:0 var(--gut);
  list-style:none;
}
.reel__dot{
  width:7px; height:7px; padding:0;
  border:0; border-radius:50%;
  background:var(--hair);
  cursor:pointer;
  transition:background .35s var(--ease-out), transform .35s var(--ease-out);
}
.reel__dot[aria-current="true"]{
  background:var(--bronze-lt); transform:scale(1.35);
}

/* Narrow: the arrows would sit over the cards, so they come down under
   the rail and share the row with the dots. */
@media (max-width:700px){
  .reel__nav{
    position:static; transform:none;
    width:2.4rem; height:2.4rem;
  }
  .reel__foot{
    display:flex; align-items:center; justify-content:center;
    gap:1rem; margin-top:.5rem;
  }
  .reel__dots{ margin:0; padding:0 }
}
.reel__foot{ display:contents }
@media (max-width:700px){ .reel__foot{ display:flex } }

/* ── the player ───────────────────────────────────────────────────── */
/* The same modal the reviews use, in its own namespace: one <video>
   moved between cards rather than five elements each holding a file
   open, and the clip plays at its own shape rather than the card's. */
.reel__lb{
  position:fixed; inset:0; z-index:var(--z-menu, 200);
  display:grid; place-items:center;
  padding:clamp(1rem,4vw,2.5rem);
  background:var(--media-veil);
  opacity:0;
  transition:opacity .35s var(--ease-out);
}
.reel__lb.is-open{ opacity:1 }
.reel__lb[hidden]{ display:none }

.reel__lb-scrim{ position:absolute; inset:0; cursor:zoom-out }

.reel__lb-panel{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:.75rem;
  max-width:min(28rem,92vw);
  transform:translateY(14px) scale(.985);
  transition:transform .45s var(--ease-out);
}
.reel__lb.is-open .reel__lb-panel{ transform:none }

.reel__lb-who{
  margin:0; color:var(--on-media-dim);
  font-size:var(--fs-fine); letter-spacing:.14em; text-transform:uppercase;
}
.reel__lb-video{
  display:block; width:100%;
  max-height:min(78vh,44rem);
  background:#000;
}

.reel__lb-x{
  position:absolute; top:-2.9rem; right:-.35rem;
  width:2.4rem; height:2.4rem; padding:0;
  background:none; border:1px solid var(--on-media-hair); border-radius:50%;
  color:var(--on-media); cursor:pointer;
  display:grid; place-items:center;
  transition:background .3s var(--ease-out);
}
.reel__lb-x:hover{ background:rgba(255,255,255,.1) }
.reel__lb-x span{ position:relative; width:12px; height:12px; display:block }
.reel__lb-x span span{
  position:absolute; top:50%; left:0; width:12px; height:1px;
  background:currentColor;
}
.reel__lb-x span span:first-child{ transform:rotate(45deg) }
.reel__lb-x span span:last-child{ transform:rotate(-45deg) }

@media (prefers-reduced-motion:reduce){
  .reel__frame, .reel__lb, .reel__lb-panel, .reel__nav, .reel__dot{
    transition:none;
  }
  .reel__card:hover .reel__frame{ transform:none }
  .reel__track{ scroll-behavior:auto }
}