/* Juris Digital, redesign concept, versions 2 and 3: "In our own words" (#partnership), the Screening room.
   Every rule is scoped to .wd2. Chosen 26 Oct 2026 from three layouts reviewed.

   A dark band in the darkest teal with the film as the whole point: the heading centred above it, the
   film no wider than 960px and never taller than the screen allows, on a poster made from the film (a contact sheet:
   the brand's cell, then the five speakers), and the play control a lime disc with a white ring centred on the Juris
   shield in the poster's first cell, the film's length under it. Under the film, a chapter rail names each speaker
   exactly as their lower third does, at the moment they first appear, drawn like the lower third itself (a lime bar,
   the name, the title). Clicking one seeks there and plays; while the film runs, the bar marks whoever is on screen
   and a slim line shows how far in it is.
   The one moment: once it plays, the lights go down. The band deepens, the text around the film steps back (to an
   opacity that still clears 4.5:1) and the rest of the page dims under a spread shadow, until it is paused, ends or
   scrolls out of view. Reduced motion and ?static: no dimming at all, and nothing animates in. Without JavaScript the
   video keeps its native controls and the chapters read as a list. Version 3 adds the six leadership portraits. */

.wd2 {
  --wd2-bg: var(--docket);
  --wd2-down: #021C22;
  --wd2-line: rgba(233, 242, 241, .2);
  position: relative;
  z-index: 2;
  padding: clamp(56px, 7vw, 96px) 0;
  background: var(--wd2-bg);
  color: var(--on-dark);
  box-shadow: 0 0 0 200vmax rgba(2, 28, 34, 0);
  transition: background-color .9s var(--ease-in-out), box-shadow .9s var(--ease-in-out);
}
.wd2 .wd2__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- the heading: centred, kicker, title and lede one below the other (user, 26 Oct 2026, as the portfolio's) ---------- */
.wd2 .wd2__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 22px; margin-bottom: clamp(36px, 4vw, 56px); text-align: center; transition: opacity .9s var(--ease-in-out); }
/* the kicker and title as every other section's (user, 26 Oct 2026: "make it consistent"): the plain kicker, no
   lime bar, and the title at the pages' h2 size (v2.css), measure 20em, at most two lines on desktop */
.wd2 .wd2__kicker { margin-bottom: 18px; font-size: .9375rem; font-weight: 500; color: var(--on-dark-2); }
.wd2 .wd2__title { max-width: 20em; margin-inline: auto; color: var(--on-dark); text-wrap: balance; }
.wd2 .wd2__lede { max-width: 40em; margin-inline: auto; font-size: var(--fs-lede); line-height: 1.55; color: var(--on-dark-2); text-wrap: pretty; }

/* ---------- the film ---------- */
/* no wider than 960px, and short enough that the frame and the chapter rail under it fit the screen together
   (user, 26 Oct 2026: "its taking more than screen height"); never under 480px wide where there is room for it */
.wd2 .wd2__film { width: min(100%, max(480px, min(960px, (100vh - 240px) * 16 / 9))); margin-inline: auto; }
@supports (height: 100svh) { .wd2 .wd2__film { width: min(100%, max(480px, min(960px, (100svh - 240px) * 16 / 9))); } }
.wd2 .wd2__frame { position: relative; container-type: inline-size; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-l); background: var(--brief); box-shadow: 0 0 0 1px rgba(233, 242, 241, .08); transition: border-radius .9s var(--ease-in-out), box-shadow .9s var(--ease-in-out); }
.wd2 .wd2__video { width: 100%; height: 100%; object-fit: cover; }

/* the play control, on the poster (assets/img/team-film-poster.jpg, from build_film_poster.py): a contact sheet of
   the film, three across and two down, the brand's cell first and the five speakers after it in chapter order. The
   disc sits at the centre of that first cell, which is the centre of the Juris shield's rings drawn there, inside
   the bowl of its J: the cell is 636 x 537 of 1920 x 1080, so its centre is 16.5625% across and 24.86% down. It never
   covers a face. Lime disc, thin white ring, dark play glyph; the film's length under it. */
