/* =========================================================================
   Video prototypes — /video
   Figma: CW / page "Video", six widths — 2000, 1440, 1280, 1024, 744, 393.

   The page is the blocks and nothing else — no header, no footer — so
   everything here is its own.

   The one thing to know before reading: **every inset in this design is an
   absolute number, not a fraction of the card.** 40 at the edges, 40 between
   films, 24 for the controls — the same at 2000 as at 1024. Sizing them as
   percentages, which is what this file used to do, made them shrink with the
   window: 28 of margin at 1024 where the frame asks for 40, and 56 at 2000
   where it still asks for 40. What does change per width is the card's own
   height, and the frames give four of those outright.
   ========================================================================= */

.page-video {
  /* The frame is drawn in Rig Sans; the page is set in Arpona Sans, like the
     rest of the site. The token keeps its own name because the frame's weights
     are its own — see the note on Learn More below. */
  --rig:      var(--sans);
  --v-blue:   #223992;
  --v-rule:   rgba(18, 38, 134, .4);
  /* the frame's own two numbers, used wherever something is spaced */
  --v-pad:    40px;
  --v-gap:    40px;
  /* Opening a film: eased at both ends and a touch slower than it was — it
     leaves without a jump and arrives without a thump. */
  --v-ease:   cubic-bezier(.5, 0, .2, 1);
  --v-open:   .7s;
}

.vidpage {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 40px 0;
  background: var(--chip);
}

/* ------------------------------------------------------------- the card -- */
/* Full-bleed: the frame's width is the whole design width, so the card has no
   gutter of its own.

   Its height is given per width rather than derived — 592 at 1024, 680 at
   1280, 760 at 1440, 940 at 2000 — and those four are not one ratio; the card
   grows more slowly than the window does. Between them the height is drawn
   along a straight line rather than held and then stepped: the films inside
   are sized from the card's width, so a height that waited for the next
   breakpoint would leave them hanging out of the bottom of it for the whole
   stretch in between. Each expression is exact at both of its ends.

   Ninety per cent of the window is the ceiling, as asked. */
.vidcard {
  position: relative;
  width: 100%;
  height: 592px;
  max-height: 90svh;
  background: var(--white);
  overflow: clip;
}
@media (min-width: 1024px) { .vidcard { height: calc(592px + (100vw - 1024px) * .34375); } }
@media (min-width: 1280px) { .vidcard { height: calc(680px + (100vw - 1280px) * .5); } }
@media (min-width: 1440px) { .vidcard { height: calc(760px + (100vw - 1440px) * .32143); } }
@media (min-width: 2000px) { .vidcard { height: 940px; } }

.vidcard--split {
  /* the copy inside is measured against this box, not against its own column,
     so that it can keep its width while its column loses one */
  container-type: inline-size;
  display: flex;
  align-items: stretch;
}

/* The two halves are widths, not contents: opening the film animates these
   two numbers and nothing inside either one reflows.

   That last part is what the inner box is for. A flex item will not go below
   its own min-content width — the longest word — so the column has to be told
   it may, and then the text inside would rewrap as the column narrowed, which
   reads as the words being squeezed rather than passed by. The inner box is
   half the card (50cqw — of the card, not of the column it is in), so it keeps
   the width it was laid out at while the column closes over it. */
.vidcard__copy {
  flex: 0 0 50%;
  min-width: 0;
  overflow: clip;
  transition: flex-basis var(--v-open) var(--v-ease),
              opacity .3s ease;
}
.vidcard__copy-in {
  display: flex;
  flex-direction: column;
  gap: var(--v-gap);
  align-items: flex-start;
  width: 50cqw;
  height: 100%;
  padding: var(--v-pad);
}
.vidcard__copy-in > * { flex: none; }

.vidcard__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--v-blue);
  white-space: nowrap;
}
.vidcard__eyebrow img { flex: none; width: 12px; height: 12px; }

