/* ==========================================================================
   Work detail page — Option A, "The Work First" (20 Oct 2026)

   Generated pages only: work/<slug>.html, written by _dev/projects/build.mjs.
   The contract is _dev/projects/WORK-DETAIL-SPEC.md. Every class here is
   prefixed `e-wd`; everything else on the page (grounds, type, buttons, the
   figure row, the pills) is the site's own and comes from site.built.css.

   Loaded after site.built.css, so where this restyles a shared class it does
   it from inside an `e-wd` block, never bare — the shared class must look the
   same everywhere else.

   House rules that bite here:
   - Held left, nothing centred.
   - Purple only on the lead figure (plus the nav CTA the header owns).
     Yellow only on the close's Book a call.
   - Equal tracks are minmax(0, 1fr), never bare 1fr — a long word or an
     intrinsic image width otherwise widens its track and the page scrolls.
   - No transforms here: nothing on this page carries `.reveal`, and if it
     ever does, `.reveal` owns `transform`.
   ========================================================================== */

/* The 12-column grid every band sits on. `.e-shell` brings the width and the
   page margin; this only adds the tracks. */
.e-wd__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  /* Top-aligned. Stretched, a flex label (`.e-label` is one) centres its text
     in the row's height and drops "What changed" to the middle of the figures. */
  align-items: start;
}
.e-wd__side { grid-column: 1 / span 3; }
.e-wd__main { grid-column: 4 / -1; min-width: 0; }

/* --------------------------------------------------------------------------
   01 Opening, plate, caption row — paper
   -------------------------------------------------------------------------- */

.e-wd-open { padding-block: clamp(48px, 6vw, 96px) var(--space-8); }
.e-wd-open__side {
  grid-column: 1 / span 4;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}
.e-wd-open__main {
  grid-column: 5 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  min-width: 0;
}

/* A label-sized link, ink not purple: the base `a` rule would otherwise spend
   the page's one purple on a way out. */
.e-wd__back {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-strong);
}
.e-wd__back:hover { color: var(--text-strong); }

/* The plate starts at the shell's content edge and runs off the right of the
   viewport. It sits OUTSIDE `.e-shell`, as a child of the full-bleed section,
   so `100%` here is the section's width — the viewport minus any scrollbar.
   That is the point: a negative margin built from 100vw counts the scrollbar
   too and pushes the page into a horizontal scroll by its width.

   The left offset is the shell's own arithmetic: half of whatever exceeds
   --max-width, plus the page margin. */
.e-wd__plate {
  margin: var(--space-8) 0 0 calc(max(0px, (100% - var(--max-width)) / 2) + var(--page-margin));
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  background: var(--ink-100);
  border-radius: var(--radius-media) 0 0 var(--radius-media);
}
/* Out of flow so the image fills the aspect box whatever its own ratio — the
   same reason as `.e-wkg__shot img` on the Work grid. */
.e-wd__plate img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
.e-wd__plate[data-focus="center"] img { object-position: center center; }
.e-wd__plate[data-focus="bottom"] img { object-position: center bottom; }

/* One caption line, three fixed positions. Positions stay put when one drops
   out, so sector and year never slide under the services. With no plate the
   row sits under the headline instead, a step further away. */
