/* Shared bits for all directions: reset, video modal, scroll reveal. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

.yt-modal{border:0;padding:0;background:transparent;width:min(960px,calc(100vw - 32px));overflow:visible}
.yt-modal::backdrop{background:rgba(9,9,11,.8)}
.yt-modal iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block;background:#000}
.yt-close{position:absolute;top:-44px;right:0;width:36px;height:36px;border-radius:50%;border:0;background:#fafafa;color:#18181b;font-size:22px;line-height:1;cursor:pointer}

@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
  .reveal.in{opacity:1;transform:none}
}