/* the hero's words keep off the screening: the title in the sky, the statement and the line low on the dark ground
   (the About page's placement, bodies-company.css, which this page does not load) */
.t-hero-text.at-sky { top: 13vh; bottom: 8vh; left: var(--gutter); width: min(800px, 54vw); display: flex; flex-direction: column; align-items: flex-start; }
.t-hero-text.at-sky .t-statement { margin-top: auto; max-width: 14ch; }
.t-hero-text.at-sky .t-line { max-width: 29ch; }
.t-hero-text.at-sky > * { position: relative; }
.t-hero-text.at-sky :is(.t-title, .t-statement, .t-line)::before { content: ""; position: absolute; inset: -28% -12%; z-index: -1; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, rgba(6, 8, 11, .5), rgba(6, 8, 11, 0)); }
[data-topic="media"] .t-hero-text.at-sky .t-title { font-size: clamp(56px, 6.6vw, 128px); line-height: 1; letter-spacing: -.02em; }
@media (max-width: 760px) {
  [data-topic="media"] .t-hero-text.at-sky { top: 12vh; bottom: 7vh; right: var(--gutter); width: auto; align-items: center; text-align: center; }
  [data-topic="media"] .t-hero-text.at-sky .t-title { font-size: clamp(64px, 19vw, 88px); }
  [data-topic="media"] .t-hero-text.at-sky .t-statement { max-width: none; font-size: clamp(26px, 7.4vw, 36px); }
}

/* Media (tools/standalone/media.cjs): the films, in the body. A film is its still, the mark to play it and its length;
   playing, YouTube's player takes the still's place in the same frame. */
.b-media .m-first { padding-bottom: 14vh; }
.m-film { margin: 0; }
.m-first .m-film { width: min(100%, 1240px, calc((100svh - 190px) * 16 / 9)); margin: 8vh auto 0; }
.m-frame, .m-player { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #0b0d10; }
.m-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.m-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 9, 13, 0) 55%, rgba(7, 9, 13, .38)); }
/* (the mark stands in the frame's corner: a still is often a title card, with its own lettering across the middle) */
.m-play { position: absolute; z-index: 1; left: clamp(18px, 2.2vw, 34px); bottom: clamp(18px, 2.2vw, 34px); width: 68px; height: 68px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .78); color: #fff; transition: background-color .3s var(--sys-ease), color .3s var(--sys-ease), transform .3s var(--sys-ease); }
.m-play svg { width: 22px; height: 22px; }
/* (the answer to the pointer comes at once; only the way back is eased) */
.m-frame:hover .m-play, .m-frame:focus-visible .m-play { background: #fff; color: #07090d; transition: none; }
.m-frame:active .m-play { transform: scale(.94); }
.m-frame:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.m-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.m-film.is-playing .m-frame { display: none; }
.m-cap { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-top: 16px; text-align: left; color: var(--sys-text); }
.m-name { margin: 0; font: 200 clamp(20px, 1.7vw, 27px)/1.2 var(--sys-display); letter-spacing: -.005em; }
.m-name .accent { margin-left: .35em; font-size: 1.06em; color: #c9cfd3; }
.m-meta { margin: 0 0 0 auto; font: 400 14px/1 var(--sys-body); letter-spacing: 0; color: #9aa3ab; font-variant-numeric: tabular-nums; }

/* a film comes up as it is reached (bodies-media.js marks it): transform and opacity only */
.bodies-live .m-film { opacity: 0; transform: translateY(18px); }
.bodies-live .m-film.is-in { opacity: 1; transform: none; transition: opacity .9s var(--sys-ease), transform 1.1s var(--sys-ease); }

/* more films, once there are any: two to a row */
.m-more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 32px; padding: 0 var(--gutter) 14vh; }
.m-more .m-play { width: 52px; height: 52px; }

@media (max-width: 760px) {
  .m-first .m-film { width: 100%; margin-top: 6vh; }
  .m-play { width: 48px; height: 48px; left: 14px; bottom: 14px; }
  .m-play svg { width: 18px; height: 18px; }
  .m-more { grid-template-columns: 1fr; gap: 40px; }
}
@media (prefers-reduced-motion: reduce) { .bodies-live .m-film { opacity: 1; transform: none; } }