/* home/video.css: the "On Video" band (#videos). Owned by video.
   Its one job: watch Rod teach without leaving the page.
   Navy ground (kept). The films are lockups, a rounded picture with its title
   under it, no card box. The only glass in the band is the control layer:
   a liquid glass play disc over each picture (the four refracting elements
   base budgets for this section) and the close control of the sheet.
   States, set by video.js:
     .h-video-on        script is running (titles become part of the target)
     .h-video-playing   a picture has become the player, in place (phones)
     .h-video-loading   the player is on its way (a ring turns until it lands)
     .h-video-loaded    the player has landed and fades in over the picture
     .h-video-lifted    the picture has left the page for the sheet
     .h-video-open      the close control under an in-place player is out
     .h-video-in        a poster has arrived and faded in
   Reduced motion: every change is instant. Reduced transparency: solid. */

.hp-video-section {
  --h-video-r: var(--h-r-box, 18px);
  --h-video-shade: 5 7 28;                    /* --h-ink-3 as channels, for shadows on navy */
  position: relative;
  padding: var(--section-pad);
  background: var(--ink);
  color: #fff;
}
.hp-video-section__inner { max-width: var(--max-w); margin: 0 auto; }

/* ── HEAD ─────────────────────────────────────────────────────────────────
   The eyebrow ("YouTube, Seattle Science Foundation") is gone; its meaning
   now lives in the sentence under the headline. */
.h-video-head { max-width: 40rem; }
.hp-video-section__title {
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 5rem);
  font-weight: 900;
  color: #fff;
  line-height: 0.92;
  letter-spacing: -0.01em;
  margin-bottom: 1.15rem;
}
/* 0.68 white on navy is 7.9:1 (the old 0.42 was under 4.5:1). */
.hp-video-section__sub {
  color: rgba(255, 255, 255, 0.68);
  font-size: 1.02rem;
  line-height: 1.6;
  max-width: 34em;
}

/* ── THE PICTURE: frame, poster, the whole picture is the play target ──── */
.h-video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--h-video-r);
  overflow: hidden;
  overflow: clip;
  background: var(--h-ink-3, #05071C);
  isolation: isolate;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 6px rgb(var(--h-video-shade) / 0.3),
    0 26px 60px -30px rgb(var(--h-video-shade) / 0.9);
  transition:
    translate var(--h-t-content) var(--h-ease),
    scale var(--h-spring-dur) var(--h-spring),
    box-shadow var(--h-t-content) var(--h-ease);
}
/* The picture has left for the sheet. No fade either way: the sheet's copy
   sits exactly over it at both ends of the zoom, so the hand-off is seamless. */