.wd2 .wd2__frame { --cx: 16.5625%; --cy: 24.86%; --ring: clamp(5px, .9cqi, 9px); --disc: clamp(46px, 7.6cqi, 92px); }
.wd2 .wd2__play { display: none; }
.js .wd2 .wd2__play {
  position: absolute; z-index: 1; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%);
  display: block; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--docket);
  transition: transform 160ms var(--ease-out);
}
.wd2 .wd2__disc { position: relative; display: grid; place-items: center; width: var(--disc); aspect-ratio: 1; border-radius: 50%; background: var(--retain); color: var(--docket); box-shadow: 0 14px 30px -10px rgba(3, 36, 43, .5); transition: transform .35s var(--ease-out); }
.wd2 .wd2__disc::after { content: ""; position: absolute; inset: calc(var(--ring) * -1); border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); transition: transform .45s var(--ease-out), border-color .3s var(--ease-out); }
.wd2 .wd2__disc svg { width: 40%; height: 40%; margin-left: 7%; }
.js .wd2 .wd2__play:active { transform: translate(-50%, -50%) scale(.97); }
/* the focus ring sits just outside the white ring, in lime: the cell under it is the darkest teal */
.wd2 .wd2__play:focus-visible { outline: 2px solid var(--retain); outline-offset: calc(var(--ring) + 4px); }

/* the film's length, centred under the disc in the same cell, so the cell reads "play, 1:04" before anyone presses
   play. It is a fact of the film, not copy; the caption under the rail states it in words, and the play button's
   label says it to screen readers, so this is hidden from them. */
.wd2 .wd2__len { display: none; }
.js .wd2 .wd2__len {
  position: absolute; left: var(--cx); top: calc(var(--cy) + var(--disc) / 2 + var(--ring) + clamp(8px, 1.6cqi, 18px)); transform: translateX(-50%);
  display: block; color: #fff;
  font-size: clamp(.6875rem, 1.3cqi, 1rem); font-weight: 600; line-height: 1; letter-spacing: .04em; font-variant-numeric: tabular-nums;
  pointer-events: none;
}
/* while the film runs its own controls take over; both come back when it ends */
.wd2.is-playing .wd2__play, .wd2.is-playing .wd2__len { display: none; }

/* how far in: a slim line under the frame */
.wd2 .wd2__track { display: none; }
.js .wd2 .wd2__track { position: relative; display: block; height: 2px; margin-top: 14px; border-radius: 2px; background: rgba(233, 242, 241, .14); }
.wd2 .wd2__fill { position: absolute; inset: 0; border-radius: inherit; background: var(--retain); transform: scaleX(var(--p, 0)); transform-origin: left; }

/* ---------- the chapters, drawn like the lower thirds ---------- */
.wd2 .wd2__chaps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 clamp(12px, 2vw, 28px); margin-top: 6px; }
.wd2 .wd2__chap { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: 100%; height: 100%; padding: 12px 8px 12px 18px; border-radius: 6px; text-align: left; color: var(--on-dark); cursor: pointer; }
.wd2 .wd2__chap:disabled { cursor: default; }
.wd2 .wd2__chap::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 4px; border-radius: 1px; background: var(--wd2-line); transition: background-color .3s var(--ease-out); }
.wd2 .wd2__chap[aria-current="true"]::before { background: var(--retain); }
.wd2 .wd2__chap:focus-visible { outline: 2px solid var(--retain); outline-offset: 2px; }
.wd2 .wd2__time { margin-bottom: 4px; font-size: .8125rem; font-weight: 500; color: var(--on-dark-2); font-variant-numeric: tabular-nums; }
.wd2 .wd2__name { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -.005em; }
.wd2 .wd2__role { font-size: .8125rem; line-height: 1.4; color: var(--on-dark-2); text-wrap: balance; }
.wd2 .wd2__cap { margin-top: 18px; font-size: .9375rem; color: var(--on-dark-2); transition: opacity .9s var(--ease-in-out); }
.wd2 .wd2__cap strong { font-weight: 600; color: var(--on-dark); }

