/* live-work: the client rail in the work chapter. One live site at a time, the active card centred and the
   screenshot scrolling itself inside a letterbox screen. Prefix .hero-live-work / .lw-
   The base rules below are the finished, still state: the native side-scrolling rail with snap, every card
   at full size, every name shown, every screenshot on its top crop. That is what reduced motion, a visitor
   who touches the rail and a page with no script get. section.js adds .is-auto to the module root and
   drives the rest from one timeline. */
.hero-live-work .lw{position:relative}

/* the rail keeps the native scroll, the snap and the keyboard focus of the static block it replaced.
   The side padding is half a card, so every card (including the first and the last) can sit dead centre
   for both the snap and the module's own advance. */
.hero-live-work .lw-rail{position:relative;display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:clamp(40px,5vw,72px) 0 16px;padding-inline:max(var(--gutter),calc((100% - min(820px,82vw)) / 2));scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%)}
.hero-live-work .lw-rail::-webkit-scrollbar{display:none}
.hero-live-work .lw-rail:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.hero-live-work.is-auto .lw-rail{scroll-snap-type:none}

.hero-live-work .lw-card{flex:0 0 min(820px,82vw);scroll-snap-align:center;text-decoration:none;color:var(--ink);transform-origin:50% 50%}

/* the screen: a fixed letterbox window the screenshot is taller than, so it has somewhere to scroll */
.hero-live-work .lw-screen{display:block;position:relative;overflow:hidden;aspect-ratio:20/9;border-radius:24px;background:#F5F5F7;box-shadow:0 1px 0 0 rgba(10,10,20,.06) inset,0 18px 50px -26px rgba(10,10,20,.45)}
.hero-live-work .lw-shot{display:block;width:100%;height:auto}
.hero-live-work .lw-card:hover .lw-screen{box-shadow:0 1px 0 0 rgba(10,10,20,.06) inset,0 26px 60px -24px rgba(10,10,20,.55)}

/* the name is the chapter's actor: it stays at reading size, not at label size */
.hero-live-work .lw-name{display:flex;align-items:center;gap:10px;margin-top:16px;min-height:1.5em;font-size:clamp(20px,1.7vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.3}
.hero-live-work .lw-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#1DBF73}
.hero-live-work .lw-name.is-typing::after{content:"";width:2px;height:1em;background:var(--accent);opacity:.85}

/* on a phone one card fills the screen, so it is given back some height: a shorter window still leaves the
   screenshot a quarter of its own height to scroll, and the site stays legible at 390 px */
@media (max-width:760px){
  .hero-live-work .lw-card{flex-basis:min(680px,84vw)}
  .hero-live-work .lw-rail{padding-inline:max(var(--gutter),calc((100% - min(680px,84vw)) / 2))}
  .hero-live-work .lw-screen{aspect-ratio:16/8;border-radius:20px}
  .hero-live-work .lw-name{margin-top:13px}
}