*{box-sizing:border-box}body{margin:0;background:#fff;color:#302a31;font:16px/1.4 'Source Sans Pro',system-ui,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button,a{touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible{outline:2px solid #302a31;outline-offset:4px}[hidden]{display:none!important}

/* Match the image gallery's compact, edge-to-edge grid. */
.video-main{padding:0 4px 4px}
.video-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.video-card{position:relative;min-width:0;aspect-ratio:1;scroll-margin-top:80px;background:#f3f1ee}
.video-play{position:relative;display:block;width:100%;height:100%;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.video-play>img{display:block;width:100%;height:100%;object-fit:cover;transition:filter 160ms ease}
#ember-cast .video-play>img,#harbor-goodbye .video-play>img{object-position:left center}
.video-play-icon{position:absolute;inset:0;display:grid;place-content:center;pointer-events:none}
.video-play-icon svg{width:44px;height:44px;padding:13px;border-radius:50%;background:#18151a66;backdrop-filter:blur(6px);fill:currentColor;transition:background 160ms ease}
.video-play:hover .video-play-icon svg{background:#18151a99}
.video-play:hover>img{filter:brightness(.94)}
.video-play:focus-visible{outline:2px solid #fff;outline-offset:-4px;box-shadow:inset 0 0 0 2px #302a31}
.video-duration{position:absolute;bottom:8px;right:8px;font-size:12px;line-height:1;background:#18151a77;color:#fff;padding:5px 6px;border-radius:4px;pointer-events:none}
.video-footer{display:flex;justify-content:flex-end;margin:0;padding:12px 24px;color:#817b83;font-size:12px}
.video-footer a{min-height:44px;display:inline-flex;align-items:center}
.video-footer a:hover{text-decoration:underline}

/* Full clips retain their original framing in one accessible player. */
#videoPreview{width:min(1040px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);padding:0;border:1px solid #ffffff70;border-radius:16px;color:#302a31;background:#fff;overflow:auto;box-shadow:0 24px 90px #100b1640}
#videoPreview::backdrop{background:#17121bc4;backdrop-filter:blur(5px)}
.video-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 16px 12px 24px}
#videoPreviewTitle{margin:0;font:400 26px/1.2 Georgia,serif;overflow-wrap:anywhere}
#closeVideoPreview{display:grid;place-content:center;flex:none;width:44px;height:44px;border:1px solid #eee9ef;border-radius:50%;background:#fff;color:#625e64}
#closeVideoPreview:hover{background:#f3f1ee}
#closeVideoPreview svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
#videoPreviewPlayer{display:block;width:100%;aspect-ratio:16/9;max-height:calc(100dvh - 208px);object-fit:contain;background:#111}
.video-preview-footer{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:16px;padding:12px 24px}
.video-caption{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex:none}
.video-continue{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:72px;min-height:44px;padding:10px 0;font-size:16px;white-space:nowrap}
.video-continue:hover{text-decoration:underline;text-underline-offset:3px}
.video-continue svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}
#videoPreviewEdit{margin-left:auto}
.video-notice{width:100%;margin:0;color:#625e64;font-size:14px}
.video-notice:empty{display:none}
body:has(#videoPreview[open]){overflow:hidden}
@media(max-width:1100px){.video-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:700px){
  .video-main{padding:0 3px 3px}
  .video-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:3px}
  .video-duration{bottom:5px;right:5px;padding:4px 5px}
  .video-play-icon svg{width:36px;height:36px;padding:11px}
  .video-footer{padding:12px 14px;font-size:14px}
  #videoPreview{width:calc(100vw - 24px);max-height:calc(100dvh - 24px);border-radius:12px}
  .video-preview-heading{padding:10px 12px 10px 16px}
  #videoPreviewTitle{font-size:22px}
  #videoPreviewPlayer{max-height:calc(100dvh - 184px)}
  .video-preview-footer{padding:12px 16px;flex-wrap:wrap;gap:8px}
  .video-notice{font-size:16px}
}
@media(max-width:360px){
  .video-caption{flex-direction:column;align-items:flex-start;gap:0}
  #videoPreviewEdit{margin-left:0}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}