/* ---------- version 3: the people, as a credits row under the film ---------- */
.wd2 .wd2__people { margin-top: clamp(32px, 3.6vw, 44px); padding-top: clamp(24px, 2.6vw, 32px); border-top: 1px solid rgba(233, 242, 241, .12); transition: opacity .9s var(--ease-in-out); }
.wd2 .wd2__cast { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
.wd2 .wd2__cast li { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: 0 12px; }
.wd2 .wd2__cast img { grid-row: span 2; width: 56px; height: 70px; object-fit: cover; object-position: 50% 20%; border-radius: 8px; background: var(--brief); }
.wd2 .wd2__pname { align-self: end; font-size: .9063rem; font-weight: 600; line-height: 1.3; }
.wd2 .wd2__prole { align-self: start; margin-top: 2px; font-size: .8125rem; line-height: 1.35; color: var(--on-dark-2); }
.wd2 .wd2__all { display: inline-block; margin-top: 24px; font-size: .9375rem; font-weight: 600; color: var(--on-dark); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: var(--retain); }
.wd2 .wd2__all:focus-visible { outline: 2px solid var(--retain); outline-offset: 4px; border-radius: 2px; }

/* ---------- the lights go down (not with .reduce: the script never adds is-down there) ---------- */
.wd2.is-down { background: var(--wd2-down); box-shadow: 0 0 0 200vmax rgba(2, 28, 34, .62); }
.wd2.is-down .wd2__head, .wd2.is-down .wd2__cap, .wd2.is-down .wd2__people { opacity: .72; }
.wd2.is-down .wd2__frame { border-radius: 10px; box-shadow: 0 0 0 1px rgba(233, 242, 241, 0); }
.reduce .wd2, .reduce .wd2 * { transition: none !important; }

@media (hover: hover) and (pointer: fine) {
  .wd2 .wd2__play:hover .wd2__disc { transform: scale(1.05); }
  .wd2 .wd2__play:hover .wd2__disc::after { transform: scale(1.14); border-color: #fff; }
  .wd2 .wd2__chap:not(:disabled):hover::before { background: rgba(146, 225, 46, .55); }
  .wd2 .wd2__chap[aria-current="true"]:hover::before { background: var(--retain); }
  .wd2 .wd2__all:hover { text-decoration-color: var(--on-dark); }
}

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .wd2 .wd2__cast { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  /* the rail becomes a list: time, then name and title on one line */
  .wd2 .wd2__chaps { grid-template-columns: 1fr; margin-top: 10px; }
  .wd2 .wd2__chaps li + li { border-top: 1px solid rgba(233, 242, 241, .08); }
  .wd2 .wd2__chap { display: grid; grid-template-columns: 3.25em minmax(0, auto) minmax(0, 1fr); align-items: baseline; gap: 0 14px; padding: 12px 8px 12px 18px; }
  .wd2 .wd2__chap::before { top: 12px; bottom: 12px; }
  .wd2 .wd2__time { margin: 0; }
}
@media (max-width: 560px) {
  /* the first cell is about 120px wide here: the disc alone, the length is in the caption */
  .js .wd2 .wd2__len { display: none; }
  .wd2 .wd2__chap { grid-template-columns: 3em minmax(0, 1fr); gap: 0 10px; padding: 10px 6px 10px 16px; }
  .wd2 .wd2__role { grid-column: 2; }
  .wd2 .wd2__name { font-size: 1rem; }
  .wd2 .wd2__cast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .wd2 .wd2__cast li { grid-template-columns: 52px minmax(0, 1fr); gap: 0 10px; }
  .wd2 .wd2__cast img { width: 52px; height: 65px; }
  .wd2 .wd2__pname { font-size: .875rem; }
  .wd2 .wd2__prole { font-size: .75rem; }
}