.h-video-frame.h-video-lifted { opacity: 0; }
.h-video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;           /* also crops the letterbox bars YouTube puts on the 4:3 sizes */
  transition: scale 0.9s var(--h-ease), opacity var(--h-t-content) var(--h-ease);
}
.h-video-on .h-video-poster:not(.h-video-in) { opacity: 0; }
.h-video-hit {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: inherit;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* The frame clips, so the ring is drawn on the frame itself, outside it. */
.h-video-hit:focus-visible { outline: none; }
.h-video-frame:has(.h-video-hit:focus-visible) { outline: 2px solid #fff; outline-offset: 4px; }
@supports not selector(:has(*)) {
  .h-video-hit:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
}

/* The play disc: base's light liquid glass (refracting on desktop Chromium,
   frosted elsewhere), navy glyph, 4.8:1 against the darkest picture.
   It never takes the pointer itself: the whole picture is the button, and
   the disc answers wherever you aim on it (video.js moves --h-video-d*). */
.h-video-disc {
  --h-video-dx: 0px;
  --h-video-dy: 0px;
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  pointer-events: none;
  translate: var(--h-video-dx) var(--h-video-dy);
  transition:
    background-color var(--h-t) var(--h-ease-out),
    box-shadow var(--h-t) var(--h-ease-out),
    --h-shine var(--h-t) var(--h-ease-out),
    translate 0.6s var(--h-ease-sheet),
    scale var(--h-spring-dur) var(--h-spring),
    opacity var(--h-t) var(--h-ease);
}
.h-video-disc svg { width: 40%; height: 40%; fill: currentColor; }
.h-video-feature .h-video-disc { width: 92px; height: 92px; }

/* Hover: the picture lifts, eases closer and its disc brightens. The title
   (and the labelled Play) are the same target, so pointing at them lifts the
   picture too. The :has() rules sit apart: one unknown selector would void
   a whole list in an older browser. */
@media (hover: hover) and (pointer: fine) {
  .h-video-item:hover .h-video-frame:not(.h-video-playing),
  .h-video-frame:not(.h-video-playing):hover {
    translate: 0 -4px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.14),
      0 4px 10px rgb(var(--h-video-shade) / 0.3),
      0 38px 80px -30px rgb(var(--h-video-shade) / 0.95);
  }
  .h-video-item:hover .h-video-frame:not(.h-video-playing) .h-video-poster,
  .h-video-frame:not(.h-video-playing):hover .h-video-poster { scale: 1.035; }
  .h-video-item:hover .h-video-frame:not(.h-video-playing) .h-video-disc,
  .h-video-frame:not(.h-video-playing):hover .h-video-disc { --hg-tint: var(--hg-tint-hover); --h-shine: 1; scale: 1.06; }
  .h-video-item:hover .h-video-title { color: #fff; }
}
@media (hover: hover) and (pointer: fine) {
  .h-video-feature:has(.h-video-title:hover, .h-video-playbtn:hover) .h-video-frame:not(.h-video-playing) {
    translate: 0 -4px;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.14),
      0 4px 10px rgb(var(--h-video-shade) / 0.3),
      0 38px 80px -30px rgb(var(--h-video-shade) / 0.95);
  }
  .h-video-feature:has(.h-video-title:hover, .h-video-playbtn:hover) .h-video-frame:not(.h-video-playing) .h-video-poster { scale: 1.035; }
  .h-video-feature:has(.h-video-title:hover, .h-video-playbtn:hover) .h-video-frame:not(.h-video-playing) .h-video-disc { --hg-tint: var(--hg-tint-hover); --h-shine: 1; scale: 1.06; }
}
/* Press: the picture gives a touch, the disc gives more, both spring back. */
.h-video-frame:not(.h-video-playing):active { scale: 0.985; transition-duration: var(--h-t-press); transition-timing-function: var(--h-ease-out); }
.h-video-hit:active .h-video-disc { scale: 0.9; --h-shine: 1; transition-duration: var(--h-t-press); transition-timing-function: var(--h-ease-out); }

/* ── PLAYING IN PLACE (phones) ─────────────────────────────────────────── */
.h-video-frame.h-video-playing .h-video-disc { opacity: 0; scale: 0.8; }
.h-video-frame.h-video-playing .h-video-hit { visibility: hidden; transition: visibility 0s var(--h-t); }
.h-video-embed {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  transition: opacity 0.45s var(--h-ease);
}
.h-video-loaded > .h-video-embed { opacity: 1; }

/* The ring that turns only while a player is really on its way, and only
   after a beat, so a fast load never flashes it. */
.h-video-spin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(11, 15, 46, 0.62) padding-box;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-top-color: #fff;
  box-shadow: 0 0 0 7px rgba(11, 15, 46, 0.62);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--h-t-quick) var(--h-ease-out);
}
.h-video-loading > .h-video-spin {
  opacity: 1;
  transition: opacity var(--h-t) var(--h-ease) 0.35s;
  animation: h-video-turn 0.9s linear infinite;
}
.h-video-loaded > .h-video-spin { animation: none; opacity: 0; }
@keyframes h-video-turn { to { rotate: 1turn; } }

/* The close control slides open under the player and folds away after. */
.h-video-bar {
  align-self: stretch;
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--h-spring-smooth-dur) var(--h-spring-smooth);
}
.h-video-bar > div {
  min-height: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  translate: 0 -6px;
  transition: opacity var(--h-t-quick) var(--h-ease-std), translate var(--h-t) var(--h-ease);
}
.h-video-bar.h-video-open { grid-template-rows: 1fr; }
.h-video-bar.h-video-open > div { opacity: 1; translate: none; transition-delay: 90ms; }
.h-video-bar .h-btn { margin: 0.75rem 0 0.15rem; }
.h-video-close svg,
.h-video-sheet__close svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.h-video-close svg { width: 14px; height: 14px; }

/* ── THE FEATURED FILM ─────────────────────────────────────────────────── */
.h-video-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 4.5vw, 4.25rem);
  align-items: center;
  margin-top: clamp(2.75rem, 5vw, 4rem);
}
.h-video-feature__text { display: flex; flex-direction: column; align-items: flex-start; }
.h-video-feature__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 2.7vw, 2.6rem);
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: #fff;
  text-wrap: balance;
  margin-bottom: 1.5rem;
}

/* Two plain choices: play it here (the white pill, primary) or go to YouTube. */
.h-video-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.6rem; }
.h-video-playbtn { gap: 0.55rem; padding-left: 1.35rem; }
.h-video-playbtn svg { width: 15px; height: 15px; fill: currentColor; }
.h-video-feature.h-video-playing .h-video-playbtn { display: none; }

