/* ============================================================
   Visual work — three side projects, one section each.

   A wider page than the two case studies: those are documents
   with a reading column and an index beside it, this is a set
   of pieces shown large. Same tokens, same type, same footer;
   only the column width and the section shape differ.
   ============================================================ */

:root {
  /* No side index, so nothing is reserved for one and the column
     is free to run wide. */
  --nav-reserve: 0px;
  --content-w: 1240px;
  --top: 40px;
}

/* The back link is all that is left of the sidebar: static, at the top of
   the page rather than fixed beside it. */
.side {
  position: static;
  width: 100%;
  height: auto;
  padding: 28px var(--edge) 0;
}
.side__back { width: auto; }

.content {
  width: min(var(--content-w), 100% - var(--edge) * 2);
  margin-inline: auto;
  padding: 44px 0 120px;
}

/* ── Page head ─────────────────────────────────────────── */

.intro__title {
  max-width: 20ch;
  font-size: clamp(30px, 4.2vw, 52px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 118%;
  color: var(--ink);
}
.intro__lede {
  max-width: 54ch;
  margin-top: 18px;
  font-size: 16px;
  font-weight: 500;
  line-height: 168%;
  color: var(--ink-muted);
}

/* ── One piece ─────────────────────────────────────────── */

/* The same rhythm the case studies keep: --block between divisions. */
.work + .work { margin-top: var(--block); }
.work:first-of-type { margin-top: 8px; }

/* The stage is the wide card: it holds either a carousel of screens or a
   single walkthrough, and both sit on the same ground so the three pieces
   read as one set rather than as three different treatments. */
.work__stage {
  /* Each piece can bring its own ground where the work asks for one, set as
     --stage on the element the way the case studies set --ratio and --n. */
  background: var(--stage, var(--card));
  border-radius: 12px;
  /* One canvas for all three pieces: the same height in every section, with
     the dots below rather than inside so a carousel is not taller than a
     single recording. Inset top and bottom only: the screens still reach
     the card's left and right edges. */
  height: min(74vh, 700px);
  padding-block: clamp(14px, 1.8vw, 28px);
  overflow: hidden;
}

/* Title left, description right, squared to the stage above them. */
/* Two columns on the same 40px gutter the case studies' .duo keeps, and the
   copy's top edge aligned to the title's rather than to the eyebrow above it. */
.work__meta {
  margin-bottom: var(--inner);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 40px;
  align-items: start;
}
/* Both columns start on the same line: the paragraph's top edge against the
   eyebrow's, not against the title below it. */
.work__meta > .work__copy,
.work__meta > div > .work__copy { margin-top: 0; }

/* .claim's own size, weight and tracking: this is the same kind of sentence,
   so it is set the same way. 14px under the eyebrow, as .claim is. */
.work__title {
  /* Wide enough that a title of this length balances onto two lines rather
     than three. `balance` then splits them evenly instead of filling the
     first line and leaving a short one under it. */
  max-width: 27ch;
  margin-top: 14px;
  font-size: clamp(24px, 2.7vw, 32px);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.24;
  color: var(--ink);
  text-wrap: balance;
}

/* .duo p, which is what a supporting paragraph is set in elsewhere. */
.work__copy {
  max-width: 58ch;
  font-size: 15px;
  font-weight: 500;
  line-height: 170%;
  color: var(--ink-muted);
}
.work__copy + .work__copy { margin-top: 12px; }

/* The one outbound link on the page. Same treatment the homepage bio links
   keep — ink, a hairline rule, and the arrow that marks a link leaving the
   site — so it reads as the same kind of thing in both places. */
.work__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--hairline);
  transition: box-shadow .3s var(--ease);
}
.work__link:hover { box-shadow: inset 0 -1px 0 currentColor; }
.work__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.work__arrow {
  flex-shrink: 0;
  transition: transform .3s var(--ease);
}
.work__link:hover .work__arrow { transform: translate(2px, -2px); }

/* A small line above the title, same register as the case studies' eyebrow. */
/* The site's eyebrow verbatim, so the label reads the same here as it does
   on either case study. */
