/* Original visual utilities and grain are in assets/source.css.
   These rules only supply behavior/accessibility and narrow-screen containment. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body.menu-open { overflow: hidden; }
:focus-visible { outline: 2px solid #A67C6D; outline-offset: 5px; }
section:focus, #main-content:focus { outline: none; }
.skip-link {
  position: fixed; top: 8px; left: 8px; z-index: 100;
  padding: 10px 16px; color: #2D2926; background: #F8F5F2;
  transform: translateY(-160%);
}
.skip-link:focus { transform: translateY(0); }
#mobile-menu { overflow-y: auto; overscroll-behavior: contain; }
#reel-strip { overscroll-behavior-x: contain; }
/* On intermediate widths the source's centered reel would clip its first
   cards beyond the scroll origin. Keep the first reel reachable when overflowing. */
@media (min-width: 768px) and (max-width: 1255px) {
  #reel-strip { justify-content: flex-start; }
  #site-header nav { gap: clamp(8px, 1.5vw, 28px); }
  #site-header nav a { letter-spacing: .18em; }
}
@media (max-height: 740px) and (max-width: 767px) {
  #mobile-menu { justify-content: flex-start; padding-top: 100px; padding-bottom: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}