/* =====================================================================
   kvasi.app · shell (nav + footer) for EVERY page incl. home (2026-10-20)
   Replaces the legacy override stack (tokens2/3/4, pg-*.css) on all
   pages except the home page. No :not() chains, no !important wars:
   page components style themselves with scoped <style> blocks on top.
   ===================================================================== */

@font-face{font-family:InterKV;src:url(/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:InterKV;src:url(/fonts/inter-var-i.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:Inter;src:url(/fonts/inter-var.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:InstrumentSerifKV;src:url(/fonts/instrument-serif-i.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:InstrumentSerifKV;src:url(/fonts/instrument-serif.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif-i.woff2) format("woff2");font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:"Instrument Serif";src:url(/fonts/instrument-serif.woff2) format("woff2");font-style:normal;font-weight:400;font-display:swap}

:root{
  --ink:#131a26; --ink-2:rgba(19,26,38,.72); --ink-3:rgba(19,26,38,.56);
  --gold:#b8913f; --gold-hi:#c9a24d; --gold-deep:#8a6a2a; --gold-pale:#e9c983;
  --ivory:#f6efe2; --pale:#faf7f0; --paper:#efe9dc; --night:#0b0f18;
  --line:rgba(19,26,38,.12); --line-2:rgba(19,26,38,.07);
  --bg:var(--pale); --fg:var(--ink); --fg-2:var(--ink-2); --fg-3:var(--ink-3); --acc:var(--gold-deep);
  --sans:InterKV,Inter,system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --serif:InstrumentSerifKV,"Instrument Serif",Georgia,serif;
  --wrap:1180px; --read:680px; --gut:clamp(18px,4vw,48px);
  --sec:clamp(72px,9vw,128px);
  color-scheme:light;
}
html[data-theme="dark"]{
  --bg:var(--night); --fg:var(--ivory); --fg-2:rgba(246,239,226,.76); --fg-3:rgba(246,239,226,.58);
  --acc:var(--gold-pale); --line:rgba(246,239,226,.16); --line-2:rgba(246,239,226,.08);
  color-scheme:dark;
}

/* =====================================================================
   NAV · GP1 hugging milky pill (picked 2026-10-21)
   Centred milky-ivory glass capsule sized to its content. Phone: wordmark,
   flag, short CTA, burger → drawer. Flag menu + sky slider are their own
   components (LangFlag.astro, ThemeSlider.astro).
   ===================================================================== */
header.nav{position:fixed;top:22px;left:0;right:0;z-index:100;pointer-events:none}
header.nav .nav__in{pointer-events:auto;box-sizing:border-box;width:max-content;max-width:calc(100% - 32px);height:58px;margin:0 auto;padding:0 8px 0 26px;border-radius:999px;
  display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);white-space:nowrap;color:var(--ink);
  background:rgba(250,247,240,.8);-webkit-backdrop-filter:blur(24px) saturate(1.3);-webkit-backdrop-filter:blur(24px) saturate(1.3);backdrop-filter:blur(24px) saturate(1.3);
  border:1px solid rgba(19,26,38,.08);box-shadow:0 14px 36px -18px rgba(11,15,24,.4)}
html[data-theme="dark"] header.nav .nav__in{color:var(--ivory);background:rgba(26,32,48,.66);border-color:rgba(243,238,226,.12);box-shadow:0 14px 36px -18px rgba(0,0,0,.6)}
header.nav .nav__logo{flex:none;display:inline-flex;color:inherit;text-decoration:none}
header.nav .nav__logo svg{display:block;height:22px;width:auto}
header.nav .nav__links{display:flex;align-items:center;gap:clamp(16px,1.8vw,26px)}
header.nav .nav__links a{position:relative;padding:8px 0;font:500 14px/1 var(--sans);letter-spacing:-.01em;color:inherit;opacity:.78;text-decoration:none;transition:opacity .2s}
header.nav .nav__links a:hover,header.nav .nav__links a[aria-current="page"]{opacity:1}
header.nav .nav__links a[aria-current="page"]{font-weight:600}
header.nav .nav__links a::after{content:"";position:absolute;left:50%;bottom:-3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold-hi);opacity:0;transition:opacity .25s}
header.nav .nav__links a[aria-current="page"]::after{opacity:1}
header.nav .nav__tools{flex:none;display:flex;align-items:center;gap:6px}
header.nav .nav__search{display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer;transition:background .2s}
header.nav .nav__search:hover{background:rgba(19,26,38,.06)}
html[data-theme="dark"] header.nav .nav__search:hover{background:rgba(255,255,255,.08)}
header.nav .nav__search svg{width:20px;height:20px}
header.nav .nav__sky{display:inline-flex;margin:0 4px}
header.nav a.nav__cta{flex:none;display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:var(--ink);color:var(--pale);font:600 14.5px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:transform .25s,box-shadow .25s}
header.nav a.nav__cta:hover{transform:translateY(-1px);box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
html[data-theme="dark"] header.nav a.nav__cta{background:#f3eee2;color:var(--ink)}
header.nav .nav__cta-short{display:none}
header.nav .nav__burger{display:none}
header.nav .nav__drawer[hidden]{display:none}
@media (max-width:1080px) and (min-width:921px){
  header.nav .nav__in{padding-left:20px;gap:14px}
  header.nav .nav__links{gap:14px}
  header.nav .nav__links a{font-size:13.5px}
}
@media (max-width:920px){
  header.nav{top:12px}
  header.nav .nav__in{width:auto;margin:0 12px;max-width:none;height:56px;padding:0 6px 0 20px;gap:4px}
  header.nav .nav__logo{margin-right:auto}
  header.nav .nav__logo svg{height:21px}
  header.nav :is(.nav__links,.nav__search,.nav__sky){display:none}
  header.nav .nav__tools .lf__code,header.nav .nav__tools .lf__cv{display:none}
  header.nav .nav__tools .lf__btn{width:40px;padding:0;justify-content:center}
  header.nav .nav__tools .lf__menu{position:fixed;top:76px;left:16px;right:16px;width:auto}
  header.nav a.nav__cta{height:40px;padding:0 14px;font-size:13.5px}
  header.nav .nav__cta-full{display:none}
  header.nav .nav__cta-short{display:inline}
  header.nav .nav__burger{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
  header.nav .nav__burger span{display:block;width:18px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .25s}
  header.nav.is-drawer .nav__burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
  header.nav.is-drawer .nav__burger span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
  header.nav .nav__drawer{pointer-events:auto;position:fixed;top:76px;left:12px;right:12px;max-height:calc(100dvh - 88px);overflow-y:auto;overscroll-behavior:contain;box-sizing:border-box;
    display:flex;flex-direction:column;padding:6px 20px 18px;border-radius:26px;color:var(--ink);font-family:var(--sans);
    background:rgba(250,247,240,.97);-webkit-backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);border:1px solid rgba(19,26,38,.08);box-shadow:0 30px 60px -26px rgba(11,15,24,.45)}
  html[data-theme="dark"] header.nav .nav__drawer{color:var(--ivory);background:rgba(21,27,40,.97);border-color:rgba(243,238,226,.12)}
  header.nav .nav__dl a{display:flex;align-items:center;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font:650 24px/1.15 var(--sans);letter-spacing:-.025em;color:inherit;text-decoration:none}
  header.nav .nav__dl a[aria-current="page"]{color:var(--acc)}
  header.nav .nav__arr{display:grid;opacity:.5}
  header.nav .nav__arr svg,header.nav .nav__ri svg{width:18px;height:18px}
  header.nav .nav__drawer .lf-row{padding:14px 0;border-bottom:1px solid var(--line)}
  header.nav .nav__row{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 0;border:0;border-bottom:1px solid var(--line);background:none;color:inherit;font:550 15px/1.2 var(--sans);text-align:left;cursor:pointer}
  header.nav .nav__ri{display:grid}
  header.nav a.nav__dcta{display:flex;align-items:center;justify-content:center;height:52px;margin-top:16px;border-radius:999px;background:var(--ink);color:var(--pale);font:600 16px/1 var(--sans);text-decoration:none}
  html[data-theme="dark"] header.nav a.nav__dcta{background:#f3eee2;color:var(--ink)}
}
@media (max-width:360px){
  header.nav .nav__in{padding-left:14px}
  header.nav a.nav__cta{padding:0 11px}
}
/* section anchors (footer sitemap) land below the fixed pill */
main [id]{scroll-margin-top:96px}

.skip-link{position:absolute;left:-9999px;top:8px;z-index:200;padding:10px 16px;border-radius:99px;background:var(--ink);color:var(--pale);font:600 14px/1 var(--sans);text-decoration:none}
.skip-link:focus{left:16px}
/* 3D tree realm labels: sentence case */
.t3lbl__sub,.t3lbl__sub *{text-transform:none!important;letter-spacing:0!important}

/* thank-you page is a focused moment: no nav */
body:has(main[data-pg="join-welcome"]) header.nav{display:none!important}
html[lang="zh"] :is(h1,h2,h3) em{font-style:normal!important;font-family:var(--sans)!important;font-weight:800!important}
body:has(main[data-pg="join-welcome"]) footer{display:none!important}
body:has(main[data-pg="invite"]) header.nav{display:none!important}
body:has(main[data-pg="invite"]) footer{display:none!important}