.e-wd__cap {
  margin-top: var(--space-4);
  align-items: baseline;
  font: var(--type-small);
}
.e-wd-open__head + .e-wd__cap { margin-top: var(--space-7); }
.e-wd__cap-name { grid-column: 1 / span 4; font-weight: var(--weight-medium); color: var(--text-strong); }
.e-wd__cap-svc  { grid-column: 5 / span 5; color: var(--text-body); }
.e-wd__cap-sec  { grid-column: 10 / -1; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   02 Results
   -------------------------------------------------------------------------- */

/* Three tracks always, so a project with one or two figures holds them left
   at the same width rather than stretching them across the row. */
.e-wd__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-wd__stats > :first-child .e-stat__value:not([data-todo]) { color: var(--ebr-purple); }

.e-wd__scope {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}
.e-wd__stats + .e-wd__scope { margin-top: var(--space-7); }

/* --------------------------------------------------------------------------
   03 Story — one reading column from column 4, in line with the figures
   -------------------------------------------------------------------------- */

.e-wd__read {
  grid-column: 4 / -1;
  max-width: var(--measure);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}
.e-wd__part { display: flex; flex-direction: column; gap: var(--space-4); }
.e-wd__part h2 { margin-bottom: var(--space-2); }
.e-wd__part p { margin: 0; font: var(--type-copy-lead); color: var(--text-copy-strong); }
.e-wd__part strong { font-weight: var(--weight-medium); color: var(--text-strong); }

/* A counted list, not the browser's "1." — the count set as a label in the
   left margin of each line. Muted, not purple: the lead figure keeps that. */
.e-wd__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: wd;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.e-wd__list li {
  counter-increment: wd;
  display: grid;
  grid-template-columns: 3ch minmax(0, 1fr);
  gap: var(--space-4);
  align-items: baseline;
  font: var(--type-copy-lead);
  color: var(--text-copy-strong);
}
.e-wd__list li::before {
  content: counter(wd, decimal-leading-zero);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   04 Gallery
   -------------------------------------------------------------------------- */

.e-wd-gal h2 { margin-bottom: var(--space-7); }

/* One grid for the whole gallery. Each figure spans what build.mjs worked out
   for it (--wd-span); the first of each row restarts at column 1, which is
   what ends a short row held left instead of letting the next row's first
   image back-fill it. Tops align; a phone screen beside a screenshot simply
   ends lower. */
.e-wd__gallery { row-gap: var(--space-6); }
.e-wd__fig {
  margin: 0;
  grid-column: auto / span var(--wd-span, 12);
  order: var(--wd-order, 0);
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.e-wd__fig.is-first { grid-column-start: 1; }

.e-wd__frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--ink-100);
}
.e-wd__frame img { display: block; width: 100%; height: auto; }

/* Screenshots crop to 16:10 from the top, so a site's hero stays in view; the
   one left over at the end of a row runs full width at 21:9. Phone screens
   keep their own ratio — the width/height attributes carry it. */
.e-wd__fig--shot .e-wd__frame { aspect-ratio: 16 / 10; }
.e-wd__fig--wide .e-wd__frame { aspect-ratio: 21 / 9; }
.e-wd__fig--shot img,
.e-wd__fig--wide img {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.e-wd__fig figcaption { font: var(--type-small); color: var(--text-muted); }

/* --------------------------------------------------------------------------
   05 Next up + close — ink
   -------------------------------------------------------------------------- */

/* The footer under this band is ink too. One faint seam is the only thing
   telling the two apart; it divides, so it earns the rule. */
.e-wd-next { border-bottom: 1px solid rgba(255,255,255,.12); }

.e-wd-next__copy {
  grid-column: 4 / span 6;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
  min-width: 0;
}
.e-wd-next__copy .e-btn { margin-top: var(--space-2); }

.e-wd__tile {
  grid-column: 10 / -1;
  aspect-ratio: 16 / 10;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,.06);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-4);
  color: var(--white);
}
.e-wd__tile:hover { text-decoration: none; color: var(--white); }
.e-wd__tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}
/* White, not yellow: yellow is spent on Book a call, below. */
.e-wd__tilefig {
  font-family: var(--font-display);
  font-weight: var(--weight-medium);
  font-size: var(--size-display-m);
  line-height: 1;
  letter-spacing: var(--tracking-display);
  color: var(--white);
}

.e-wd-next__close {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}
.e-wd-next__row + .e-wd-next__close { margin-top: var(--space-9); }
.e-wd-next__ask { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.e-wd-next__ask p { margin: 0; font: var(--type-lead); color: var(--text-on-dark-muted); }
.e-wd-next__all {
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--white);
}
.e-wd-next__all:hover { color: var(--white); }

