/* ==========================================================================
   Krishen Khanna — /digital/
   Builds on main.css tokens only; no new colours.
   ========================================================================== */

/* the page's title with its introduction beside it, stacked on a phone */
.dig-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--gap-x); align-items: start; }
.dig-head__title { margin: 0 0 1.2em; }   /* stacked: the site's 25px from a page title to its first block */
.dig-head__body > :last-child { margin-bottom: 0; }
.dig-head__note { color: var(--grey-1); }
.dig-head__note a { color: inherit; text-decoration: underline; text-decoration-color: var(--grey-3); text-underline-offset: .2em; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .dig-head__note a:hover { color: var(--ink); text-decoration-color: currentColor; } }
.dig-head__note a:focus-visible { color: var(--ink); }
@media (min-width: 1024px) {
  .dig-head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .dig-head__title { margin: 0; }
}
.dig { margin-top: var(--section-y); padding-top: var(--section-y); border-top: 1px solid var(--hairline); }
/* a #work link lands on the title, 10px under the header, not on the hairline 70px above it, so the film fits below */
.dig { scroll-margin-top: calc(-1 * var(--section-y) - 10px); }
/* each work in one column in its film's own shape (--ar, width / height, set per work): full width, or narrower so that a
   vertical film or a tall frame is never taller than the screen below the header. Title, film and text share its edge */
.dig__col { margin: 0 auto; max-width: min(100%, calc(min(80svh, 900px) * var(--ar, 1.7778))); }
/* a landscape film that would stop a few px short of the full width takes it, so it lines up with the title and the
   hairlines: an inset under 80px snaps to none, a larger one keeps at least 40px a side (no round(): the rule above) */
.dig__col--wide { max-width: calc(100% - round(down, max(0px, 100% - min(80svh, 900px) * var(--ar, 1.7778)), 2 * var(--gap-x))); }
.dig__title { margin-bottom: var(--cap-gap); }
.dig__player { position: relative; margin: 0; background: 0 0 / 100% auto no-repeat; }
/* the page colour: each film fades to it at the loop point, so the fade dissolves into the page */
.dig__video { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 1.7778); background: var(--white); transition: opacity .3s; }
/* first start: the poster holds the place behind the video until the seek has landed (digital.js), then the film dissolves in */
.dig__video.is-held { opacity: 0; transition: none; }
@media (prefers-reduced-motion: reduce) { .dig__video { transition: none; } }
/* No row of words under the film. The whole frame is one button (a tap pauses or plays it), and a
   sound icon sits on the film at its bottom right, just above his signature (--sig-top, the fraction of the frame's height
   where it begins, measured per film), never on it. Nothing to press without script */
.no-js .dig__tap, .no-js .dig__sound { display: none; }
/* without script no poster is ever set on a lower film (digital.js does it near the screen): its JPEG shows behind it */
.no-js .dig__player { background-image: var(--poster-jpg, none); }
.no-js .dig__video:not([poster]) { background: transparent; }
.dig__tap { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 0;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.dig__tap:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
/* the play glyph, only where the film waits for the visitor (they paused it, or it could not start by itself) */
.dig__glyph { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--ink-2);
  background: rgba(10, 10, 10, .55); opacity: 0; transition: opacity .25s; }
.dig__player.is-waiting .dig__glyph { opacity: 1; }
.dig__sound { position: absolute; z-index: 2; right: max(6px, 1.6%); bottom: calc((1 - var(--sig-top, .95)) * 100% + 6px);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--ink-2); -webkit-tap-highlight-color: transparent; }
.dig__sound::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: rgba(10, 10, 10, .55); transition: background .2s; }
.dig__icon { position: relative; display: block; }
.dig__sound .dig__icon--on, .dig__sound[aria-pressed="true"] .dig__icon--off { display: none; }
.dig__sound[aria-pressed="true"] .dig__icon--on { display: block; }
@media (hover: hover) and (pointer: fine) { .dig__sound:hover::before { background: rgba(10, 10, 10, .8); } }
/* focus over a film: the chip darkens as on hover, and a two-tone ring (page black inside, ink outside)
   reads over any frame, the white uniforms of Celebration too (main.css --focus-on-image) */
.dig__sound:focus-visible { outline: none; }
.dig__sound:focus-visible::before { background: rgba(10, 10, 10, .85); box-shadow: var(--focus-on-image); }
@media (prefers-reduced-motion: reduce) { .dig__glyph { transition: none; } }
/* the text under the film */
.dig__text { margin-top: var(--gap-y); }
.dig__text p:last-child { margin-bottom: 0; }
.dig__actions { margin-top: var(--para); }
.dig__text > .dig__actions:first-child { margin-top: 0; }
/* Enquire to the right of the text, centred on the text's height and its
   right edge on the film's;
   on a phone it stays under the text */
.dig__col { container: dig-col / inline-size; }   /* its width is the film's (max-width above), never its content's */
@container dig-col (min-width: 400px) {
  .dig__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--gap-x); align-items: center; }
  .dig__text > .dig__actions { margin-top: 0; grid-column: 2; grid-row: 1; }
}
/* a vertical film's column narrower than that, on a laptop (Gandhi at 1280 × 720: beside the text there
   too): the text keeps the film's width and Enquire stands just outside it, to its right (there is room: the column is
   centred on a wide screen) */
@media (min-width: 768px) {
  @container dig-col (max-width: 399.98px) {
    .dig__text { position: relative; }
    .dig__text > .dig__actions { position: absolute; top: 50%; left: calc(100% + var(--gap-x)); margin: 0; white-space: nowrap;
      transform: translateY(-50%); }
  }
}