/* Sticky wrappers keep the site's location and current subsection in view. */
:root { --site-header-height: 86px; }
#site-header {
  position: sticky;
  top: 0;
  z-index: 60;
}
#site-header .site-header { position: relative; top: auto; }
#demo-notice {
  position: sticky;
  top: var(--site-header-height);
  z-index: 50;
}
html.section-navigation-active:not(.journey-active) { scroll-padding-top: 0; }
@media (max-width: 760px) {
  :root { --site-header-height: 72px; }
}

/* The same warm location cue follows route links, selected views and contents. */
:is(.nav-link, .tab, .fx-tab, .ex-tabs > button, .si-subnav-links > a,
    .mobile-menu a, .nav-drop a, .account-nav a, .account-mobile-nav a,
    .si-faq-categories button, .sidebar-filter, .si-story-aside button) {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.main-nav .nav-link.active,
.nav-drop a[aria-current='page'],
.mobile-menu a[aria-current='page'],
.footer-links a[aria-current='page'] {
  color: #f0d5a2;
  text-shadow: 0 0 18px #d8bc803b;
}
.main-nav .nav-link.active::after {
  box-shadow: 0 0 12px #d8bc8066;
}
.nav-drop a[aria-current='page'],
.mobile-menu a[aria-current='page'],
.account-nav a[aria-current='page'],
.account-mobile-nav a[aria-current='page'] {
  background: linear-gradient(100deg, #d8bc8015, #d8bc8003);
  box-shadow: inset 2px 0 #d8bc80, inset 0 0 18px #d8bc8007;
  color: #edcf96;
}
.footer-links a[aria-current='page'] {
  text-decoration: underline;
  text-decoration-color: #d8bc8075;
  text-underline-offset: 5px;
}

.tab.active:not([aria-selected='false']),
.tab[aria-selected='true'],
.tab[aria-current='page'],
.fx-tab[aria-selected='true'],
.ex-tabs > button[aria-selected='true'],
.si-subnav-links > a[aria-current='page'] {
  color: #f0d5a2;
  background: linear-gradient(0deg, #d8bc8010, transparent 82%);
  text-shadow: 0 0 16px #d8bc802a;
  box-shadow: inset 0 -2px #d8bc80, inset 0 -10px 16px -15px #ecd49b;
}
.fx-tab[aria-selected='true']::after,
.ex-tabs > button[aria-selected='true']::after {
  box-shadow: 0 0 12px #d8bc8066;
}
.si-faq-categories button[aria-pressed='true'],
.si-shop-slots button[aria-pressed='true'],
.sidebar-filter.active {
  color: #edcf96;
  border-color: #d8bc8066;
  background: #d8bc8012;
  box-shadow: inset 0 0 18px #d8bc8006, 0 0 12px #d8bc800b;
}

/* Story contents follow the three complete reading sections. */
.si-story-aside {
  top: calc(var(--section-header-offset, 86px) + 20px);
}
.si-story-aside nav { gap: 6px; }
.si-story-aside button {
  position: relative;
  padding: 11px 12px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: 5px;
}
.si-story-aside button[aria-current='location'] {
  color: #f1d5a0;
  border-color: #d8bc803d;
  background: linear-gradient(105deg, #d8bc801a, #d8bc8004);
  box-shadow: inset 2px 0 #ddc18a, 0 0 18px #d8bc800c;
  text-shadow: 0 0 18px #d8bc802f;
}
.si-story-aside button[aria-current='location'] .icon {
  color: #e4c68d;
  filter: drop-shadow(0 0 5px #d8bc8040);
}
.si-story-aside button:focus-visible {
  outline: 2px solid #f0d5a2;
  outline-offset: 3px;
}
.si-story-content [tabindex='-1']:not([data-story-panel]) {
  scroll-margin-top: calc(var(--section-header-offset, 86px) + 24px);
}

@media (max-width: 900px) {
  .si-page-our-story .si-story-aside {
    position: sticky;
    top: var(--section-header-offset, 72px);
    z-index: 15;
    padding: 8px 0;
    margin: 0 -8px;
    background: #080f1bf5;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid #d8bc8028;
  }
  .si-story-aside nav {
    padding: 2px 8px;
    gap: 7px;
    border: 0;
    overscroll-behavior-x: contain;
  }
  .si-story-aside button {
    min-height: 40px;
    padding: 10px 12px;
    font-size: 10px;
  }
  .si-story-aside button[aria-current='location'] {
    box-shadow: inset 0 -2px #ddc18a, 0 0 18px #d8bc800c;
  }
  .si-story-content [tabindex='-1']:not([data-story-panel]) {
    scroll-margin-top: calc(var(--section-header-offset, 72px) + var(--section-navigation-height, 48px) + 32px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .si-story-aside button,
  .nav-link,
  .tab,
  .fx-tab,
  .ex-tabs > button,
  .si-subnav-links > a { transition: none; }
}

@media (forced-colors: active) {
  .si-story-aside button[aria-current='location'],
  .tab.active,
  .fx-tab[aria-selected='true'],
  .ex-tabs > button[aria-selected='true'],
  .si-subnav-links > a[aria-current='page'] {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}