/* --------------------------------------------------------------------------
   Phones and narrow tablets — the site's own 860px break
   -------------------------------------------------------------------------- */

@media (max-width: 860px) {
  .e-wd__grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-5); }
  .e-wd__side,
  .e-wd__main,
  .e-wd__read,
  .e-wd-open__side,
  .e-wd-open__main,
  .e-wd-next__copy,
  .e-wd__tile { grid-column: 1 / -1; }

  /* Back link alone; the client name above the headline already says what
     this is, as the drawing's phone frame has it. */
  .e-wd-open__kind { display: none; }

  /* Edge to edge, square corners, and the whole still: the ratio comes from
     the file itself (set inline by build.mjs), so a 4:3 screenshot shows 4:3. */
  .e-wd__plate {
    margin: var(--space-7) 0 0;
    aspect-ratio: var(--wd-ratio, 16 / 10);
    border-radius: 0;
  }

  .e-wd__cap { row-gap: var(--space-1); }
  .e-wd__cap > * { grid-column: 1 / -1; }
  .e-wd-open__head + .e-wd__cap { margin-top: var(--space-6); }

  /* Three across still — the site's 2 × 2 phone layout is undone here, inside
     the detail page only, and the numbers shrink to fit instead. Selectors
     carry `.e-stats` so they outrank the shared phone rules they replace. */
  .e-wd__stats.e-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .e-wd__stats.e-stats > * {
    padding: var(--space-4) var(--space-3);
    border-bottom: none;
    border-right: var(--border-hairline);
  }
  .e-wd__stats.e-stats > :first-child { padding-left: 0; }
  .e-wd__stats.e-stats > :last-child { border-right: none; }
  .e-wd__stats .e-stat__value { font-size: clamp(26px, 8vw, 40px); }
  .e-wd__stats + .e-wd__scope { margin-top: var(--space-6); }

  /* Gallery: two tracks. Screenshots take both; phone screens one each, so
     two in a row sit side by side. */
  .e-wd__gallery.e-wd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); row-gap: var(--space-5); }
  .e-wd__fig { grid-column: 1 / -1; order: 0; }
  .e-wd__fig--tall,
  .e-wd__fig--tall.is-first { grid-column: auto / span 1; }
  .e-wd__fig--wide .e-wd__frame { aspect-ratio: 16 / 10; }

  /* Tile under the heading, button under the tile: the copy column dissolves
     into the band's one-column grid so its children can be reordered. */
  .e-wd-next__copy { display: contents; }
  .e-wd-next__copy > * { grid-column: 1 / -1; justify-self: start; }
  .e-wd__tile { order: 1; }
  .e-wd-next__copy > .e-btn { order: 2; margin-top: 0; }
  .e-wd-next__row + .e-wd-next__close { margin-top: var(--space-8); }
  .e-wd-next__close,
  .e-wd-next__ask { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   21 Oct 2026 — the case-01 sections on the generated page.
   Constraint, what we changed and the work reuse case-01's own styles in
   site.css (e-csc / e-csm / e-csg). Only what they lacked is added here.
   ========================================================================== */

/* A move with a real still: the 21:9 slot is case-01's, the image fills it. */
.e-wd__moveshot { overflow: hidden; display: block; }
.e-wd__moveshot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* The work, once it has images: the Option A gallery under case-01's head. */
.e-csg .e-wd__gallery { margin: 0; }

/* --- Before / after -------------------------------------------------------
   The after image is the base; the before image lies over it and is clipped
   at --ba-pos, so the handle's position IS the share of "before" on show.
   js/before-after.js only ever writes --ba-pos; everything else is here. */
.e-wd-ba__frame {
  --ba-pos: 50%;
  position: relative;
  margin-top: var(--space-8);
  aspect-ratio: var(--ba-ratio, 16 / 10);
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--ink-100);
  cursor: ew-resize;
  touch-action: pan-y pinch-zoom;   /* vertical swipes still scroll; pinch still zooms */
  user-select: none;
  -webkit-user-select: none;
}
.e-wd-ba__pane { position: absolute; inset: 0; display: grid; place-items: center; }
.e-wd-ba__pane img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; pointer-events: none; }
.e-wd-ba__pane--before { clip-path: inset(0 calc(100% - var(--ba-pos)) 0 0); }

