@charset "UTF-8";
/* ==========================================================================
   Videos page components. Loaded after css/styles220820261.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 — five autoloaded embeds
   would hand Google a request from every reader who merely opened the page.
   Every image here, podcast art included, 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 styles220820261.css would mean re-versioning a file every page
   depends on for the sake of one small block. */

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  margin-bottom: 1.25rem;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.backlink:hover { color: var(--accent); border-bottom-color: var(--accent); }

/* --- 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 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 ----------------------------------------- */

.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;
  max-width: var(--measure);
  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); }

/* --- Podcast episodes ------------------------------------------------------ */
/* An audio episode has no frame of its own, so it is identified the way every
   podcast app identifies one: by the show's cover art, square, with the episode
   number underneath. The art belongs to the show, so it is a link back to the
   episode on Apple rather than decoration, and it is served from this domain
   rather than hotlinked from Apple's CDN. */

.pod {
  display: grid;
  gap: clamp(1.1rem, 2.5vw, 1.6rem);
}
@media (min-width: 46rem) {
  .pod--audio {
    grid-template-columns: 11rem minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.5rem, 4vw, 2.75rem);
  }
}

.pod__art { width: 9rem; }
@media (min-width: 46rem) { .pod__art { width: 100%; } }

.pod__art a {
  display: block;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule), var(--shadow);
  transition: box-shadow 0.18s, transform 0.25s;
}
.pod__art a:hover,
.pod__art a:focus-visible {
  box-shadow: 0 0 0 1px var(--accent), var(--shadow);
  transform: translateY(-2px);
}
.pod__art img { width: 100%; aspect-ratio: 1; object-fit: cover; }

.pod__ep {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--step-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .pod__art a { transition: box-shadow 0.18s; }
  .pod__art a:hover, .pod__art a:focus-visible { transform: none; }
}

.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;
  max-width: 40ch;
}
.pod__desc {
  margin-top: 0.35rem;
  max-width: var(--measure);
  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);
  max-width: var(--measure);
  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 call-out ------------------------------------------------------ */

.channel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.2rem, 3vw, 1.75rem);
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: 3px;
}
.channel__text { max-width: 46ch; }
.channel__handle {
  font-family: var(--mono);
  font-size: var(--step-meta);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.channel__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: var(--step-eyebrow);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s, border-color 0.18s, background-color 0.18s;
}
.channel__cta:hover {
  color: var(--paper);
  background: var(--accent);
  border-color: var(--accent);
}

/* --- 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 {
  .backlink, .video__play, .video__dur, .channel__cta { display: none !important; }
  .video__stage { box-shadow: none; break-inside: avoid; }
  .pod__art a { box-shadow: 0 0 0 1px var(--rule); }
  .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);
  }
}