/* 48/52 at every width the frames draw, phones apart */
.vidcard__title {
  max-width: 587px;
  font-family: var(--rig);
  font-weight: 600;
  font-size: 48px;
  line-height: 52px;
  color: var(--v-blue);
  text-box: trim-both cap alphabetic;
}
/* 791 in the frame — the heading has the width of the card here, not of a column */
.vidcard__title--wide { max-width: 791px; }
.vidcard__lede {
  max-width: 504px;
  font-family: var(--rig);
  font-weight: 400;
  font-size: 20px;
  line-height: 28px;
  color: var(--v-blue);
  text-box: trim-both cap alphabetic;
}
/* the box is 96 × 31 in the frame: 16 either side of the word, 8 above and
   below it. The frame asks for Extrabold; the Arpona kit carries 400 to 700,
   and CSS says nothing when a weight is missing — it just draws the nearest.
   700 is that nearest, written out rather than left to be discovered. */
.vidcard__more {
  /* 15 and 7 rather than the frame's 16 and 8: a Figma stroke is drawn inside
     the 96 × 31, a CSS border is added to whatever the padding makes, and the
     difference is exactly the 1 either side */
  padding: 7px 15px;
  border: 1px solid var(--v-rule);
  font-family: var(--rig);
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  color: var(--v-blue);
  white-space: nowrap;
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.vidcard__more:hover { background: var(--v-blue); border-color: var(--v-blue); color: var(--white); }

/* ============================================================ the shelf == */
/* A heading across the top and a row of films under it. Opening one is the row
   growing to the whole card while the film in it grows to the whole row — the
   heading and the other films are the width and height they give up. One set
   of animated numbers for both shelves. */
.vidcard__head {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: var(--v-gap);
  align-items: flex-start;
  padding: var(--v-pad);
  transition: opacity .34s ease;
}
.vidcard[data-state="open"] .vidcard__head { opacity: 0; }

/* the row, inset by the frame's 40 and dropped below the 208 of heading */
.vidshelf {
  position: absolute;
  right: var(--v-pad);
  left: var(--v-pad);
  overflow: clip;
  transition: top    var(--v-open) var(--v-ease),
              right  var(--v-open) var(--v-ease),
              bottom var(--v-open) var(--v-ease),
              left   var(--v-open) var(--v-ease);
}
/* The pair's films are as wide as half the row and as tall as the row is. The
   row's bottom is the frame's own 40, the same 40 as everywhere else on the
   card, rather than the remainder it used to be — the frames leave 40 at 1440
   but 50 at 1280, 42 at 1024 and 45 at 2000, which is four numbers where the
   card only ever means one. The films give up a little of their shape for it:
   660 × 412 exactly at 1440, and within a couple of hundredths of it at every
   other width. */
[data-shelf="pair"] .vidshelf { top: 308px; bottom: var(--v-pad); }
/* The reel's are the other way about: as tall as the row and as wide as that
   makes them, so how many fit is whatever fits — two and the edge of a third
   at every width the frames draw. Under them, 24 to the dots, the dots, and
   the frame's 40. */
[data-shelf="reel"] .vidshelf { top: 268px; bottom: 80px; }
/* The two rows change their top at different widths, so they get a breakpoint
   each: the frames put the pair at 308 down to 1440 and 268 from 1280, and the
   reel at 268 down to 1280 and 248 from 1024. Sharing one boundary at 1279 —
   which is what this was — handed 1280 the pair's 1440 spacing. */
@media (max-width: 1439px) { [data-shelf="pair"] .vidshelf { top: 268px; } }
@media (max-width: 1279px) { [data-shelf="reel"] .vidshelf { top: 248px; } }
.vidcard[data-state="open"] .vidshelf { top: 0; right: 0; bottom: 0; left: 0; }
.vidcard[data-state="open"] .vidshelf__track { height: 100%; }

/* The track carries the whole row and slides; the shelf clips it. The offset
   is a variable rather than a style set from script so that the open state can
   simply say it is zero — no rule has to out-shout an inline transform. */
.vidshelf__track {
  display: flex;
  gap: var(--v-gap);
  height: 100%;
  transform: translateX(var(--x, 0px));
  will-change: transform;
  transition: gap var(--v-open) var(--v-ease),
              transform var(--v-open) var(--v-ease);
}
.vidcard[data-state="open"] .vidshelf__track { gap: 0; --x: 0px; }

.vidtile {
  position: relative;
  overflow: clip;
  background: var(--black);
  transition: flex-basis var(--v-open) var(--v-ease);
}
/* 660 × 412 in the frame — half the row, and the same shape at every width.
   The shape is kept by the row's own bottom, which video.js works out from the
   width, rather than by an aspect-ratio on the film: an aspect-ratio cannot be
   grown, and opening one of these has to grow it. */
[data-shelf="pair"] .vidtile { flex: 0 0 calc((100% - var(--v-gap)) / 2); }
/* 640 × 412 — height-led, so the row shows what it shows. The width is a
   number rather than the shape it comes from, because opening a film has to
   grow this box and an aspect-ratio cannot be grown: swapped for `auto` at the
   moment of opening it snaps, and what was meant to be the preview zooming out
   became the film appearing in the middle of nothing. video.js measures the
   row and puts the width here; both dimensions then animate — the width from
   this, the height from the row's own top and bottom. */
[data-shelf="reel"] .vidtile { flex: 0 0 var(--tile-w, 45%); height: 100%; }
.vidcard[data-state="open"] .vidtile { flex-basis: 0%; aspect-ratio: auto; }
.vidcard[data-state="open"] .vidtile.is-open { flex-basis: 100%; aspect-ratio: auto; }

/* node 1632:59 — five, the current one filled, 24 under the row */
.viddots {
  position: absolute;
  right: var(--v-pad);
  bottom: var(--v-pad);
  left: var(--v-pad);
  display: flex;
  gap: 8px;
  transition: opacity .34s ease;
}
.vidcard[data-state="open"] .viddots { opacity: 0; pointer-events: none; }
.viddots button {
  width: 16px;
  height: 16px;
  border: 1px solid var(--v-rule);
  border-radius: 30px;
  cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease;
}
.viddots button[aria-selected="true"] { background: var(--v-blue); border-color: var(--v-blue); }

/* ------------------------------------------------------------ the stage -- */
.vidcard__stage {
  position: relative;
  flex: 0 0 50%;
  overflow: clip;
  background: var(--black);
  transition: flex-basis var(--v-open) var(--v-ease);
}
/* The film is 16:9 and the stage is not, in either state — it covers, so the
   frame is filled and the crop moves rather than the picture. */
.vidcard__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .25s ease;
}
/* A tile at rest is its cover — a picture behind the film, not the film held
   on a frame. video.js says which of the two is showing and hands each tile
   its own picture; see the note there for why it is a file and not a seek. */