/* Placeholders: two tones, so the slide is visible before any image exists. */
.e-wd-ba__frame.is-todo .e-wd-ba__pane--after { background: var(--ink-100); }
.e-wd-ba__frame.is-todo .e-wd-ba__pane--before { background: var(--ink-200); }
.e-wd-ba__pane .e-csg__todo { position: absolute; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.e-wd-ba__pane--before .e-csg__todo { left: 25%; }
.e-wd-ba__pane--after .e-csg__todo { left: 75%; }

.e-wd-ba__tag {
  position: absolute;
  top: var(--space-4);
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--ink-900);
  color: var(--white);
  font: var(--type-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  pointer-events: none;
}
.e-wd-ba__tag--before { left: var(--space-4); }
.e-wd-ba__tag--after { right: var(--space-4); }

.e-wd-ba__line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--ba-pos);
  width: 2px;
  margin-left: -1px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  pointer-events: none;
}
.e-wd-ba__knob {
  position: absolute;
  top: 50%; left: 50%;
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: var(--white);
  color: var(--ink-900);
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.e-wd-ba__knob svg:first-child { transform: scaleX(-1); }

/* Keyboard and screen readers drive this; the pointer never touches it. */
.e-wd-ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.e-wd-ba__frame:has(.e-wd-ba__range:focus-visible) .e-wd-ba__knob {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
}

.e-wd-ba__frame.is-snap .e-wd-ba__pane--before { transition: clip-path .4s ease; }
.e-wd-ba__frame.is-snap .e-wd-ba__line { transition: left .4s ease; }
@media (prefers-reduced-motion: reduce) {
  .e-wd-ba__frame.is-snap .e-wd-ba__pane--before,
  .e-wd-ba__frame.is-snap .e-wd-ba__line { transition: none; }
}

.e-wd-ba__switch { margin-top: var(--space-5); display: flex; gap: var(--space-3); flex-wrap: wrap; }

@media (max-width: 700px) {
  .e-wd-ba__frame { margin-top: var(--space-6); }
  .e-wd-ba__knob { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
  .e-wd-ba__tag { top: var(--space-3); padding: 4px 8px; }
  .e-wd-ba__tag--before { left: var(--space-3); }
  .e-wd-ba__tag--after { right: var(--space-3); }
}

/* site.css gives each spec row `flex: 1 1 160px` at ≤1080 (a row of four),
   then turns the box into a column at ≤560 — where that 160px basis becomes
   each row's HEIGHT. Case-01 has the same fault; fixed here for these pages
   because site.css is shared and edited elsewhere. */
@media (max-width: 560px) {
  .e-csc__spec > div { flex: none; }
}

/* --- The constraint, slimmed (21 Oct 2026) --------------------------------
   The problem paragraph in the page's reading column, the company facts as
   one row of four under it (case-01's spec panel, laid sideways). */
.e-wd-con__main { display: flex; flex-direction: column; gap: var(--space-7); }
.e-wd-con__main .e-wd__part { max-width: 62ch; }
.e-wd-con__facts.e-csc__spec {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: var(--space-5) var(--space-6);
}
.e-wd-con__facts.e-csc__spec > div { flex: none; }
@media (max-width: 560px) {
  .e-wd-con__facts.e-csc__spec { grid-template-columns: minmax(0, 1fr); }
}

/* --- Showreel at the top of the work section (21 Oct 2026) --------------- */
.e-wd-reel { margin: var(--space-8) 0 0; border-radius: var(--radius-media); overflow: hidden; background: var(--ink-900); }
.e-wd-reel video { display: block; width: 100%; height: auto; aspect-ratio: var(--reel-ratio, 16 / 10); object-fit: contain; }
.e-wd-reel + .e-csg__set { margin-top: var(--space-7); }
@media (max-width: 700px) { .e-wd-reel { margin-top: var(--space-6); } }

/* Gallery images may arrive wrapped in <picture> (AVIF first, 21 Oct 2026).
   The wrapper must not become a box of its own, or the crop rules miss. */
.e-wd__frame picture { display: contents; }

/* A decision's video (21 Oct 2026): the box takes the recording's own shape
   instead of case-01's 21:9 still slot, so nothing is cropped away. */
.e-csm__shot.e-wd__moveshot--video { aspect-ratio: var(--shot-ratio, 16 / 9); border: 0; background: var(--ink-900); }
.e-wd__moveshot video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --- Desktop and mobile screens (web projects, 21 Oct 2026) ---------------
   Fixed structure under the showreel: three desktop screens (one full width,
   then two halves, the gallery's own pairing rule), then four phone screens
   side by side at three columns each, filling the row. Placeholders keep the final
   proportions so nothing moves when the real images arrive. */
.e-wd-dev { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-8); }
.e-wd-dev__set { display: flex; flex-direction: column; gap: var(--space-5); }
.e-wd-dev__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.e-wd-dev__fig {
  margin: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--ink-100);
  display: grid;
  place-items: center;
}
.e-wd-dev__fig img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.e-wd-dev__fig picture { display: contents; }
.e-wd-dev__fig--desktop { aspect-ratio: var(--dev-ratio, 16 / 10); grid-column: span 6; }
.e-wd-dev__fig--desktop:first-child { grid-column: 1 / -1; }
.e-wd-dev__fig--mobile { aspect-ratio: var(--dev-ratio, 9 / 19.5); grid-column: span 3; }
.e-wd-dev + .e-csg__set { margin-top: var(--space-8); }
.e-wd-reel + .e-wd-dev { margin-top: var(--space-8); }

@media (max-width: 700px) {
  .e-wd-dev { margin-top: var(--space-6); gap: var(--space-7); }
  .e-wd-dev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
  .e-wd-dev__fig--desktop,
  .e-wd-dev__fig--desktop:first-child { grid-column: 1 / -1; }
  .e-wd-dev__fig--mobile { grid-column: span 1; }
}

/* --- Related, above the footer (21 Oct 2026) — case-01's e-csn styles ---- */
.e-wd-rel__shot { overflow: hidden; display: grid; }
.e-wd-rel__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.e-csn__name a { color: inherit; text-decoration: none; }
.e-csn__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.e-csn__read.e-wd-rel__read { opacity: 1; text-decoration: none; }
.e-wd-rel__owed { opacity: .55; border-bottom-color: transparent; }

/* What changed and The constraint are short bands; they use the site's own
   tight section spacing (21 Oct 2026). At 860px and below site.css resets
   every .e-section to 56–72px, so the tight step is restated here. */
@media (max-width: 860px) {
  .e-wd-res.e-section--tight,
  .e-wd-con.e-section--tight { padding-block: 40px; }
}

/* ==========================================================================
   Opening, redesigned 23 Oct 2026 from Adrian's sketch.
   Left column: back link, client, headline, one line. Right: the figures and
   scope on a paper panel. Below, inside the page column: the still.
   ========================================================================== */
.e-wd-open { padding-block: clamp(40px, 5vw, 72px) var(--space-9); }
.e-wd-open__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}
.e-wd-open__main { grid-column: auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); min-width: 0; }
.e-wd-open__main .e-wd__back { margin-bottom: var(--space-5); }
.e-wd-open__client { font: var(--type-lead); color: var(--text-strong); }
.e-wd-open__main h1 { margin: 0; max-width: 20ch; font-size: clamp(36px, 3.9vw, 60px); line-height: 1.05; }   /* two lines in the half column, as sketched */
.e-wd-open__main .e-lead { margin: var(--space-3) 0 0; max-width: 40ch; color: var(--text-copy-strong); }
.e-wd-open__panel {
  margin-top: calc(var(--space-5) + 1.5em);   /* level with the client name, below the back link */
  background: var(--paper);
  border-radius: var(--radius-media);
  padding: var(--space-7);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  min-width: 0;
}
.e-wd-open__panel .e-wd__stats { margin: 0; }
.e-wd-open__panel .e-wd__scope { margin: 0; }
.e-wd-open .e-wd__plate {
  margin: var(--space-8) 0 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-media);
}
.e-wd-open .e-wd__plate img { border-radius: var(--radius-media); }
.e-wd-open__main .e-lead { font-size: clamp(18px, calc(1.4vw + 1px), 22px); }

