/* Videos (#/videos). Scoped under .inner-videos. Loads after mish-identity.css, which gives the page its paper layout.
   Markup: index.html (#p-videos). The tiles are written by tools/videos-sync.mjs between the videos markers.
   Each tile is a square card: the 16:9 thumbnail runs edge to edge across its top, then the date and the title as text.
   The whole card is one link. The hover lift is CSS only and stops under reduced motion and under Pause motion. */

.inner-videos{overflow-x:clip}
.video-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--mish-space-4);margin:var(--mish-space-5) 0 0;padding:0;list-style:none}
@media (width >= 30em){.video-grid{grid-template-columns:repeat(auto-fill,minmax(200px,240px));justify-content:start}}
.video-card{min-width:0}
.video-tile{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;box-sizing:border-box;width:100%;aspect-ratio:1/1;min-height:0;overflow:hidden;padding:0;border:1px solid var(--mish-rule);border-radius:var(--mish-radius-panel);background:var(--mish-lift);color:var(--mish-text);text-decoration:none;transition:transform .2s ease,border-color .2s ease}
.video-tile:hover{transform:translateY(-3px);border-color:var(--mish-signal)}
.video-tile:focus-visible{outline:var(--mish-focus-width) solid var(--mish-focus);outline-offset:var(--mish-focus-offset)}
.video-thumb{display:block;flex:none;aspect-ratio:16/9;overflow:hidden;background:var(--mish-deep)}
.video-thumb img{display:block;width:100%;height:100%;object-fit:cover}
.video-meta{display:flex;flex:1 1 auto;flex-direction:column;gap:6px;min-height:0;padding:var(--mish-space-3)}
.video-meta time{font:var(--mish-weight-mono) var(--mish-step-label)/1.2 var(--mish-font-mono);letter-spacing:var(--mish-track-label);text-transform:uppercase;color:var(--mish-dim)}
.video-title{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:3;font:var(--mish-weight-semibold) .8125rem/1.3 var(--mish-font-body);color:var(--mish-light)}
/* Titles step down (13px desktop, 11px phone) so both current episode titles read in full on a 240px and a 171px tile. */
@media (width < 30em){.video-meta{gap:1px;padding:var(--mish-space-1) 10px}.video-title{font-size:.6875rem;line-height:1.15;-webkit-line-clamp:4}}
.inner-videos-channel{margin:var(--mish-space-6) 0 0}
@media (prefers-reduced-motion:reduce){.video-tile{transition:none}.video-tile:hover{transform:none}}
:root[data-motion="paused"] .video-tile{transition:none}
:root[data-motion="paused"] .video-tile:hover{transform:none}