[data-tile] {
  background-image: var(--cover);
  background-position: center;
  background-size: cover;
}
[data-tile][data-showing="film"] .vidcard__video { opacity: 1; }

/* the whole stage is the target; the triangle is what says so, 24 in and 24 up */
.vidcard__open {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 24px;
  cursor: pointer;
}
/* the one glyph that keeps its presence: it is the invitation, not a control */
.vidcard__open .vidcard__ico {
  width: 40px;
  height: 40px;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1), opacity .2s ease;
}
.vidcard__open:hover .vidcard__ico { transform: scale(1.12); }

/* --- the controls, which belong to the opened state ---------------------- */
.vidcard__ui {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
/* Every one of these is a pair of glyphs and the two are not the same size —
   the speaker with its wave is 27 wide, the muted one 23; play is 20, pause 28.
   Given no box of its own a button is as wide as whichever glyph is showing,
   and since these are anchored by an edge, the glyph moved on every press. So
   each button is the size of its wider face and centres whatever is in it. */
.vidcard__ui button {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* every control lights the same way, bar full screen, which has its own */
.vidcard__ui button:hover .vidcard__ico { opacity: .75; }

/* Reicon on a 24 grid, so a control is one number and not a width and a
   height — reicon.dev, Filled. The corners are the frame's: 24 in from the
   edges, the same at every width. At the frame's own sizes the glyphs stood
   taller than the Learn More button and read as the loudest thing on the
   card; 24 is about three quarters of that and sits against the button
   instead. The triangle that opens a film and the two arrows that step
   between them keep their presence — those are the card's invitations rather
   than its furniture. */
.vidcard__ico {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--white);
  transition: opacity .22s ease, transform .22s var(--v-ease);
}
.vidcard__x        { top: 24px;    right: 24px;  width: 24px; height: 24px; }
.vidcard__toggle   { bottom: 25px; left: 24px;   width: 24px; height: 24px; }
.vidcard__fs       { bottom: 29px; right: 56px;  width: 24px; height: 24px; }
.vidcard__mute     { bottom: 29px; right: 18px;  width: 24px; height: 24px; }

/* Left and right on the open film, when there is one to go to. They wear what
   the rest of the controls wear: a flat white glyph, no plate under it. The
   hit box is the height of the film — a chevron 26 tall is a target nobody is
   going to find twice — while the glyph stays where the eye expects it. Being
   that size, they are first in the box, so the cross and the three controls in
   the corners keep their own hit boxes rather than lying under one of these. */
.vidcard__step {
  top: 0;
  bottom: 0;
  width: 120px;
  align-items: center;
  transition: opacity .25s ease;
}
/* Named inside the box, because the rule that makes every control a flex item
   also centres it — and centred in a hit box this wide, the chevrons sat 66
   from the edge while every other glyph sat at 24. The padding is 16 rather
   than 24: a chevron carries about eight of its own bearing inside the 24
   grid, so 16 puts its ink where the cross and the speaker have theirs. */
.vidcard__ui .vidcard__step--prev { left: 0;  justify-content: flex-start; padding-left: 16px; }
.vidcard__ui .vidcard__step--next { right: 0; justify-content: flex-end;   padding-right: 16px; }
.vidcard__ico--step { width: 26px; height: 26px; }
.vidcard__step--prev .vidcard__ico { transform: rotate(180deg); }
/* the end of the row: the arrow that points at nothing is not there */
.vidcard__step[hidden] { display: none; }

.vidcard__caption {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 24px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--white);
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

/* a hairline, not a bar: the frame draws it 2 to 3 thick */
.vidcard__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: rgba(255, 255, 255, .3);
}
.vidcard__progress span {
  display: block;
  width: 0;
  height: 100%;
  background: var(--white);
}