@media (max-width: 960px) {
  .e-wd-open__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .e-wd-open__panel { margin-top: 0; padding: var(--space-6); }
}
@media (max-width: 700px) {
  .e-wd-open__panel { padding: var(--space-5); }
  .e-wd-open .e-wd__plate { margin-top: var(--space-6); aspect-ratio: 4 / 3; }
}

/* 23 Oct 2026, later: the figures lose their grey panel and run full width
   under the description, above the image. */
.e-wd-open__head { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); }
.e-wd-open__panel { margin-top: 0; background: none; padding: 0; border-radius: 0; gap: var(--space-5); }
.e-wd-open__panel .e-wd__stats { width: 100%; }
@media (max-width: 960px) { .e-wd-open__panel { padding: 0; } }
@media (max-width: 700px) { .e-wd-open__panel { padding: 0; } }

/* 23 Oct 2026, later still: text left, image right, figures full width below. */
.e-wd-open__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-8); row-gap: var(--space-8); align-items: center; }
.e-wd-open__head .e-wd__plate { margin: 0; aspect-ratio: 4 / 3; grid-column: 2; grid-row: 1; }
.e-wd-open__head .e-wd-open__panel { grid-column: 1 / -1; }
@media (max-width: 960px) {
  .e-wd-open__head { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-6); }
  .e-wd-open__head .e-wd__plate { grid-column: 1; grid-row: auto; }
}

