/* The Watch page (session 09 pilot, 2026-11-01; claude/sessions/session-09-part-29b.md, Part 29g).
   Canonical copy: _build/templates/watch.css; a session that has watch.html carries it as assets/watch.css.
   A click-to-load poster for our YouTube video: nothing from YouTube loads until the reader presses play. */
.watch-video{margin:18px 0 8px;border-radius:12px;overflow:hidden;background:#2b2620}
.watch-poster{position:relative;display:block;aspect-ratio:16/9;color:#fff;text-decoration:none}
.watch-poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.watch-play{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:72px;height:72px;
  border-radius:50%;background:rgba(20,18,15,.8);box-shadow:inset 0 0 0 2px #fff}
.watch-play::after{content:"";position:absolute;left:28px;top:21px;border-style:solid;
  border-width:15px 0 15px 24px;border-color:transparent transparent transparent #fff}
.watch-cta{position:absolute;left:0;right:0;bottom:0;min-height:44px;box-sizing:border-box;display:flex;
  align-items:center;justify-content:center;padding:10px 16px;background:rgba(20,18,15,.86);color:#fff;
  font-weight:600;text-align:center}
.watch-poster:hover .watch-play{background:#14120f}
.watch-poster:focus-visible{outline:3px solid var(--focus,#c9a227);outline-offset:-3px}
.watch-frame{position:relative;aspect-ratio:16/9}
.watch-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.watch-video.is-soon{background:var(--card)}
.watch-video.is-soon img{width:100%;aspect-ratio:16/9;height:auto;object-fit:cover;display:block}
.watch-soon{margin:0;padding:14px 16px;color:var(--ink);border:1px solid var(--rule);border-top:0;
  border-radius:0 0 12px 12px}
.watch-note a{display:inline-block;min-height:24px}
@media(max-width:560px){.watch-play{width:60px;height:60px}
  .watch-play::after{left:23px;top:17px;border-width:13px 0 13px 20px}}
@media print{.watch-video,.watch-note{display:none}}