.video-library{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#202020;color:#eee;box-sizing:border-box;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#666 #202020}
.video-library::backdrop{background:#000a}
.video-library-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:26px 48px;background:#292929;border-bottom:1px solid #ffffff12}
.video-library-head h2{margin:0;font-size:22px;font-weight:300;letter-spacing:.12em;color:#fff}
.video-library-close{display:grid;place-items:center;width:44px;height:44px;padding:10px;border:0;background:none;color:#fff;cursor:pointer}
.video-library-close svg{width:24px;fill:none;stroke:currentColor;stroke-width:1.3}
.video-library-close:hover svg,.video-library-close:focus-visible svg{stroke-width:2}
.video-library-close:focus-visible{outline:1px solid #aaa;outline-offset:2px}
.video-library-body{max-width:1240px;margin:auto;padding:42px 48px 64px}
.video-library-intro{max-width:650px;margin:0 0 32px;font-size:14px;line-height:1.8;color:#aaa}
.video-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 24px}
.video-library-grid .video-card:first-child{grid-column:1/-1;max-width:960px;width:100%;justify-self:center}
.video-card{min-width:0;color:#eee}
.video-stage{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;background:#101010}
.video-stage video,.video-stage iframe{display:block;width:100%;height:100%;border:0;background:#000;object-fit:contain}
.video-card h3{margin:16px 0 6px;font-size:16px;line-height:1.5;font-weight:400;letter-spacing:.02em;color:#eee}
.video-card p{margin:0;font-size:12px;line-height:1.7;color:#999}
.rwh-footer-videos{display:inline-block;margin-top:18px;font-size:13px;letter-spacing:.08em;text-decoration:underline;text-underline-offset:5px;color:#ddd}
.video-library{width:100vw;height:100dvh}
@media(max-width:767px){.video-library-head{padding:14px 20px}.video-library-head h2{font-size:18px}.video-library-body{padding:26px 24px 40px}.video-library-grid{grid-template-columns:minmax(0,1fr);gap:28px}.video-library-grid .video-card:first-child{grid-column:auto}.video-library-intro{font-size:13px;margin-bottom:24px}.video-card h3{font-size:14px;margin-top:12px}.project-film{width:100%;padding-bottom:24px}.project-film>h2{top:22px;left:24px}.project-film .video-stage{height:calc(100svh - 154px)}.project-film .video-card h3,.project-film .video-card p{margin-left:24px;margin-right:24px}}
html:has(.video-library[open]){overflow:hidden;scrollbar-gutter:auto}
.project-film{position:relative;width:100%;margin:0;max-width:none;padding:0 0 32px;box-sizing:border-box}
.project-film>h2{position:absolute;top:28px;left:40px;z-index:1;margin:0;font-size:13px;font-weight:400;letter-spacing:.13em;color:#ccc;pointer-events:none;text-shadow:0 1px 8px #000}
.project-film .video-stage{height:calc(100svh - 108px);aspect-ratio:auto}
.project-film .video-card h3,.project-film .video-card p{margin-left:40px;margin-right:40px}
@media(max-width:767px){.project-film{padding-bottom:24px}.project-film>h2{top:22px;left:24px}.project-film .video-stage{height:calc(100svh - 154px)}.project-film .video-card h3,.project-film .video-card p{margin-left:24px;margin-right:24px}}

/* Full-viewport playback: preserve source pixels/aspect ratio, crop overflow only. */
.video-stage video{object-fit:cover}
.video-library .video-stage{height:100vh;height:100svh;aspect-ratio:auto}
.video-library-body{max-width:none;margin:0;padding:0 0 32px}
.video-library-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px}
.video-library-grid .video-card:first-child{grid-column:auto;max-width:none;width:100%}
.video-library .video-card h3,.video-library .video-card p{margin-left:clamp(20px,4vw,48px);margin-right:clamp(20px,4vw,48px)}
.video-library-head{height:0;min-height:0;padding:0;border:0;overflow:visible;background:transparent}
.video-library-head h2{position:absolute;top:26px;left:clamp(20px,4vw,48px);text-shadow:0 1px 8px #000}
.video-library-close{position:absolute;top:16px;right:20px;background:#0006;border-radius:50%}
.video-library-intro{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
.project-film>h2{top:28px}
@media(max-width:767px){.project-film>h2{top:22px}.video-library-head h2{top:24px}.video-library-close{right:12px}}

.video-stage video:fullscreen{width:100%;height:100%;object-fit:contain;background:#000}
.video-stage video:-webkit-full-screen{width:100%;height:100%;object-fit:contain;background:#000}
@media(orientation:landscape) and (max-height:600px){.project-film .video-stage{height:100dvh}.video-library .video-stage{height:100dvh}}

/* Inline mobile films use a landscape frame; native fullscreen stays independent. */
@media(max-width:767px),(pointer:coarse) and (max-width:1024px){
  .project-film .video-stage,.video-library .video-stage{height:auto;aspect-ratio:16/9}
  .video-stage video{object-fit:contain}
  .project-film>h2{top:16px;left:16px}
}

/* Vimeo keeps an undistorted landscape frame on every screen. */
.project-film .video-stage:has([data-video-provider="vimeo"]),
.video-library .video-stage:has([data-video-provider="vimeo"]){height:auto;aspect-ratio:16/9}
.video-stage>[data-video-provider="vimeo"]{position:absolute;inset:0;width:100%;height:100%}
@media (orientation:landscape) and (max-height:500px) and (max-width:1024px){
 .project-film .video-stage:has([data-video-provider="vimeo"]){height:calc(100svh - 76px);aspect-ratio:auto}
 .project-film .video-stage>[data-video-provider="vimeo"]{width:min(100%,calc((100svh - 76px)*16/9));height:100%;left:50%;transform:translateX(-50%)}
}
