/* AXVERSE MEDIA 5.0: top bar and footer (every public page). The homepage body is in v5-home.css.
   Colours: the v5 design reads --v-* ; the popups, modals and inner pages keep reading the 4.12 RGB triplets (--bg, --fg, --ac ...). */
:root { --v-page: #f7f3f4; --v-ink: #1c070d; --v-mut: #6c595f; --v-line: rgba(28, 7, 13, .12); --v-card: #fff; --v-ac: #aa1c40; --v-panel: #230810; --v-on-panel: #fff; --v-on-panel-mut: #dcb3bd;
  --v-pad: clamp(14px, 2.2vw, 32px); --v-r: clamp(22px, 2.6vw, 38px); --v-font: "Geist", system-ui, sans-serif; }
html[data-mode="dark"] { --v-page: #170509; --v-ink: #fff; --v-mut: #d9b4bd; --v-line: rgba(255, 226, 232, .16); --v-card: #260a13; --v-ac: #ff7890; --v-panel: #2d0c18; }
/* same colour sets as style.css 4.12, so the homepage (which no longer loads style.css) and the popups share them */
html[data-mode="dark"] { color-scheme: dark; --bg: 34 8 16; --bg2: 46 12 24; --bg3: 70 22 38; --fg: 255 255 255; --mut: 226 180 190; --dim: 168 122 134; --ac: 255 120 144; --acd: 214 50 86; --ach: 255 190 202; --onac: 44 6 16; --hg2: 255 224 230; --hg3: 230 160 176; --sh: 0 0 0; --sha: 1; }
html[data-mode="light"] { color-scheme: light; --bg: 255 255 255; --bg2: 248 246 247; --bg3: 255 255 255; --fg: 34 10 18; --mut: 104 84 90; --dim: 146 128 133; --ac: 170 28 64; --acd: 134 18 48; --ach: 150 22 56; --onac: 255 255 255; --hg2: 92 16 38; --hg3: 170 36 72; --sh: 34 10 18; --sha: 0.14; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100001; padding: 10px 16px; border-radius: 99px; background: var(--v-ink); color: var(--v-page); font: 600 .9375rem/1 var(--v-font); }
.skip-link:focus { top: 12px; }

/* ---------- top bar: stays while scrolling ---------- */
.v5-nav { position: sticky; top: 0; z-index: 900; display: flex; align-items: center; gap: 10px; padding: 14px var(--v-pad); font-family: var(--v-font); color: var(--v-ink);
  background: color-mix(in srgb, var(--v-page) 86%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); transition: background-color .4s, box-shadow .3s; }
.v5-nav.is-stuck { box-shadow: 0 1px 0 var(--v-line); }
.v5-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--v-ink); text-decoration: none; font: 600 1.0625rem/1 var(--v-font); letter-spacing: -.01em; }
.v5-brand img { width: 36px; height: 36px; padding: 6px; border-radius: 11px; object-fit: contain; display: block; background: #14060a; }
.v5-brand small { font-size: .6875rem; font-weight: 500; letter-spacing: .12em; color: var(--v-mut); }
.v5-links { display: flex; align-items: center; gap: 2px; margin-right: 6px; }
.v5-links li { list-style: none; display: contents; }
.v5-links a { padding: 12px 13px; border-radius: 99px; font: 500 .9375rem/1 var(--v-font); color: var(--v-ink); text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.v5-links a:hover, .v5-links .current-menu-item > a { background: color-mix(in srgb, var(--v-ink) 8%, transparent); }
.v5-nav .mode-btn { flex: none; width: 46px; height: 46px; margin: 0; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--v-ink) 8%, transparent); color: var(--v-ink); display: grid; place-items: center; font-size: 1.15rem; cursor: pointer; transition: background-color .2s; }
.v5-nav .mode-btn:hover { background: color-mix(in srgb, var(--v-ink) 14%, transparent); transform: none; }
.v5-nav .mode-btn .ph-sun { display: none; }
html[data-mode="dark"] .v5-nav .mode-btn .ph-sun { display: block; }
html[data-mode="dark"] .v5-nav .mode-btn .ph-moon { display: none; }
.v5-pill { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 20px; border-radius: 99px; border: 0; cursor: pointer; white-space: nowrap; font: 500 .9375rem/1 var(--v-font); transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .3s; }
.v5-pill:active { transform: scale(.96); }
.v5-pill i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; transition: transform .35s; }
.v5-pill:hover i { transform: scale(1.8); }
.v5-pill-dark { background: var(--v-ink); color: var(--v-page); }
.v5-toggle { display: none; flex: none; width: 46px; height: 46px; border-radius: 50%; border: 0; background: color-mix(in srgb, var(--v-ink) 8%, transparent); color: var(--v-ink); font-size: 1.3rem; cursor: pointer; place-items: center; }
.v5-nav :focus-visible, .v5-foot :focus-visible { outline: 3px solid var(--v-ac); outline-offset: 3px; }
@media (max-width: 1040px) {
  .v5-toggle { display: grid; }
  .v5-links { display: none; position: absolute; left: var(--v-pad); right: var(--v-pad); top: calc(100% + 4px); flex-direction: column; align-items: stretch; gap: 2px; margin: 0; padding: 10px; border-radius: 24px;
    background: var(--v-card); box-shadow: 0 30px 60px -24px rgba(110, 18, 42, .45), 0 0 0 1px var(--v-line); }
  .v5-nav.is-open .v5-links { display: flex; }
  .v5-links a { padding: 15px 16px; font-size: 1.0625rem; }
}
@media (max-width: 520px) { .v5-nav { gap: 6px; } .v5-nav .v5-pill { padding: 0 14px; } .v5-nav .v5-pill i { display: none; } .v5-brand small { display: none; } }

/* ---------- footer ---------- */
.v5-foot { margin: 0 var(--v-pad) var(--v-pad); padding: clamp(20px, 3vw, 40px); border-radius: var(--v-r); background: var(--v-card); color: var(--v-ink); font-family: var(--v-font); transition: background-color .4s; }
.v5-foot-top { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; padding-bottom: 22px; border-bottom: 1px solid var(--v-line); }
.v5-foot .v5-brand { margin-right: auto; }
.v5-foot-nav { display: flex; flex-wrap: wrap; gap: 4px 2px; }
.v5-foot-nav li { list-style: none; display: contents; }
.v5-foot-nav a { padding: 10px 12px; border-radius: 99px; color: var(--v-ink); text-decoration: none; font: 500 .9375rem/1 var(--v-font); }
.v5-foot-nav a:hover { background: color-mix(in srgb, var(--v-ink) 8%, transparent); }
.v5-socials { display: flex; gap: 8px; }
.v5-socials a { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-size: 1.2rem; color: var(--v-ink); text-decoration: none; background: color-mix(in srgb, var(--v-ink) 8%, transparent); transition: background-color .2s, color .2s; }
.v5-socials a:hover { background: var(--v-ac); color: #fff; }
.v5-foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px; padding-top: 20px; color: var(--v-mut); font-size: .875rem; }
.v5-foot-bottom p { margin: 0; }
.v5-foot-legal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.v5-foot-legal a { color: var(--v-mut); text-decoration: underline; text-underline-offset: 3px; }
.v5-foot-legal a:hover { color: var(--v-ink); }