/* --- which icon of a pair is showing ------------------------------------ */
/* Each control ships both of its faces and the state picks. The state is on
   the tile, not the card: a card can hold five of them. */
.vidcard__i-play,
.vidcard__i-fs-exit { display: none; }
[data-tile][data-paused="true"] .vidcard__i-pause { display: none; }
[data-tile][data-paused="true"] .vidcard__i-play  { display: block; }
[data-tile][data-full="true"]   .vidcard__i-fs      { display: none; }
[data-tile][data-full="true"]   .vidcard__i-fs-exit { display: block; }

/* Full screen, hovered: the glyph is one drawing and its arrows cannot be sent
   anywhere on their own, so what moves is the drawing — out of itself going
   in, into itself coming back, which is the same thing the four corners were
   saying. A twelfth either way, and 80% as the frame has it. */
.vidcard__fs .vidcard__ico { transform-box: fill-box; transform-origin: center; }
.vidcard__fs:hover .vidcard__i-fs      { opacity: .8; transform: scale(1.12); }
.vidcard__fs:hover .vidcard__i-fs-exit { opacity: .8; transform: scale(.88); }

/* Muted and not: Reicon's volume-up and volume-x. Stacked one on the other
   and cross-faded rather than swapped outright — their speakers sit in the
   same place, so the only thing that changes is the slash, and fading it in
   is the whole of the animation. Stacking is what keeps the button 24 wide;
   two glyphs in the flow would make it 48 and move everything beside it. */
.vidcard__mute { position: absolute; }
.vidcard__mute .vidcard__ico {
  position: absolute;
  inset: 0;
  transition: opacity .22s ease;
}
.vidcard__i-muted { opacity: 0; }
[data-tile][data-muted="true"] .vidcard__i-sound { opacity: 0; }
[data-tile][data-muted="true"] .vidcard__i-muted { opacity: 1; }

/* --- opened -------------------------------------------------------------- */
.vidcard[data-state="open"] .vidcard__copy { flex-basis: 0%; opacity: 0; }
.vidcard[data-state="open"] .vidcard__stage { flex-basis: 100%; }
.vidcard[data-state="open"] .vidcard__open  { opacity: 0; pointer-events: none; }
/* the controls belong to whichever tile is open, and to no other */
.vidcard[data-state="open"] [data-tile].is-open .vidcard__ui,
.vidcard--split[data-state="open"] .vidcard__ui { opacity: 1; pointer-events: auto; }
/* Stepping to the next film: the row slides, and the controls sit that part
   out. They are the same six in the same places either side of it, so they go
   dark before the slide and come back after — see the note in video.js. The
   selector has to outweigh the one above, hence the tile in the middle of it. */