/* 23 Oct 2026, spacing pass (Adrian):
   1. text column top-aligned with the image;
   2. image/text row to figures: 64px → 32px;
   3. figures sized to their content with 32px either side of each divider,
      instead of each taking a third of the page width. Phones keep thirds. */
.e-wd-open__head { align-items: start; row-gap: var(--space-6); }
.e-wd-open__panel .e-wd__stats.e-stats { grid-template-columns: repeat(3, max-content); }
.e-wd-open__panel .e-wd__stats.e-stats > * { padding-inline: var(--space-6); }
.e-wd-open__panel .e-wd__stats.e-stats > :first-child { padding-left: 0; }
@media (max-width: 700px) {
  .e-wd-open__panel .e-wd__stats.e-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .e-wd-open__panel .e-wd__stats.e-stats > * { padding-inline: var(--space-3); }
  .e-wd-open__panel .e-wd__stats.e-stats > :first-child { padding-left: 0; }
}

/* --- The work on black (23 Oct 2026) ------------------------------------- */
.e-ground-ink.e-csg .e-csg__count { color: var(--text-on-dark-muted); }
.e-ground-ink .e-wd-dev__fig { background: rgba(255, 255, 255, .07); }
.e-ground-ink .e-wd-dev__fig .e-csg__todo,
.e-ground-ink .e-csg__shot .e-csg__todo { color: var(--text-on-dark-muted); }
.e-ground-ink .e-csg__shot { background: rgba(255, 255, 255, .07); }
.e-ground-ink .e-wd-reel { background: #000; }

/* --- On camera: the whole section plays the one video (23 Oct 2026) ------ */
[data-vtst-section] .e-vtstf__grid { cursor: pointer; }
[data-vtst-section] .e-vtstf__grid:hover .e-vtst__icon { transform: scale(1.08); }
[data-vtst-section] .e-vtst__icon { transition: transform .2s ease; }
[data-vtst-section] .e-vtstf__grid:focus-within .e-vtst__play:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* The pop-up's stand-in until the real film exists. */
.e-lightbox__frame .e-vtst-soon {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: var(--ink-900); color: var(--white); text-align: center; padding: 24px;
  font: var(--type-lead);
}
.e-lightbox__frame .e-vtst-soon small { font: var(--type-small); color: var(--text-on-dark-muted); max-width: 32ch; }
@media (prefers-reduced-motion: reduce) { [data-vtst-section] .e-vtst__icon { transition: none; } }

/* ==========================================================================
   On camera, laid out like the homepage showreel (23 Oct 2026).
   One full-width ink band, a full screen tall; the whole band is the play
   button. Own class names on purpose: site.js wires the homepage's
   .e-reel__stage itself and must not pick this one up.
   ========================================================================== */
.e-wd-cam__frame { position: relative; height: max(520px, 100svh); overflow: hidden; background: var(--ink-900); }
.e-wd-cam__stage {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  border: 0; padding: 0; background: transparent; color: var(--white); cursor: pointer; text-align: left;
}
.e-wd-cam__stage::before {   /* the showreel's hairline field */
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 96px 100%; opacity: .9;
}
.e-wd-cam__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.e-wd-cam__poster ~ .e-wd-cam__play::after { content: none; }
.e-wd-cam__stage:has(.e-wd-cam__poster)::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to bottom, rgba(14,10,22,.45), rgba(14,10,22,.68));
}
.e-wd-cam__play {
  position: relative; z-index: 1;
  width: 84px; height: 84px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.35);
  display: flex; align-items: center; justify-content: center; color: var(--white);
  transition: var(--transition-hover);
}
.e-wd-cam__stage:hover .e-wd-cam__play,
.e-wd-cam__stage:focus-visible .e-wd-cam__play { background: var(--ebr-purple); border-color: var(--ebr-purple); }
.e-wd-cam__stage:focus-visible { outline: 2px solid var(--white); outline-offset: -6px; }
.e-wd-cam__stamp {
  position: relative; z-index: 1;
  font: var(--type-label); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--text-on-dark-muted);
  transition: letter-spacing var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.e-wd-cam__stage:hover .e-wd-cam__stamp { letter-spacing: .28em; color: var(--white); }
/* The quote and the speaker, held bottom left, the way the showreel holds its stamp. */
.e-wd-cam__foot {
  position: absolute; z-index: 1;
  left: max(var(--page-margin), calc((100% - var(--max-width)) / 2 + var(--page-margin)));
  right: var(--page-margin);
  bottom: clamp(32px, 6vh, 72px);
  display: flex; flex-direction: column; gap: 10px; max-width: 46ch;
}
.e-wd-cam__quote { font: var(--type-lead); color: var(--white); }
.e-wd-cam__who { font: var(--type-small); color: var(--text-on-dark-muted); display: flex; gap: 8px; flex-wrap: wrap; }
.e-wd-cam__who strong { color: var(--white); font-weight: var(--weight-medium); }
.e-wd-cam [data-todo][data-todo] { color: var(--text-on-dark-muted); }
@media (max-width: 700px) {
  .e-wd-cam__frame { height: max(480px, 86svh); }
  .e-wd-cam__play { width: 72px; height: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .e-wd-cam__stamp, .e-wd-cam__play { transition: none; }
}