/* Site nav for the visual study guides — same look as the Playbook nav.
   The guides lock html/body to the viewport height, so the bar is fixed
   (not sticky) and a spacer holds its place in the flow. The guide's own
   sections already carry a 64px scroll margin, which matches this bar. */
.arl-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 70;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px;
  background: rgba(250, 249, 246, 0.86);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid #ebe8e1;
  font-family: "Karla", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.arl-nav-space { height: 64px; }
.arl-brand { display: inline-flex; align-items: center; -webkit-tap-highlight-color: transparent; transition: scale 140ms cubic-bezier(0.23, 1, 0.32, 1); }
.arl-brand:active { scale: 0.94; }
.arl-brand img { display: block; height: 34px; width: auto; }
.arl-links { display: flex; gap: 30px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.arl-links a { color: #5c554c; text-decoration: none; transition: color 220ms ease; }
@media (hover: hover) and (pointer: fine) { .arl-links a:hover { color: #c97a58; } }
.arl-links a:focus-visible, .arl-brand:focus-visible { outline: 2px solid #c97a58; outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-transparency: reduce) { .arl-nav { background: #faf9f6; -webkit-backdrop-filter: none; backdrop-filter: none; } }

/* Under the guides' own 980px breakpoint they show a sticky contents bar,
   so the site bar scrolls away instead of stacking on top of it. */
@media (max-width: 979px) {
  .arl-nav { position: absolute; padding: 0 18px; height: 56px; }
  .arl-nav-space { height: 56px; }
  .arl-brand img { height: 30px; }
  .arl-links { gap: 0; font-size: 12px; }
  .arl-links a:not(.arl-back) { display: none; }
}