/* A plain link for anyone who wants YouTube itself. */
.h-video-yt {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: -0.005em;
  color: rgba(255, 255, 255, 0.86);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, 0.32);
  text-underline-offset: 0.32em;
  transition: color var(--h-t) var(--h-ease-out), text-decoration-color var(--h-t) var(--h-ease-out);
}
.h-video-yt svg {
  width: 0.78em;
  height: 0.78em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: translate var(--h-spring-dur) var(--h-spring);
}
@media (hover: hover) and (pointer: fine) {
  .h-video-yt:hover { color: #fff; text-decoration-color: rgba(255, 255, 255, 0.85); }
  .h-video-yt:hover svg { translate: 2px -2px; }
}

/* ── THE SHELF: three more films ───────────────────────────────────────── */
.h-video-shelf {
  list-style: none;
  margin: clamp(3rem, 5vw, 4.25rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem clamp(1.25rem, 2.2vw, 2rem);
}
.h-video-item { display: flex; flex-direction: column; min-width: 0; }
.h-video-item .h-video-title {
  margin-top: 1.05rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.38;
  letter-spacing: -0.012em;
  color: rgba(255, 255, 255, 0.9);
  text-wrap: balance;
  transition: color var(--h-t) var(--h-ease-out);
}
.h-video-on [data-h-video] .h-video-title { cursor: pointer; }

/* ── SEE ALL ───────────────────────────────────────────────────────────── */
.hp-video-section__cta { display: flex; justify-content: center; margin-top: clamp(3.25rem, 5.5vw, 4.75rem); }

/* ── THE SHEET (wide screens): the picture grows out of the page ───────── */
.h-video-sheet {
  --h-video-w: min(1120px, calc(100vw - 7rem), calc((100vh - 15rem) * 16 / 9));
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  overflow: hidden;
  overscroll-behavior: contain;
}
@supports (height: 100dvh) {
  .h-video-sheet { --h-video-w: min(1120px, calc(100vw - 7rem), calc((100dvh - 15rem) * 16 / 9)); }
}
.h-video-sheet[open] { display: grid; place-items: center; }
.h-video-sheet::backdrop { background: transparent; }
/* The page stays visible behind, frosted and dimmed, so you never feel you left it. */
.h-video-sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgba(11, 15, 46, 0.8);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
}
.h-video-sheet__stage { position: relative; width: var(--h-video-w); display: grid; gap: 0.9rem; }
.h-video-sheet__top { display: flex; justify-content: flex-end; }
.h-video-sheet__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--h-video-r);
  overflow: hidden;
  background: var(--h-ink-3, #05071C);
  transform-origin: 0 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 44px 110px -34px rgb(var(--h-video-shade) / 0.95);
}
.h-video-sheet__poster { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.h-video-sheet__cap { display: flex; align-items: flex-start; justify-content: space-between; gap: 2rem; }
.h-video-sheet__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: #fff;
}
.h-video-sheet__src { margin-top: 0.15rem; font-size: 0.88rem; line-height: 1.4; color: rgba(255, 255, 255, 0.66); }
.h-video-sheet__cap .h-video-yt { flex: none; }

/* Screen reader only: the polite "Playing ..." readout. */
.h-video-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── RESPONSIVE ────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .h-video-feature { grid-template-columns: 1fr; }
  .h-video-feature__text { margin-top: 1.15rem; }
  .h-video-feature__title { font-size: clamp(1.5rem, 5.4vw, 2rem); margin-bottom: 1.1rem; }
}
/* Below 900px films play in place (video.js), so every picture is full width:
   a film never plays in a third of a tablet screen. */
@media (max-width: 899px) {
  .h-video-shelf { grid-template-columns: 1fr; gap: 2.25rem; }
}
@media (max-width: 699px) {
  .h-video-feature .h-video-disc { width: 76px; height: 76px; }
}

/* ── PREFERENCES ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .h-video-frame, .h-video-poster, .h-video-disc, .h-video-embed, .h-video-bar, .h-video-bar > div, .h-video-yt svg, .h-video-title {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .h-video-disc { translate: none; }
  .h-video-loading > .h-video-spin { animation: none; border-top-color: rgba(255, 255, 255, 0.7); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .h-video-sheet__scrim { background: rgba(11, 15, 46, 0.97); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (forced-colors: active) {
  .h-video-frame { border: 1px solid CanvasText; }
  .h-video-disc { border: 1px solid ButtonText; }
}