.vidcard[data-state="open"][data-swap] [data-tile] .vidcard__ui {
  opacity: 0;
  pointer-events: none;
  /* quicker than the .3 they open with: this one is a step in a sequence and
     the slide is waiting on it */
  transition-duration: .18s;
}
/* opened, the picture itself is the play/pause target */
.vidcard[data-state="open"] .vidcard__video { cursor: pointer; }

/* In the browser's own full screen the film is the whole display, which is
   almost never the card's shape — the ratio has to give way or the film would
   be letterboxed inside a letterbox. */
[data-tile]:fullscreen { flex-basis: 100%; aspect-ratio: auto; }
[data-tile]:fullscreen .vidcard__video { object-fit: contain; }

/* ====================================================== tablet and phone == */
/* Below 1024 the row cannot be halves: the copy would have a column too narrow
   to read and the films would be postage stamps. The 744 frame stacks them,
   and keeps the desktop's type while it does — 48/52 heading, 20/28 body, 40
   of padding. Only the phone steps down from that.

   Opening a film is a different move at these widths. On the desktop the card
   has room to give; here it has none — a 16:9 film across a phone is 211 tall
   and every one of those numbers is the same before and after, so "opening"
   would fold a paragraph away and otherwise change nothing, while six controls
   and two arrows fought over 211px. So the film leaves the card and takes the
   screen, and the card stays exactly as it was underneath. */
@media (max-width: 1023px) {
  .vidcard {
    height: auto;
    max-height: none;
  }
  .vidcard--split { flex-direction: column; }
  .vidcard__copy { flex: none; }
  /* stacked, the copy has the whole card and the container query would give it
     half of one */
  .vidcard__copy-in { width: 100%; height: auto; }
  /* 744 × 540 in the frame — not 16:9; the film is cropped to the card here,
     and every film in every block is the same shape while they are stacked */
  .vidcard__stage { flex: none; aspect-ratio: 744 / 540; }
  .vidtile,
  [data-shelf="pair"] .vidtile,
  [data-shelf="reel"] .vidtile { aspect-ratio: 744 / 540; }
  /* 452 in the frame at both stacked widths, for the body as well as the
     heading: the full 664 would be a line of 48pt type nobody reads twice */
  .vidcard__title,
  .vidcard__lede { max-width: 452px; }

  /* --- the two shelves, stacked ----------------------------------------- */
  /* The heading and the row are in the flow here, not placed against the card,
     so the numbers above have nothing to be measured from. */
  .vidcard__head {
    position: static;
    padding: var(--v-pad) var(--v-pad) 0;
  }
  .vidcard__title--wide { max-width: none; }

  .vidshelf,
  [data-shelf="pair"] .vidshelf,
  [data-shelf="reel"] .vidshelf {
    position: static;
    padding: var(--v-pad);
  }

  /* One film to a view either way, but reached differently: the pair simply
     stacks — two of them in a column is a pair of films, not a carousel with
     nothing to carousel — while the reel keeps its row and its dots, since
     five stacked would be a scroll with no end in sight. */
  [data-shelf="pair"] .vidshelf__track {
    flex-direction: column;
    gap: var(--v-gap);
    transform: none;
  }
  [data-shelf="pair"] .vidtile { flex: none; width: 100%; }
  [data-shelf="reel"] .vidshelf__track { gap: var(--v-gap); }
  [data-shelf="reel"] .vidtile { flex: 0 0 100%; height: auto; }

  .viddots { position: static; padding: 0 var(--v-pad) var(--v-pad); }

  /* Nothing in the card gives way any more, because the film is not in it
     while it plays. These undo the desktop's opening, which is otherwise
     still in force at this width. */
  .vidcard[data-state="open"] .vidcard__copy { flex-basis: auto; opacity: 1; }
  .vidcard[data-state="open"] .vidcard__head { opacity: 1; }
  .vidcard[data-state="open"] .viddots       { opacity: 1; pointer-events: auto; }
  .vidcard[data-state="open"] .vidshelf__track { gap: var(--v-gap); }

  /* --- the film, on the screen ------------------------------------------ */
  /* Out of the page and over it. What goes fixed is the card and not the film
     inside it: a fixed box is fixed to the window only while nothing above it
     has a transform of its own, and the reel's row has one — it slides. Fixing
     the film would have left it pinned to that row, a screen-sized black box
     anchored off to one side with the picture somewhere below the fold. The
     card has no such ancestor, so the card is what takes the screen, and
     everything it holds is laid against it.

     `contain` and not `cover` on the film: cropping a landscape picture to a
     portrait screen leaves a strip of the middle of it, which is not it. */
  .vidcard[data-state="open"] {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--black);
    animation: vid-rise .26s cubic-bezier(.22, 1, .36, 1);
  }
  @keyframes vid-rise {
    from { opacity: 0; transform: scale(.97); }
    to   { opacity: 1; transform: none; }
  }
  .vidcard[data-state="open"] .vidcard__head,
  .vidcard[data-state="open"] .vidcard__copy,
  .vidcard[data-state="open"] .viddots { display: none; }

  .vidcard[data-state="open"] .vidshelf { position: absolute; inset: 0; padding: 0; }
  .vidcard[data-state="open"] .vidshelf__track { height: 100%; gap: 0; transform: none; }
  .vidcard[data-state="open"] .vidtile { display: none; }
  .vidcard[data-state="open"] .vidtile.is-open {
    display: block;
    flex: 1 1 100%;
    aspect-ratio: auto;
    height: 100%;
    background: none;
  }
  /* the one card whose film is a direct child rather than a row away */
  .vidcard--split[data-state="open"] .vidcard__stage.is-open {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    background: none;
  }
  .vidcard[data-state="open"] .is-open .vidcard__video { object-fit: contain; }
  /* the page behind it does not scroll while it is there — video.js sets this,
     and puts the scroll back where it was, since a card that leaves the flow
     takes the page's height with it */
  body.is-vidopen { overflow: hidden; }
}

