@charset "UTF-8";
/* ==========================================================================
   Videos page components. Loaded after css/styles110920261.css and reuses its
   tokens, type scale and section furniture — nothing from it is redefined.

   The players are facades: a committed poster frame and a play control, with
   the YouTube iframe swapped in only once the reader asks for it (js/videos.js).
   That is a privacy decision before a performance one — six autoloaded embeds
   would hand Google a request from every reader who merely opened the page.
   Every image on the page is served from this domain for the same reason.
   ========================================================================== */

/* --- Back-link ------------------------------------------------------------ */
/* The same component as the heritage pages. It is repeated rather than shared
   because each page loads exactly one page stylesheet, never two, and promoting
   it into styles110920261.css would mean re-versioning a file every page
   depends on for the sake of one small block. */


/* --- Screen-reader-only text ---------------------------------------------- */

.u-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Video list ----------------------------------------------------------- */

/* Every entry gets the full measure. A two-up grid was tried and rejected:
   at half width the poster stops carrying the frame it was chosen for, and a
   one-minute clip of a room full of people becomes a thumbnail of nobody. */
.videos {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}

.video {
  display: grid;
  gap: 0.9rem;
  min-width: 0;
}

/* The page is one run of entries newest first, so an anchor lands on the entry
   rather than on a section that carries its own scroll margin. Each entry needs
   that margin instead, or the line above it sits hard against the viewport. */
.video,
.pod { scroll-margin-top: 1.5rem; }

/* --- The player: poster facade, then iframe ------------------------------- */

.video__stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.video__link {
  display: block;
  position: absolute;
  inset: 0;
  text-decoration: none;
  background: #000;
}

.video__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The frame lifts to full contrast on hover, so the resting state reads as a
     still and the hover state as an invitation. */
  filter: saturate(0.82) contrast(1.02);
  transition: filter 0.25s, transform 0.4s;
}
.video__link:hover .video__poster,
.video__link:focus-visible .video__poster {
  filter: none;
  transform: scale(1.015);
}

.video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: clamp(3.25rem, 8vw, 4.25rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(250 248 244 / 92%);
  color: var(--accent);
  box-shadow: 0 2px 14px rgb(0 0 0 / 35%);
  transition: background-color 0.2s, scale 0.2s;
}
.video__play svg { width: 42%; height: 42%; margin-left: 6%; fill: currentColor; }
.video__link:hover .video__play,
.video__link:focus-visible .video__play {
  background: #faf8f4;
  scale: 1.06;
}

.video__dur {
  position: absolute;
  right: 0.55rem;
  bottom: 0.55rem;
  padding: 0.16rem 0.42rem;
  border-radius: 2px;
  background: rgb(0 0 0 / 72%);
  color: #f4f1ea;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}

/* Once js/videos.js swaps the facade for the embed, the iframe owns the box. */
.video__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .video__poster,
  .video__play { transition: none; }
  .video__link:hover .video__poster,
  .video__link:focus-visible .video__poster { transform: none; }
}

/* --- The caption under the player ----------------------------------------- */
/* The caption runs to the same width as the player above it. The site's 66ch
   measure governs running prose, which these are not: they are two or three
   sentences apiece, read alongside the frame they describe, and a column of
   text stopping two thirds of the way across a full-width poster reads as an
   accident rather than a decision. */

.video__body { display: grid; gap: 0.35rem; }

.video__title {
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: var(--ink);
  text-wrap: pretty;
}

.video__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  font-family: var(--mono);
  font-size: var(--step-meta);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.video__meta span::before {
  content: "·";
  margin-right: 0.6ch;
  color: var(--rule-strong);
}

.video__desc {
  margin-top: 0.2rem;
  color: var(--ink-2);
}

.video__out {
  margin-top: 0.15rem;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.video__out a {
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.video__out a:hover { color: var(--accent); border-bottom-color: var(--accent); }
/* An entry can point at more than one place — the recording and the host's own
   write-up of the event — and two underlined links running together read as
   one. The gap is what separates them. */
.video__out a + a { margin-left: 1.25rem; }

/* --- Podcast episodes ------------------------------------------------------ */
/* Both episodes have a video version, so each is presented as a player under
   the same click-to-load facade as the rest of the page, with the caption and
   the listening links underneath. If an audio-only episode ever lands here it
   will need a tile of its own; there is deliberately no half-built one waiting
   for it. */

.pod {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
}

/* Same reasoning as the video caption above: full width under a full-width
   player, no measure of its own. */
.pod__body { display: grid; gap: 0.4rem; min-width: 0; }

.pod__title {
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.28;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: pretty;
}
.pod__desc {
  margin-top: 0.35rem;
  color: var(--ink-2);
}
.pod__desc + .pod__desc { margin-top: 0.65rem; }

/* Who is in the room. A conversation is its participants, so they are listed
   rather than left to the description to imply. */
.people {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-3);
}
.people + .people { margin-top: 0.45rem; padding-top: 0; border-top: 0; }
.people b {
  display: block;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

/* --- Where to listen ------------------------------------------------------- */
/* One pill per platform, each saying what it actually points at: an episode,
   a series or an announcement. A link that promises an episode and delivers a
   show page is a small lie, and there is no reason to tell it. */

.listen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.listen a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.7ch;
  padding: 0.35rem 0.65rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.18s, color 0.18s, background-color 0.18s;
}
.listen a:hover,
.listen a:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--paper-raised);
}
.listen__name {
  font-family: var(--mono);
  font-size: var(--step-meta);
  letter-spacing: 0.02em;
}
.listen__kind {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.listen a:hover .listen__kind { color: var(--accent); }

/* --- Channel button in the masthead --------------------------------------- */
/* The channel used to have a section of its own at the foot of the page, which
   spent a full band of the page on one sentence and one link. It is a
   destination, not a chapter, so it now sits in the masthead where the reader
   is already deciding where to go: the play mark for what it is, the name for
   where it goes, the handle for whose it is. */

.channel-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex: none;
  align-self: flex-start;
  padding: 0.6rem 0.85rem;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
  text-decoration: none;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.25s;
}
@media (min-width: 48rem) {
  .channel-cta { margin-top: 0.35rem; }
}
.channel-cta:hover,
.channel-cta:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-1px);
}

.channel-cta__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
}
.channel-cta__mark svg { width: 38%; height: 38%; margin-left: 8%; fill: currentColor; }

.channel-cta__text { display: grid; gap: 0.15rem; }
.channel-cta__label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-meta);
  letter-spacing: 0.06em;
  color: var(--ink);
}
.channel-cta__handle {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.channel-cta:hover .channel-cta__label,
.channel-cta:hover .channel-cta__handle { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .channel-cta { transition: border-color 0.18s; }
  .channel-cta:hover, .channel-cta:focus-visible { transform: none; }
}

/* --- Print ----------------------------------------------------------------- */
/* On paper a play button is furniture. The poster and the caption carry the
   record, and the watch URL is spelled out because a link cannot be clicked. */

@media print {
  .crumbs, .video__play, .video__dur { display: none !important; }
  /* On paper the button is furniture; the handle it points at is not. */
  .channel-cta { border: 0; padding: 0; }
  .channel-cta__mark { display: none; }
  .video__stage { box-shadow: none; break-inside: avoid; }
  .video__poster { filter: grayscale(1); }
  .video, .pod { break-inside: avoid; }
  .video__out a[href]::after { content: " (" attr(href) ")"; }
  .listen a { border-color: var(--rule-strong); }
  .listen a[href]::after {
    content: " " attr(href);
    font-size: 0.625rem;
    color: var(--ink-3);
  }
}