.work__label {
  font-family: var(--eyebrow-face);
  font-size: 14px;
  font-weight: 500;
  line-height: 140%;
  text-transform: uppercase;
  color: var(--ink);
}

/* ── Screens ───────────────────────────────────────────── */

/* Scroll-snap track, same mechanism as the companion carousel on the Hocus
   page: it scrolls without script, and the dots below only follow it. */
.reel {
  display: grid;
  grid-auto-flow: column;
  /* One screen to a view, edge to edge: no sliver of the next one cropped
     against the sides. The dots carry the fact that there is more. */
  grid-auto-columns: 100%;
  /* The row has to be pinned to the canvas too. Left to itself it takes the
     image's own height, and then `height: 100%` on the slide resolves
     against that instead of against the stage. */
  grid-auto-rows: 100%;
  gap: 14px;
  height: 100%;
  cursor: grab;
  /* Eases the snap after a drag and the jump from a dot, instead of both
     landing in one frame. Stood down while the pointer is driving. */
  scroll-behavior: smooth;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* No second ground: the screens sit straight on the stage. One card, one
   grey, and the shot reading as the thing itself rather than as a picture
   pinned inside a frame.

   The height is capped rather than set by a ratio, so a whole piece — stage,
   title and copy — lands inside one viewport instead of asking for a scroll
   between the screens and what they are. */
.reel.is-dragging {
  cursor: grabbing;
  /* The pointer is driving the scroll directly, so snap and smoothing both
     have to stand down until it lets go. */
  scroll-snap-type: none;
  scroll-behavior: auto;
  user-select: none;
}

.reel__slide {
  margin: 0;
  /* Centred, not left-aligned: the screen being read sits in the middle of
     the stage with the same sliver of the next one showing either side. */
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.reel__slide img,
.reel__shot {
  display: block;
  /* Placed at its own ratio inside the canvas, never cropped and never
     stretched: what is left over is stage. */
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
}
/* Only the empty stand-ins need a fill and a shape of their own. */
.reel__shot {
  width: 100%;
  height: 100%;
  background: var(--shot);
}

/* The walkthrough takes the stage the reel would have, at the same ratio, so
   the three sections keep one height down the page. */
/* The walkthrough sits on the stage the same way the screens do. */
.work__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 6px;
  /* The poster sits behind the video, sized the same way. If the browser
     drops the decoded frame (a backgrounded tab, a long idle), the still
     shows through instead of a blank element. A painted video frame is
     opaque and covers it exactly. */
  background: center / contain no-repeat;
}
.work__video[src] { background-image: url("../assets/visual/imprint-poster.jpg"); }
.work__mount {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.work__mount > .work__video[role="img"] { width: 100%; height: 100%; background: var(--shot); }

/* ── Dots ──────────────────────────────────────────────── */

.reel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}
.reel__dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ink);
  opacity: .22;
  cursor: pointer;
  transition: opacity .3s var(--ease);
}
.reel__dot[aria-current="true"] { opacity: .78; }
.reel__dot:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 860px) {
  /* Title above its description rather than beside it: two columns at this
     width leaves neither enough measure to read. */
  .work__meta { grid-template-columns: 1fr; gap: 12px; }
  .work__title { max-width: none; }
}

@media (max-width: 700px) {
  :root { --top: 24px; }
  .content { padding: 28px 0 72px; }
  .work + .work { margin-top: 48px; }

  /* On a phone the desktop's tall fixed canvas leaves a landscape screen
     stranded in a vertical box. The stage drops its height and takes it from
     the image instead: the screen fills the width and the card wraps it, no
     stretching to fill a shape the picture never had. */
  .work__stage {
    border-radius: 8px;
    height: auto;
    padding-block: 0;
  }
  .reel,
  .reel__slide,
  .work__mount { height: auto; }
  .reel { grid-auto-rows: auto; }
  .reel__slide img,
  .reel__shot,
  .work__video {
    height: auto;          /* sized by width, at the image's own ratio */
    border-radius: 4px;
  }
  .work__meta { margin-top: 16px; }
  .work__title { font-size: 18px; }
  .work__copy { font-size: 13px; line-height: 178%; }
  .work__label { font-size: 12px; }
  .intro__lede { font-size: 14px; }
}