/* ---- the phone: the one width that steps down from the frame's type ----- */
@media (max-width: 743px) {
  .page-video { --v-pad: 24px; --v-gap: 24px; }
  .vidcard__head { gap: 20px; }
  .vidcard__title,
  .vidcard__title--wide { font-size: 32px; line-height: 36px; }
  .vidcard__lede { font-size: 16px; line-height: 24px; }
  /* named per shelf as well, so that the rules a width up — which are more
     specific than a bare .vidtile — do not go on deciding this */
  .vidcard__stage,
  .vidtile,
  [data-shelf="pair"] .vidtile,
  [data-shelf="reel"] .vidtile { aspect-ratio: 16 / 9; }
  [data-shelf="pair"] .vidshelf__track,
  [data-shelf="reel"] .vidshelf__track { gap: 16px; }

  /* Room enough for the caption, and controls a thumb can find. They sit
     against the screen rather than against the picture: letterboxed, the
     picture is a band across the middle and its corners are not where anyone
     is looking. */
  .vidcard__x        { top: 16px; right: 16px; width: 26px; height: 26px; }
    .vidcard__toggle   { bottom: 26px; left: 20px; width: 20px; height: 28px; }
    .vidcard__mute     { bottom: 28px; right: 20px; width: 22px; height: 24px; }
    /* the overlay is the full screen already; a control that asks for one more
     is a control with nothing to say. Named twice over, because the rule that
     makes every one of these a flex box carries a tag with it. */
  .vidcard__ui .vidcard__fs { display: none; }
  .vidcard__caption {
    bottom: 76px;
    left: 20px;
    right: 20px;
    transform: none;
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
  }
  .vidcard__step     { width: 22%; }
  .vidcard__step--prev { padding-left: 20px; }
  .vidcard__step--next { padding-right: 20px; }
  
  .vidcard__open     { padding: 14px 12px; }
  .vidcard__open .vidcard__ico { width: 28px; height: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .vidcard__copy,
  .vidcard__stage,
  .vidcard__ui,
  .vidcard__open .vidcard__ico { transition: none; }
}