:root { scroll-behavior: smooth; }
#featured, #portfolio, #services, #cta { scroll-margin-top: 76px; }
#main [role="button"]:focus-visible { outline: 2px solid #336bd3; outline-offset: 4px; }
#portfolio video[role="button"]:focus-visible { outline-offset: -4px; }
#main [data-emily-preview] { cursor: pointer; }
#main [data-emily-preview]:hover { text-decoration: underline; }
.emily-preview-dialog {
  width: min(420px, calc(100% - 32px));
  padding: 24px;
  border: 1px solid #d6d6d6;
  border-radius: 20px;
  background: #fff;
  color: #151515;
  box-shadow: 0 16px 48px #17171744;
  font: 16px/1.5 system-ui, sans-serif;
}
.emily-preview-dialog::backdrop { background: #15151577; }
.emily-preview-dialog h2 { margin: 0 45px 8px 0; font-size: 22px; }
.emily-preview-dialog p { margin: 0; }
.emily-preview-dialog button {
  float: right;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #121111;
  color: #fff;
  font: 22px/1 system-ui, sans-serif;
  cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
}