/* ---- the video lightbox: a real <dialog>, so Escape, the focus trap and the backdrop are the
   browser's rather than hand-written. The iframe is built on open and thrown away on close, so
   nothing loads from Vimeo until somebody presses a strip, and the audio stops when it shuts. ---- */
.lb { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; }
.lb[open] { display: grid; place-items: center; }
.lb::backdrop { background: rgba(5, 5, 20, .92); }
.lb .frame { width: min(1180px, 92vw); aspect-ratio: 16 / 9; background: #000; border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-main); overflow: hidden; }
.lb iframe { display: block; width: 100%; height: 100%; border: 0; }
.lb .x { position: fixed; top: var(--sp-4); right: var(--sp-4); width: 44px; height: 44px; display: grid; place-items: center; border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-small); background: var(--background); color: var(--text-heading); cursor: pointer; }
.lb .x:hover { border-color: var(--border); }
.lb .x:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* ---- the record's filter (owner-directed 2026-09-24, after jmpaul.com/timeline) ---- */
.filters { margin-bottom: var(--sp-6); }
.filters .chips { grid-column: 2; padding-left: 40px; display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.chip { appearance: none; font-family: var(--f-03); font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-heading); background: transparent; border: var(--border-w) solid var(--border-subtle); border-radius: var(--radius-small); padding: 8px 14px; cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease; }
.chip .n { color: var(--text); margin-left: 4px; }
.chip:hover { border-color: var(--link); }
.chip[aria-pressed="true"] { background: var(--btn-bg); border-color: transparent; color: var(--btn-text); }
.chip[aria-pressed="true"] .n { color: var(--btn-text); }
.chip .icon.ic { font-size: 1.25em; vertical-align: -.28em; margin-right: .45em; color: var(--link); }
.chip[aria-pressed="true"] .icon.ic { color: var(--btn-text); font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.chip:hover .icon.ic { font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.filters .shown { color: var(--text); margin-left: var(--sp-2); }
.timeline .event[hidden], .timeline .chapter-label[hidden] { display: none; }
/* ---- motion for the filter (owner-directed 2026-09-24): the pressed state fades in and its icon pops;
   rows leave by fading up, then the matching rows rise in one after another; the count cross-fades ---- */
.chip { transition: border-color .2s ease, background-color .24s ease, color .24s ease, transform .15s ease; }
.chip:active { transform: scale(.96); }
.chip .n { transition: color .24s ease; }
.chip.pop .icon.ic { animation: chip-pop .42s cubic-bezier(.2, .7, .2, 1); }
@keyframes chip-pop { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.3) rotate(-8deg); } 100% { transform: scale(1) rotate(0); } }
.filters .shown { transition: opacity .2s ease; }
.filters .shown.fade { opacity: 0; }
.timeline .chapter-label { transition: opacity .4s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
.timeline .leaving { opacity: 0 !important; transform: translateY(-8px) !important; transition: opacity .16s ease, transform .16s ease !important; }
.timeline .entering { opacity: 0; transform: translateY(14px); transition: none; }
@media (prefers-reduced-motion: reduce) {
  .chip, .chip .n, .filters .shown, .timeline .chapter-label { transition: none; }
  .chip:active { transform: none; }
  .chip.pop .icon.ic { animation: none; }
}
@media (max-width: 860px) { .filters .sp { display: none; } .filters .chips { grid-column: 1; padding-left: 0; } }
@media (prefers-reduced-motion: reduce) { .chip { transition: none; } }