/* =====================================================================
   ST-CHROME — shared floating header + Menu overlay for all inside pages.
   Replaces the legacy .site-header / nav.nav with the gateway-style chrome
   so every page shares one consistent, immersive navigation.  (stx-*)
   ===================================================================== */

/* Retire the old navs (kept in markup for no-JS fallback, hidden when chrome loads) */
.site-header, nav.nav { display: none !important; }

:root { --stx-ease: cubic-bezier(.16,1,.3,1); }

/* ---- fixed top bar ---- */
.stx-top {
  position: fixed; inset: 0 0 auto 0; z-index: 1000;
  display: flex; align-items: center;
  padding: 14px clamp(16px,3vw,34px); min-height: 64px;
  transition: background .3s ease, backdrop-filter .3s ease;
}
.stx-top.stx-scrolled {
  background: linear-gradient(180deg, rgba(16,24,39,.94) 0%, rgba(16,24,39,.7) 60%, rgba(16,24,39,0) 100%);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.stx-word {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  display: inline-flex; align-items: center; gap: 10px; text-decoration: none; cursor: pointer;
}
.stx-word img { width: 26px; height: 26px; display: block; flex: none; }
.stx-word b {
  font: 600 clamp(14px,2vw,17px)/1 "Instrument Sans", system-ui, sans-serif;
  letter-spacing: .32em; padding-left: .32em; color: #F4F2FB;
}
.stx-menu-btn {
  margin-left: auto; cursor: pointer; display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12); background: rgba(18,16,30,.5);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: #F4F2FB; font: 600 14px/1 "Instrument Sans", system-ui, sans-serif;
  transition: .22s var(--stx-ease);
}
.stx-menu-btn:hover { border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
.stx-menu-btn .bars { display: flex; flex-direction: column; gap: 3px; }
.stx-menu-btn .bars i { display: block; width: 15px; height: 1.5px; background: currentColor; border-radius: 2px; }

/* ---- full-screen menu overlay ---- */
.stx-menu {
  position: fixed; inset: 0; z-index: 1001; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(28px,7vw,80px);
  background: rgba(8,9,15,.82); backdrop-filter: blur(22px) saturate(1.1); -webkit-backdrop-filter: blur(22px) saturate(1.1);
  opacity: 0; visibility: hidden; transition: opacity .4s var(--stx-ease), visibility .4s;
}
.stx-menu.stx-open { opacity: 1; visibility: visible; }
.stx-menu__close {
  position: absolute; top: 14px; right: clamp(16px,3vw,34px);
  width: 48px; height: 48px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12);
  background: rgba(18,16,30,.5); color: #F4F2FB; cursor: pointer; display: grid; place-items: center;
}
.stx-menu__close svg { width: 18px; height: 18px; }
.stx-menu__inner { max-width: 820px; margin: 0 auto; width: 100%; }
.stx-menu__eyebrow { font: 600 12px/1 "Instrument Sans",system-ui,sans-serif; letter-spacing: .18em; text-transform: uppercase; color: rgba(244,242,251,.5); margin-bottom: 28px; }
.stx-menu__grid { display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: repeat(3,auto); grid-auto-flow: column; gap: 10px 72px; }
.stx-menu a {
  display: flex; align-items: baseline; gap: 14px; text-decoration: none; color: #F4F2FB;
  font: 500 clamp(26px,4.2vw,37px)/1.28 "Newsreader", Georgia, serif; padding: 8px 0; transition: .22s var(--stx-ease);
}
.stx-menu a span { font: 500 13px/1 "Instrument Sans",system-ui,sans-serif; color: rgba(244,242,251,.5); }
.stx-menu a:hover { color: transparent; background: linear-gradient(135deg,#4C2557,#5B3CF0,#38BFF8); -webkit-background-clip: text; background-clip: text; transform: translateX(6px); }
.stx-menu a:hover span { -webkit-text-fill-color: rgba(244,242,251,.5); }
.stx-menu__foot { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: center; }
.stx-menu__foot a { font: 500 14px/1 "Instrument Sans",system-ui,sans-serif; color: rgba(244,242,251,.74); }
.stx-menu__foot a:hover { color: #F4F2FB; transform: none; background: none; -webkit-text-fill-color: currentColor; }
.stx-menu__login {
  border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: 11px 22px !important;
  transition: .22s var(--stx-ease);
}
.stx-menu__login:hover { border-color: rgba(255,255,255,.3); }

@media (max-width: 860px) { .stx-menu__grid { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 2px; } }
@media (max-width: 520px) { .stx-menu-btn .lbl { display: none; } .stx-menu-btn { width: 46px; justify-content: center; padding: 0; } }
@media (prefers-reduced-motion: reduce) { .stx-top, .stx-menu, .stx-menu a, .stx-menu-btn { transition-duration: .001s !important; } }

/* ════ LIQUID GLASS + TACTILE — 2026 polish ════ */
.stx-menu-btn, .stx-menu__close { backdrop-filter: blur(18px) saturate(1.5); -webkit-backdrop-filter: blur(18px) saturate(1.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); }
.stx-menu { backdrop-filter: blur(26px) saturate(1.3); -webkit-backdrop-filter: blur(26px) saturate(1.3); }
.stx-menu-btn:active, .stx-menu__close:active { transform: scale(.93); transition-duration: .07s; }

/* ════ THUMB-FRIENDLY: float the Menu trigger to the bottom on mobile ════ */
@media (max-width: 640px) {
  .stx-menu-btn {
    position: fixed; top: auto; left: auto; margin: 0; z-index: 1000;
    bottom: calc(16px + env(safe-area-inset-bottom)); right: 16px;
    width: auto; height: 50px; min-height: 50px; padding: 0 22px; gap: 9px;
    box-shadow: 0 14px 32px -10px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.14);
  }
  .stx-menu-btn .lbl { display: inline; }   /* room for the label down here */
  .stx-top { min-height: 96px; }            /* taller bar so backdrop covers the lowered logo */
  /* logo sits lower — breathing room from the top edge, closer to the page headline */
  .stx-word { top: calc(env(safe-area-inset-top) + 46px); transform: translateX(-50%); }
}

/* Skip-to-content link — visible only on keyboard focus */
.stx-skip{ position:fixed; top:-60px; left:12px; z-index:100000; background:#5B3CF0; color:#F9F5EE;
  font:600 14px/1 'Instrument Sans',system-ui,sans-serif; padding:12px 18px; border-radius:10px;
  text-decoration:none; transition:top .18s ease; box-shadow:0 10px 30px -10px rgba(0,0,0,.6); }
.stx-skip:focus{ top:12px; outline:2px solid #38BFF8; outline-offset:2px; }